介绍
# Style Guide Generator
## 概述
通过分析提供的 URL、截图、上传的文件和用户需求，生成专业格式的网站样式指南和设计系统。输出全面的 PDF 文档，作为设计和开发团队的事实唯一来源。
## 工作流程决策树
当用户请求样式指南时，请遵循此决策树：
1. **收集信息** - 如果用户提供 URL → 使用 web_fetch 分析网站 - 如果用户提供截图/图像 → 分析视觉元素 - 如果用户提供现有文档 → 提取并构建信息 - 如果用户提供最少信息 → 询问有关品牌、目标和需求的澄清问题
2. **提取设计元素** - 颜色（主色、次色、强调色、文本色、背景色、成功、警告、错误） - 排版（字体、字重、大小、行高） - Logo 使用指南 - 图标风格 - 图像偏好 - UI 组件模式 - 布局和间距系统 - 无障碍要求
3. **构建内容** - 遵循标准模板结构（参见模板结构部分） - 将提取的信息组织到适当的章节中 - 如果提供或推断出使命/愿景，则添加它们 - 记录设计原则 - 创建组件规格
4. **生成 PDF** - 使用 PDF 技能创建专业文档 - 应用一致的格式和排版 - 包含调色板、排版规格和组件状态的表格 - 确保通过适当的对比度比率实现无障碍访问 - 添加版本号和最后更新日期
## 标准模板结构
每个样式指南都应遵循这种专业结构（基于行业最佳实践）：
### 1.0 简介 - 版本号和最后更新日期 - 目的和范围声明 - 目标受众（设计和开发团队）
### 1.1 使命与愿景 - 公司使命宣言 - 公司愿景宣言 - 战略定位
### 1.2 设计原则 - 指导设计决策的 4-6 个核心原则 - 每个原则都有名称和描述 - 示例：“清晰至上”、“简约赋能”、“一致性建立信任”、“以人为中心”
### 2.0 品牌标识
#### 2.1 Logo 使用 - 主 Logo 规格 - 清除空间要求 - 错误使用示例 - 最小尺寸要求 - 颜色变体（全色、黑色、白色）
#### 2.2 调色板 - 包含角色、颜色名称、HEX 和 RGB 值的表格 - 主色（1-2 种） - 次色（1-3 种） - 强调色 - 文本色 - 背景色 - 系统颜色（成功、警告、错误） - 每种颜色组合的无障碍说明
#### 2.3 排版 - 标题字体规格（H1、H2、H3） - 正文规格 - 说明文字/小号文字规格 - 以表格形式列出的字体系列、字重、大小和行高 - Web 字体加载注意事项 - 后备字体
#### 2.4 图标 - 图标风格指南（轮廓、填充、线条粗细） - 网格系统规格 - 尺寸变体 - 使用示例 - 指向图标库的链接
#### 2.5 图像 - 摄影风格指南 - 插画风格指南 - 图像处理规格 - 要做和不要做的清单 - 质量要求
### 3.0 内容样式指南
#### 3.1 语态与语调 - 语调特征（一致的属性） - 语调变化（语调如何适应语境） - 不同场景的示例
#### 3.2 语法和机制 - 标点符号规则 - 大写标准 - 语态偏好（主动/被动） - 数字格式 - 日期和时间格式
### 4.0 UI 组件
#### 4.1 按钮 - 状态变体（主按钮、次按钮、三级按钮、禁用） - 尺寸变体 - 使用指南 - 代码片段（HTML/CSS） - 无障碍要求
#### 4.2 表单 - 输入框规格 - 标签定位 - 验证状态 - 必填字段指示器 - 错误消息样式 - 帮助文本格式
#### 4.3 [根据需要添加其他组件] - 卡片 - 模态框 - 导航 - 表格 - 警报/通知 - 工具提示 - 徽章 - 进度指示器
### 5.0 布局与网格 - 网格系统规格（列、间距） - 响应式断点 - 间距比例（基本单位和倍数） - 容器宽度 - 边距和填充约定
### 6.0 无障碍访问 (A11y) - WCAG 合规级别（2.1 AA 标准） - 颜色对比度要求 - Alt 文本指南 - 键盘导航标准 - 屏幕阅读器注意事项 - 焦点指示器
### 7.0 资源 - 指向设计文件的链接（Figma、Sketch、Adobe XD） - 图标库位置 - 插画库位置 - 字体文件仓库 - 代码仓库 - 其他文档
### 8.0 更新日志 - 带有日期的版本历史 - 每个版本的变更摘要
## 信息提取过程
分析提供的材料时，系统地提取以下内容：
### 来自 URL/网站： 1. 使用 web_fetch 获取网站 2. 分析 HTML/CSS 以查找： - 颜色值（background-color、color 属性） - 字体系列和排版（font-family、font-size、font-weight） - 间距模式（margin、padding 值） - 组件结构 3. 记录： - 视觉层次结构 - 按钮样式和状态 - 表单元素处理 - 导航模式 - 响应式行为（如果可观察）
### 来自截图/图像： 1. 使用视觉分析识别调色板 2. 确定排版层次结构 3. 记录间距和布局模式 4. 识别 UI 组件变体 5. 观察实际应用中的设计原则
### 来自现有文档： 1. 提取使命/愿景声明 2. 收集现有的品牌指南 3. 收集颜色规格 4. 记录当前的排版标准 5. 记录任何现有的组件库
## 创建专业表格
使用格式良好的表格来展示规格。示例格式：
**调色板表：** ``` | Role | Color | HEX | RGB | |------------|-------------|---------|---------------| | Primary | Brand Blue | #378DFF | 55, 141, 255 | | Secondary | Light Blue | #A5CAFF | 165, 202, 255 | ```
**排版表：** ``` | Element | Font Family | Weight | Size (px) | Line Height | |---------|-------------|---------|-----------|-------------| | H1 | Inter | Bold | 48 | 1.2 | | H2 | Inter | Bold | 36 | 1.3 | | Body | Inter | Regular | 16 | 1.5 | ```
**按钮状态表：** ``` | State | Appearance | Usage | |-----------|-------------------------|--------------------------------| | Primary | Solid fill, primary | Main call to action on a page | | Secondary | Outline, primary color | Secondary actions | | Tertiary | Text only | Less important actions | ```
## PDF 生成最佳实践
1. **专业格式：** - 使用一致的标题层次结构 - 在章节之间应用适当的间距 - 利用表格展示结构化数据 - 尽可能包含视觉示例
2. **排版：** - 使用专业字体（Inter、Roboto 或系统字体） - 保持一致的大小层次结构 - 确保足够的行高以提高可读性
3. **颜色使用：** - 显示带有十六进制代码的颜色色板 - 确保足够的对比度以实现无障碍访问 - 清楚地记录颜色角色
4. **组织：** - 清楚地给章节编号（1.0、1.1、2.0 等） - 为较长的指南包含目录 - 适当使用分页符 - 添加页码
5. **无障碍访问：** - 确保文档对屏幕阅读器友好 - 使用正确的标题结构 - 为图像包含 Alt 文本 - 保持最小字体大小为 12pt
## 处理不完整的信息
当信息缺失或不清楚时：
1. **做出合理的推断：** - 从提供的截图中提取颜色 - 从网站分析中推断排版 - 根据视觉模式估算间距
2. **使用占位符：** - 对于未知内容，使用“[插入公司使命宣言]” - 对于不可用的资源，使用“[指向设计文件的链接]” - 默认使用“Version 1.0”和当前日期
3. **询问澄清问题：** - “贵公司的使命宣言是什么？” - “您是否有现有的品牌颜色，还是我应该从网站上提取？” - “除了 WCAG 2.1 AA 之外，是否有特定的无障碍要求？”
4. **提供模板：** - 为需要用户输入的章节包含示例文本 - 展示他们应提供内容的格式 - 就理想的信息提供指导
## 示例用户交互
**示例 1：基于 URL 的请求** 用户：“为我在 example.com 的网站创建一个样式指南” 流程： 1. 使用 web_fetch 获取网站 2. 分析 HTML/CSS 以查找设计系统 3. 提取颜色、字体、间距 4. 构建为标准模板 5. 生成专业 PDF 6. 提供下载链接
**示例 2：基于截图的请求** 用户：“这是我的应用程序的截图。创建一个样式指南。” [上传图像] 流程： 1. 分析图像的视觉元素 2. 提取调色板 3. 识别排版模式 4. 记录组件样式 5. 填充模板结构 6. 生成包含发现的 PDF 7. 提供下载链接
**示例 3：综合请求** 用户：“使用我的网站 URL、这些品牌颜色 [列表] 和我们的使命宣言 [文本] 创建一个样式指南” 流程： 1. 合并所有提供的信息 2. 获取并分析网站 3. 整合提供的品牌元素 4. 构建完整的样式指南 5. 生成专业 PDF 6. 提供下载链接
## 质量检查清单
在交付样式指南 PDF 之前，请验证：
- [ ] 所有章节均已完成或标记为占位符 - [ ] 调色板包含 HEX 和 RGB 值 - [ ] 排版规格详细（系列、字重、大小、行高） - [ ] 表格格式正确且对齐 - [ ] 已记录无障碍要求 - [ ] 包含版本号和日期 - [ ] 提供了资源部分的链接（即使是占位符） - [ ] 更新日志已从版本 1.0 开始 - [ ] PDF 格式专业 - [ ] 文档已准备好分发到团队
## 资源
此技能使用以下捆绑资源：
### assets/template.pdf 基础模板 PDF，展示了所有生成的样式指南都应遵循的专业结构和格式。该文件作为结构、章节组织和格式标准的参考。
### scripts/analyze_website.py Python 脚本，用于从网站提取设计系统信息，包括颜色、排版和组件模式。可用于从实时 URL 自动收集设计规格。
### references/design_system_examples.md 包含来自领先公司的结构良好的设计系统和样式指南示例的参考文档。利用它来为内容组织和展示标准获取灵感。