design-md-chrome
一键提取网站设计系统，生成AI可用的设计规范文档。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：design-md-chrome。 它的用途是：一键提取网站设计系统，生成AI可用的设计规范文档。 完整的 Skill 内容见：https://321skill.com/skills/design-md-chrome/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“请参考这个SKILL.md文件中的设计规范，为我创建一个登录页面的React组件。” AI会理解文件中定义的颜色、字体、间距等规则，生成风格一致的代码。或者，设计师在浏览优秀设计网站时，使用此扩展一键提取其设计体系，作为自己项目的灵感库和规范参考。
介绍
这是一个Chrome浏览器扩展，它解决了设计师和前端开发者需要手动分析、整理网站设计规范的痛点。它能够自动扫描任意网页，提取其中的字体、颜色、间距、圆角、阴影、动效等视觉样式，并一键生成结构化的DESIGN.md或SKILL.md文件。
使用方式非常简单：安装扩展后，在任意网页点击扩展图标，选择“自动提取”功能，它便会分析当前页面的样式。随后，你可以选择生成设计系统文档（DESIGN.md）或面向AI智能体的技能文件（SKILL.md），并直接下载使用。
这个工具非常适合UI/UX设计师、前端开发者和AI应用开发者。设计师可以快速“借鉴”优秀网站的设计体系，开发者可以将其作为项目设计规范的起点，而AI应用开发者则能利用生成的SKILL.md文件，让Claude、Codex等AI工具理解并遵循特定的设计语言来生成代码。
与同类网页样式提取工具（如ColorZilla、CSS Peeper）相比，它的核心区别在于输出结果。它不仅仅是展示提取的色值或字体，而是将这些零散的样式信息，按照TypeUI DESIGN.md这一开源格式，系统地组织成一份完整、可直接用于指导开发或AI协作的设计系统蓝图文档，实现了从“提取”到“应用”的无缝衔接。
核心特点
核心区别在于其输出是结构化的、AI可读的设计系统蓝图（DESIGN.md/SKILL.md），而非零散的样式代码或截图。它基于开源TypeUI格式，将提取的视觉元素转化为包含设计使命、品牌、规则、可访问性要求等完整维度的规范文档，可直接用于AI驱动的代码生成工具。
注意事项
它主要提取视觉样式，对于复杂的交互逻辑、业务组件或非标准CSS实现的设计元素，可能无法完整捕获其设计意图。
常见问题
生成的DESIGN.md文件有什么用？
可用于记录项目设计规范，或直接导入Google Stitch、Claude Code等AI工具，让AI基于此设计系统生成代码。
支持哪些浏览器？
目前是Chrome扩展，理论上支持所有基于Chromium内核的浏览器（如Edge、Brave）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/design-md-chrome/raw/index.md 读取 design-md-chrome 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/design-md-chrome/raw/index.md（查看排版版本）