| name | vibe-ui-methodology |
| description | 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；不必单独搜色彩或纹样手册。
|
| agent_created | true |
| tags | ["ui-methodology","color-system","design-token","chinese-style","patterns","html","css","vibe-coding"] |
| version | 1.0.0 |
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. 深色模式正确做法
错误做法：把浅色模式颜色直接反相 → 阴影、层级、品牌色全部失真。
正确做法：维护两套语义层映射：
:root {
--color-primary: var(--violet-600);
--color-bg: var(--violet-50);
}
[data-theme="dark"] {
--color-primary: var(--violet-500);
--color-bg: var(--violet-900);
}
深色模式三大纪律：
- 主色提亮半级（600→500，500→400），因为深色背景同样色相看起来更暗
- 背景用最深的 900，正文文字用最浅的 50，明度差至少 9:1
- 边框颜色要重新选（浅色模式的 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. 视觉红线（不许违反）
- ❌ 禁止使用纯黑
#000000 当正文文字（用 15-25% 明度的深灰）
- ❌ 禁止使用纯灰
#808080、纯红 #FF0000、纯蓝 #0000FF（视觉廉价）
- ❌ 禁止大面积高饱和色块（>30% 面积）
- ❌ 禁止只靠颜色传达信息（色盲不友好）
- ❌ 禁止组件中硬编码色值（必须走 CSS 变量）
- ❌ 禁止「好看的紫色」「高级的灰」等模糊形容词出现在提示词
配套资源索引
| 文件 | 内容 |
|---|
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 个提示词模板 |
记住：把色彩变成系统，而不是感觉。
