How do I install the Prototype skill?

Run npx skillmds@latest add joaquimscosta/prototype in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Prototype skill do?

Rapid UI prototyping — generates 3 visually distinct HTML/CSS components from a text prompt and serves them in a live browser gallery. 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. It is listed under Web & Frontend on SkillMD.

Is Prototype safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Prototype?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Prototype free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Prototype?

joaquimscosta (@joaquimscosta) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Prototype by joaquimscosta — Agent Skill

Name: Prototype
Author: joaquimscosta

Prototype

Generate 3 visually distinct, high-fidelity HTML/CSS UI components from a single text prompt, then serve them in a live browser gallery so the user can click through and pick a favorite. 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, optional --dir <path>, and optional --continue flag.

If --continue is present, skip to Next-Turn Pick Capture.
If --vary N is present, skip to the Variation Workflow.
Otherwise, follow Phases 1-3 below in a single pass — do not pause between phases or ask for confirmation.

If the description is vague ("button", "form"), just generate. The value is speed. Interpret generously.

Phase 1: Style Direction

Think of 3 distinct design direction names using physical/material metaphors. Pattern: [Adjective] + [Material/Process] + [Form/Action].

Each metaphor should imply different CSS techniques — not just colors. See the materiality-to-CSS mapping in WORKFLOW.md.

Examples (invent your own):

"Asymmetrical Rectilinear Blockwork" (Grid-heavy, primary pigments)
"Grainy Risograph Layering" (feTurbulence grain, mix-blend-mode: multiply)
"Kinetic Wireframe Suspension" (thin lines, floating silhouettes)
"Spectral Prismatic Diffusion" (backdrop-filter, caustic refraction)

Phase 2: Artifact Generation

For each style, generate a complete, self-contained <!DOCTYPE html> page (100-300 lines):

Materiality: the style metaphor drives every CSS choice
Typography: Google Fonts via <link>, pair a bold sans with a refined monospace
Motion: subtle CSS animations and hover transitions
IP Safeguard: no artist names, brand names, or trademarks
Layout: bold negative space, avoid generic card grids
Content: realistic placeholder content, not lorem ipsum

Output: raw HTML (no markdown fences), with inline <style> and Google Fonts <link>.

Phase 3: Live Preview Session

Start an arkhe-preview live session (from the devtools plugin) and write the artifacts into the session's content/. The server serves the gallery fragment, watches for changes, and logs the user's variant pick to events.jsonl.

Resolve the gallery example flavor:

PLUGIN_ROOT=$(dirname "$(dirname "$(which arkhe-preview)")")
EX="$PLUGIN_ROOT/skills/browser-companion/examples/gallery"

Start the server:

arkhe-preview start \
  --project-dir "$DIR" \
  --frame-template "$EX/frame-template.html" \
  --helper       "$EX/helper.js"

$DIR defaults to .prototype/, or the value of --dir.

Parse the JSON line on stdout to get url, screen_dir, state_dir, session_dir.
Write each artifact into $screen_dir:
- 01-{prompt-slug}-{style1-slug}.html
- 02-...
- 03-...
Write $DIR/manifest.json (top-level pointer used by --vary / --continue). See WORKFLOW.md for the schema.
Write 99-gallery.html LAST into $screen_dir so it has the newest mtime and is served at GET /. Template + inline swap-on-click JS in WORKFLOW.md.
Print the terminal summary (URL, content/pick paths, variant names, next-step hints) and end the turn.

The user clicks a variant in the sidebar; the iframe canvas swaps; the gallery helper.js logs the click to events.jsonl (no agent involvement needed during the click).

Next-Turn Pick Capture

This skill follows a turn-based loop, not realtime polling. After Phase 3 ends, the user picks at their leisure. Read their pick when they next reply.

Two paths to the pick:

Explicit (/prototype --continue): read $DIR/manifest.json, then read manifest.state_dir/events.jsonl. Find the most recent event with action === "select-variant". Report the chosen position + style, and offer next steps (/prototype --vary N to iterate; /design-intent ... to implement).
Implicit (next user message): if the previous turn ran /prototype and the user's next message is conversational ("ok", "I like the second one", "what did I pick?"), check whether manifest.json exists in the most recent prototype dir (default .prototype/); if so, read events.jsonl and merge the structured pick with the user's text before responding.

If events.jsonl doesn't exist or has no select-variant events, the user didn't click — fall back to their terminal text only.

See WORKFLOW.md for the event schema and the resolution steps.

Variation Workflow

When --vary N is passed (N = 1, 2, or 3):

Run arkhe-preview status <manifest.session_dir>. If the server is dead (owner-pid watchdog or 30-min idle), restart it with the same --project-dir and copy existing artifacts into the new screen_dir before continuing. See WORKFLOW.md for the restart recipe.
Read $DIR/manifest.json to find the Nth artifact (artifacts[N-1].abs_path or .file inside screen_dir).
Read the existing artifact HTML to ground the variations.
Generate 3 radical conceptual variations using NEW physical metaphors (different from the original and from each other).
Write variation files into $screen_dir as {original-slug}-var-1.html, -var-2.html, -var-3.html.
Update 99-gallery.html to show the variations (or write 99-gallery-vary.html LAST). Update manifest.json with a variations array.

See WORKFLOW.md for the full variation workflow.

References

WORKFLOW.md — Manifest schema, gallery fragment template, materiality-to-CSS mapping, arkhe-preview details
EXAMPLES.md — Usage examples and sample sessions
TROUBLESHOOTING.md — Common issues (port collision, server not starting, can't find pick)

Prototype

File contents

Prototype

Quick Start

Phase 1: Style Direction

Phase 2: Artifact Generation

Phase 3: Live Preview Session

Next-Turn Pick Capture

Variation Workflow

References

Frequently asked questions

Prototype

File contents

Prototype

Quick Start

Phase 1: Style Direction

Phase 2: Artifact Generation

Phase 3: Live Preview Session

Next-Turn Pick Capture

Variation Workflow

References

Related skills

Frequently asked questions

How do I install the Prototype skill?

What does the Prototype skill do?

Is Prototype safe to use?

Which AI agents work with Prototype?

Is Prototype free to use?

Who published Prototype?