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；不必单独搜色彩或纹样手册。

Zur Installation springen

Repository: huangrichao2020/how-to-agent
Letzte Quellaktivität: 12. August 2026 um 12:09
Erkannte Sprache von SKILL.md: Chinesisch
Sterne: 0
Forks: 0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

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.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/huangrichao2020/how-to-agent --skill vibe-ui-methodology

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

VibeCoding UI 视觉设计方法论

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

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

原则

来源

一句话

配色成系统而非凭感觉

色彩手册

1 主色阶 + 4 语义色 + 1 中性色 ≈ 60 个色值，撑起 100% 界面

VibeCoding UI 视觉设计方法论

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

原则

来源

一句话

配色成系统而非凭感觉

色彩手册

1 主色阶 + 4 语义色 + 1 中性色 ≈ 60 个色值，撑起 100% 界面

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

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

维度	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 主题	浅色版（青花>朱砂金>黛蓝/墨绿浅色版）	全部（青花最佳）

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

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

vibe-ui-methodology

Installationsoptionen

Quelldateien prüfen

VibeCoding UI 视觉设计方法论

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

VibeCoding UI 视觉设计方法论

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

2. 调用决策树

3. 三大场景速查

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

4. Design Token 三层架构

5. 50-900 色阶生成法

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

7. 深色模式正确做法

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

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

9.1 五大类型

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

9.3 衍生四法

10. 与其他 Skill 的协作关系

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

附录 A：HTML / Web 验收

附录 B：PPT 验收

附录 C：PDF / 橙皮书验收

12. 提示词模板速查

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

配套资源索引

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

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

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

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变量

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

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

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

任务	模板路径
让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`

文件	内容
`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 个提示词模板

vibe-ui-methodology

Quellinformationen

Installationsoptionen

Quelldateien prüfen

VibeCoding UI 视觉设计方法论

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

VibeCoding UI 视觉设计方法论

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

2. 调用决策树

3. 三大场景速查

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

4. Design Token 三层架构

5. 50-900 色阶生成法

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

7. 深色模式正确做法

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

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

9.1 五大类型

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

9.3 衍生四法

10. 与其他 Skill 的协作关系

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

附录 A：HTML / Web 验收

附录 B：PPT 验收

附录 C：PDF / 橙皮书验收

12. 提示词模板速查

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

配套资源索引