名称： style-guide-generator
描述： 根据 URL、截图和现有文档，生成全面的网站风格指南和设计系统。当用户要求从网站、应用程序或现有材料中创建风格指南、设计系统文档、品牌指南或设计规范时，请使用此技能。该技能遵循行业标准风格指南结构，生成专业的 PDF 输出。

风格指南生成器

概述

通过分析提供的 URL、截图、上传文件和用户需求，生成专业格式的网站风格指南和设计系统。输出全面的 PDF 文档，作为设计和开发团队的单一事实来源。

工作流程决策树

当用户请求风格指南时，请遵循此决策树：

1. 收集信息

   • 如果用户提供 URL → 使用 web_fetch 分析网站
   • 如果用户提供截图/图像 → 分析视觉元素
   • 如果用户提供现有文档 → 提取并结构化信息
   • 如果用户提供的信息很少 → 询问关于品牌、目标和需求的澄清性问题

2. 提取设计元素

   • 颜色（主色、辅色、强调色、文本色、背景色、成功、警告、错误）
   • 排版（字体、字重、大小、行高）
   • 标志使用指南
   • 图标风格
   • 图像偏好
   • UI 组件模式
   • 布局与间距系统
   • 无障碍要求

3. 结构化内容

   • 遵循标准模板结构（见“模板结构”部分）
   • 将提取的信息组织到相应的章节
   • 添加使命/愿景（如果提供或可推断）
   • 记录设计原则
   • 创建组件规范

4. 生成 PDF

   • 使用 PDF 技能创建专业文档
   • 应用一致的格式和排版
   • 包含用于颜色板、排版规范和组件状态的表格
   • 确保适当的对比度以满足无障碍要求
   • 添加版本号和最后更新日期

标准模板结构

每个风格指南都应遵循此专业结构（基于行业最佳实践）：

1.0 引言

• 版本号和最后更新日期
• 目的和范围声明
• 目标受众（设计和开发团队）

1.1 使命与愿景

• 公司使命声明
• 公司愿景声明
• 战略定位

1.2 设计原则

• 4-6 个指导设计决策的核心原则
• 每个原则包含名称和描述
• 示例：“清晰至上”、“简约赋能”、“一致性建立信任”、“以人为本”

2.0 品牌标识

2.1 标志使用

• 主标志规范
• 留白要求
• 错误使用示例
• 最小尺寸要求
• 颜色变体（全彩、黑色、白色）

2.2 颜色板

• 包含角色、颜色名称、HEX 和 RGB 值的组织表格
• 主色（1-2 种）
• 辅色（1-3 种）
• 强调色
• 文本颜色
• 背景颜色
• 系统颜色（成功、警告、错误）
• 每种颜色组合的无障碍注意事项

2.3 排版

• 标题字体规范（H1, H2, H3）
• 正文字体规范
• 说明文字/小字体规范
• 以表格形式呈现的字体族、字重、大小和行高
• 网页字体加载注意事项
• 备用字体

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 标准）
• 颜色对比度要求
• 替代文本指南
• 键盘导航标准
• 屏幕阅读器注意事项
• 焦点指示器

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. 注意任何现有的组件库

创建专业表格

使用格式良好的表格进行规范说明。示例格式：

颜色板表格：

| 角色       | 颜色       | HEX     | RGB           |
|------------|-------------|---------|---------------|
| 主色       | 品牌蓝      | #378DFF | 55, 141, 255  |
| 辅色       | 浅蓝        | #A5CAFF | 165, 202, 255 |

排版表格：

| 元素       | 字体族      | 字重    | 大小 (px) | 行高         |
|------------|-------------|---------|-----------|--------------|
| H1         | Inter       | Bold    | 48        | 1.2          |
| H2         | Inter       | Bold    | 36        | 1.3          |
| 正文       | Inter       | Regular | 16        | 1.5          |

按钮状态表格：

| 状态       | 外观                  | 用途                          |
|------------|-----------------------|-------------------------------|
| 主要       | 实心填充，主色        | 页面上的主要号召性用语        |
| 次要       | 描边，主色            | 次要操作                      |
| 三级       | 纯文本                | 不太重要的操作                |

PDF 生成最佳实践

1. 专业格式：

   • 使用一致的标题层次结构
   • 在章节之间应用适当的间距
   • 对结构化数据使用表格
   • 尽可能包含视觉示例

2. 排版：

   • 使用专业字体（Inter, Roboto 或系统字体）
   • 保持一致的尺寸层次结构
   • 确保足够的行高以提高可读性

3. 颜色使用：

   • 显示带有十六进制代码的色板
   • 确保足够的对比度以满足无障碍要求
   • 清晰地记录颜色角色

4. 组织：

   • 清晰地编号章节（1.0, 1.1, 2.0 等）
   • 为较长的指南包含目录
   • 适当使用分页符
   • 添加页码

5. 无障碍性：

   • 确保文档对屏幕阅读器友好
   • 使用正确的标题结构
   • 为图像包含替代文本
   • 保持最小字体大小为 12pt

处理信息不完整的情况

当信息缺失或不明确时：

1. 进行合理推断：

   • 从提供的截图中提取颜色
   • 从网站分析中推断排版
   • 根据视觉模式估算间距

2. 使用占位符：

   • 对于未知内容使用“【请插入公司使命声明】”
   • 对于不可用资源使用“【设计文件链接】”
   • 使用“版本 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

参考文档，包含来自领先公司的结构良好的设计系统和风格指南示例。可用于获取内容组织和呈现标准的灵感。