Automate UI Code Extraction into AI Design Skills: A Step‑by‑Step Tutorial
This tutorial walks through converting scattered UI code and design documents into structured, machine‑readable design tokens and AI‑callable skills, showing how to audit existing HTML/CSS, abstract design tokens, package them as an AI Skill, and maintain the system over time.
Introduction
Front‑end developers often rely on design tools such as BlueLake to recreate UI from mockups, but manual adjustments are still required. The article proposes a workflow that extracts reusable design knowledge from existing UI code and turns it into an AI‑readable "Design Skill" that can generate compliant UI automatically.
Core Concept
Design asset digitization treats static design documents (Sketch/Figma/Markdown) as a database of core elements (colors, fonts, spacing, interaction logic). Skill‑ification wraps these elements into a tool that an AI agent can invoke, turning dead documentation into live productivity.
Step 1 – Audit and Analyse Existing UI Code
The goal is to discover consistent design patterns hidden in seemingly chaotic HTML and CSS. A representative page is selected and its source is examined.
Sample HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<h1 class="card-title">这是一个标题</h1>
<p class="card-body">这是一段正文内容，用于展示基础样式。</p>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
</div>
</body>
</html>Sample CSS (styles.css)
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f0f2f5;}
.card {background-color: #ffffff; border: 1px solid #d9d9d9; border-radius: 8px; padding: 24px; margin: 32px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.card-title {font-size: 20px; font-weight: 600; color: #1a1a1a; margin-bottom: 16px;}
.card-body {font-size: 14px; color: #595959; line-height: 1.5;}
.btn {font-size: 14px; padding: 8px 16px; border-radius: 6px; border: 1px solid transparent; cursor: pointer;}
.btn-primary {background-color: #007bff; color: #ffffff;}
.btn-secondary {background-color: #6c757d; color: #ffffff;}From this audit the author records recurring "magic numbers" and hard‑coded values such as background colors, font sizes, border radii, and spacing.
Key Design Elements Identified
Colors : #f0f2f5 (page background), #ffffff (card), #d9d9d9 (border), #1a1a1a (title), #595959 (text), #007bff (primary button), #6c757d (secondary button), #ffffff (button text)
Typography : system font stack, 20px title, 14px body and button, font‑weight 600 for titles, line‑height 1.5 for body
Spacing : card padding 24px, margin 32px, title margin‑bottom 16px, button padding 8px 16px
Radius : 8px for cards, 6px for buttons
Shadow : 0 4px 8px rgba(0,0,0,0.1) for cards
Step 2 – Abstract to Design Tokens
The extracted values are transformed into a structured set of design tokens written in Markdown, because Markdown is a universal format for AI ingestion. An example token file footer-float-btn.md is created to describe a floating button component.
Component Description (footer-float-btn.md)
---
description: 这是一个底部悬浮按钮，按钮样式中没有悬浮页面底部的定位信息，按钮通常就是悬浮在页面底部。
---Similar markdown files are created for other components (e.g., half-pop.md, record-list.md, common-css.md) and placed under the pages-css/ directory.
Step 3 – Package as an Executable AI Skill
With design tokens ready, the author defines how the AI should consume them.
Asset Preparation
All markdown token files are stored in pages-css/. The AI is instructed to read every file, extract common patterns (colors, sizes, spacing ratios), and generate a unified skill named ui-design-system.
Extraction & Generation
"Please read all md files under the pages-css directory, analyse commonalities, extract a unified UI design system focusing on color variables, font sizes, spacing multiples, corner radii, and mobile‑adaptation rules (e.g., divide by 2). Generate a skill called ui-design-system ."
The AI performs three logical steps:
Traverse : Scan every component document.
Induce : Detect that primary-button and tag-selected both use rgba(10, 100, 254, 1) and abstract it as the Primary Color .
Summarise Rule : Notice comments like "30px → 15px" and establish a 2× image scaling rule .
Output : Produce SKILL.md containing the design tokens and best‑practice guidelines.
Refinement & Validation
The generated SKILL.md includes:
Design Tokens : constants for colors, fonts, spacing.
Best Practices : rules such as "width must use percentages" and "height left unspecified".
Images illustrate the resulting UI generated by the skill, confirming that the AI can produce a floating button that matches the original design within about 90% fidelity, requiring only minor tweaks.
Versioning and Maintenance
Design systems evolve, so skills must be updated.
Scenario A – Adding New Specs
When a new page (e.g., shopping-cart.md) is created, it is added to pages-css/. The Skill‑Writer is invoked to extract new style features and merge them into ui-design-system, or the developer can edit SKILL.md manually.
Scenario B – Changing Rules
If the primary brand color changes from blue to purple, the developer edits the core design token section in SKILL.md. The AI automatically uses the updated value on subsequent calls without retraining.
Conclusion
By following the three‑step pipeline Audit → Abstract → Package , implicit UI design rules are transformed into explicit, machine‑readable assets that an AI can invoke as a "Design Skill". This creates a closed loop: collect design artifacts, extract common patterns with AI (Skill‑Writer), generate a reusable ui-design-system, and empower future development with automated, consistent UI generation.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Frontend AI Walk
Looking for a one‑stop platform that deeply merges frontend development with AI? This community focuses on intelligent frontend tech, offering cutting‑edge insights, practical implementation experience, toolchain innovations, and rich content to help developers quickly break through in the AI‑driven frontend era.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.