深度解析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个固定章节。我们先看一张总览表#章节名一句话职责1Mission定义设计系统的总体目标2Brand记录品牌背景URL、受众、产品形态3Style Foundations列出字体、颜色、间距等视觉令牌4Accessibility锁定 WCAG 2.2 AA 无障碍基线5Writing Tone设定后续输出的语气与风格6Rules: Do列出必须遵守的实现规则7Rules: Dont列出禁止的反模式8Guideline Authoring Workflow6步编写指南的标准流程9Required Output Structure强制统一的输出文档结构10Component Rule Expectations组件必须描述的交互与状态细节11Quality Gates可测试的质量校验关卡下面按定位 → 基础 → 规则 → 流程 → 质检五个维度逐一拆解。三、逐章拆解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-firstMain font style主字体家族、字号、字重、行高Typography scale字号阶梯命名为font.size.sm/md/lg…Color palette语义化色板color.text.primary、color.surface.muted、color.border.default、color.focus.ringSpacing scalespace.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: Dont —— 正反规则对照 Do必须用语义化令牌而非裸色值每个组件必须定义 default/hover/focus-visible/active/disabled/loading/error7种状态交互组件必须描述键盘、指针、触控行为Dont禁止低对比度文字、隐藏焦点环、一次性one-off的间距例外、模糊的按钮文案8. Guideline Authoring Workflow —— 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等而非#1a2b3cToken阶梯化把散乱的 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 克隆项目如使用 GitCode 镜像git clone https://gitcode.com/gh_mirrors/de/design-md-chrome打开 Chrome访问chrome://extensions开启开发者模式点击加载已解压的扩展程序选择克隆下来的项目文件夹打开任意目标网站点击工具栏中的扩展图标在弹窗中点击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/Dont 立规矩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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
