核心用法
make-design-md 是一款面向设计师和前端开发者的设计风格分析工具，支持三种输入源：网站 URL、本地 HTML 文件或页面截图。系统通过 WebFetch 抓取或文件读取获取内容后，智能提取颜色系统（colors）、字体排版（typography）、间距刻度（spacing）、圆角规范（rounded）及组件样式（components）等设计令牌，最终生成符合 Google design.md 官方规范的结构化文档。
用户可通过自然语言指令触发，如"分析设计风格"、"提取设计规范"、"从 XX 网站提取风格"等。输出包含 DESIGN.md 主文档及 preview.html/preview-dark.html 双模式预览文件，支持使用 Google 官方 CLI 工具进行格式验证、版本对比，并可一键导出为 Tailwind v3/v4 主题配置或 W3C DTCG 标准格式。
显著优点
标准化与权威性：严格遵循 Google 开源的 design.md 规范，生成的文档具备机器可读的 YAML Front Matter 和人类可读的 Markdown 说明双重结构，可直接通过官方 CLI 验证，确保输出质量与生态兼容性。
全链路设计令牌提取：覆盖颜色、字体、间距、圆角、组件五大维度，支持从 CSS 变量、Tailwind 类名、内联样式及视觉截图等多渠道智能推断，适配现代前端技术栈。
工程化集成能力：原生支持导出为 Tailwind v4 CSS @theme 块、v3 JSON 配置及 DTCG 国际标准格式，配合 lint/diff/spec 等 CLI 命令，可无缝嵌入 CI/CD 流程实现设计系统的版本管理与自动化校验。
国内网络优化：内置 Google Fonts 镜像替换规则，自动将 fonts.googleapis.com 指向 fonts.loli.net，解决国内访问痛点，确保预览文件加载稳定性。
潜在缺点与局限性
输入质量依赖性强：从截图提取设计令牌属于视觉推断，颜色精度、字体识别、间距测量均存在误差风险；复杂渐变、动态主题、CSS 变量计算值等场景可能无法准确还原。
CLI 工具外部依赖：验证与导出功能依赖 @google/design.md npm 包，Windows PowerShell 存在命名冲突需使用别名，企业私有 npm 镜像若未同步会导致 ENOVERSIONS 安装失败，增加环境配置成本。
规范覆盖边界：部分 CSS 属性（如 backdrop-filter、复杂动画）超出规范属性清单，虽可被接受但会触发 lint 警告；深色模式、响应式断点等现代设计系统常见能力在规范中支持有限。
自动化程度待提升：当前需用户手动触发分析流程，暂不支持批量站点监控或持续同步，设计令牌变更的增量更新机制尚不完善。
适合的目标群体
- UI/UX 设计师：快速拆解竞品设计系统，建立可复用的设计规范文档
- 前端工程师：从现有站点提取 Tailwind 主题配置，加速新项目启动
- 设计系统维护者：标准化设计令牌管理，实现设计与开发资产的单向同步
- 产品经理与创业者：低成本获取专业级设计规范，指导外包团队或低代码搭建
使用风险
性能风险：抓取大型单页应用（SPA）时，WebFetch 可能因 JavaScript 渲染延迟导致内容获取不完整；建议结合静态 HTML 导出或截图分析作为补充方案。
依赖项风险：Google 官方 CLI 工具处于 0.3.x 早期版本，API 可能随规范迭代发生破坏性变更；企业内网环境需确保 npm registry 可访问官方源。
版权合规风险：分析第三方商业网站设计时，需遵守目标站点的 robots.txt 及版权条款，提取的设计令牌仅可用于学习参考或自有项目重构，避免直接抄袭引发法律纠纷。
令牌准确性风险：视觉推断结果建议人工复核，关键业务场景应结合设计稿原始文件进行交叉验证，防止因颜色偏差或字体误识别导致品牌一致性受损。