用途
Style Guide Generator 用于生成专业排版的网站样式指南和设计系统。它分析用户提供的 URL、截图、上传文件和需求，输出可作为设计与开发团队单一事实来源的 PDF 文档。
主要能力
该技能可执行以下工作：
- 从 URL 使用 web_fetch 分析网站，提取 HTML/CSS 中的颜色值、字体系列与排版、间距模式、组件结构，并记录视觉层级、按钮样式与状态、表单元素处理、导航模式及可观察的响应式行为。
- 从截图/图像进行视觉分析，识别配色方案、确定排版层级、记录间距与布局模式、识别 UI 组件变体。
- 从已有文档提取使命/愿景声明、品牌指南、颜色规范、排版标准及已有组件库。
- 按标准模板结构组织内容，生成包含表格、色板、章节编号、版本号与更新日期的 PDF。
使用方式
用户请求样式指南时，按决策树处理：先收集信息（URL、截图、文档或补充提问），再提取设计元素，然后按标准模板结构组织内容，最后使用 PDF 技能生成专业文档。
从网站提取信息时，分析 HTML/CSS 中的颜色值、字体与排版、间距模式、组件结构，并记录视觉层级、按钮样式与状态、表单元素处理、导航模式与响应式行为。从截图提取时，识别配色、排版层级、间距布局模式与组件变体。从已有文档提取时，收集使命/愿景、品牌指南、颜色与排版规范及组件库。
生成文档时使用一致标题层级、章节间距与编号，用表格呈现结构化数据，展示十六进制色码与色板，确保对比度，保持最小 12pt 字号，并为较长指南添加目录、页码与适当分页。
标准模板结构
每个样式指南遵循以下结构：
1.0 引言（版本号与更新日期、目的与范围、目标受众） 1.1 使命与愿景（公司使命、愿景、战略定位） 1.2 设计原则（4-6 条核心原则，每条含名称与描述） 2.0 品牌标识（2.1 Logo 使用、2.2 颜色调板、2.3 排版、2.4 图标、2.5 图像） 3.0 内容风格指南（3.1 语气与语调、3.2 语法与规范） 4.0 UI 组件（4.1 按钮、4.2 表单、4.3 其他组件如卡片、模态框、导航、表格、警报、提示框、徽章、进度指示器） 5.0 布局与网格（网格系统、响应式断点、间距比例、容器宽度、内外边距约定） 6.0 无障碍（WCAG 合规级别、颜色对比、替代文本、键盘导航、屏幕阅读器、焦点指示器） 7.0 资源（设计文件链接、图标库、插画库、字体文件、代码仓库、附加文档） 8.0 变更日志（版本历史与日期、各版本变更摘要）
颜色调板表格包含 Role、Color、HEX、RGB 列，涵盖主色、辅助色、强调色、文本色、背景色与系统色（成功、警告、错误）。排版表格包含 Element、Font Family、Weight、Size、Line Height 列。按钮状态表格包含 State、Appearance、Usage 列。
适用场景
适用于用户请求为网站创建样式指南、基于截图生成设计系统、整合已有品牌文档形成规范、或为设计与开发团队建立统一设计参考的场景。
限制
当信息缺失或不清晰时，技能可做合理推断（从截图提取颜色、从网站分析推断排版、根据视觉模式估计间距），使用占位符（如 "[Insert company mission statement]"、"[Link to design files]"，默认 "Version 1.0" 与当前日期），向用户提问澄清，或提供模板与示例。
该技能捆绑以下资源：assets/template.pdf（基础模板 PDF，作为结构与格式参考）、scripts/analyze_website.py（从网站提取设计系统信息的 Python 脚本）、references/design_system_examples.md（领先公司设计系统与样式指南示例参考）。
其他具体功能、收费、价格、平台或效果信息暂未提供。