# Prototype > Rapid UI prototyping — generates 3 visually distinct HTML/CSS components from a text prompt and serves them in a live browser gallery. Use when user runs /prototype, asks to "prototype a UI", "mock up a component", "generate HTML mockups", "create UI variations", "design exploration", "quick UI concept", or wants to see multiple visual approaches to a component. Also trigger when user says "show me different ways to build...", "explore different designs for...", or wants rapid visual exploration of a UI idea — even without saying "prototype" explicitly. - Skill: `joaquimscosta/prototype` (Agent Skill, multi-file: 4 files) - Install (CLI): `npx skillmds@latest add joaquimscosta/prototype` - Raw SKILL.md: https://api.skillmd.com/api/skills/joaquimscosta/prototype/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: joaquimscosta (https://skillmd.com/u/joaquimscosta) - Updated: 2026-09-21 - Page: https://skillmd.com/skills/joaquimscosta/prototype --- # Prototype Generate 3 visually distinct, high-fidelity HTML/CSS UI components from a single text prompt, then serve them in a live browser gallery so the user can click through and pick a favorite. Each component adopts a unique design persona based on physical/material metaphors — producing genuinely different visual approaches, not just color swaps. ## Quick Start Parse `$ARGUMENTS` for the component description, optional `--vary N` flag, optional `--dir `, and optional `--continue` flag. - If `--continue` is present, skip to [Next-Turn Pick Capture](#next-turn-pick-capture). - If `--vary N` is present, skip to the [Variation Workflow](#variation-workflow). - Otherwise, follow Phases 1-3 below in a single pass — do not pause between phases or ask for confirmation. If the description is vague ("button", "form"), just generate. The value is speed. Interpret generously. ### Phase 1: Style Direction Think of 3 distinct design direction names using physical/material metaphors. Pattern: `[Adjective] + [Material/Process] + [Form/Action]`. Each metaphor should imply different CSS techniques — not just colors. See the materiality-to-CSS mapping in [WORKFLOW.md](WORKFLOW.md). Examples (invent your own): - "Asymmetrical Rectilinear Blockwork" (Grid-heavy, primary pigments) - "Grainy Risograph Layering" (`feTurbulence` grain, `mix-blend-mode: multiply`) - "Kinetic Wireframe Suspension" (thin lines, floating silhouettes) - "Spectral Prismatic Diffusion" (`backdrop-filter`, caustic refraction) ### Phase 2: Artifact Generation For each style, generate a complete, self-contained `` page (100-300 lines): 1. **Materiality**: the style metaphor drives every CSS choice 2. **Typography**: Google Fonts via ``, pair a bold sans with a refined monospace 3. **Motion**: subtle CSS animations and hover transitions 4. **IP Safeguard**: no artist names, brand names, or trademarks 5. **Layout**: bold negative space, avoid generic card grids 6. **Content**: realistic placeholder content, not lorem ipsum Output: raw HTML (no markdown fences), with inline `