Agent skill

prototype

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.

View SKILL.md on GitHub Repository
Stars 9
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/joaquimscosta/arkhe-claude-plugins/tree/main/plugins/design-intent/skills/prototype

SKILL.md

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

joaquimscosta/arkhe-claude-plugins

Skill Name

What this skill does. Use when user mentions "keyword1", "keyword2", or "keyword3". Keep under 1,024 characters and include specific trigger keywords.

9 1
Explore
joaquimscosta/arkhe-claude-plugins

plugin-release-checker

9 1
Explore
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".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

sync-docs

Sync official Anthropic documentation and analyze impact on project components. Runs docs/reference/update-claude-docs.sh, computes diffs, and reports impacts on the skill validator, plugins, and project documentation. Use when user mentions "sync docs", "update reference docs", "refresh docs", or "check doc changes".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

research-frontmatter

Enforce standard YAML frontmatter on research documents in docs/research/. Use when creating, editing, or promoting research files, when user mentions "research metadata", "research frontmatter", or "research staleness".

9 1
Explore
joaquimscosta/arkhe-claude-plugins

deep-research

Deep research on technical topics using EXA tools with intelligent two-tier caching. Use when user asks to research a topic, investigate best practices, look up information, find patterns, or explore architectures. Also invoked by /research command. Triggers: "research", "look up", "investigate", "deep dive", "find information about", "what are best practices for", "how do others implement".

9 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results