🔬 project-blueprint

AI 前端设计 Skills 选型报告

四阶段对话 · 设计事实 + PlantUML · 3 方案对抗性验证 · 安装验证

🏆 结论：3 个 Anthropic 官方 Skills — frontend-design + theme-factory + pptx

AI 前端设计 Skills 选型报告

方法论：project-blueprint（四阶段对话 + 设计事实 + PlantUML + 对抗性验证）
日期：2026-07-29 · 版本 v1.0

执行摘要

结论：在 Hermes + Claude Code 环境中安装 3 个 Anthropic 官方 Skills（frontend-design、theme-factory、pptx）即可覆盖 PPT 设计、类 PPT HTML、UI 原型三大场景。

经过 project-blueprint 四阶段流程——需求对齐 → 设计事实 + PlantUML → 3 方案对比 + 6 项验收用例对抗性验证 → 安装验证——方案 A（3 Skills）是唯一通过全部验收的选项。50+ 个社区热门 Skills 因功能重叠被剃刀砍掉。

一、项目方法论

本调研遵循 project-blueprint 标准化开发工作流：

三大质量门禁

门禁 检查内容 结果
门禁 1：设计 方案是否从本质目的推导？是否最简？ ✅ 通过
门禁 2：需求匹配 设计方案是否覆盖所有验收用例？ ✅ 方案 A 6/6 通过
门禁 3：实现正确 安装验证 + Playwright 测试 + 部署验证 ✅ 通过

二、设计事实（DESIGN.md 核心摘录）

实体与关系

数据流

用户提出设计需求判断需求类型需求类型?选择 Anthropic pptx skill委派 Claude Code 生成选择 Anthropic frontend-design skillHermes 提供 popular-web-designs 风格参考委派 Claude Code 构建 HTMLHermes 通过 claude-design 澄清需求选择 Anthropic frontend-design skill委派 Claude Code 生成交互原型走 research-deliverable 流水线(内容型页面可降级为 Python markdown)kimi-code 是否可用?可用yesnoClaude Code 生成 HTML/PPTX内容驱动?yesnoPython markdown 库降级构建等待额度恢复Playwright 测试验证测试通过?yesno部署到 Cloudflare Pages返回给用户修复问题重新测试PPTX 原生文件报告/文档PPT 风格 HTMLUI 原型

角色与职责

用户用户Hermes AgentHermes AgentClaude CodeClaude CodeAnthropic Skills(frontend-design)Anthropic Skills(frontend-design)Hermes Skills(popular-web-designs)Hermes Skills(popular-web-designs)Cloudflare PagesCloudflare PagesPlaywrightPlaywright提出设计需求查询风格参考(e.g. Stripe/LINEAR)返回设计 Token用 claude-design 方法论澄清需求、编写 prompt委派任务(prompt + 设计约束)加载 frontend-design设计哲学指导设计原则注入生成 HTML/PPTX返回产出路径运行测试(7项视觉+功能验证)测试结果alt[测试通过]部署公网 URL交付链接 ✅[测试失败]分析失败原因修复重试

核心规则

规则 依据
所有有样式的 HTML/CSS 委派 Claude Code claude-code skill 强制规则
Skills 选择遵循剃刀原理 用户设计哲学
社区和官方重叠时选官方 维护性优先级
额度用完降级为 Python markdown 已验证方案

三、方案对比与选择

候选方案矩阵

维度 方案 A（3 Skills） 方案 B（4 Skills） 方案 C（6 Skills）
Skills frontend-design + theme-factory + pptx A + taste-skill B + frontend-slides + baoyu-design
设计质量 ★★★★ ★★★★★ ★★★★
场景覆盖 ★★★★ ★★★★ ★★★★★
维护成本 ★★★★★ ★★★ ★★
降级方案 ★★★★ ★★★ ★★

验收用例对照

# 验收用例 A B C
1 高质量、非模板化页面设计 ✅ ✅⭐ ✅
2 PPT/HTML/原型三场景覆盖 ✅ ✅ ✅⭐
3 Skill 数量 ≤5（可管理） ✅⭐ 3 ✅ 4 ❌ 6
4 有降级方案（不含 Claude Code） ✅ ✅ ❌
5 不与 Hermes Skills 冲突 ✅ ⚠️ ❌
6 理由清晰可团队分享 ✅ ✅ ❌

结论：方案 A 是唯一通过全部 6 项验收的方案。

为什么不要社区 Skills？

社区 50+ Skills 中，最热门的几个都存在功能重叠：

增加 Skills = 增加冲突风险 + 管理成本 + 上下文消耗。剃刀砍掉全部。

四、安装与验证

已安装的 Skills

Skill 大小 路径 验证
frontend-design 8,260 bytes ~/.claude/skills/frontend-design/SKILL.md ✅ Claude Code 识别
theme-factory 3,124 bytes ~/.claude/skills/theme-factory/SKILL.md ✅ Claude Code 识别
pptx 20,796 bytes ~/.claude/skills/pptx/SKILL.md ✅ Claude Code 识别

Hermes ↔ Claude Code 分工

场景 Hermes 职责 Claude Code 职责
PPTX 原生 选风格 → 写 prompt → 验证 pptx skill 生成 .pptx
PPT 风格 HTML popular-web-designs 选风格 → 写 prompt frontend-design + theme-factory 生成
UI 原型 claude-design 澄清需求 → 3 方案变体 frontend-design 生成交互原型
报告/文档 research-deliverable 流水线 frontend-design 排版

降级方案

场景 Claude Code 可用 不可用
内容驱动 HTML Claude Code + frontend-design Python markdown 库（1 秒，零残留）
创意设计 HTML Claude Code + frontend-design 等待额度恢复
PPTX 原生 Claude Code + pptx python-pptx 库

五、Playwright 测试结果

# 测试项 结果
1 页面加载正常 ✅
2 零 JS 报错 ✅
3 关键章节标题存在 ✅
4 PlantUML SVG 图表渲染 ✅
5 表格完整（无 markdown 残留） ✅
6 移动端 390px 零溢出 ✅
7 桌面端布局正常 ✅
8 SVG 源码无泄漏（PlantUML 专属） ✅
9 导航链接可用 ✅
10 代码块等宽字体 ✅

六、附录

A. 完整评估数据

Skill Stars 方法 推荐？ 原因
Anthropic frontend-design 官方 设计哲学 ✅ 必装 所有 HTML/CSS 设计基础
Anthropic theme-factory 官方 设计 Token ✅ 必装 动态主题生成
Anthropic pptx 官方 程序化生成 ✅ 必装 原生 PPTX
nextlevelbuilder/ui-ux-pro-max 111K UI/UX 引擎 ❌ 与 frontend-design 重叠
Leonxlnx/taste-skill 69K 反 AI-slop ❌ frontend-design 已覆盖
zarazhangrui/frontend-slides 27K HTML 幻灯片 ❌ frontend-design 可处理
JimLiu/baoyu-design 2.9K Claude Design 本地化 ❌ Hermes 已有 claude-design
joeseesun/qiaomu-design 423 58 站设计参考 ❌ popular-web-designs 已覆盖

B. 数据来源

C. 设计图

[流程图 SVG]

[时序图 SVG]