--- name: prototype description: Rapid UI prototyping — generates 3 visually distinct HTML/CSS components from a text prompt, each driven by a unique physical/material metaphor. 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. argument-hint: " [--vary <1|2|3>] [--dir ]" --- # Prototype Generate 3 visually distinct, high-fidelity HTML/CSS UI components from a single text prompt. 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, and optional `--dir `. If `--vary N` is present, skip to the [Variation Workflow](#variation-workflow) section. If the description is vague (e.g., "button", "form"), just generate — don't ask clarifying questions. The value of this skill is speed. Interpret vague prompts generously and produce something interesting. Follow these 3 phases in order for new generation. Do not pause between phases or ask for confirmation — generate everything in one pass. ### Phase 1: Style Direction Think of 3 distinct design direction names for the user's prompt. Each name uses a physical/material metaphor — never artist names, brands, or copyrighted references. **Name pattern**: `[Adjective] + [Material/Process] + [Form/Action]` **Tone guide** (invent your own, do not copy these): - "Asymmetrical Rectilinear Blockwork" (Grid-heavy, primary pigments, thick structural strokes) - "Grainy Risograph Layering" (Tactile paper texture, overprinted translucent inks, dithered gradients) - "Kinetic Wireframe Suspension" (Floating silhouettes, thin balancing lines, organic primary shapes) - "Spectral Prismatic Diffusion" (Glassmorphism, caustic refraction, soft-focus morphing gradients) Each metaphor should imply fundamentally different CSS techniques — not just different colors. See the materiality-to-CSS mapping in [WORKFLOW.md](WORKFLOW.md). ### Phase 2: Artifact Generation For each of the 3 style directions, generate a complete, self-contained HTML page. **Scope**: Each artifact is a focused, single-screen component — typically 100-300 lines of HTML. Enough structure to demonstrate the design direction clearly, but limited to one viewport. Not a full multi-section website. **Visual execution rules:** 1. **Materiality**: The style metaphor drives every CSS choice (e.g., Risograph → `feTurbulence` for grain, `mix-blend-mode: multiply` for ink layering) 2. **Typography**: Use Google Fonts via ``. Pair a bold sans-serif with a refined monospace for data 3. **Motion**: Include subtle CSS animations — hover transitions, entry reveals, micro-interactions 4. **IP Safeguard**: No artist names, brand names, or trademarks anywhere in the output 5. **Layout**: Be bold with negative space and visual hierarchy. Avoid generic card grids 6. **Content**: Use realistic placeholder content (names, dates, numbers) — not lorem ipsum **Output format**: Each artifact is a complete `` page with: - Inline `