Prototypes Skill

Prototypes Skill

Overview

This skill enables Claude to create interactive HTML/CSS prototypes that match your platform's visual design. Prototypes are generated using reference screenshots of existing UI patterns.

When to Use This Skill

Use this skill when:

• Creating UI prototypes for features defined in Product Briefs
• Visualizing user scenarios from briefs as clickable mockups
• Demonstrating proposed UX flows to stakeholders
• Iterating on design concepts before hi-fi design work
• Validating assumptions about feature placement and interaction patterns

Prerequisites

Before creating a prototype:

1. Approved Product Brief: A brief must exist in the briefs/ folder
2. Reference Screenshots: Screenshots organized by product area in reference-screenshots/
3. User Scenarios: Clear understanding of the user flows to prototype

Reference Screenshots

Screenshots are organized by product area in reference-screenshots/:

reference-screenshots/
├── [Product Area 1]/           # e.g., Dashboard, Settings, etc.
│   ├── Landing Page.png
│   ├── Detail View.png
│   └── Edit Form.png
│
├── [Product Area 2]/           # Another product area
│   ├── List View.png
│   └── Create Form.png
│
└── [New Product Area]/         # Add new folders as needed

Using Reference Screenshots

1. Identify the product area from the brief
2. Load relevant screenshots using the Read tool to analyze UI patterns
3. Match patterns to components - identify reusable patterns
4. Note customizations - colors, spacing, specific patterns

Workflow

Step 1: Gather Context

1. Read the linked Product Brief from briefs/
2. Identify the product area
3. Load reference screenshots from the matching folder
4. Identify which user scenarios to prototype
5. Ask clarifying questions about scope

Step 2: Analyze Screenshots

1. Read screenshots from reference-screenshots/[product-area]/
2. Identify layout patterns (navigation, content areas, headers)
3. Note component patterns (buttons, forms, tables, cards)
4. Document color scheme and typography

Step 3: Build Prototype

1. Create HTML structure matching the layout
2. Style with CSS matching the design patterns
3. Add interactivity as needed for the user flow
4. Ensure responsive behavior if required

Step 4: Save and Present

1. Save prototype to prototypes/[brief-name]/
2. Provide instructions for viewing
3. Gather feedback and iterate

Output Structure

Prototypes are saved in prototypes/ organized by brief name:

prototypes/
└── [brief-name]/
    ├── index.html          # Main prototype file
    ├── styles.css          # Styling
    ├── script.js           # Interactivity (if needed)
    └── README.md           # What's covered, how to view

Viewing Prototypes

Prototypes are self-contained HTML files that can be opened directly in a browser:

open prototypes/[brief-name]/index.html

Prototype Standards

Structure

• Self-contained HTML with embedded or linked CSS
• No external dependencies (CDN links, frameworks)
• Works when opened directly in browser

Styling

• Match colors and typography from reference screenshots
• Consistent spacing and layout patterns
• Responsive if the product requires it

Interactivity

• Basic click handlers for navigation flows
• Form field interactions
• State changes (hover, focus, active)

Clarifying Questions Pattern

Before creating a prototype, ask:

1. "Which user scenarios from the brief should this prototype cover?"
2. "I see reference screenshots for [Product Area] - should I match that style?"
3. "What's the entry point for the user - where do they start?"
4. "Should this be a single page or a multi-page flow?"
5. "Are there any new UI patterns not shown in the reference screenshots?"

Example Interaction

Good: Using Reference Screenshots

User: "Create a prototype for the new settings configuration feature"

Claude: "I'll create a prototype for the settings configuration feature. Let me gather context first.

Looking at the brief and the Settings reference screenshots, I can see:

• Settings pages use a sidebar navigation pattern
• Configuration forms have a specific input styling
• Action buttons follow a consistent placement

Let me analyze the screenshots to match the exact patterns..."

[Reads brief and reference screenshots]

"Based on the reference screenshots, I'll create a prototype with:

• Sidebar navigation matching the Settings pattern
• Form layout matching existing configuration pages
• Button styling consistent with the design system

Which scenarios should I prioritize?"

Poor: Ignoring Reference Material

User: "Create a prototype for the new settings configuration feature"

Claude: "Here's a generic settings page prototype..."

This skips reference screenshots and brief context

Quality Checklist

Before delivering a prototype:

• Read the product brief for context
• Referenced appropriate screenshots from reference-screenshots/
• Covers specified user scenarios from the brief
• Works when opened directly in browser
• Includes README explaining what's covered
• Styling matches reference screenshots

Adding New Product Areas

When prototyping a new product area:

1. Create folder in reference-screenshots/[product-area]/
2. Add representative screenshots of existing UI
3. Document the key patterns and components
4. Update this skill file with the new area if needed