1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | frontend-blueprint（隶属社区技能合集 tech-leads-club/agent-skills 的 (architecture) 分类） |
| 作者/维护者 | Felipe Rodrigues（github.com/felipfr，个人开发者，向该合集贡献本技能） |
| 来源链接 | https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/(architecture)/frontend-blueprint |
| 许可证 | CC-BY-4.0（本技能自身 front matter 明确声明；所属合集仓库整体为 MIT，数据均来自 GitHub API） |
| GitHub Stars | 合集仓库 tech-leads-club/agent-skills 整体 5,020★／Forks 459（数据来自 GitHub API；该数字属整个合集，由 88 个子技能共享，不代表本技能个体热度） |
| 最新版本 | 1.0.0（技能自身 front matter 标注）；该技能路径最近一次提交为 2026-02-23，仓库整体最近一次提交为 2026-08-06 |
| 安装方式 | 官方 CLI 交互式安装向导，或手动复制到对应 Agent 的 skills 目录（见第 10 章） |
2. 功能介绍与亮点
这是一个“先问清楚再动手”的前端设计顾问技能，定位不是代码生成器，而是在生成任何代码之前先系统性收集需求：
- 结构化发现流程：固定走 BRIEFING（理解需求）→ REFERENCES（收集视觉参考）→ DESIGN DIRECTION（确定设计方向）→ [STITCH 原型验证，条件触发] → EXECUTION PLAN（执行计划）→ ATOMIC BUILD（原子化交付）→ REVIEW 七个阶段，明确要求“没有拿到至少一个具体视觉参考或方向前不得进入下一阶段”。
- 拒绝空手生成：核心原则是“用户说’做个落地页’但没给任何参考时，第一反应永远是提问和要参考，而不是直接写代码”——避免因猜测用户意图而返工。
- 可选的 Google Stitch 原型集成：当用户提供不出任何视觉参考、又不使用 Figma/Sketch 等设计工具时，技能会引导生成 Stitch（stitch.withgoogle.com）提示词做低成本可视化验证，支持 MCP 直连或手动粘贴两种模式；此功能为可选加速手段，非必需依赖。
- 原子化交付纪律：要求把项目拆成最小可交付单元，逐个确认后再推进下一个，而非一次性生成整页导致大改。
- 框架无关：明确适用于 React、Vue、Svelte 或纯 HTML/CSS，并附带 4 个完整的场景化示例（新建落地页、组件库设计系统、多屏应用重设计、已有 UI 改版）覆盖不同复杂度下该如何裁剪流程。
3. 适用场景
固定分类：前端与设计
- 全栈开发者懂基础 UI 但不是设计专精人员，需要一个能把模糊想法转成具体设计方向的“设计顾问型”协作对象；
- 团队缺少专职设计师、又不想让 AI 凭空生成千篇一律的界面时，用于在写代码前先对齐视觉方向；
- 需要将已有品牌视觉规范、设计 token、图标风格等约束系统性地代入前端生成流程的场景；
- 对已有界面做改版、但缺乏清晰改进方向，需要先诊断问题再给方案的场景。
4. 跨 Agent 兼容性
- Claude Code：原生支持——官方 README 将 Claude Code 列为 Tier 1（Popular）受支持 Agent，CLI 安装向导可直接选择目标为 Claude Code。
- Codex：原生支持——官方 README 将 OpenAI Codex 列为 Tier 2（Rising）受支持 Agent，CLI 安装向导可选择安装目标为 Codex。
- OpenClaw：未验证——官方支持列表（Tier 1/2/3 共 18 个 Agent）未点名 OpenClaw；技能本体为标准 SKILL.md 格式，理论上可手动复制安装，但缺乏官方验证。
- Hermes Agent：未验证——同上，官方材料未点名提及。
5. 推荐理由
多数前端生成类技能拿到一句模糊需求就直接开始写代码，返工成本往往在交付后才暴露。frontend-blueprint 把“先弄清楚要什么”做成了强制流程而不是可选建议——固定的七阶段推进、“没有参考不推进”的硬性门槛、以及可选的 Stitch 快速原型验证，共同把返工风险前移到了开始写代码之前。对于团队里没有专职设计师、又不满足于千篇一律 AI 生成界面的开发者，这是一个能显著提高首版命中率的协作流程，而非又一个“给个提示词就出页面”的生成器。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 5 | 未查得该技能自身的独立第三方评价、采用数据或社区讨论（GitHub 对该路径无专门 PR/Issue 讨论）；作者为个人开发者；所属合集仓库整体 5,020★／Forks 459，是 88 个子技能共享的数字，不代表本技能个体热度 |
| 可用性 | 8 | 单文件即完整可用，流程结构清晰、含 4 个完整场景化示例与明确的“不适用场景”边界；框架无关、无强制付费依赖，可选的 Stitch 集成有手动粘贴与 MCP 两种模式；该路径最近一次提交为 2026-02-23（距今约半年），仓库整体持续活跃维护 |
| 安全性 | 9 | 见下方检查清单 |
安全检查清单： ① Shell 命令执行——纯提示词/流程指导类技能，不含任何需要执行的脚本或 Shell 命令； ② 联网外发——技能本身不发起网络请求，仅在用户明确选择“无参考且需要原型验证”这一条件分支时，引导用户手动前往公开工具 stitch.withgoogle.com 或通过用户自行配置的 Stitch MCP 连接使用，均为用户主动发起、目标透明； ③ API Key/凭据处理——不涉及；文档提及“如使用 Stitch MCP 需按官方文档配置 API Key”仅为第三方工具的常规配置说明，技能本身不收集或存储任何凭据； ④ 可疑指令——通读全文（含 references 目录三份参考文档）未见提示词注入、混淆代码或隐蔽外发迹象； ⑤ 作者信誉——个人开发者，未见刷星或 SEO 操纵等造假迹象； ⑥ License——CC-BY-4.0，技能自身 front matter 明确声明； ⑦ 维护时间——该路径最近一次提交为 2026-02-23，仓库整体持续活跃维护（最近一次提交 2026-08-06）。
综合评分（三项均值）：7.33
7. 跟同类 Skills 相比的优势
| 同类方案 | 定位 | 与本 skill 的差异 |
|---|---|---|
| frontend-design（Anthropic 官方出品） | 直接生成具有独特美学方向、避免“AI 通用脸”的高质量前端界面代码 | 假设需求已基本明确，聚焦“怎么做出好看的实现”；不强制前置的需求发现与参考收集流程，更适合已有清晰方向、只缺执行的场景 |
| web-design-guidelines（Vercel 官方出品） | 审查已有 UI 代码是否符合 Web Interface Guidelines，输出 file:line 级别的问题清单 | 是事后审查工具而非事前设计流程，面向“代码已经写好，检查有没有问题”，与 frontend-blueprint 面向“代码还没写，先理清方向”互补而非替代 |
| figma（源自 OpenAI 官方技能目录） | 通过 Figma MCP 抓取既有设计稿的结构化数据并转译为代码 | 前提是用户已有 Figma 设计文件；frontend-blueprint 恰恰覆盖了“完全没有设计稿、需要从零收集视觉方向”这一前置阶段，可视为其上游步骤 |
8. 用户评价
该技能目前在第三方平台尚无具名用户评价；本技能所属的 tech-leads-club/agent-skills 合集在部分第三方 AI 技能目录站（如 Tessl Registry）有结构化质量评分收录，但该类收录为目录站自动生成的索引信息，不构成具名用户评价。
9. 其他补充
技能自身在 front matter 中单独声明 CC-BY-4.0 许可证，与所属合集仓库整体的 MIT 许可证不同——这是该合集允许贡献者为自己提交的技能单独署名与选择许可证的结果，两者均为明确的开源许可证，不构成冲突。
10. 安装使用方式
官方 CLI（推荐，跨 Agent 通用）：
npx @tech-leads-club/agent-skills运行后按交互向导依次选择“Install skills”→ 搜索或按分类筛选找到 frontend-blueprint→ 选择目标 Agent（Claude Code / Codex 等）→ 选择 Copy 或 Symlink 安装方式→ 选择 Global 或 Local 安装范围。
手动安装（适用于任意遵循 Agent Skills 标准的工具）：
git clone https://github.com/tech-leads-club/agent-skills.git
cp -r "agent-skills/packages/skills-catalog/skills/(architecture)/frontend-blueprint" ~/.agents/skills/安装后无需重启会话；技能在检测到“build me a UI”“design a page”“redesign this”“前端界面/落地页/组件/仪表盘构建或改版”等相关需求时被动触发，也可直接通过技能名手动调用。若需使用可选的 Stitch 原型验证功能，需额外自行配置 Stitch MCP 或手动前往 stitch.withgoogle.com。
11. 注意事项
- 该技能是流程型顾问技能而非纯代码生成器，会主动通过提问收集需求，不适合“只想要一段代码、不想被反复追问”的快速原型场景；
- Stitch 原型验证为条件触发的可选环节，非该技能运行的必需前提，缺少该工具时技能会自动跳过该阶段直接进入执行计划；
- 技能内容随所属合集仓库整体更新，无法单独追踪该技能自身的版本变更历史；
- 官方 README 声明所属合集经 Snyk Agent Scan 静态扫描与人工审核后发布，但该扫描针对合集整体流程，不构成对本技能内容的额外背书。