（8670期）make-design-md – 智能设计规范提取与文档生成

智能设计规范提取与文档生成 基于 Google design.md 官方规范，从网站、HTML 或截图自动提取颜色、字体、间距等设计令牌，生成标准化 DESIGN.md 文档及可导出为 Tailwind 配置的预览文件。 使用说明 核心用法 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 及版权条款，提取的设计令牌仅可用于学习参考或自有项目重构，避免直接抄袭引发法律纠纷。 令牌准确性风险：视觉推断结果建议人工复核，关键业务场景应结合设计稿原始文件进行交叉验证，防止因颜色偏差或字体误识别导致品牌一致性受损。 原始说明 网站设计风格分析器，从网站URL、HTML文件或截图提取设计规范，生成符合 Google design.md 规范的 DESIGN.md 文档。当用户要求"分析设计风格"、"提取设计规范"、"生成设计文档"、"从XX网站提取风格"、"分析这个页面的设计"等任务时触发此skill。也支持用户直接提供URL、HTML文件路径或截图文件作为输入。