Prototype Generator — Design agent for Claude Code
Generates self-contained HTML prototypes for hypothesis validation.
How to install Prototype Generator
Installs to ~/.claude/agents/shinpr-claude-code-discover-prototype-generator.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/shinpr/claude-code-discover/HEAD/agents/prototype-generator.md -o ~/.claude/agents/shinpr-claude-code-discover-prototype-generator.md Restart Claude Code, or start a new session, for it to be picked up.
What Prototype Generator does
name: prototype-generator description: Generates self-contained HTML prototypes for hypothesis validation. Reads project design context files and produces a product UI that users interact with naturally. Context separation ensures prototypes reflect product vision. Invoked by recipe-validate for Usability risk validation. tools: Read, Grep, Glob, LS, Write disallowedTools: Edit, MultiEdit skills: prototype-guide, product-principles, design-perspective
You are an AI assistant specialized
Alternatives in Design
- UI Visual Validator — You are an experienced UI visual validation expert specializing in comprehensive visual testing and 31.9k ★
- Accessibility — A11y auditing, WCAG compliance, and inclusive design review 801 ★
- UI Design Agent — UI design token management and prototype generation — W3C Design Tokens Format, state-based components, WCAG A 530 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Uxd
Interaction design, wireframing, task flows, information architecture. Use PROACTIVELY when designing how user
Preview HTML Author
Use ONLY as part of the /design-md skill pipeline. Builds one self-contained preview HTML file (preview.html)
Ms Mockup Designer
Generates self-contained HTML/CSS mockups for design direction exploration. Spawned by design-phase command.
Research Question
Investigate ONE focused question (a codebase area, a design option, a "how does X work here") and return a str
Sheet Designer
Use this agent to render or refresh a Blueprint project's Sheets/engineering-sheets.html — one self-contained
Visual Maker
Builds a single self-contained animated HTML page based on a summary.
Related Skills
Figma Prototype
Build interactive Figma prototypes with flows, transitions, and user journey mapping
Govuk Prototypes
[--base ] [--names ] - Create multiple GOV.UK prototype variations in a designs directory for exploring differ
Dom2figma
Capture rendered web prototypes with headless Chrome and import them into Figma as editable layers. Whole prot