名称: 创建样式指南描述: 从主题和设计令牌生成全面的样式指南文档。输出到markdown、HTML或Figma tokens格式。参数提示: [–format markdown|html|figma-tokens] [–include colors|typography|spacing|all] 允许的工具: 读取、全局搜索、grep、任务、技能

创建样式指南命令

从设计令牌和主题配置生成全面的样式指南文档。

用法

/cms:create-style-guide --format markdown
/cms:create-style-guide --format html --include all
/cms:create-style-guide --format figma-tokens

格式选项

markdown: Markdown文档
html: 交互式HTML样式指南
figma-tokens: Figma Tokens插件格式

工作流

步骤1: 解析参数

从命令中提取格式和包含选项。

步骤2: 加载设计令牌

从以下位置读取现有设计令牌：

Token JSON文件
CSS变量定义
主题配置

步骤3: 调用技能

调用相关技能：

design-token-management - 令牌分析
multi-site-theming - 主题变体

步骤4: 生成Markdown样式指南

# 设计系统样式指南

## 目录

1. [品牌概述](#品牌概述)
2. [颜色](#颜色)
3. [排版](#排版)
4. [间距](#间距)
5. [组件](#组件)
6. [图标](#图标)
7. [使用指南](#使用指南)

---

## 品牌概述

### 品牌价值
- **专业**: 干净、可信赖、可靠
- **现代**: 当代、创新、前瞻性
- **可访问**: 包容性、清晰、易用

### 声音与语气
- 清晰简洁
- 友好但专业
- 行动导向

---

## 颜色

### 主要颜色

| 名称 | 十六进制 | RGB | CSS变量 |
|------|-----|-----|--------------|
| 品牌主要 | #2563eb | rgb(37, 99, 235) | `--color-brand-primary` |
| 品牌深色 | #1e40af | rgb(30, 64, 175) | `--color-brand-dark` |
| 品牌浅色 | #93c5fd | rgb(147, 197, 253) | `--color-brand-light` |

### 中性颜色

| 名称 | 十六进制 | 用途 |
|------|-----|-------|
| 灰色50 | #f9fafb | 背景 |
| 灰色100 | #f3f4f6 | 微妙背景 |
| 灰色500 | #6b7280 | 次要文本 |
| 灰色900 | #111827 | 主要文本 |

### 语义颜色

| 名称 | 颜色 | 用途 |
|------|-------|-------|
| 成功 | #22c55e | 确认、积极状态 |
| 警告 | #f59e0b | 警告、重要通知 |
| 错误 | #ef4444 | 错误、破坏性操作 |
| 信息 | #3b82f6 | 信息消息 |

### 颜色使用指南

**做：**
- 使用品牌主要颜色用于CTA和关键操作
- 一致使用语义颜色于其预期目的
- 确保文本有4.5:1对比度比率

**不做：**
- 使用品牌颜色用于错误状态
- 混合语义颜色超出其目的
- 使用低对比度颜色组合

---

## 排版

### 字体家族

| 用途 | 字体 | 后备字体 |
|---------|------|----------|
| 标题 | Inter | system-ui, sans-serif |
| 正文 | Inter | system-ui, sans-serif |
| 代码 | JetBrains Mono | monospace |

### 类型比例

| 名称 | 大小 | 行高 | 用途 |
|------|------|-------------|-------|
| 显示 | 3.815rem | 1.1 | 英雄标题 |
| H1 | 3.052rem | 1.2 | 页面标题 |
| H2 | 2.441rem | 1.2 | 部分标题 |
| H3 | 1.953rem | 1.3 | 子部分 |
| H4 | 1.563rem | 1.3 | 卡片标题 |
| 正文 | 1rem | 1.6 | 段落文本 |
| 小 | 0.8rem | 1.5 | 字幕、标签 |

### 文本样式

#### 标题
```html
<h1 class="text-h1">页面标题</h1>
<h2 class="text-h2">部分标题</h2>
<h3 class="text-h3">子部分</h3>

正文文本

<p class="text-body">常规段落文本</p>
<p class="text-lead">带强调的介绍段落</p>
<p class="text-small">字幕或辅助文本</p>

间距

间距比例

令牌	值	用途
space-1	0.25rem	紧密内边距
space-2	0.5rem	元素内边距
space-4	1rem	组件内边距
space-8	2rem	部分间隙
space-16	4rem	大间隙

布局指南

使用 space-4 用于标准组件内边距
使用 space-8 用于相关部分之间
使用 space-16 用于主要页面部分之间

组件

按钮

主要按钮

<button class="btn btn-primary">主要操作</button>

用于主CTA
每个部分一个主要按钮

次要按钮

<button class="btn btn-secondary">次要操作</button>

用于替代操作
可以与主要按钮配对

按钮状态

状态	描述
默认	正常静止状态
悬停	背景变暗
激活	进一步变暗
禁用	50%不透明度，无指针

卡片

<div class="card">
  <img class="card-image" src="..." alt="...">
  <div class="card-content">
    <h3 class="card-title">标题</h3>
    <p class="card-description">描述</p>
  </div>
</div>

表单元素

文本输入

<label class="label" for="email">邮箱</label>
<input type="email" id="email" class="input" placeholder="you@example.com">

验证状态

状态	边框颜色	图标
默认	灰色300	无
焦点	品牌主要	无
错误	错误红色	错误图标
成功	成功绿色	勾选图标

图标

图标系统

库: Lucide Icons
大小: 24px默认
描边: 2px

常见图标

图标	名称	用途
➕	加	添加操作
✏️	编辑	编辑操作
🗑️	垃圾桶	删除操作
✓	勾选	成功、完成
✕	X	关闭、取消

使用指南

可访问性检查表

[ ] 颜色对比度满足WCAG AA (4.5:1)
[ ] 文本可以放大到200%
[ ] 交互元素有焦点状态
[ ] 图标有可访问标签

响应式断点

名称	最小宽度	用途
移动	0	移动优先基础
平板	768px	平板及以上
桌面	1024px	桌面及以上
宽屏	1280px	大屏幕

性能指南

尽可能使用系统字体用于正文文本
懒加载折叠以下图像
限制自定义字体为2-3个家族

步骤5: 生成Figma Tokens（如果format=figma-tokens）

Figma Tokens格式:

{
  "global": {
    "colors": {
      "brand": {
        "primary": {
          "value": "#2563eb",
          "type": "color"
        },
        "secondary": {
          "value": "#93c5fd",
          "type": "color"
        }
      },
      "gray": {
        "50": { "value": "#f9fafb", "type": "color" },
        "100": { "value": "#f3f4f6", "type": "color" },
        "500": { "value": "#6b7280", "type": "color" },
        "900": { "value": "#111827", "type": "color" }
      }
    },
    "typography": {
      "fonts": {
        "heading": { "value": "Inter", "type": "fontFamilies" },
        "body": { "value": "Inter", "type": "fontFamilies" }
      },
      "fontSizes": {
        "xs": { "value": "10", "type": "fontSizes" },
        "sm": { "value": "12", "type": "fontSizes" },
        "base": { "value": "16", "type": "fontSizes" },
        "lg": { "value": "20", "type": "fontSizes" },
        "xl": { "value": "25", "type": "fontSizes" }
      },
      "fontWeights": {
        "normal": { "value": "400", "type": "fontWeights" },
        "medium": { "value": "500", "type": "fontWeights" },
        "bold": { "value": "700", "type": "fontWeights" }
      }
    },
    "spacing": {
      "1": { "value": "4", "type": "spacing" },
      "2": { "value": "8", "type": "spacing" },
      "4": { "value": "16", "type": "spacing" },
      "8": { "value": "32", "type": "spacing" }
    },
    "borderRadius": {
      "sm": { "value": "2", "type": "borderRadius" },
      "md": { "value": "6", "type": "borderRadius" },
      "lg": { "value": "8", "type": "borderRadius" },
      "full": { "value": "9999", "type": "borderRadius" }
    }
  },
  "$themes": [
    {
      "id": "light",
      "name": "Light",
      "selectedTokenSets": {
        "global": "enabled"
      }
    }
  ]
}

步骤6: 生成HTML样式指南（如果format=html）

交互式HTML输出，包括：

实时颜色样本
排版样本
组件游乐场
带复制的代码片段
响应式预览