它能解决什么问题
传统原型工具（Figma、Axure）产出的是静态图片—— stakeholders 看到的是"画"，不是"体验"。这个 skill 让 PM 能直接产出可运行的高保真 HTML 原型，点击、滚动、动效都是真实的。
怎么用
安装 skill
把下面代码块里的内容直接复制发给 agent（claude code、codex、cursor 、trae 等），agent 会自动完成安装
安装以下 skill：
https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md基础用法
PM 实际使用场景
1. 需求沟通：用"可交互原型"替代 PRD 文字描述
与其写"首页需要一个卡片式的功能入口，点击有展开动效"，不如直接生成一个可点击的原型给开发看。
示例 prompt：
做一个金融App的首页，用户是30-45岁的中产，需要展示：资产总览卡片、快捷功能入口（转账/理财/缴费）、最近交易列表。风格要稳重有质感，像高端银行的感觉。
Skill 会自动选择偏奢侈品/精致的字体和配色，生成一个可以直接在浏览器打开的 HTML。
2. 竞品分析：快速复刻 + 改进
看到竞品某个页面设计好，想快速做一个"我们的版本"来对比讨论。
示例 prompt：
参考 Apple Health 的数据仪表盘风格，但改用暗色主题，做一个运动数据概览页。需要展示：今日步数、心率曲线、睡眠质量、周运动趋势。数据用 mock 数据填充。
Skill 的"反 AI 美学"机制会避免生成千篇一律的样子，每次都会给出不同风格方向。
3. 用户访谈：带动效的 stimuli 比线框图更有效
做用户测试时，有真实过渡动画和微交互的 prototype 能收集到更真实的反馈，因为用户能"感受到"产品，而不只是在脑补。
示例 prompt：
做一个外卖App的点餐流程原型，3个页面：商家列表 → 商家详情 → 下单确认。页面之间要有流畅的过渡动画，卡片悬浮有微交互，加载时有骨架屏效果。
4. 方案对比：一次生成多个视觉方向
Skill 强调"每次生成都不同"，PM 可以反复生成同一需求的不同风格版本来做 A/B 对比。
第一轮：
做一个知识付费App的课程列表页，用温暖文艺的杂志风。
第二轮（换风格）：
同样的课程列表页，改用极简科技感的暗色风格。
5. 跨部门对齐：给设计和开发一个"方向锚点"
PM 先用 skill 生成一个有明确美学方向的 prototype，然后拿给设计师说"我要这个调性"，给开发说"交互要这个感觉"。比口头描述精确一个量级。
PM 用这个 skill 的实际工作流
需求输入 → 用自然语言描述页面/功能
↓
Claude + frontend-design skill → 生成可运行的 HTML 文件
↓
浏览器打开 → 体验真实交互和动效
↓
基于体验反馈 → 迭代 prompt，调整方向
↓
最终版原型 → 给设计/开发/用户测试用局限性（PM 需要知道的）
| 局限 | 说明 |
|---|---|
| 没有真实数据 | 生成的是 mock 数据，不能对接真实 API |
| 不是最终代码 | 产出是原型，不是生产代码，开发仍需重新实现 |
| 复杂交互有限 | 表单验证、状态管理、多步骤流程等复杂逻辑支持有限 |
| 一致性靠 prompt | 多页面的设计系统一致性需要 PM 在 prompt 中明确指定 |
| 无法直接改图 | 不像 Figma 可以拖拽微调，修改要靠重新描述 |
给 PM 的实用建议
- prompt 中明确说明用途："这是一个给用户测试的 prototype" 或 "这是给设计团队的方向参考"，让 skill 知道要什么精度
- 指定目标受众：skill 会根据受众选择合适的美学方向
- 先粗后细：第一轮只定风格方向，确认后再加功能和细节
- 把生成的 HTML 存下来：每次迭代保存不同版本，方便对比回顾
Skill 设计理念
"Bold maximalism and refined minimalism both work — the key is intentionality, not intensity."
核心理念是有意为之——不管是极繁还是极简，关键是审美的精准执行，而非盲目堆砌。
Skill 会主动避免：
- 泛用字体（Inter / Roboto / Arial）
- AI 味配色（紫白渐变）
- 千篇一律的布局
- 多次生成收敛到相同风格
一句话总结：这个 skill 把 PM 从"画原型"升级到了"生成可体验的原型"——用自然语言描述需求，直接得到一个能在浏览器里点、滑、看的真实界面，比静态线框图和文字 PRD 都更有效地传递产品意图。
