企业官网建设流程全解析

深度解析TypeUI DESIGN.md规范：design-md-chrome如何生成11大核心章节

【免费下载链接】design-md-chromeChrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI项目地址: https://gitcode.com/gh_mirrors/de/design-md-chrome

你是否想过：如何把任意网站的设计"基因"一键提炼成AI能读懂的设计规范？开源Chrome扩展design-md-chrome就能做到——它基于 TypeUI DESIGN.md 开放规范，从任意网页自动提取字体、颜色、间距、圆角、阴影和动效信号，一键生成DESIGN.md或SKILL.md文件，供 Claude Code、Codex、Cursor、Google Stitch 等AI工具直接用来构建风格一致的网站。🎨

这篇文章带你完整拆解 TypeUI DESIGN.md 规范，看懂 design-md-chrome 是如何生成11大核心章节的，即使是新手也能快速上手使用。

一、先认识 TypeUI DESIGN.md：给AI看的"设计蓝图"

传统设计文档是写给人看的，而 TypeUI DESIGN.md 是一份写给AI Agent看的"设计系统蓝图"。它的核心思想是：

用结构化的 Markdown 章节，把一个网站的设计语言（品牌、色板、字体、间距、无障碍要求）固化成可执行的规则，AI 拿到后就能"照着蓝图"写出风格统一的界面代码。

这份蓝图的结构模板就存放在仓库根目录的 DESIGN.md 中，它是所有生成文件的"权威规范源"（source-of-truth）。

TypeUI DESIGN.md 规范有三个显著特点：

• 🧩Token化：不写"用蓝色"，而是写color.surface.base=#ffffff这样的语义化设计令牌（design token）
• 📏可测试：每条规则都要求可在实现层面验证（如"所有组件必须定义7种状态"）
• 🤖AI就绪：章节顺序按"实现优先"排列——基础 → 组件 → 无障碍 → 质量检查

二、11大核心章节全景图

design-md-chrome 生成的DESIGN.md严格遵循 TypeUI 规范，包含以下11个固定章节。我们先看一张总览表：

下面按"定位 → 基础 → 规则 → 流程 → 质检"五个维度逐一拆解。🔍

三、逐章拆解：11个章节分别在做什么

1. Mission（使命）—— 给设计系统定一个"北极星"

开篇一段话，说明这份设计系统要解决什么问题、服务于什么产品体验。design-md-chrome 会根据提取到的品牌名和产品形态自动生成类似这样的描述：

"Create implementation-ready, token-driven UI guidance for XX that is optimized for consistency, accessibility, and fast delivery across web app."

2. Brand（品牌）—— 记录"这是谁的网站"

自动抓取四个关键上下文：

• Product/brand：品牌名（默认取网页标题，去掉" | 后缀"部分）
• URL：提取来源地址
• Audience：目标受众（由页面内容智能推断，如"开发者"、"电商消费者"）
• Product surface：产品形态（营销站 / 仪表盘 / 文档站 / 电商 / 内容站）

3. Style Foundations（风格基础）—— 整份文件的"数据心脏" ❤️

这是唯一完全由页面实时提取数据填充的章节，包含6组令牌：

• Visual style：视觉风格推断（如"structured, tokenized, content-first"）
• Main font style：主字体家族、字号、字重、行高
• Typography scale：字号阶梯，命名为font.size.sm/md/lg…
• Color palette：语义化色板（color.text.primary、color.surface.muted、color.border.default、color.focus.ring）
• Spacing scale：space.1~space.n间距阶梯
• Radius/shadow/motion tokens：圆角、阴影、动画时长令牌

4. Accessibility（无障碍）—— 硬性基线

固定写入 WCAG 2.2 AA 目标，并要求：键盘优先交互、focus-visible 规则、对比度约束。这部分不随页面变化，属于规范的"宪法条款"。

5. Writing Tone（写作语气）

一行约定："concise, confident, implementation-focused"（简洁、自信、面向实现）。它约束的是AI后续生成文档时的语气，确保输出专业不啰嗦。

6 & 7. Rules: Do / Rules: Don't —— 正反规则对照 📋

• Do：必须用语义化令牌而非裸色值；每个组件必须定义 default/hover/focus-visible/active/disabled/loading/error7种状态；交互组件必须描述键盘、指针、触控行为
• Don't：禁止低对比度文字、隐藏焦点环、一次性（one-off）的间距例外、模糊的按钮文案

8. Guideline Authoring Workflow —— 6步标准编写流程

1. 用一句话重述设计意图
2. 定义基础与设计令牌
3. 定义组件解剖、变体、交互和状态
4. 加入可通过/不通过判定的无障碍验收标准
5. 补充反模式、迁移说明和边界情况
6. 以 QA 检查清单收尾

9. Required Output Structure —— 输出结构契约

强制AI生成的最终文档必须包含7块内容：上下文与目标 → 令牌基础 → 组件级规则 → 无障碍验收标准 → 内容与语气标准 → 反模式 → QA清单。这保证了不同AI、不同会话生成的文档结构永远一致。

10. Component Rule Expectations —— 组件规则的具体要求

要求每个组件说明：键盘/指针/触控行为、间距与字体令牌要求、长内容溢出与空态处理。design-md-chrome 还会在此追加页面真实组件密度（如"button (12), card (5)"），让规则与页面实际匹配。

11. Quality Gates —— 质量门禁 🚪

最后4条"质检规则"，其中最巧妙的是措辞分级制度：

• 不可协商的规则必须用"must"
• 建议性规则用"should"
• 每条无障碍规则必须可测试
• 系统一致性优先于局部视觉例外

四、背后原理：从网页到11章节的三步流水线

design-md-chrome 的生成过程是一条清晰的"采集 → 提炼 → 渲染"流水线，全部逻辑都在 lib/ 目录下：

网页样式 ──► ① 采集 ──► ② 归一化提炼 ──► ③ 章节渲染 content-script.js lib/normalize.mjs lib/generate-design-md.mjs

① 采集层：content-script.js 注入目标页面，采样最多 280 个可见元素，读取每个元素的getComputedStyle，收集字体、颜色、间距、圆角、阴影、动效等原始数据。

② 提炼层：lib/normalize.mjs 是"智能引擎"，它完成三件关键事：

• 频率统计 + 语义命名：把出现最多的颜色按用途命名为color.text.primary、color.surface.muted等，而非#1a2b3c
• Token阶梯化：把散乱的 px 值排序映射为font.size.xs/sm/md/lg…、space.1/2/3…阶梯
• 页面画像推断：根据页面关键词（如"pricing"、"book demo"、"checkout"）和结构信号（表单数、表格数、代码块数）给页面打分，推断出受众与产品形态——这正是Brand章节的"智能"来源

③ 渲染层：lib/generate-design-md.mjs 把提炼好的数据填入 11 章节模板。生成SKILL.md则由 lib/generate-skill-md.mjs 负责，两者共享同一套提炼结果，差别仅在文件头（SKILL.md 带 YAML frontmatter，可被 Agent 直接识别为技能）。

五、新手上手：5步生成你的第一份 DESIGN.md 🚀

1. 克隆项目（如使用 GitCode 镜像）：git clone https://gitcode.com/gh_mirrors/de/design-md-chrome
2. 打开 Chrome，访问chrome://extensions，开启开发者模式
3. 点击加载已解压的扩展程序，选择克隆下来的项目文件夹
4. 打开任意目标网站，点击工具栏中的扩展图标
5. 在弹窗中点击Refresh重新提取 →Download保存DESIGN.md（或切换到 Skill 模式生成SKILL.md）

生成的文件可以直接丢进 Claude Code、Codex 或 Cursor，对AI说："按照这份 DESIGN.md 的设计系统，帮我实现一个登录页"，AI 就会严格遵循这 11 个章节的规则来写代码。

📎 项目关键文件导航：

• 扩展清单：manifest.json
• 弹窗交互逻辑：popup/popup.js
• 后台任务调度：service-worker.js
• 本地自测脚本：tests/run-tests.mjs
• 使用说明：README.md

六、总结

• TypeUI DESIGN.md本质是一份"AI可读的设计系统蓝图"，核心是 Token化 + 可测试规则 + 固定章节契约
• 11大章节构成完整闭环：Mission/Brand 定方向，Style Foundations 供数据，Accessibility/Do/Don't 立规矩，Workflow/Output Structure/Component Expectations 定流程，Quality Gates 保质量
• design-md-chrome让"提取设计基因"从手工逆向变成一键操作：采样 → 语义化提炼 → 模板渲染，三步产出AI可直接消费的设计规范

无论你是前端、设计师还是用AI建站的产品人，这份"设计基因提取器"都能帮你把网站美学沉淀为可复用的资产。✨

【免费下载链接】design-md-chromeChrome extension to extract styles from any website and generate DESIGN.md files and design skills for AI based on TypeUI项目地址: https://gitcode.com/gh_mirrors/de/design-md-chrome