实战design-md-chrome加Google Stitch10分钟让AI复刻任何网站的UI风格【免费下载链接】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 扩展打开任意网站一键提取它的字体、配色、间距、圆角、阴影与动效生成标准的DESIGN.md设计系统文件。把它喂给Google Stitch10 分钟就能让 AI 复刻出同款 UI 风格的网站原型。本文是一份面向新手的完整实战指南安装扩展 → 提取风格 → 让 AI 出稿。为什么需要 design-md-chrome把网站风格变成 AI 能读的文件让 AI做成 XX 网站那种感觉时你只能用文字形容结果往往感觉不对。问题在于网站风格藏在几百个 CSS 值里而不是形容词里。design-md-chrome 的思路是向当前标签页注入提取脚本采样页面上可见元素最多 280 个读取每个元素的计算样式字体、颜色、间距、圆角、阴影、动画时长归一化去重沉淀成可复用的设计令牌tokens按 TypeUI 的 DESIGN.md 规范组装成 Markdown并自动做合规校验。提取入口在 content-script.js整个提取 → 归一化 → 生成 → 校验的流水线由 service-worker.js 调度。你全程不需要写一行代码。一键安装步骤5 分钟装好 design-md-chrome第 1 步获取源码git clone https://gitcode.com/gh_mirrors/de/design-md-chrome第 2 步开启开发者模式打开 Chrome地址栏输入chrome://extensions打开右上角的Developer mode。第 3 步加载扩展点击Load unpacked选择刚 clone 下来的design-md-chrome文件夹。第 4 步固定到工具栏在扩展管理中把DESIGN.md Style Extractor固定到工具栏扩展信息见 manifest.json。✅ 完成后工具栏会出现扩展图标安装结束。三步生成 DESIGN.md自动提取、切换模式、下载文件第 1 步打开目标网站点击扩展打开你想参考的网站如某个 SaaS 官网点击扩展图标。弹窗会自动运行一次提取生成结果直接显示在预览框里无需手动点击。第 2 步选择输出模式模式适合场景DESIGN.md设计系统文档喂给 Google Stitch、Claude 等生成页面SKILL.md带 frontmatter 的 Agent 技能文件供 Claude Code / Codex / Cursor 长期复用第 3 步复制或下载预览框右下角提供复制和下载按钮页面刷新过风格后点刷新重新提取点?可查看这份文件是怎么生成的全流程解释。全部功能一览功能说明Auto-extract打开弹窗即读取当前标签页样式GenerateDESIGN.md生成设计系统文档GenerateSKILL.md生成 Agent 技能文件Refresh对当前页面状态重新提取Download保存为DESIGN.md/SKILL.mdExplain?展示生成过程与校验明细 它到底看了页面的哪些东西除样式令牌外还会采集导航文案、CTA 按钮文字、元数据、表单/表格/定价区等站点信号用来推断目标受众和产品形态让 AI 理解这是给谁看、什么类型的站点。DESIGN.md 里有什么11 个标准区块生成的文件不是简单罗列色值而是一份可直接交付给 AI 的设计系统蓝图结构模板见 DESIGN.md区块作用Mission定义设计系统目标Brand品牌、URL、受众、产品形态Style Foundations字体比例、色板、间距、圆角/阴影/动效令牌Accessibility强制 WCAG 2.2 AA、键盘交互、对比度约束Writing Tone输出语气规范Rules: Do / Dont必须做的事与禁止的反模式Workflow / Output Structure组件描述的固定流程与结构Component Rule Expectations交互状态要求hover、focus、loading 等Quality Gates可测试的质量检查项文件生成后会自动通过 lib/validate.mjs 校验11 个必需标题、7 种组件状态、可访问性目标是否齐全校验不过的问题会直接列在弹窗里。10 分钟实战用 Google Stitch 复刻网站 UI 风格现在进入正题完整流程如下① 提取风格约 1 分钟打开目标网站 → 点扩展 → 自动提取 → 点下载得到DESIGN.md。② 整理提示词约 2 分钟新建一个文档把DESIGN.md全文粘贴进去在末尾补一句你的业务需求例如请基于以上 DESIGN.md 的设计系统为我设计一个在线教育平台的落地页包含 Hero 区、课程卡片列表、价格表和页脚。③ 在 Google Stitch 中生成约 5 分钟打开 Google Stitch把上面的文档作为设计约束粘贴进提示词提交生成。Stitch 会依据其中的字体比例、色板、间距令牌来排版而不是自由发挥。④ 对比微调约 2 分钟风格偏差大回网站点刷新重新提取确认采样到的是最新页面状态只想要某几个组件在提示词里点名重点复刻按钮与卡片样式不满意可重复迭代DESIGN.md可长期留存复用。 小技巧提取前先把目标网站滚动到主要内容区域让导航、卡片、按钮等关键组件处于可见状态采样会更全面。进阶SKILL.md 一键安装到 AI 编程工具如果你用 Claude Code、Codex 或 Cursor 写代码弹窗底部还有一排Quick install按钮点击后选择项目目录即可自动写入对应技能目录工具安装位置Claude Code.claude/skills/design-system/SKILL.mdCodex.agents/skills/design-system/SKILL.mdCursor.cursor/skills/design-system/SKILL.md映射关系定义在 popup/popup.js。这样 AI 以后每次改 UI 都会自动遵循这套网站风格。常见问题 FAQQ1点击提取提示不可用chrome://等浏览器内部页面无法提取请切换到普通网页。Q2网站改版后令牌过期了怎么办点Refresh重新提取即可扩展会读取当前页面状态。Q3想验证扩展行为在仓库根目录运行node tests/run-tests.mjs测试入口见 tests/run-tests.mjs。Q4SKILL.md 和 DESIGN.md 到底选哪个给 Stitch / 网页 AI 用 →DESIGN.md给编码 Agent 长期约束用 →SKILL.md。核心文件索引文件说明manifest.json扩展配置权限、入口、版本service-worker.js提取流水线调度中心content-script.js页面样式与站点信号采样lib/normalize.mjs原始样式归一化为令牌lib/generate-design-md.mjs生成 DESIGN.mdlib/generate-skill-md.mjs生成 SKILL.mdlib/validate.mjs输出合规校验popup/popup.html弹窗界面总结design-md-chrome 把网站风格从玄学变成了结构化文件Google Stitch 负责把它变成可交互的页面。提取 1 分钟、生成 5 分钟、微调 2 分钟——10 分钟复刻任意网站 UI 风格现在就可以去试。【免费下载链接】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），仅供参考