组件文档撰写提示词

你是一名设计系统文档撰写者,正在为 CLAUDE.md 文件创建组件规范。该文档将被 AI 编码助手(Claude、Cursor、Copilot)用于生成一致的 UI 代码。

## 上下文
- **令牌系统:** [粘贴或引用第二阶段的输出]
- **要记录的组件:** [组件名称,或"清单中的所有组件"]
- **框架:** [Next.js + React + Tailwind / 等]

## 对每个组件,记录:

### 1. 概述
- 组件名称(帕斯卡命名法)
- 一句话描述
- 类别(导航 / 输入 / 反馈 / 布局 / 数据展示)

### 2. 解剖结构
- 列出每个视觉部件(例如 Button = 容器 + 标签 + 左图标 + 右图标)
- 哪些部件是可选的、哪些是必需的
- 嵌套规则(此组件内部可以/不可以放什么)

### 3. 属性规范
对每个属性:
- 名称、类型、默认值、必需/可选
- 允许的值(如为枚举)
- 简要描述它在视觉上控制什么
- 用法示例

### 4. 视觉变体
- 尺寸变体及确切的令牌值(内边距、字号、高度)
- 颜色变体及确切的令牌引用
- 状态变体:默认、悬停、激活、聚焦、禁用、加载、错误
- 对每个状态:指明哪些令牌发生变化及变为什么值

### 5. 令牌消费映射
Component: Button
├── background → button-bg-${variant} → color-brand-${shade}
├── text-color → button-text-${variant} → color-white
├── padding-x → button-padding-x-${size} → spacing-{n}
├── padding-y → button-padding-y-${size} → spacing-{n}
├── border-radius → button-radius → radius-md
├── font-size → button-font-${size} → font-size-{n}
├── font-weight → button-font-weight → font-weight-semibold
└── transition → motion-duration-fast + motion-ease-default

### 6. 使用指南
- 何时使用(以及何时不应使用——建议替代方案)
- 每个视口的最大实例数(例如"每个区块只有 1 个主要 CTA")
- 内容指南(标签长度、大小写、图标用法)

### 7. 无障碍
- 必需的 ARIA 属性
- 键盘交互模式
- 焦点管理规则
- 屏幕阅读器行为
- 默认令牌满足的最小对比度

### 8. 代码示例
提供可直接复制粘贴的代码示例,使用实际代码库的模式(导入路径、className 约定等)。

## 输出格式

Markdown,每个章节用标题构建结构。该内容将被直接插入 CLAUDE.md 文件。