An idea is always perfect while it stays in your head; you only know if it works once you build it. The goal of a rapid prototype is not perfection, but quickly validating "whether this path is viable."
Use Cases
| Scenario | Example |
|---|---|
| Validate interaction | "How does this drag-and-drop sorting experience feel?" |
| Compare options | "Which is better, layout A or layout B?" |
| Demonstrate an idea | "Show the boss roughly what it will look like" |
| Technical feasibility | "Can CSS Grid implement this layout?" |
| Data visualization | "What kind of chart is suitable for displaying this batch of data?" |
Execution Flow
收到原型请求
│
├─ 1. 快速确认（≤3 个问题）
│ - 要验证什么？
│ - 核心交互是什么？
│ - 用真实数据还是 mock 数据？
│
├─ 2. 直接写代码
│ - 单个 HTML 文件，内联 CSS + JS
│ - 不用框架，原生 HTML/CSS/JS
│ - 可引入 CDN 资源（Tailwind、图表库等）
│
├─ 3. 打开预览
│ - open 命令在浏览器中打开
│
└─ 4. 迭代
- 用户看完反馈 → 立即修改 → 重新预览
- 快速迭代，不纠结细节
Prototype Standards
Technical Requirements
- Single file: one HTML file does it all, with all CSS and JS inlined
- Zero build: no npm install, no compilation, open directly in the browser
- CDN available: when libraries are needed, import them from a CDN (Tailwind, Chart.js, Sortable.js, etc.)
- Real data: use sample data close to real data, not lorem ipsum
Storage Location
docs/prototypes/<名称>-prototype.html
A prototype is a temporary output and can be deleted after validation is complete. If the user decides to proceed with formal development, the prototype is kept as a reference.
Quality Standards
| What to focus on | What not to focus on |
|---|---|
| Core interactions work properly | Pixel-perfect |
| Information structure and hierarchy are correct | Animations and transition effects |
| Data close to real data | Responsive adaptation |
| The browser can open it properly | Code quality and reusability |
| Key states are all visible | Edge case handling |
Commonly Used CDN Resources
| Purpose | Library | CDN |
|---|---|---|
| Quick styling | Tailwind CSS | https://cdn.tailwindcss.com |
| Charts | Chart.js | https://cdn.jsdelivr.net/npm/chart.js |
| Drag-and-drop sorting | Sortable.js | https://cdn.jsdelivr.net/npm/sortablejs |
| Icons | Lucide Icons | https://unpkg.com/lucide@latest |
| Date handling | Day.js | https://cdn.jsdelivr.net/npm/dayjs |
| Data tables | AG Grid | https://cdn.jsdelivr.net/npm/ag-grid-community |
Relationship with Other Skills
想法/灵感 → rapid-prototype（快速验证）
│
├─ 验证通过 → task-start（正式立项开发）
└─ 验证不通过 → 换方案重试 / 放弃
rapid-prototype vs task-start's UI prototype：
- rapid-prototype: used independently, can be triggered at any time, with the goal of "quickly seeing the effect"
- task-start UI prototype: a step in the process, with the goal of "entering solution design after confirming the UI direction"
- The two can connect: first use rapid-prototype to quickly try several options, then formally confirm the selected one in task-start