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 <path>.
If --vary N is present, skip to the 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.
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:
- Materiality: The style metaphor drives every CSS choice (e.g., Risograph →
feTurbulencefor grain,mix-blend-mode: multiplyfor ink layering) - Typography: Use Google Fonts via
<link>. Pair a bold sans-serif with a refined monospace for data - Motion: Include subtle CSS animations — hover transitions, entry reveals, micro-interactions
- IP Safeguard: No artist names, brand names, or trademarks anywhere in the output
- Layout: Be bold with negative space and visual hierarchy. Avoid generic card grids
- Content: Use realistic placeholder content (names, dates, numbers) — not lorem ipsum
Output format: Each artifact is a complete <!DOCTYPE html> page with:
- Inline
<style>block (no external CSS files except Google Fonts) - Complete HTML structure with realistic placeholder content
- Optional
<script>for interactions - No markdown fences — raw HTML only
Phase 3: Output
- Create output directory (default:
.prototype/, or--dirvalue) - Write each artifact with position prefix:
01-{slug}-{style-slug}.html,02-...,03-... - Write
manifest.jsonmapping positions to filenames and style names - Generate
index.htmlwith all 3 artifacts displayed in iframes side-by-side - Print file paths and suggest:
open .prototype/index.html
See WORKFLOW.md for the index page template, manifest format, and file naming details.
Variation Workflow
When --vary N is passed (where N is 1, 2, or 3):
- Read
manifest.jsonfrom the output directory to find the Nth artifact - Read the existing artifact HTML file to understand the current design
- Generate 3 radical conceptual variations using different physical metaphors
- Each variation gets a unique persona name and complete HTML/CSS rewrite
- Write variation files as
{original-slug}-var-1.html,-var-2.html,-var-3.html - Update
index.htmlto show variations
See WORKFLOW.md for the full variation workflow.
References
- WORKFLOW.md — Detailed guidance, index page template, materiality-to-CSS mapping
- EXAMPLES.md — Usage examples and sample outputs
- TROUBLESHOOTING.md — Common issues and fixes