Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add huangrichao2020/pretty-skills --skill vibe-ui-methodologygit clone --depth 1 https://github.com/huangrichao2020/pretty-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/huangrichao2020/pretty-skills/vibe-ui-methodology)<a href="https://agentmods.dev/skills/huangrichao2020/pretty-skills/vibe-ui-methodology"><img src="https://agentmods.dev/badge/skills/huangrichao2020/pretty-skills/vibe-ui-methodology/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/huangrichao2020/pretty-skills/vibe-ui-methodology"><img src="https://agentmods.dev/badge/skills/huangrichao2020/pretty-skills/vibe-ui-methodology.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00401 | $0.05283 |
| Opus 5.5 | $0.00160 | $0.02113 |
| Sonnet 5 | $0.00080 | $0.01057 |
| Haiku 4.5 | $0.00040 | $0.00528 |
Grade A, and why
vibe-ui-methodology scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 15d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 309 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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% | 强调色 | 关键行动点 | 主按钮、链接、关键数据、当前状态 |
What ships with it
25 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- content.md 8.0 KB
- images/p0.png 1714 KB
- images/p1.png 1660 KB
- images/p2.png 1706 KB
- images/p3.png 1700 KB
- images/p4.png 1703 KB
- images/p5.png 1641 KB
- images/p6.png 1736 KB
- manifest.json 1.4 KB
- README.md 1.1 KB
- VibeCoding视觉设计方法论讲解.pdf 668 KB
- web.html 5.2 KB
- 锦绣/cover-横屏.png 1711 KB
- 锦绣/cover-竖屏.png 1700 KB
- 锦绣/readme.md 2.8 KB
- 锦绣/slides/s0.png 1714 KB
- 锦绣/slides/s1.png 1705 KB
- 锦绣/slides/s2.png 1705 KB
- 锦绣/slides/s3.png 1698 KB
- 锦绣/slides/s4.png 1694 KB
- 锦绣/slides/s5.png 1700 KB
- 锦绣/slides/s6.png 1686 KB
- 锦绣/slides/s7.png 1704 KB
- 锦绣/slides/s8.png 1698 KB
- 锦绣/slides/s9.png 1712 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 15d ago First seen · 309 lines · 401 tokens per session scan A 0915173de690
vibe-ui-methodology is a skill published in the GitHub repository huangrichao2020/pretty-skills (54 stars, last pushed 15d ago), licensed MIT. It adds 401 tokens to every session and 5,283 once invoked, about $0.0016 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-14.
Other skills, from other repositories
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
popular-web-designs
54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.
popular-web-designs
54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.
creative-popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.