设计师别再开 Figma 改稿了,这个 Claude Skill 一句话给你 5 套交互方案

还在为产品改版纠结方案？设计师反复出图、PM 改需求、再来一轮评审——三天过去了，定稿还在天上飞。

最近挖到一个 Claude Code 设计 Skill，把这个死循环直接干碎：/wireframe 一句话下去，5 套方案并排摆好，黑白稿先出，40 秒就能看见，再让 5 个 agent 并行上色做精修，全程 HTML 跑在浏览器里，能点能交互。

这玩意儿叫 claude-wireframe-skill，GitHub 上 71 star，最近一周涨得很猛。它的核心打法很有意思——Phase 1 先全出黑白线稿，40-60 秒给你 5 种 UX 思路（1 个稳健派 + 4 个探索派），覆盖渐进式披露、Dashboard 优先、向导分步、Hub-and-Spoke、分屏对比、卡片瀑布、对话式、看板、时间线、搜索优先……基本上产品交互的主流范式全列齐了；Phase 2 再上色，每个方案有 Wireframe / Clean / Polished 三档，对应扁平色、加渐变阴影、加微动效，5 个 sub-agent 并行写 CSS，主打一个”看完一桌菜随便挑”。

最戳我的是它会先学你家的设计语言——首次运行扫描你 CSS、JS、模板文件，再让你丢 2-3 张当前界面截图，建一份 design-context.md 持久化。下次再 /wireframe，直接加载上下文，不会再问”你家按钮什么圆角”这种蠢问题。优化目标也能从 prompt 里抠：你说”提高转化”、说”减少视觉杂乱”，它会自动映射到对应的方案权重上。

输出结构也很产品化——wireframe/<feature-name>/ 下一个 index.html + 5 份样式表，外加一张评分表 + 推荐方案汇总。打开 index.html 就是个内嵌浏览器框架的演示场，工作表、accordion、hover 全能点，不是那种静态截图骗人的把戏。MIT 协议，安装就一行 git clone 到 ~/.claude/skills/wireframe/。

一句话总结：它把”wireframe 设计探索”这件最吃时间的活儿，从几天压缩到一杯咖啡。 适合产品早期想快速 A/B 多个交互方案、独立开发者要 demo 给投资人看、设计 sprint 里要打破定势思维的团队。

GitHub: https://github.com/Magdoub/claude-wireframe-skill

GitHub: https://github.com/Magdoub/claude-wireframe-skill