# Vibe UI Methodology

> VibeCoding UI 视觉设计方法论——色彩 + 国风纹样 + 提示词工程的统一规范。 沉淀自「才巨智能 VibeCoding 教程系列」：①《UI 设计色彩搭建完整手册》(19 页) ②《国风纹样生成教程》(30 页)。 本 skill 是所有 HTML/CSS/SVG/可视化输出的统一方法论入口，覆盖： - 60-30-10 黄金配色比例 - HSL 色彩思维 + 50-900 色阶生成法 - 三层 Design Token 架构（原始层 → 语义层 → 组件层） - WCAG 对比度与无障碍 - 深色模式正确做法 - 4 套国风配色主题（青花/朱砂金/黛蓝金/墨绿金）+ 紫罗兰示范色 - 国风五大纹样体系 30 种纹样话术库 - 五步纹样描述公式（骨架→主体→构成→色彩→风格） - 国风纹样衍生四法（换色/重组/简化/融合） - 验收清单（一致性/层级/对比度/语义/双模式） 触发场景：任何 HTML/SVG/CSS 生成、PPT 演示文稿配色（配合 tencent-pptx）、 PDF/电子书/橙皮书排版（配合 huashu-book-pdf）、UI 配色、新中式/国风视觉、 网页装饰纹样、文档封面配色、可视化主题设计都应调用本 skill；不必单独搜色彩或纹样手册。

- Skill: `huangrichao2020/vibe-ui-methodology` (Agent Skill)
- Install (CLI): `npx skillmds@latest add huangrichao2020/vibe-ui-methodology`
- Raw SKILL.md: https://api.skillmd.com/api/skills/huangrichao2020/vibe-ui-methodology/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: huangrichao2020 (https://skillmd.com/u/huangrichao2020)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/huangrichao2020/vibe-ui-methodology

---


# VibeCoding UI 视觉设计方法论

> **这是所有 HTML/CSS/SVG/可视化输出的方法论总入口。** 任何涉及 UI 配色、主题、装饰纹样的任务——橙皮书、可视化看板、新中式网页、信息图——都必须先调用本 skill 拿到配色规范与纹样话术，再动手写代码。

## 1. 三大设计原则（顶层纪律）

| # | 原则 | 来源 | 一句话 |
|---|------|------|--------|
| 1 | **配色成系统而非凭感觉** | 色彩手册 | 1 主色阶 + 4 语义色 + 1 中性色 ≈ 60 个色值，撑起 100% 界面 |
| 2 | **提示词给参数给规则给禁令** | 色彩手册 §6.1 | 模糊形容词让 AI 随机；HSL 参数 + 角色分配 + 禁用清单让 AI 精确 |
| 3 | **纹样用 SVG 不用位图** | 纹样手册 §1.2 | SVG 矢量可缩放/可换色/可平铺；位图不可控 |

这三条是所有可视化输出的「纪律底线」，违反任何一条就会产出「能用但不好看」。

## 2. 调用决策树

```
要生成可视化输出？
│
├─► HTML / SVG / CSS（Web 页面 / 仪表盘）？
│   ├─► 需要配色？ → 见 references/color-system.md（通用）/ references/chinese-style-themes.md（国风）
│   ├─► 需要纹样？ → 五步描述公式 + assets/patterns/30-patterns.md 话术库
│   ├─► 需要提示词？ → templates/color-design-prompt.md / pattern-gen-prompt.md
│   └─► 需要验收？ → 第 8 节验收清单 + 附录 A HTML 专项
│
├─► PPT / 演示文稿（配合 tencent-pptx）？
│   ├─► 需要配色？ → 见 references/ppt-design.md §2-4（投影对比度修正 + 国风映射）
│   ├─► 需要母版？ → 见 references/ppt-design.md §1（A/B/C 三区 + Hero/Supporting 节奏）
│   ├─► 需要纹样装饰？ → 见 references/ppt-design.md §5（五种幻灯片用法）
│   └─► 需要验收？ → 第 8 节验收清单 + 附录 B PPT 专项
│
├─► PDF / 电子书 / 橙皮书（配合 huashu-book-pdf）？
│   ├─► 需要配色？ → 见 references/pdf-design.md §2-5（打印色彩 + 章首页 + 目录）
│   ├─► 需要封面？ → 见 references/pdf-design.md §5（国风封面配色方案）
│   ├─► 需要纹样？ → 见 references/pdf-design.md §8（PDF 纹样注意事项）
│   └─► 需要验收？ → 第 8 节验收清单 + 附录 C PDF 专项
│
└─► 不确定场景？
    └─► 先看 references/color-system.md（通用配色基础），再按场景选分支
```

## 3. 三大场景速查

| 维度 | HTML/Web | PPT/演示 | PDF/书籍 |
|------|---------|---------|---------|
| **背景** | 浅色 `violet-50` 或白色 | **纯白优先**（投影亮） | 白或米白（仿宣纸） |
| **对比度** | 4.5:1 (AA) | **7:1+**（投影损失） | 4.5:1（阅读光充足） |
| **饱和度** | 30% | **40-50%**（投影吃色） | **25%**（打印柔和） |
| **字色** | gray-800 | gray-800（字号≥18px） | **95% 黑 #1A1A1A** |
| **底纹透明度** | 0.03-0.05 | 0.04-0.06 | **0.08-0.12**（打印） |
| **深色模式** | 支持 | **禁止**整页深色底 | **不支持**（静态文件） |
| **国风适用** | 全部 4 主题 | 浅色版（青花>朱砂金>黛蓝/墨绿浅色版） | 全部（青花最佳） |


## 3. 60-30-10 黄金配色比例（最高频规则）

| 比例 | 角色 | 用途 | 典型应用 |
|------|------|------|---------|
| **60%** | 主色调 | 背景与留白 | 页面背景、卡片底色、留白区域 |
| **30%** | 辅助色 | 次级区块 | 卡片表面、导航、侧栏、章节底色 |
| **10%** | 强调色 | 关键行动点 | 主按钮、链接、关键数据、当前状态 |

> **新手最大错误**：把主色铺满整页（紫背景+紫标题+紫按钮）→ 没有强调。**强调之所以是强调，恰恰因为它稀缺。** 先把 90% 交给中性色，主色只在关键行动点上出现。

## 4. Design Token 三层架构

所有 CSS 必须走三层结构，禁止在组件中硬编码色值：

```
原始层（raw）    →  描述「是什么颜色」     violet-600: #5A4E8C
                       ↓
语义层（semantic） →  描述「做什么用」     --color-primary: var(--violet-600)
                       ↓
组件层（component）→  描述「用在哪个组件」  --button-bg: var(--color-primary)
```

**核心纪律**：
- 原始层色值仅在主题文件出现一次
- 组件代码只允许引用语义层 + 组件层变量
- 换主题 / 做深色模式 = 只改语义层映射，不动组件代码

完整 CSS 变量模板 → `assets/css/variables.css`

## 5. 50-900 色阶生成法

固定色相（Hue）和饱和度（Saturation），只让明度（Lightness）从 **97% 逐级降至 20%**：

```
50  → 97% 明度 → 浅色背景
100 → 90%       → 禁用态、提示底色
200 → 80%       → 边框、分隔线
300 → 70%       → 占位符、次要图标
400 → 60%       → hover 次态
500 → 50%       → 主交互态（深色模式用）
600 → 40%       → 主交互态（浅色模式用）   ← 主色
700 → 30%       → hover 主态
800 → 20%       → 正文深色文字
900 → 15%       → 标题最深色
```

**主色选择公式**：HSL(h, 30%, 50%) → 紫罗兰示例 `#5A4E8C` (h=250°)
- **饱和度建议 30% 左右**——高于 50% 显得廉价，低于 20% 显得寡淡
- **明度 50%** 是品牌色「甜区」——再亮显飘，再暗显沉

## 6. 四套国风配色主题（开箱即用）

| 主题名 | 地色 | 纹色 | 点缀色 | 气质 | 适用场景 |
|--------|------|------|--------|------|---------|
| **青花瓷** | `#F5F5F0` | `#2F4E8F` | — | 清雅素净 | 文化、雅集、传统内容 |
| **朱砂金** | `#F8F1E4` | `#B3402A` | `#C9A063` | 喜庆华贵 | 节庆、婚庆、年度盛典 |
| **黛蓝金** | `#2F3E5C` | `#C9A063` | — | 沉稳高端 | 商务、年报、主视觉 |
| **墨绿金** | `#2E4B3F` | `#D4B483` | — | 自然雅致 | 文化、生态、文创 |

完整 CSS + JSON 主题文件 → `assets/tokens/chinese-style-*.json` 和 `assets/css/chinese-style.css`

切换主题 = 只改 `:root` 与 `[data-theme="..."]` 下的语义层映射，组件代码不动。

## 7. 深色模式正确做法

**错误做法**：把浅色模式颜色直接反相 → 阴影、层级、品牌色全部失真。

**正确做法**：维护两套语义层映射：

```css
:root {
  /* 浅色模式：主色用 600 */
  --color-primary: var(--violet-600);
  --color-bg: var(--violet-50);
}
[data-theme="dark"] {
  /* 深色模式：主色提亮半级到 500（同样紫在深底上更暗，要提亮补偿） */
  --color-primary: var(--violet-500);
  --color-bg: var(--violet-900);
}
```

深色模式三大纪律：
1. **主色提亮半级**（600→500，500→400），因为深色背景同样色相看起来更暗
2. **背景用最深的 900**，正文文字用最浅的 50，明度差至少 9:1
3. **边框颜色要重新选**（浅色模式的 gray-200 在深色模式上几乎看不见，要换 gray-700）

## 8. WCAG 对比度与无障碍（强制门槛）

| 元素 | 最低对比度 | 验证方式 |
|------|-----------|---------|
| 正文文字 | **4.5:1**（AA）/ 7:1（AAA） | Chrome DevTools 取色器直接显示 |
| 大字号（≥18pt 或 14pt 加粗） | **3:1** | 同上 |
| 辅助文字 | **3:1** | 同上 |
| 图形/图标 | **3:1** | 同上 |

**三类高频误区**：
- ❌ 浅灰文字配白底显得「高级」（实际 2:1 阳光下不可读）
- ❌ 彩色文字配彩色背景（红字绿底），色相不同但明度接近时仍看不清
- ❌ 纯白文字配浅色主色按钮（主色 500 级以下压不住白字，要用 600+）

**色盲友好原则**：错误不能只靠颜色区分，必须有图标或文字双重提示。

## 9. 国风纹样体系（30 种话术库）

### 9.1 五大类型

| 类型 | 数量 | 气质 | 适用位置 |
|------|------|------|---------|
| **几何纹** | 7 | 秩序严谨 | 边框、底纹、分隔 |
| **植物纹** | 6 | 生生不息 | 主视觉、封面、点缀 |
| **动物纹** | 6 | 祥瑞灵动 | 局部点睛、品牌符号 |
| **自然天象纹** | 5 | 气象万千 | 背景、留白过渡 |
| **吉祥纹** | 6 | 寓意美好 | 节庆、印章、贺卡 |

### 9.2 五步描述公式（生成纹样的万能模板）

```
第一步·骨架结构：连续回旋藤蔓 / 中心放射对称 / 方形网格 / 波浪主线
第二步·主体元素：纹样名称 + 组成部件的长相与数量
第三步·构成方式：四方连续 / 二方连续 / 单独纹样 / 适合纹样
第四步·色彩：地色 + 主纹色 + 点缀色，注明色值
第五步·风格与用途：朝代或器物风格 + 使用场景
```

完整 30 种纹样描述话术 → `assets/patterns/30-patterns.md`

### 9.3 衍生四法

| 方法 | 原理 | 适用 | 难度 |
|------|------|------|------|
| **换色衍化** | 线稿不动只换色 | 节日限定、联名款 | ★ |
| **骨架重组** | A 骨架 + B 主体 | 系列化设计、主视觉 | ★★ |
| **抽象简化** | 提取辨识度特征做减法 | Logo、极简包装 | ★★ |
| **跨界融合** | 传统 × 现代（像素/赛博/波普） | 潮牌、数字媒体 | ★★★ |

## 10. 与其他 Skill 的协作关系

| Skill | 关系 | 调用方式 |
|-------|------|---------|
| `huashu-book-pdf` | **依赖本 skill** | 橙皮书/PDF生成时引用本skill的配色+纹样+打印规范（references/pdf-design.md） |
| `tencent-pptx` | **互补** | PPT生成时引用本skill的投影配色修正+国风主题+纹样装饰（references/ppt-design.md） |
| `stock-sentiment-cycle` | **可选引用** | 情绪仪表盘的紫罗兰主题来自本skill 50-900色阶 |
| `tencent-docx/doc-typeset` | **设计令牌可借鉴** | 商务/营销主题可选用本skill的chinese-style JSON |
| `tencent-docx/design-token` | **主题源可补充** | chinese-style JSON可作为新genre注册 |
| `cloudstudio-deploy` | **可直接消费** | 部署静态站时引用本skill的variables.css |
| Visualizer（show_widget） | **遵守本规范** | 配色用本skill色阶，主题切换通过CSS变量 |

## 11. 验收清单（按输出类型分三套）

### 附录 A：HTML / Web 验收

| # | 检查项 | 通过标准 |
|---|--------|---------|
| 0 | **一致性** | 全文搜索 `#`，硬编码色值应为0；所有颜色都引用 `--color-*` 变量 |
| 1 | **层级** | 眯眼看页面，最重要信息最醒目；主色面积 ≤ 10% |
| 2 | **对比度** | 正文4.5:1、辅助3:1，用Chrome DevTools抽查5处 |
| 3 | **语义** | 成功/警告/错误符合直觉（绿/黄/红/蓝）；不只靠颜色表达 |
| 4 | **双模式** | 切换深色后阴影、边框、图片观感依然正常 |
| 5 | **纹样接缝** | 四方连续时左右上下接缝处图案能对上 |
| 6 | **响应式** | 窄屏下布局不挤爆，画布全宽 |
| 7 | **WCAG 色盲** | 不只靠颜色传达关键信息，错误有图标/文字双重提示 |

### 附录 B：PPT 验收

| # | 检查项 | 通过标准 |
|---|--------|---------|
| 0 | **投影可读** | 全文字号≥18px；正文对比度≥7:1（补偿投影亮度损失） |
| 1 | **底色安全** | 禁止整页深色底；封面深色块≤60%面积 |
| 2 | **色彩节奏** | Hero页强调色15-20%，Supporting页≤5%；色彩比例不雷同 |
| 3 | **母版一致** | 所有内容页A/B/C三区位置、页脚配色统一 |
| 4 | **饱和度补偿** | PPT用色比Web高10-15%饱和度（投影会"吃色"） |
| 5 | **封面一致性** | DESIGN.md声明的色板在封面和内容页中严格一致 |

### 附录 C：PDF / 橙皮书验收

| # | 检查项 | 通过标准 |
|---|--------|---------|
| 0 | **底色统一** | 全篇正文底色相同（白或同一浅色），翻页不跳跃 |
| 1 | **字色** | 正文用95%黑（#1A1A1A），非纯黑；所有h2/h3颜色统一 |
| 2 | **表格统一** | 表头色/边框色/隔行色全篇一致 |
| 3 | **底纹可见** | SVG纹样opacity≥0.08（打印不会消失） |
| 4 | **封面协调** | 封面/目录/正文/尾页色彩过渡自然，无风格漂移 |
| 5 | **页脚** | 页眉/页脚字体、字号、颜色统一；页码配色一致 |
| 6 | **插图** | SVG已截图为PNG嵌入（避免阅读器不支持） |

## 12. 提示词模板速查

| 任务 | 模板路径 |
|------|---------|
| 让AI生成色彩系统 | `templates/color-design-prompt.md` |
| **让AI生成PPT配色方案（新）** | `templates/ppt-color-prompt.md` |
| 让AI生成国风纹样SVG | `templates/pattern-gen-prompt.md` |
| 让AI搭建网页骨架 | `templates/page-skeleton-prompt.md` |
| 调试/排错万能话术 | `templates/debug-prompt.md` |
| 验收清单（让AI自检） | `templates/acceptance-prompt.md` |

## 13. 视觉红线（不许违反）

1. ❌ 禁止使用纯黑 `#000000` 当正文文字（用 15-25% 明度的深灰）
2. ❌ 禁止使用纯灰 `#808080`、纯红 `#FF0000`、纯蓝 `#0000FF`（视觉廉价）
3. ❌ 禁止大面积高饱和色块（>30% 面积）
4. ❌ 禁止只靠颜色传达信息（色盲不友好）
5. ❌ 禁止组件中硬编码色值（必须走 CSS 变量）
6. ❌ 禁止「好看的紫色」「高级的灰」等模糊形容词出现在提示词

---

## 配套资源索引

| 文件 | 内容 |
|------|------|
| `references/color-system.md` | HSL 色阶、对比度、深色模式细节 |
| `references/chinese-style-themes.md` | 4 套国风配色完整规范与历史出处 |
| `references/pattern-system.md` | 30 种纹样的历史、寓意、话术库 |
| `references/ppt-design.md` | **PPT独有**：投影对比度、Hero/Supporting节奏、母版配色、纹样五用法 |
| `references/pdf-design.md` | **PDF独有**：打印色彩、出血留白、章首页、跨章一致性、封面方案 |
| `references/vibe-prompt-engineering.md` | 提示词工程三要素（参数+结构+禁令） |
| `assets/tokens/violet-default.json` | 紫罗兰主色 50-900 JSON |
| `assets/tokens/chinese-style-{qinghua,zhushajin,daillanjing,molvjin}.json` | 4 套国风主题 JSON |
| `assets/css/variables.css` | 完整三层 Token CSS 模板（可直接复制） |
| `assets/css/chinese-style.css` | 国风样式 class 模板 |
| `assets/patterns/30-patterns.md` | 30 种纹样描述话术库（可整段复制给 AI） |
| `assets/patterns/svg-samples/*.svg` | 关键纹样 SVG 示例 |
| `templates/*.md` | 5 个提示词模板 |

---

**记住**：把色彩变成系统，而不是感觉。