Menü
独立生成 UCD 风格指南（视觉风格、Token、组件/页面提示词）。已并入 vibeflow-design 的步骤 1；此 skill 作为可选独立入口保留。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | vibeflow-ucd |
| description | 独立生成 UCD 风格指南（视觉风格、Token、组件/页面提示词）。已并入 vibeflow-design 的步骤 1；此 skill 作为可选独立入口保留。 |
以审批通过的 SRS 为输入。分析 UI 相关需求，定义视觉风格方向，产出包含文生图模型提示词的 UCD 风格指南 — 确保所有前端功能共享统一的视觉语言。
在你展示 UCD 风格指南并获得用户批准之前，不得调用任何设计技能、实现技能、编写任何代码。此规则适用于每个含 UI 功能的项目。此阶段在 SRS 审批后、设计前运行。适用于：
docs/changes/<change-id>/ucd.md 不存在如 SRS 无 UI 功能：宣布"SRS 中未检测到 UI 功能 — 跳过 UCD 阶段"，并立即进入 vibeflow-design。
按顺序完成以下步骤：
docs/changes/<change-id>/brief.mddocs/changes/<change-id>/ucd.md 并提交vibeflow-design终止状态是进入 vibeflow-design。
python scripts/get-vibeflow-paths.py --jsondocs/changes/<change-id>/brief.md（如存在 legacy requirements.md，仅作补充）AskUserQuestion 向用户询问向用户展示 2-3 个视觉风格选项：
## 风格 A：[名称]（如"简洁商务"、"大胆现代"、"柔和极简"）
**调性**：[1-2 句描述视觉感受]
**色彩方向**：[主色调倾向 — 暖/冷/中性，高/低对比]
**排版方向**：[衬线/无衬线，几何/人文，密度]
**布局方向**：[卡片/列表，紧凑/宽松，固定/流式]
**目标用户契合**：[最适合哪些 SRS 用户画像]
**参考风格**：[借鉴的设计语言 — Material、Ant、Apple HIG 等]
## 推荐：风格 [X]
**理由**：[为什么最适合 SRS 的画像、约束和 NFR]
等待用户选择或提供方向。整合反馈后再继续。
定义锚定整个风格系统的具体设计 Token：
| Token | Hex | 用途 | 对比度 |
|-------|-----|------|--------|
| --color-primary | #XXXXXX | 主要操作、链接、激活状态 | >= 4.5:1（白底） |
| --color-primary-hover | #XXXXXX | 主色悬停态 | |
| --color-secondary | #XXXXXX | 次要操作、强调色 | >= 4.5:1（白底） |
| --color-bg-primary | #XXXXXX | 主背景 | |
| --color-bg-secondary | #XXXXXX | 卡片/区块背景 | |
| --color-text-primary | #XXXXXX | 正文 | >= 4.5:1（主背景上） |
| --color-text-secondary | #XXXXXX | 说明文字、提示 | >= 3:1（主背景上） |
| --color-success | #XXXXXX | 成功状态 | |
| --color-warning | #XXXXXX | 警告状态 | |
| --color-error | #XXXXXX | 错误状态、破坏性操作 | |
| --color-border | #XXXXXX | 默认边框 | |
| Token | 字体族 | 大小 | 字重 | 行高 | 用途 |
|-------|--------|------|------|------|------|
| --font-heading-1 | [字体] | [大小] | [字重] | [行高] | 页面标题 |
| --font-heading-2 | [字体] | [大小] | [字重] | [行高] | 章节标题 |
| --font-heading-3 | [字体] | [大小] | [字重] | [行高] | 卡片标题 |
| --font-body | [字体] | [大小] | [字重] | [行高] | 正文 |
| --font-body-small | [字体] | [大小] | [字重] | [行高] | 说明、提示 |
| --font-label | [字体] | [大小] | [字重] | [行高] | 表单标签、按钮 |
| --font-code | [字体] | [大小] | [字重] | [行高] | 代码片段 |
| Token | 值 | 用途 |
|-------|-----|------|
| --space-xs | [值] | 紧凑内边距 |
| --space-sm | [值] | 默认内边距 |
| --space-md | [值] | 区块间距 |
| --space-lg | [值] | 页面区域间距 |
| --space-xl | [值] | 主要布局分隔 |
| --radius-sm | [值] | 按钮、输入框 |
| --radius-md | [值] | 卡片 |
| --radius-lg | [值] | 模态框、对话框 |
| --shadow-sm | [值] | 细微层次感 |
| --shadow-md | [值] | 卡片、下拉菜单 |
| --shadow-lg | [值] | 模态框、覆盖层 |
- **图标风格**：[线框/填充/双色] [圆角/锐利] [线条粗细]
- **图标库**：[推荐库及版本，如 Lucide Icons 0.263.0]
- **插画风格**：[扁平/等距/3D/手绘] [色彩处理]
- **摄影处理**：[如适用 — 滤镜、叠加、裁切规则]
对 UI 清单中的每种组件类型，产出文生图提示词。
### 组件：[组件名]
**SRS 追溯**：[FR-xxx, NFR-xxx]
**变体**：[列出变体 — 默认、悬停、激活、禁用、错误、加载]
#### 基础提示词
> [详细的文生图提示词，描述在审批风格下的视觉外观。包括：布局结构、按名称引用颜色 Token、排版 Token、间距、边框处理、阴影、状态指示器。精确描述比例、对齐和视觉层次。]
#### 变体提示词
> **悬停态**：[相对基础的变化]
> **错误态**：[相对基础的变化]
> **加载态**：[相对基础的变化]
> **深色模式**（如适用）：[相对基础的变化]
#### 风格约束
- [约束 1 — 如"按钮高度必须精确为 40px 以满足触控目标"]
- [约束 2 — 如"错误文本必须出现在输入框下方，不得为提示框"]
至少生成以下组件类型的提示词（仅当 UI 清单中确实不存在时跳过）：
| 类别 | 组件 |
|---|---|
| 导航 | 顶栏/导航栏、侧边栏、面包屑、标签页、分页 |
| 输入 | 文本输入、多行文本、选择/下拉、复选框、单选、开关、日期选择 |
| 操作 | 主按钮、次按钮、图标按钮、链接按钮、浮动按钮 |
| 反馈 | 提示/吐司、模态/对话框、进度条、骨架屏、空状态 |
| 数据展示 | 表格、卡片、列表项、标签/徽章、头像、工具提示 |
| 布局 | 页面外壳、表单布局、网格/瀑布流、分隔线 |
对 UI 清单中识别的每个关键页面/屏幕，产出整页文生图提示词。
### 页面：[页面名]
**SRS 追溯**：[FR-xxx]
**用户画像**：[该页面的主要用户]
**入口**：[用户如何到达此页面]
#### 布局描述
[描述页面布局：头部位置、内容区域、侧边栏（如有）、底部。指定栅格结构、关键断点的响应式行为。]
#### 整页提示词
> [完整页面的详细文生图提示词。引用步骤 4 中定义的组件名称。描述空间关系、视觉层次、内容流、关键交互。如适用包含移动端/平板的响应式说明。]
#### 关键交互
- [交互 1 — 如"点击表格行打开右侧详情面板"]
- [交互 2 — 如"表单失焦验证，显示行内错误"]
#### 响应式行为
- **桌面 (>= 1024px)**：[布局描述]
- **平板 (768-1023px)**：[布局变化]
- **移动 (< 768px)**：[布局变化]
非简单项目逐节展示：
逐节展示。等待用户反馈。整合变更后再进入下一节。
简单项目（< 3 个 UI 页面）：合并所有章节为单次审批步骤。
保存到 docs/changes/<change-id>/ucd.md。
文档结构：
# <项目名> — UCD 风格指南
**日期**：YYYY-MM-DD
**状态**：已审批
**概要引用**：docs/changes/<change-id>/brief.md
## 1. 视觉风格方向
[选定风格，理由]
## 2. 风格 Token
### 2.1 颜色调色板
### 2.2 排版比例
### 2.3 间距与布局
### 2.4 图标与图像
## 3. 组件提示词
### 3.1 [组件名]
...
## 4. 页面提示词
### 4.1 [页面名]
...
## 5. 风格规则与约束
[跨领域规则：无障碍、动效、响应式、深色模式]
UCD 文档保存并提交后：
vibeflow-design 开始设计调用者： 用户主动调用（可选独立入口）
依赖： docs/changes/<change-id>/brief.md（可选补读 legacy requirements.md）
链接到： vibeflow-design（UCD 审批后）
产出： docs/changes/<change-id>/ucd.md
注意： UCD 已并入
vibeflow-design的步骤 1。如通过vibeflow-design进入设计流程，UCD 会自动在内联生成，无需先运行此 skill。 此 skill 作为可选独立入口保留——当用户想单独生成 UCD 再合并到设计时使用。
启动 VibeFlow 本地看板，实时查看阶段、功能、产物和最近事件。
查看 VibeFlow 项目当前状态（阶段、进度、待处理项）。
VibeFlow框架入口。运行 /vibeflow 开始新项目或继续现有工作流。
测试阶段的真实浏览器验证底座。用于页面交互、表单、路由、前端 API、视觉状态和运行时问题验证。优先使用 Playwright MCP 做真实交互验证，使用 Chrome DevTools MCP 做运行时诊断；MCP 不可用时回退到本地 Playwright CLI 脚本。
在此仓库中用于在会话开始时路由整个VibeFlow生命周期的工作。
系统测试通过后且工作流要求 UI QA 时使用 — 运行浏览器导向的 QA 验证并生成报告