AI 前端设计 Skills 调研报告

调研日期：2026-07-29 | 方法论：第一性原理 + 对抗性验证

执行摘要

核心结论：在 Hermes + Claude Code 环境中，只需安装 3 个 Anthropic 官方 Skills（frontend-design、theme-factory、pptx）即可覆盖 PPT 设计、类 PPT HTML 设计、UI 原型设计三大场景。 所有设计任务应委派给 Claude Code 执行，Hermes 负责需求理解、设计约束传递和质量验证。

为什么不是社区方案？ 社区热门 Skills（taste-skill 68K⭐、ui-ux-pro-max-skill 111K⭐）解决的核心痛点——"反 AI-slop"——已被 Anthropic 官方 frontend-design skill 在设计哲学层面覆盖。添加更多社区 Skills 会增加冲突风险和管理成本，违反剃刀原理。

一、调研方法

1.1 搜索范围

1.2 评估维度

每个候选方案从五个维度评分（★1-5）：

• 设计质量：输出是否"不像 AI 生成的"、是否有辨识度
• 场景覆盖：PPT / HTML 页面 / UI 原型的覆盖范围
• Claude Code 兼容性：是否能在 claude -p 模式下可靠工作
• 维护成本：更新频率、依赖复杂度、与 Hermes 现有 Skills 的冲突风险
• 社区验证：Stars、Issue 活跃度、实际使用案例

二、候选方案全景

2.1 Anthropic 官方 6 个设计 Skills

* frontend-design 不生成 .pptx，但可生成 PPT 风格的 HTML 演示文稿（效果优于原生 PPT）。

2.2 社区 Top 10 Skills（按 Stars）

三、第一性原理分析

3.1 根本问题拆解

用户说"我需要页面设计能力"。拆解：

最终目的：当我有一个想法/内容需要以视觉形式呈现时，能以最低的认知成本获得高质量、有辨识度的设计输出。

拆解为三个子问题：

1. 质量：输出不能看起来像 AI 生成的套模板产物（"紫色渐变+圆角+特定无衬线字体"）
2. 速度：从需求到可用产出的时间要短
3. 可维护：Skills 管理不能成为新的负担

3.2 能力需求矩阵

3.3 "Hermes 自己做 vs 委派 Claude Code"决策树

设计任务?
├── 纯文本/Markdown（无样式要求）→ Hermes write_file ✅
├── 有样式要求的 HTML/CSS/PPTX → 委派 Claude Code ✅
│   └── 原因：claude-code skill 明确规则——"any HTML/CSS with
│       real design is a coding task — do NOT hand-write it"
└── 需求不明确的大型设计 → Hermes 先用 claude-design 做需求澄清
    └── 然后委派 Claude Code 实现

关键洞察：Hermes 不负责"做设计"——它负责"理解需求、选择 Skill、传递约束、验证结果"。设计执行永远是 Claude Code 的职责。

3.4 剃刀原理：为什么只选 3 个 Skills

候选池有 50+ 个社区 Skills，但：

1. taste-skill (68K⭐)：核心是"反 AI-slop 品味指南"。但 Anthropic 官方 frontend-design skill 已经在设计哲学层面解决了同样的问题——"有辨识度、非模板化"。这是功能重叠，应该砍掉。

2. baoyu-design (2.8K⭐)：是 Claude Design 的本地化移植。Hermes 已有 claude-design skill（同样源自 Claude Design），Claude Code 中不需要重复安装。

3. qiaomu-design (423⭐)：58 站设计系统参考。Hermes 已有 popular-web-designs（54 站设计系统），功能完全重叠。

4. frontend-slides (26K⭐)：HTML 幻灯片。frontend-design skill 已能处理幻灯片布局。额外安装增加冲突风险。

5. ui-ux-pro-max-skill (111K⭐)："全栈 UI/UX 引擎"。过于庞大，与 frontend-design 功能大面积重叠，且增加 Claude Code 上下文消耗。

结论：3 个 Anthropic 官方 Skills = 最小充分集。每个 Skill 做一件社区 Skills 做不到的事：
- frontend-design：设计哲学（社区 Skills 给规则，官方给原则——原则比规则更普适）
- theme-factory：动态主题生成（社区 Skills 给固定主题列表）
- pptx：原生 PPTX（社区方案质量参差不齐）

四、对抗性验证

4.1 攻击一：「3 个 Skills 太少，遇到复杂需求怎么办？」

攻击：如果用户要做一个"像 Stripe 官网那样精致的登录页 + 注册流程原型 + 配套的 PPT 汇报材料"——3 个 Skills 够吗？

防御：
- 登录页+注册原型 → frontend-design skill 就是为此设计的（它的命名已经说明了一切）
- 配套 PPT → pptx skill 直接生成 .pptx
- 风格参考 → Hermes 的 popular-web-designs skill 提供 Stripe 的完整设计 Token（配色、字体、间距、组件），通过 prompt 传递给 Claude Code
- 关键是 prompt 质量，不是 Skills 数量。HN 社区验证：给 Claude"感染力（evocative）的原则描述"优于"具体的规则清单"

4.2 攻击二：「kimi-code 月度额度有限，不够怎么办？」

攻击：Claude Code 通过 kimi-code 运行，有月度限额。大量设计任务会快速消耗额度。

防御（已验证的降级方案）：
1. Python markdown 库全量构建：对于内容驱动的 HTML（报告、文档），markdown 库 + 预置 CSS 模板在 1 秒内完成，零残留，0 token 消耗
2. patch 模式增量更新：对于已有 HTML 的小改动（新增章节、修正数据），用 patch 工具直接操作 HTML，不消耗 Claude Code 额度
3. 额度恢复后的 session 续接：用户说"额度重置了继续吧"时，先确认当前线程对应的项目再继续

结论：设计任务并不都需要 Claude Code。内容驱动的页面用 Python 方案，只有需要创意设计判断的任务（新品牌风格、复杂交互原型）才用 Claude Code。

4.3 攻击三：「Anthropic 官方 Skills 可能不适用于 kimi-code？」

攻击：Claude Code 的 frontend-design skill 是为 Claude 模型设计的，但实际运行在 kimi-code 后端上。Skill 中的设计原则对 Kimi 模型是否同样有效？

防御：
- frontend-design skill 使用的是设计哲学指导（"不要看起来像模板化的 AI 产品"），而非模型特定的指令
- HN 社区验证：这种"感染力原则"方式对所有 LLM 都有效——因为它在引导模型的创意方向，而非规定具体输出
- 如果 kimi-code 效果不理想，可以通过 Hermes 的 prompt 补充风格约束（从 popular-web-designs 获取具体 Token）
- 对抗措施：每次重要交付后运行 Playwright 测试 + 视觉验证，如果质量不达标，在 prompt 中加强约束

4.4 攻击四：「Hermes 已有 claude-design 和 popular-web-designs——为什么还需要在 Claude Code 里装 Skills？」

攻击：如果 Hermes 侧已经能提供设计流程和设计 Token，为什么还要在 Claude Code 里安装 Skills？把约束写进 prompt 不就行了吗？

防御：
- popular-web-designs 提供的是"可以参考的视觉词汇表"，但 Claude Code 需要 frontend-design skill 来知道如何运用这些词汇做出好设计
- 类比：popular-web-designs = 色卡和字体表，frontend-design = 设计师的眼和手。只有色卡做不出好设计
- 验证数据：research-deliverable 实践已证明——即使没有安装 frontend-design，Claude Code 也能生成 HTML，但用户多次反馈"排版太差，用 Claude Code 来搞吧"，说明需要设计指导
- 反过来：如果只装 frontend-design 而没有 popular-web-designs，Claude Code 只能用默认品味（已有用户报告 Claude 偏好"暖色调+赤陶色"），需要外部输入来打破模式

两者互补，缺一不可。

4.5 攻击五：「管理多个项目的 .claude/skills/ 会不会混乱？」

攻击：不同项目可能需要不同 Skills，多项目并行时 .claude/skills/ 的管理会不会变成负担？

防御：
- 当前推荐的 3 个 Skills 是通用基础设施——每个项目都需要好的设计，不存在"项目 A 需要 frontend-design，项目 B 不需要"的情况
- 安装一次到用户级 ~/.claude/skills/，所有项目共享
- 项目级如有特殊需求，用 --agents 或 --mcp-config 临时覆盖

五、最终方案

5.1 Skills 安装清单

5.2 场景→执行映射

5.3 降级方案（kimi-code 额度用完时）

六、实施行动清单

• [x] 第一步：确认 Claude Code 的 Skills 安装目录（~/.claude/skills/ vs .claude/skills/）
• [ ] 第二步：安装 3 个 Anthropic 官方 Skills 到 Claude Code
• [ ] 第三步：做一个端到端验证——"把这篇调研报告本身重新设计成 Stripe 风格的 PPT 演示文稿"
• [ ] 第四步：将本报告部署到 Cloudflare Pages 作为参考文档

附录：完整数据源

A. Anthropic 官方 Skills

B. 社区 Skills 速查表（Top 15）

C. HN 社区关键洞察

1. AI 设计"恐怖谷"：当前 AI 设计工具输出过于可预测——紫色渐变、圆角、特定无衬线字体。社区共识：Claude 的"原则性+感染力"描述法是目前最有效的破解方式。

2. 工具三角定位：

3. v0 / Bolt / Lovable → 0→1 快速原型
4. Cursor → 已有代码库持续开发

5. Claude + Skills → 创意设计+设计原则指导

6. Playwright MCP 自动化视觉迭代：多位 HN 用户推荐用 Playwright 自动截图→分析→反馈实现闭环设计迭代。