---
slug: "tiny-prototype-designer"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/HanZijie/tiny-prototype-designer@main/README.md"
repo: "https://github.com/HanZijie/tiny-prototype-designer"
source_file: "README.md"
branch: "main"
---
# Prototype Designer - Claude Code Skill

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

![Preview](https://img.shields.io/badge/Claude%20Code-Skill-blue)
![License](https://img.shields.io/badge/license-MIT-green)

## 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:

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

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

```bash
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`:

```javascript
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

```bash
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.