prototype
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
More from joaquimscosta/arkhe-claude-plugins
skill-validator
Validate skills against Anthropic best practices for frontmatter, structure, content, file organization, hooks, MCP, and security (62 rules in 8 categories). Use when creating new skills, updating existing skills, before publishing skills, reviewing skill quality, or when user mentions "validate skill", "check skill", "skill best practices", "skill review", or "lint skill".
30generating-stitch-screens
>
19design-intent-specialist
Creates accurate frontend implementations from visual references while maintaining design consistency. Use when user provides Figma URLs, screenshots, design images, requests visual implementation from reference, or asks to build UI matching a design. Automatically checks existing design intent patterns before implementation.
17creating-pr
Creates GitHub Pull Requests with existing PR detection, branch pushing, and intelligent title/body generation. Use when user requests to create pull request, open PR, update PR, push for review, ready for review, send for review, get this reviewed, make a PR, share code, request review, create draft PR, submit for review, run /create-pr command, or mentions "PR", "pull request", "merge request", "code review", "GitHub PR", or "draft".
17scripting-bash
Master defensive Bash scripting for production automation, CI/CD pipelines, and system utilities. Expert in safe, portable, and testable shell scripts with POSIX compliance, modern Bash 5.x features, and comprehensive error handling. Use when writing shell scripts, bash automation, CI/CD scripts, system utilities, or mentions "bash", "shell script", "automation", "defensive programming", or needs production-grade shell code.
17creating-commit
Creates context-aware git commits with smart pre-commit checks, submodule support, and conventional commit message generation. Use when user requests to commit changes, stage and commit, check in code, save work, save changes, push my code, finalize changes, add to git, create commits, run /commit command, or mentions "git commit", "commit message", "conventional commits", "stage files", "git add", or needs help with commits.
16