Prototype Designer - Claude Code Skill

A Claude Code skill for creating interactive HTML prototypes with an infinite canvas preview system.

Features

• Infinite Canvas: Pan and zoom to navigate between multiple prototype screens
• Device Frames: MacBook-style (16:10) desktop frames or iPhone 15 Pro mobile frames
• Auto Page Discovery: Automatically organizes pages by folder structure
• Comment System: Add comments to each prototype page with persistent storage
• Tailwind CSS: Modern styling out of the box

Installation

Option 1: Project-level skill (recommended for teams)

Copy the .claude/skills/prototype-designer folder to your project:

mkdir -p .claude/skills
cp -r path/to/prototype-designer .claude/skills/

Option 2: User-level skill (for personal use)

mkdir -p ~/.claude/skills
cp -r path/to/prototype-designer ~/.claude/skills/

Project Structure

your-project/
├── prototype/
│   ├── index.html              # Infinite canvas preview
│   ├── comments.json           # Auto-generated comments storage
│   ├── resources/              # Shared components
│   │   ├── header.html
│   │   └── sidebar.html
│   ├── feature_a/              # Feature module
│   │   ├── home.html
│   │   └── settings.html
│   └── feature_b/
│       └── dashboard.html
└── server_with_comments.py     # Backend server

Usage with Claude Code

Once installed, simply ask Claude to create prototypes:

• "Create a prototype for a login page"
• "Design a dashboard prototype with sidebar navigation"
• "Add a new page to the user settings module"

Claude will automatically:

• Create properly structured HTML files
• Use Tailwind CSS for styling
• Place files in the correct folders
• Update the canvas preview

Configuration

Edit the CONFIG object in index.html:

const CONFIG = {
    deviceType: 'desktop',        // 'desktop' or 'mobile'
    projectTitle: 'My Prototypes',
    excludeFolders: ['resources', 'assets'],
    enableComments: true
};

API Endpoints

Endpoint	Method	Description
/api/pages	GET	Discover available prototype pages
/api/comments	GET	Get all comments
/api/comments	POST	Add a comment

Requirements

• Python 3.8+
• FastAPI
• uvicorn
• aiofiles

pip install fastapi uvicorn aiofiles

License

MIT License - feel free to use in your projects!

Contributing

Contributions welcome! Please feel free to submit issues and pull requests.