Prototype
- 1 installs
- 21 repo stars
- Updated August 5, 2026
- joaquimscosta/arkhe-claude-plugins
Generates 3 visually distinct self-contained HTML/CSS UI components from a text prompt, each driven by a unique material metaphor.
About
Rapidly prototypes UI by generating three visually distinct HTML/CSS components from a single prompt, each with its own design persona. A developer uses it to explore multiple visual approaches to a component quickly.
- 3 distinct design directions per prompt
- Self-contained single-screen HTML pages, 100-300 lines each
Prototype by the numbers
- 1 all-time installs (skills.sh)
- Ranked #1,609 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/joaquimscosta/arkhe-claude-plugins --skill prototypeAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1 |
|---|---|
| repo stars | ★ 21 |
| Last updated | August 5, 2026 |
| Repository | joaquimscosta/arkhe-claude-plugins ↗ |
What it does
Generates 3 visually distinct self-contained HTML/CSS UI components from a text prompt, each driven by a unique material metaphor.
Files
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: 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 <link>. 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 <!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
1. Create output directory (default: .prototype/, or --dir value) 2. Write each artifact with position prefix: 01-{slug}-{style-slug}.html, 02-..., 03-... 3. Write manifest.json mapping positions to filenames and style names 4. Generate index.html with all 3 artifacts displayed in iframes side-by-side 5. 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):
1. Read manifest.json from the output directory to find the Nth artifact 2. Read the existing artifact HTML file to understand the current design 3. Generate 3 radical conceptual variations using different physical metaphors 4. Each variation gets a unique persona name and complete HTML/CSS rewrite 5. Write variation files as {original-slug}-var-1.html, -var-2.html, -var-3.html 6. Update index.html to 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
Prototype — Examples
Example 1: Basic Component
Command:
/prototype minimalist todo listOutput:
Prototype generated:
.prototype/index.html (comparison view)
.prototype/01-todo-list-risograph-press.html (Tactile Risograph Press)
.prototype/02-todo-list-wireframe-suspension.html (Kinetic Wireframe Suspension)
.prototype/03-todo-list-obsidian-grid.html (Obsidian Facet Grid)
Open in browser: open .prototype/index.html
Generate variations: /prototype --vary 1Each HTML file contains a complete, self-contained page with:
- Google Fonts loaded via
<link> - Inline
<style>with all CSS - Realistic placeholder content (task names, dates, checkboxes)
- Hover effects and entry animations
- Design driven entirely by the style metaphor
---
Example 2: Custom Output Directory
Command:
/prototype dashboard with analytics charts --dir ./mockupsOutput:
Prototype generated:
./mockups/index.html (comparison view)
./mockups/01-dashboard-ceramic-contour.html (Ceramic Contour Map)
./mockups/02-dashboard-neon-pulse-grid.html (Neon Pulse Grid)
./mockups/03-dashboard-paper-ledger-fold.html (Paper Ledger Fold)
Open in browser: open ./mockups/index.html---
Example 3: Generating Variations
After generating the initial prototype, request variations of a specific artifact:
Command:
/prototype --vary 2This reads manifest.json to find artifact 2, then generates 3 radical redesigns:
Output:
Variations of artifact 2 (Kinetic Wireframe Suspension):
.prototype/todo-list-wireframe-suspension-var-1.html (Volcanic Ember Fracture)
.prototype/todo-list-wireframe-suspension-var-2.html (Folded Vellum Sheets)
.prototype/todo-list-wireframe-suspension-var-3.html (Frost Crystal Lattice)
Open in browser: open .prototype/variations-index.html---
Example 4: Vague Prompt
The skill handles vague prompts without asking questions:
Command:
/prototype login formOutput: 3 complete login forms, each with a radically different visual treatment — one might use frosted glass panels, another raw paper textures, another volcanic dark gradients.
---
Example 5: Prototype-to-Implementation Pipeline
Use prototyping as the first step of a full design workflow:
Step 1 — Explore:
/prototype notification center with activity feedStep 2 — Review the 3 artifacts in the browser and pick a favorite.
Step 3 — Implement:
/design-intent implement the UI from .prototype/01-notification-center-risograph-press.htmlThe design-intent-specialist skill will:
- Analyze the prototype HTML for visual patterns
- Map to your project's component library and design tokens
- Implement using your actual framework (React, Vue, etc.)
- Flag any conflicts with established design patterns
Step 4 — Save patterns:
/save-patterns---
Style Direction Examples by Domain
E-commerce
- "Embossed Leather Catalog" (Rich textures, gold foil accents, serif typography, warm palette)
- "Neon Marketplace Grid" (Bright accent colors, grid layout, sharp edges, dark background)
- "Watercolor Boutique" (Soft edges, pastel washes, handwritten fonts, organic layout)
Productivity / SaaS
- "Blueprint Technical Draft" (Precise lines, annotation marks, engineering paper background)
- "Frosted Glass Console" (Blurred panels, translucent layers, minimal chrome, system fonts)
- "Ink Wash Kanban" (Flowing gradients, calligraphic weights, negative space hierarchy)
Gaming / Entertainment
- "Neon Arcade Cabinet" (Glowing edges, pixel art accents, CRT scan line effects)
- "Holographic Interface" (Translucent panels, sci-fi gradients, angular geometry)
- "Carved Stone Tablet" (Textured surfaces, embossed text, earthy palette, heavy weight)
Healthcare / Finance
- "Executive Leather Folio" (Rich textures, gold accents, serif typography, conservative palette)
- "Clinical Precision Grid" (High contrast, structured layout, clear data hierarchy, blue/white)
- "Sandstone Data Relief" (Warm neutrals, layered depth, subtle shadows, refined spacing)
Prototype — Troubleshooting
Common Issues
HTML Output Contains Markdown Fences
Symptom: Generated HTML starts with ` `html or ends with ` `
Solution: Strip markdown fences before writing files:
- Remove leading `
htmlor - Remove trailing `
- Verify the result starts with
<!DOCTYPE html>or<html>
---
All 3 Artifacts Look Too Similar
Symptom: The design variations feel like color swaps rather than distinct approaches
Causes:
- Style direction names are too generic (e.g., "Modern Clean", "Elegant Simple")
- The metaphors don't translate to concrete CSS techniques
Solutions: 1. Ensure style names follow the pattern: [Adjective] + [Material/Process] + [Form/Action] 2. Each metaphor should imply different CSS techniques (see materiality-to-CSS mapping in WORKFLOW.md) 3. Regenerate with more specific creative examples in the style direction prompt 4. The examples should span different visual dimensions: texture vs structure vs motion vs color
---
Google Fonts Not Loading
Symptom: Artifacts display in system fonts instead of the specified Google Fonts
Causes:
- Missing
<link>tag in HTML<head> - Incorrect font family name in CSS
- No internet connection when viewing the file
Solutions: 1. Verify each artifact has a Google Fonts <link> tag:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">2. Ensure font-family in CSS matches the imported font name exactly 3. For offline use, consider adding a system font fallback stack
---
Output Directory Already Exists
Symptom: Error or overwrite concerns when .prototype/ already has files
Solution: The skill should create the directory if it doesn't exist and overwrite existing files with the same names. Previous prototype files with different names are preserved. If the user wants a clean start, they can delete the directory or use --dir to specify a new one.
---
Large Token Usage
Symptom: Generation takes a long time or hits token limits
Causes: Each HTML artifact can be 200-500 lines. Generating 3 in one response is token-heavy.
Solutions: 1. Keep the component description focused and specific 2. For complex components, prototype a single section rather than a full page 3. Use simpler prompts: "login form" generates faster than "full e-commerce checkout flow with cart summary, payment, and confirmation"
---
iframes Not Loading in Index Page
Symptom: The index.html comparison view shows blank panels
Causes:
- File paths in
srcattributes don't match actual filenames - Browser security restrictions on local file access
Solutions: 1. Verify src attributes use relative paths (just filenames, not absolute paths) 2. Some browsers restrict <iframe src="file://...">. Use a local server:
cd .prototype && python3 -m http.server 8080
# Then open http://localhost:80803. Or open the individual HTML files directly in the browser
---
Artifacts Reference Artist Names or Brands
Symptom: Generated HTML contains references to specific artists, brands, or copyrighted works
Solution: The IP safeguard in the prompt should prevent this. If it occurs: 1. Remove the offending references manually 2. Regenerate with a stronger safeguard instruction 3. The prompt explicitly states "No artist names, brand names, or trademarks" — if this is being ignored, add a more emphatic instruction
---
--vary Fails to Find the Artifact
Symptom: /prototype --vary 2 doesn't know which file is artifact 2
Causes:
manifest.jsonis missing from the output directory- The manifest was manually edited or corrupted
Solutions: 1. Check that .prototype/manifest.json exists and contains the artifacts array 2. If missing, the skill will fall back to globbing for files starting with 02- 3. Regenerate with /prototype <original prompt> to create a fresh manifest
---
When to Ask for Help
- If the skill fails to generate valid HTML after multiple attempts
- If the index page template produces layout issues on your display
- If you need to customize the generation for a specific design system or framework
Prototype — Detailed Workflow
Table of Contents
1. Phase 1: Style Direction 2. Phase 2: Artifact Generation 3. Phase 3: Output 4. Variation Workflow 5. Integration with Design Intent
---
Phase 1: Style Direction
How to Generate Style Names
Think of 3 design direction names that each imply a fundamentally different CSS approach. The names serve as creative constraints that force visual diversity — not just color palette changes, but different textures, structures, and motion patterns.
Name pattern: [Adjective] + [Material/Process] + [Form/Action]
Tone guide (invent your own, do not copy):
- "Asymmetrical Rectilinear Blockwork" (Grid-heavy, primary pigments, thick structural strokes, Bauhaus-functionalism vibe)
- "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)
The reason these work is that each metaphor maps to concrete CSS techniques. "Risograph" implies grain textures and blend modes. "Wireframe" implies thin borders and transparency. "Prismatic" implies backdrop-filter and gradients. If a style name doesn't suggest specific CSS decisions, it's too vague — pick a more physical metaphor.
Style Name Components
| Component | Examples |
|---|---|
| Adjective | Tactile, Kinetic, Asymmetrical, Spectral, Grainy, Volcanic, Crystalline |
| Material/Process | Risograph, Obsidian, Vellum, Wireframe, Prismatic, Ceramic, Woven |
| Form/Action | Press, Balance, Gridwork, Diffusion, Suspension, Lattice, Cascade |
Fallback Style Names
If you struggle to produce 3 distinct names, use these defaults:
["Primary Pigment Gridwork", "Tactile Risograph Layering", "Kinetic Silhouette Balance"]---
Phase 2: Artifact Generation
Generation Guidance
For each style direction, generate a complete, self-contained HTML page. The style name is your creative constraint — let it drive every CSS decision.
Key principles:
1. Materiality first — The style metaphor dictates CSS techniques. Consult the mapping table below. If the style says "Risograph", use feTurbulence for grain and mix-blend-mode: multiply. If it says "Obsidian", use dark gradients and sharp corners. The metaphor is not decorative — it's structural.
2. Typography matters — Load Google Fonts via <link>. Pair a bold display font (Inter, Space Grotesk, Outfit) with a monospace (JetBrains Mono, Fira Code) for data elements.
3. Motion reinforces the metaphor — Entry reveals with @keyframes fadeIn, hover transitions on interactive elements (transform, box-shadow), micro-interactions that feel native to the design metaphor.
4. IP Safeguard — No artist names, brand names, or trademarks anywhere.
5. Bold layout — Use negative space and hierarchy intentionally. Avoid generic card grids. Try asymmetry, overlapping layers, or unconventional compositions.
6. Realistic content — Use real-sounding names, dates, numbers, and labels. Never lorem ipsum.
Scope: Each artifact is a focused, single-screen component — typically 100-300 lines of HTML. One viewport, not a full website.
Output: Complete <!DOCTYPE html> page with inline <style>, Google Fonts <link>, realistic content, and optional <script>. No markdown fences — write raw HTML directly to file.
Materiality-to-CSS Mapping
This table is the core creative engine. Each metaphor translates to specific CSS techniques:
| Metaphor | CSS Techniques |
|---|---|
| Risograph | feTurbulence, grain overlays, mix-blend-mode: multiply, overprint colors |
| Obsidian | Dark linear gradients, sharp border-radius: 0, subtle reflective box-shadow |
| Paper/Vellum | box-shadow for depth, off-white background: #f5f0e6, serif typography |
| Wireframe | border: 1px solid, transparent fills, border-style: dashed, thin weights |
| Glass/Prism | backdrop-filter: blur(12px), rgba() backgrounds, prismatic gradients |
| Kinetic/Mobile | @keyframes, transform: rotate(), floating elements, slow-motion transition |
| Ceramic/Porcelain | Smooth gradients, rounded forms, clean whites, subtle glaze highlights |
| Volcanic/Basalt | Cracked textures, ember accents, dark matte backgrounds, orange/red glow |
| Woven/Textile | CSS grid patterns, cross-hatching via repeating-linear-gradient, fabric colors |
| Frost/Crystal | Ice-blue palette, sharp geometric facets, clip-path for crystal shapes |
Post-Processing
After generating each artifact, clean the output before writing to file:
1. Strip markdown fences if present:
- Remove leading `
htmlor - Remove trailing `
2. Ensure the output starts with <!DOCTYPE html> or <html> 3. Verify Google Fonts <link> tags are present
---
Phase 3: Output
Directory Structure
.prototype/ # Default output directory
├── index.html # Side-by-side comparison page
├── manifest.json # Artifact position mapping
├── 01-{slug}-{style-1}.html # Artifact 1
├── 02-{slug}-{style-2}.html # Artifact 2
└── 03-{slug}-{style-3}.html # Artifact 3File Naming
Generate slugs from the prompt and style names:
- Prompt slug:
"minimalist todo list"→todo-list - Style slug:
"Tactile Risograph Press"→risograph-press - Full filename:
01-todo-list-risograph-press.html
Rules:
- Position prefix:
01-,02-,03- - Lowercase, hyphens only
- Remove common words (a, the, an, with, for)
- Max 40 characters per slug
- Keep the most descriptive words
Manifest File
Write manifest.json to track artifact positions (needed for --vary):
{
"prompt": "minimalist todo list",
"created": "2026-03-08",
"artifacts": [
{
"position": 1,
"style": "Tactile Risograph Press",
"file": "01-todo-list-risograph-press.html"
},
{
"position": 2,
"style": "Kinetic Wireframe Suspension",
"file": "02-todo-list-wireframe-suspension.html"
},
{
"position": 3,
"style": "Obsidian Facet Grid",
"file": "03-todo-list-obsidian-grid.html"
}
]
}Index Page Template
Generate this index.html to display all 3 artifacts:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prototype: {{prompt}}</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0a0a0a;
color: #e0e0e0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
padding: 16px 24px;
border-bottom: 1px solid #1a1a1a;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.header h1 {
font-size: 16px;
font-weight: 500;
color: #fff;
}
.header .meta {
font-size: 12px;
color: #666;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
flex: 1;
gap: 1px;
background: #1a1a1a;
min-height: 0;
}
.panel {
display: flex;
flex-direction: column;
background: #0a0a0a;
min-height: 0;
}
.panel-label {
padding: 10px 16px;
font-size: 12px;
font-weight: 500;
color: #888;
letter-spacing: 0.05em;
text-transform: uppercase;
border-bottom: 1px solid #1a1a1a;
flex-shrink: 0;
}
iframe {
flex: 1;
border: none;
background: #fff;
min-height: 0;
}
@media (max-width: 900px) {
.grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="header">
<h1>{{prompt}}</h1>
<span class="meta">3 variations · prototype</span>
</div>
<div class="grid">
<div class="panel">
<div class="panel-label">{{style1}}</div>
<iframe src="{{file1}}" title="{{style1}}"></iframe>
</div>
<div class="panel">
<div class="panel-label">{{style2}}</div>
<iframe src="{{file2}}" title="{{style2}}"></iframe>
</div>
<div class="panel">
<div class="panel-label">{{style3}}</div>
<iframe src="{{file3}}" title="{{style3}}"></iframe>
</div>
</div>
</body>
</html>Replace {{prompt}}, {{style1-3}}, and {{file1-3}} with actual values.
Output Summary
After writing all files, print:
Prototype generated:
.prototype/index.html (comparison view)
.prototype/01-{file1}.html ({style1})
.prototype/02-{file2}.html ({style2})
.prototype/03-{file3}.html ({style3})
Open in browser: open .prototype/index.html
Generate variations: /prototype --vary 1---
Variation Workflow
When user passes --vary N:
Step 1: Read Manifest
Read manifest.json from the output directory to find the Nth artifact's filename and style name. If manifest.json doesn't exist, glob the directory for files starting with 0N- and infer the original prompt from the filenames.
Step 2: Read Existing Artifact
Read the HTML file to understand the current design — its layout, color palette, typography, and structural approach. This context helps generate variations that are genuinely different rather than adjacent.
Step 3: Generate 3 Variations
For each variation:
- Invent a unique design persona name based on a NEW physical metaphor (different from the original and from each other)
- Let the metaphor's visual language drive every CSS decision
- Generate a complete, self-contained HTML page
- Each variation should be dramatically different — different textures, structures, and motion patterns
The goal is radical divergence. If the original was dark and angular, one variation might be light and organic. If it used heavy borders, a variation might use no borders at all.
Step 4: Write Variation Files
- Name:
{original-slug}-var-1.html,{original-slug}-var-2.html,{original-slug}-var-3.html - Update or create a
variations-index.htmlshowing the 3 variations side-by-side - Update
manifest.jsonwith avariationsarray for the varied artifact
---
Integration with Design Intent
After prototyping, users can feed their preferred artifact into the full design-intent workflow:
1. Pick a favorite: User identifies which of the 3 artifacts they prefer 2. Run `/design-intent`: Reference the prototype HTML as the visual reference
/design-intent implement the UI from .prototype/01-todo-list-risograph-press.html3. The design-intent-specialist skill will:
- Analyze the HTML for layout, colors, typography, spacing
- Check existing design intent patterns for conflicts
- Implement using the project's actual component library and design system
4. Save patterns: Run /save-patterns to capture any new design decisions
This creates a pipeline: rapid exploration (prototype) → production implementation (design-intent).
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k