Vibe Ui Methodology

VibeCoding UI 视觉设计方法论

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

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

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

2. 调用决策树

Copy code
要生成可视化输出？
│
├─► 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. 三大场景速查

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

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

4. Design Token 三层架构

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

Copy code
原始层（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%：

Copy code
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. 四套国风配色主题（开箱即用）

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

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

7. 深色模式正确做法

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

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

cssCopy code
: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 对比度与无障碍（强制门槛）

三类高频误区：

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

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

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

9.1 五大类型

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

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

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

9.3 衍生四法

10. 与其他 Skill 的协作关系

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

附录 A：HTML / Web 验收

附录 B：PPT 验收

附录 C：PDF / 橙皮书验收

12. 提示词模板速查

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

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

配套资源索引

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