样式指南生成器

概述

通过分析提供的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 用户界面组件

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. 识别用户界面组件变体
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. 可访问性：

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

处理不完整信息

当信息缺失或不明确时：

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

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