制作可交互原型

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

1. 确认范围

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

2. 映射页面与状态

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

3. 构建界面

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

4. 接通完整交互

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

5. 验证

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

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

示例

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

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

来源与许可

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