DesignMD & DESIGN.md 设计系统提取

DesignMD 是一款由 Crowdlinker 开发的 AI 驱动设计系统提取工具，用户输入任意网站 URL 或描述项目需求，即可自动生成符合 Google Stitch DESIGN.md 规范的完整设计系统文档。DESIGN.md 是 Google Stitch 项目提出的一种纯 Markdown 格式的设计系统文档，AI 编码代理可以直接阅读并据此生成一致的 UI。配套的 awesome-design-md 是由 VoltAgent 维护的开源仓库，收录了 68 个全球顶级品牌的现成 DESIGN.md 文件，Star 数达 57.6k，MIT 协议开源。该工具免费使用，无需注册，打开即用。核心价值在于让 AI 编码工具（如 Cursor、Claude Code）能“看懂”设计意图并复刻 UI。

传统 UI 复刻中，设计意图传递容易失真，配色和字体无法精确表达，组件样式缺乏系统性，布局规则难以传递，多页面一致性无保障。传统设计交付链路存在断裂点：Figma 导出的设计规范是给人类看的，设计规范和代码之间存在翻译损耗，AI 编码工具没有设计上下文，只能猜测 UI 应该长什么样。

DesignMD 的核心提取管线为：URL 输入 → 网页抓取 → CSS 分析 → DOM 结构解析 → 设计 Token 提取 → AI 总结 → DESIGN.md 输出。CSS 分析层从目标网站的 CSS 中提取 CSS 变量、Tailwind/Utility 类的隐含设计值、@font-face 声明中的字体信息、@media query 中的断点定义。DOM 结构解析层从 HTML 结构中提取语义化的组件模式、布局结构、间距模式、排版层级。AI 总结层将原始提取数据交给 LLM 进行语义归一化、设计哲学推断、组件状态补全和反模式识别。用户也可以输入项目描述，由 LLM 直接生成完整 DESIGN.md。

• 输入 URL 或自然语言描述即可生成 DESIGN.md
• 输出符合 Google Stitch 定义的 9 大章节规范
• 免费使用，无需注册
• 配套 awesome-design-md 仓库，收录 68 个顶级品牌 DESIGN.md
• 每个品牌配套 preview.html 和 preview-dark.html 可视化预览
• Drop-in 模式，放入项目根目录即可生效
• 支持从 URL 提取和从描述生成两种模式

• AI 整理 · 本地测试，未经人工复核；依据历史报告节选，不代表当前产品状态。
• 自动提取可能遗漏部分 CSS 变量或交互状态，提取精度有限。动态设计（动画、手势、过渡效果）无法用静态 Markdown 描述。无法提取 Figma 私有项目，只能分析公开网站。每个品牌只有一套设计系统，不支持主题切换。DESIGN.md 是静态文件，不支持设计版本的 diff 和回滚。只包含设计规范，不包含可复用的组件代码。不适合需要精确到像素的设计还原、动态主题切换、复杂动画和微交互设计、企业级设计系统需要 CI/CD 集成和自动 Token 生成的场景。