style-guide-generator

核心功能与用法

Style Guide Generator 是一款专业的样式指南自动化生成工具，旨在帮助设计团队和开发者快速构建系统化的品牌规范文档。该技能支持三种主要输入方式：通过 web_fetch 分析实时网站、解析用户上传的截图或设计稿、以及整合现有的品牌文档资料。

在工作流程上，系统会智能提取关键设计元素，包括色彩体系（主色、辅助色、功能色）、字体规范（字重、字号、行高）、Logo 使用规则、图标风格、UI 组件状态（按钮、表单、卡片等）、以及间距和网格系统。所有提取的信息将自动填充到基于行业最佳实践的标准模板中，涵盖从品牌使命、设计原则到具体组件规范的 8 大章节结构。

生成的输出是一份专业格式的 PDF 文档，包含标准化的表格展示（如色板 HEX/RGB 值对照、字体规格表）、WCAG 2.1 AA 级别的无障碍访问说明、以及版本控制和资源链接等完整元数据。整个过程无需编写代码，通过自然语言交互即可完成从原始素材到交付物的一体化转换。

显著优点

该技能的最大优势在于其标准化程度极高，严格遵循 Google Material Design、Apple Human Interface Guidelines 等业界权威的设计系统文档结构，确保生成的规范具有专业可用性。其次是自动化能力强，能够自动解析 CSS 样式表、识别视觉层次、推断设计令牌（Design Tokens），大幅减少手动整理工作量。

多源输入支持使该工具适用场景广泛：无论是对竞品网站进行设计分析、整理遗留项目的设计债务，还是为新品牌建立基础规范，都能灵活应对。生成的 PDF 采用专业的排版设计，包含清晰的层级结构、对比度合格的色彩展示、以及可直接交付给客户的视觉呈现质量。

此外，该技能充分考虑了团队协作需求，文档模板中预设了设计文件链接（Figma、Sketch）、代码仓库地址、版本历史记录等区域，天然适合作为设计系统的 Single Source of Truth。

潜在局限

作为基于 AI 分析的工具，其准确性受限于输入源的质量。对于复杂交互状态（如动画过渡、响应式断点变化）或深层 CSS 变量，自动提取可能存在偏差，需要人工复核。若目标网站启用了反爬虫机制或采用重度 JavaScript 渲染，web_fetch 可能无法获取完整样式信息。

另外，虽然模板结构全面，但对于高度定制化的品牌需求（如特殊的版式网格、非标准的组件库），可能需要较多的手动调整。目前该技能主要面向 Web 设计，对移动端 App 的特定规范（如 iOS/Android 原生组件适配）支持相对有限。

适合人群

该技能特别适合UI/UX 设计师和前端开发者用于快速建立设计系统基线；品牌经理和市场团队可利用其生成对外的品牌手册；产品经理在prd评审时可用作视觉对齐工具；设计顾问和自由职业者则能借助其大幅提升交付效率。

对于正在推进设计系统建设的中大型团队，或是需要统一多产品线视觉规范的集团型企业，该工具能有效降低文档维护成本。同时也适合初创公司快速建立基础的品牌资产文档。

使用风险

主要风险集中在网络依赖和来源可信度两方面。该技能依赖 web_fetch 工具获取在线资源，若目标网站访问受限或网络不稳定，可能导致分析失败。虽然安全评级为 A 级，但来源属于 T3 级个人开发者（tomstools11），长期维护更新存在不确定性。

在数据安全方面，虽然 skill 本身不上传用户数据，但使用 web_fetch 分析外部网站时，相当于向目标服务器发起请求，企业内网或敏感项目需谨慎评估。此外，自动生成的规范可能包含对原始网站设计元素的近似复制，在商业使用时需注意版权合规风险。建议将生成内容作为初稿，经专业设计师审核后再正式采用。