interactive-prototype

name	interactive-prototype
description	帮助产品经理快速搭建可交互原型。支持根据截图、参考文件、文字描述生成带有页面跳转、hover、点击等交互效果的原型。当用户提及"做原型"、"交互原型"、"可点击原型"、"prototype"、"mockup"时使用。
license	MIT

Interactive Prototype Builder

核心目标

将产品经理的想法快速转化为可交互的代码原型，让 AI 或程序员能直观理解：

• 界面长什么样
• 有哪些页面、如何跳转
• 交互效果是什么（hover、click、动画等）

重要原则：这是原型，不是产品

目的是沟通，不是交付生产代码。避免：

• 过度设计架构
• 完善的错误处理
• 复杂的状态管理
• 真实的 API 对接
• 性能优化

够用就好——只要能演示清楚想法即可。

输出规范

所有原型文件必须放在单一目录下，不要在用户工作区散落文件。

prototype/              # 或用户指定的目录名
├── index.html          # 入口
├── src/
│   ├── components/     # 组件
│   ├── pages/          # 页面
│   └── ...
├── package.json        # 如需要
└── README.md           # 运行说明

首次创建时询问用户希望把原型放在哪个目录。

首次启动：确认模式

在开始构建前，询问用户选择哪种模式：

模式 A：快速演示（推荐）

• 目标：最快速度出效果，文件结构简单清晰
• 技术：单 HTML 文件 + Tailwind CDN + Alpine.js
• 产出：1-3 个文件，直接双击打开
• 适用：快速验证想法、给团队演示、大多数原型场景

prototype/
├── index.html          # 主页面（可能是唯一文件）
├── detail.html         # 其他页面（如需要）
└── README.md           # 简单说明

模式 B：资产复用

• 目标：原型代码可迁移到正式项目
• 技术：与用户正式项目一致的技术栈（React/Vue 等）
• 产出：完整项目结构（会有较多配置文件，这是正常的）
• 适用：明确要落地的功能、需要开发接手

询问示例：

你想用哪种模式？

• 快速演示（推荐）：几个 HTML 文件，双击就能看
• 资产复用：完整项目结构，代码可复用到正式项目

如果用户不确定或没有明确技术需求，默认选择模式 A。

如果选择模式 B，继续询问正式项目的技术栈（React/Vue/等）。

设计理念：渐进式构建

原型设计是一个迭代过程，而非一次性交付。本 Skill 支持：

1. 增量输入：用户可以分批提供截图、文件、描述
2. 逐步细化：先搭框架，再填充细节
3. 随时调整：每轮对话都可以修改、扩展现有原型

不要期望用户一次提供所有信息，而是随着对话推进逐步完善。

工作流程

Step 1: 从用户当前输入开始

用户可能提供以下任意组合（不必一次全部提供）：

• 截图/设计稿图片
• 参考网站/产品 URL
• 文字描述
• 对现有原型的修改意见

原则：有什么用什么，缺什么问什么

首次启动时，仅确认关键信息：

1. 技术栈偏好（如有现有项目）
2. 当前想实现的核心页面/功能

其他细节可在后续迭代中补充。

Step 2: 技术选型

根据用户情况选择技术方案：

场景	推荐方案
无特定要求	React + Tailwind CSS + React Router
已有 Vue 项目	Vue 3 + Tailwind CSS + Vue Router
极简快速验证	单 HTML 文件 + Alpine.js
需要复杂状态	React + Zustand + Tailwind CSS

Step 3: 生成原型

1. 项目结构：创建清晰的目录结构
2. 组件拆分：将重复 UI 元素抽取为组件
3. 路由配置：设置页面间跳转
4. 交互实现：添加 hover、click 等效果
5. 样式系统：使用 Tailwind 或与目标项目一致的方案

Step 4: 运行验证

1. 安装依赖并启动开发服务器
2. 在浏览器中验证所有交互
3. 根据用户反馈迭代

Step 5: 迭代循环

每轮对话后，准备好接受：

• 新增页面："再加一个设置页面"
• 补充素材："这是详情页的截图"
• 调整交互："这个按钮改成 hover 显示 tooltip"
• 样式微调："整体配色偏蓝一点"
• 组件复用："把这个卡片做成通用组件"

保持原型项目持续可运行，每次修改后都能立即在浏览器中看到效果。

组件化原则

为降低后续开发成本，遵循以下原则：

1. 提取公共组件：Button、Card、Modal、Input 等
2. 保持组件独立：每个组件可单独使用和测试
3. Props 设计：为组件定义清晰的接口
4. 命名一致：与常见组件库命名习惯保持一致

交互实现清单

常见交互效果的实现方式：

• 页面跳转：React Router / Vue Router / <a> 标签
• Hover 效果：Tailwind hover: 前缀或 CSS :hover
• 点击反馈：active: 状态 + transition
• 表单交互：受控组件 + 状态管理
• 弹窗/抽屉：条件渲染 + 动画
• 加载状态：Skeleton 或 Spinner 组件

输出要求

1. 代码可直接运行（npm run dev 或直接打开 HTML）
2. 包含简要的 README 说明如何运行
3. 关键交互点添加代码注释