Interactive Prototype Skill

English | 中文

---

English

A Claude Code Skill that helps product managers quickly build interactive prototypes.

What it does

• Transforms ideas (screenshots, descriptions, reference URLs) into interactive code prototypes
• Supports page navigation, hover effects, click interactions, and animations
• Works iteratively — add details and pages as you go
• Prototypes are for communication, not production — just enough to demonstrate the idea

Installation

Copy the interactive-prototype folder to your Claude Code skills directory:

cp -r interactive-prototype ~/.claude/skills/

Usage

In Claude Code, say things like:

• "Build a prototype for a chat interface"
• "Create a clickable mockup for the settings page"

The skill will ask you:

1. Where to put the prototype — a single directory for all files
2. Which mode —
   • Quick demo: Simple HTML files, open directly in browser
   • Asset reuse: Full project structure with your tech stack (React/Vue/etc.)

License

MIT

---

中文

一个帮助产品经理快速搭建可交互原型的 Claude Code Skill。

功能

• 将想法（截图、描述、参考链接）转化为可交互的代码原型
• 支持页面跳转、hover 效果、点击交互、动画
• 支持渐进式构建——边做边完善
• 原型是为了沟通，不是为了生产——够用就好

安装

将 interactive-prototype 文件夹复制到 Claude Code 的 skills 目录：

cp -r interactive-prototype ~/.claude/skills/

使用

在 Claude Code 中说：

• "帮我做一个登录页面的原型"
• "做一个可交互原型"
• "搭建一个聊天界面的 mockup"

Skill 会询问你：

1. 原型放在哪个目录——所有文件集中在一个文件夹
2. 选择哪种模式——
   • 快速演示：简单 HTML 文件，双击即可打开
   • 资产复用：完整项目结构，使用你的技术栈（React/Vue 等）

协议

MIT