把设计蓝图喂给AIdesign-md-chrome配合Claude Code、Codex、Cursor的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-chromedesign-md-chrome 是一款 Chrome 扩展能从任意网站一键提取字体、颜色、间距、圆角、阴影和动效自动生成符合 TypeUI 规范的 DESIGN.md 设计蓝图或 SKILL.md 技能文件再交给 Claude Code、Codex、Cursor 等 AI 编程工具让 AI 按你的设计系统写出风格一致的网页 。为什么需要 design-md-chrome用 AI 写前端页面时最大的痛点是每次生成的样式都不一样颜色东一个西一个间距随心所欲。design-md-chrome 的解法很直接——把设计系统文件化步骤做什么效果1️⃣ 提取扫描当前网页的计算样式得到字体、颜色、间距等原始信号2️⃣ 归一化去重、分组、命名成设计令牌得到可复用的 Design Tokens3️⃣ 生成组装成结构化 MarkdownAI 能读懂的设计蓝图4️⃣ 喂给 AI安装到 Claude Code / Codex / CursorAI 按蓝图稳定产出 UI整个流水线注入脚本 → 提取 → 归一化 → 生成 → 校验都封装在扩展里核心逻辑可以追溯到 service-worker.js、content-script.js 和 lib/ 目录下的几个模块。安装步骤三步加载 design-md-chrome先获取项目代码git clone https://gitcode.com/gh_mirrors/de/design-md-chrome然后在 Chrome 中加载打开chrome://extensions页面打开右上角的开发者模式Developer mode点击加载已解压的扩展程序Load unpacked选择 design-md-chrome 项目文件夹完成后浏览器工具栏会出现扩展图标。扩展采用 MV3 架构权限最小化仅 activeTab、scripting、storage、downloads详见 manifest.json。一键提取样式如何使用弹窗界面打开任意网站官网、管理后台、电商页都行点击扩展图标弹窗界面由 popup/popup.html 和 popup/popup.js 实现包含这几个核心操作操作说明DESIGN.md / SKILL.md 切换选择生成设计系统文档还是AI 技能文件Refresh 刷新重新提取当前页面最新状态Download 下载保存为 DESIGN.md 或 SKILL.mdQuick install 快捷安装一键写入 Claude Code / Codex / Cursor 的项目目录? 帮助展示本次生成背后的提取证据和校验结果点击后扩展会自动采样页面上最多 280 个可见元素读取getComputedStyle里的字体、颜色、内外边距、圆角、阴影、过渡动画等值采样逻辑在 content-script.js。之后 lib/normalize.mjs 会把原始值去重、排序、命名成语义化令牌例如字号 →font.size.sm / md / lg / xl ...颜色 →color.text.primary、color.surface.base、color.focus.ring间距 →space.1 / space.2 ...动效 →motion.duration.fast / normal / slow它还会自动推断网站画像通过分析页面关键词、导航文案、CTA、表单/表格/代码块等结构信号判断目标用户群体开发者、运营人员、消费者…和产品类型文档站、仪表盘、营销页、电商…并写入生成的文件中。生成的 DESIGN.md 长什么样生成器 lib/generate-design-md.mjs 输出的文件结构是固定的AI 工具可以直接消费章节作用Mission设计系统目标Brand品牌、URL、受众、产品类型Style Foundations字体、配色、间距、圆角/阴影/动效令牌AccessibilityWCAG 2.2 AA 要求、键盘优先、焦点可见Rules: Do / Dont必须遵守的规则和反模式清单Quality Gates可测试的质量门槛生成后还会经过 lib/validate.mjs 的合规校验检查 11 个必备章节是否齐全、是否包含默认/悬停/焦点等 7 种交互状态、可访问性目标是否写明。校验不通过会在弹窗里直接列出问题保证喂给 AI 的文件质量可控。仓库根目录的 DESIGN.md 本身就是一份标准的设计系统技能蓝图范例可作为理解输出格式的最好参考。快捷安装把蓝图放进 Claude Code、Codex、Cursor这是 design-md-chrome 最省事的一步 在弹窗底部Quick install区域三个按钮分别对应工具安装目标目录Claude Code.claude/skills/design-system/SKILL.mdCodex.agents/skills/design-system/SKILL.mdCursor.cursor/skills/design-system/SKILL.md点击按钮后浏览器会弹出目录选择框选中你的项目根目录即可扩展自动创建目录并写入 SKILL.md实现在 popup/popup.js 的QUICK_INSTALL_PROVIDERS。若浏览器不支持直接写目录扩展会自动降级为复制 下载并提示你把文件放到对应目录。完整 AI 编程工作流从网站到成品页面把前面的能力串起来就是一个完整的四步工作流第 1 步提取设计蓝图。打开参考网站 → 点击扩展 → 确认预览无误可用?查看提取证据和诊断信息。第 2 步安装技能文件。用 Quick install 把 SKILL.md 写入项目或手动下载 DESIGN.md 放到项目根目录。第 3 步让 AI 按蓝图开发。打开 Claude Code / Codex / Cursor直接下达任务参考项目里的 SKILL.md用 React 实现一个登录页要求遵循设计令牌定义的颜色、间距和圆角并覆盖 hover、focus-visible、loading 等所有状态。第 4 步验收对照。生成文件里的Quality Gates和Rules: Dont就是现成的验收清单AI 也会把 must / should 当成语义约束来执行。DESIGN.md 还是 SKILL.md简单记法SKILL.md带 frontmatter 和管理标记专为 Agent 技能目录设计配合 Quick install 最顺DESIGN.md是通用设计系统文档适合放进团队 Wiki 或作为 Google Stitch 等工具的输入。常见问题 FAQ提取失败或结果太少怎么办弹窗会给出诊断如采样元素少于 30 个、颜色多样性不足换元素更丰富的页面首页通常最佳重新点 Refresh 即可。chrome://开头的浏览器内部页面不支持提取。生成的令牌不准要改吗要。文件里明确标注了推断置信度低置信度项建议人工修正这正是提取 人工校验混合工作流的价值。本地能跑测试吗可以项目自带测试入口运行node tests/run-tests.mjs见 tests/run-tests.mjs。总结design-md-chrome 把网站视觉风格 → 可执行设计规则这条链路压缩到了一次点击的距离提取 → 归一化 → 生成 DESIGN.md / SKILL.md → 一键安装到 Claude Code、Codex、Cursor。配合 AI 编程工具风格不统一的顽疾就有了系统化的解法 ✅。想进一步阅读可以从 README.md 的文档说明入手。【免费下载链接】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），仅供参考