# Make A Prototype

> 制作具有真实状态、导航、输入、校验、加载和成功或失败反馈的可点击原型，而不是把静态截图简单串联。用户要求“做原型”“做 Mockup”“做交互 Demo”“make it interactive”或需要验证一段产品流程时使用；连接真实后端、账户或付费服务必须另行获得授权。

- Skill: `onevium/make-a-prototype` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add onevium/make-a-prototype`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onevium/make-a-prototype/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT. See LICENSE.txt for full terms.
- Author: Onevium (https://skillmd.com/u/onevium)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onevium/make-a-prototype

---


# 制作可交互原型

原型用于验证流程和反馈，因此关键路径必须真的可操作。默认使用本地、可逆的模拟状态，不把“原型”理解为授权调用真实业务系统。

## 1. 确认范围

确认入口、屏幕、目标状态、保真度、设备框架、是否需要多个方案、品牌或设计系统，以及示例数据。没有品牌且需要高保真时先确定视觉方向；示例内容应真实可信，不使用无意义 Lorem ipsum。

## 2. 映射页面与状态

制作前写出屏幕流转和关键状态，并放进文件注释或项目说明。例如当前屏幕、表单值、错误、选择项、加载和成功状态。明确哪些行为是模拟、哪些连接真实能力。

## 3. 构建界面

在同一个应用或文件中实现各屏幕，复用真实组件与设计 token。每屏只有一个明确主行动，次要操作降低权重。设备或浏览器外壳保持稳定，内容在其中切换。

## 4. 接通完整交互

- 前进、返回和取消都能工作，状态按产品预期保留或清除。
- 空值、格式错误和业务错误给出具体、字段关联且可恢复的反馈。
- 模拟异步操作时显示 loading、阻止重复提交并覆盖成功与失败路径。
- 选择、筛选、展开、对话框和菜单立即更新 UI；对话框正确管理焦点并支持 Escape。
- 只有刷新后保持状态有助于评审时才使用 `localStorage`，并提供重置入口。

## 5. 验证

逐步走完正常、错误、返回和重复操作路径；检查键盘、焦点、触屏目标、响应式和减少动效设置。不能验证的链接或真实集成必须明确列为模拟或未测试。

多个变体应放在一个文件中，以切换器、参数面板或并排画布呈现，不创建散乱版本文件。

## 示例

**输入：**“做一个四步注册流程原型，要能测试错误和成功状态。”

**输出：**单文件原型包含欢迎、邮箱、资料和成功页面；错误邮箱显示字段级提示，提交时显示 loading 并阻止重复点击，返回后保留合理草稿，最终说明网络请求使用本地模拟。

## 来源与许可

本 Skill 基于 Trystan Sarrade 的 [claude-design-system-prompt](https://github.com/Trystan-SA/claude-design-system-prompt) 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 [LICENSE.txt](./LICENSE.txt)。