brainstorming
OBobra/superpowers298k2,631 new stars in the last 7 days
design-prototype
Frontend UI prototype workflow — clarify intent, explore directions, preview across viewports, diff against references, deliver with screenshot evidence
- Star
- 1,104
- Category
- Requirements & planning
- License
- Apache-2.0
- Last commit
- Oct 13, 2026
plugins/design/skills/design-prototype/SKILL.md
View on GitHubDesign Prototype（前端设计原型）
对标 Codex Product Design 插件的方法论，适配天枢交付纪律。
工作流
1. 意图澄清（单问约束）
开始动手前，若以下任一项不明，只问一个最关键的问题：
- 目标用户与核心动作（注册？购买？浏览？）
- 品牌调性（极简 / 企业 / playful / 暗色）
- 有无参考（竞品截图、Figma 链接描述、色板）
不要一次抛多个选择题。
2. 探索 2–3 个视觉方向
每个方向输出单文件 HTML 原型：
- 内联 CSS（无构建步骤，即开即预览）
- 语义化 HTML + 基础可访问性（label、alt、focus 可见）
- 真实文案占位（不用 lorem 堆砌——用场景化假数据）
- 移动端优先，desktop 用 media query 扩展
文件命名：prototype-{direction}.html（如 prototype-minimal.html）
3. 多视口自检（必做）
每个方向完成后：
ui_preview— mobile / tablet / desktop 三视口截图ui_responsive_audit— 抓横向溢出、过小点击区、过小字号
有问题先修 HTML，再进入下一步。不要带着 overflow 交付。
4. 参考对齐（有 mockup 时）
用户提供参考图或竞品截图时：
ui_palette— 从参考图提取色板，写入 CSS variables- 实现后
ui_diff— 与参考/mockup 像素对比，目标 mismatch < 5% - mismatch > 5% 必须迭代，不能口头说「差不多」
5. 交付纪律（复现即证明）
交付设计任务时必须附带：
- 至少一组三视口
ui_preview截图路径 ui_responsive_audit结果（零 high 级 issue，或明确列出已知遗留）- 若有参考：最新
ui_diffmismatch 百分比
口头描述「已经 responsive 了」不算交付。
工具速查
| 工具 | 何时用 |
|---|---|
ui_preview | HTML/URL → 多视口 PNG |
ui_diff | 实现 vs 参考 mockup |
ui_palette | 参考图 → CSS/Tailwind tokens |
ui_responsive_audit | 布局问题清单 + 截图 |
反模式
- 不要跳过 preview 直接改 CSS 猜效果
- 不要用
<table>做整页布局（2020 年代前的 hack） - 不要在未装
tianshu-design插件时会话里调用上述工具——先/plugin install或让用户安装 - Chrome 未安装时工具会返回明确错误；提示用户安装 Chrome 或设置
CHROME_PATH
Similar Skills
diagnosing-superpowers
OBobra/superpowers298k2,631 new stars in the last 7 days
dispatching-parallel-agents
OBobra/superpowers298k2,631 new stars in the last 7 days
using-superpowers
OBobra/superpowers298k2,631 new stars in the last 7 days
executing-plans
OBobra/superpowers298k2,631 new stars in the last 7 days
loop-me
MAmattpocock/skills288k10,178 new stars in the last 7 days