design-md-chrome上手完全指南5分钟安装并生成你的第一个DESIGN.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-chromedesign-md-chrome 是一款 Chrome 浏览器插件能够自动提取任意网页的字体、颜色、间距、圆角、阴影和动效等样式信息一键生成符合 TypeUI 规范的DESIGN.md或SKILL.md设计系统文档直接交给 Google Stitch、Claude Code、Codex、Cursor 等 AI 工具来还原同款设计风格的网站。无需手写任何 CSS 规则5 分钟即可完成安装并产出你的第一份设计蓝图文档。design-md-chrome 是什么简单说它是一个网页样式提取器 设计系统文档生成器读取当前标签页的已计算样式typography、colors、spacing、radius、shadows、motion自动聚合页面中最多 280 个元素的视觉信号生成 Markdown 文档DESIGN.md或SKILL.md基于开源的 TypeUI DESIGN.md 格式供 AI 消费让 AI 按同一套设计蓝图构建新网站插件支持的核心操作如下操作说明自动提取读取当前标签页的字体、颜色、间距、圆角、阴影、动效生成 DESIGN.md输出设计系统文档的 Markdown生成 SKILL.md输出可直接被 AI Agent 使用的技能文档刷新按页面当前状态重新提取下载将结果保存为 DESIGN.md 或 SKILL.md说明?展示文件的生成原理与 TypeUI 参考最快安装方法开发者模式加载插件整个过程只需 4 步全程不到 1 分钟第 1 步获取项目代码git clone https://gitcode.com/gh_mirrors/de/design-md-chrome.git第 2 步打开扩展管理页在 Chrome 地址栏输入chrome://extensions并回车。第 3 步开启开发者模式点击右上角的Developer mode开发者模式开关。第 4 步加载解压缩扩展点击Load unpacked加载解压缩的扩展选中上一步 clone 下来的design-md-chrome项目文件夹即可。 插件采用 MV3 架构配置见 manifest.json图标资源位于assets/icons/目录。安装成功后浏览器工具栏会出现扩展图标。生成你的第一个 DESIGN.md三步搞定打开任意你想参考的网站点击工具栏的插件图标弹出面板会立即自动提取当前标签页的样式入口逻辑见 popup/popup.js。选择输出模式面板顶部可在DESIGN.md设计系统文档与SKILL.mdAI 技能文档之间切换。预览并保存中间区域实时展示生成的 Markdown点击右下角按钮即可复制到剪贴板或下载到本地下载走chrome.downloads文件名自动命名为DESIGN.md或SKILL.md。如果页面有变化比如切换了主题、调整了布局点击刷新按钮即可重新提取当前状态。⚠️ 注意chrome://开头的内部页面如chrome://extensions无法提取样式这是浏览器的安全限制详见 service-worker.js。SKILL.md 模式一键安装到 AI 工具除了下载文件插件还内置了Quick install快速安装功能可将生成的 SKILL.md 直接写入你本地 AI 工具的技能目录AI 工具安装目录Claude Code.claude/skills/design-systemCodex.agents/skills/design-systemCursor.cursor/skills/design-system点击对应按钮后选择你的项目文件夹技能文档即刻就位后续让 AI 写 UI 时就会自动遵循这套设计规则。相关实现位于 popup/popup.js。生成的 DESIGN.md 长什么样生成的文档结构固定、可直接投喂给 AI主要包含以下章节章节作用Mission定义该设计系统的目标Brand记录品牌背景、来源 URL、目标受众Style Foundations列出发色板、字体比例、间距、圆角/阴影/动效等视觉 TokenAccessibility应用 WCAG 2.2 AA 无障碍要求Writing Tone设定面向实现的写作语气Rules: Do必须遵循的实现规范Rules: Dont反模式与禁止行为Guideline Authoring Workflow有序的指南编写步骤Required Output Structure强制一致的输出章节Component Rule Expectations组件交互与状态细节要求Quality Gates可测试的质量与一致性检查模板的完整渲染逻辑见 lib/generate-design-md.mjs技能文档模板见 lib/generate-skill-md.mjs。工作原理它是如何看懂网页的整个提取链路由三个部分协作完成注入提取脚本后台 Service Worker 向活动标签页注入 content-script.js对页面元素采样并读取getComputedStyle采集字体、颜色、间距、圆角、阴影、过渡动画等 6 类视觉信号采样上限 280 个元素保证性能。归一化处理原始数据经 lib/normalize.mjs 清洗聚合去重后生成字体比例、色板、间距比例等 Token 组。生成与校验按模式生成 Markdown并由 lib/validate.mjs 校验输出完整性最后返回给面板预览。调度流程的完整实现见 service-worker.js。常见问题 FAQQ提取结果为空或内容不对怎么办A点击面板中的刷新按钮重新提取避免在chrome://内部页面操作。Q如何验证生成结果的正确性A项目自带单元测试在项目根目录执行node tests/run-tests.mjs测试覆盖了归一化、生成与校验全流程见 tests/run-tests.mjs。Q支持哪些浏览器A当前基于 Chrome 扩展 V3 规范开发见 manifest.json建议 Chrome 及同源内核浏览器使用。Q许可证是什么A项目基于 MIT 协议开源见 LICENSE可自由用于学习和商业场景。写在最后从打开一个网站到拿到一份 AI 可读的设计系统文档design-md-chrome 把逆向设计系统这件事压缩到了点击两次按钮的距离。装上它你的下一个 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），仅供参考