# Build a /prototype skill that designs variations of a feature

> A Claude Code skill that builds five HTML prototypes of a feature, compares them, and recommends one before you look. Here's the SKILL.md file and how to run it.

- Canonical: https://konigi.com/articles/prototype-skill/
- Author: Michael Angeles
- Published: 2026-10-06
- Tags: claude-code, ai, design

A /prototype skill tells Claude to give you a handful of differently designed versions so you can explore and select the best one.

---

In her [Dive Club Live demo](https://www.youtube.com/watch?v=hKeDfupbA4U), Claude Code design lead [Meaghan Choi](https://www.linkedin.com/in/meaghanchoi/) talks about using a `/prototype` skill. Claude builds five HTML versions of a feature, then picks one and explains why before she looks at any of them. As designers, expansion or sketching several options before committing to one is something we've done to explore many concepts until we find the best fit. A /prototype skill applies the same concept to design engineering. Here's how I built mine.

![Share card: Sketch five, pick one, with the article's three takeaways.](/images/prototype-skill-summary-card.webp)

## Build it

1. Create the folder:

   ```
   mkdir -p ~/.claude/skills/prototype
   ```
2. Save this as `~/.claude/skills/prototype/SKILL.md`:

   ```markdown
   ---
   name: prototype
   description: Build five distinct HTML prototypes of a feature, compare them, and recommend one. Use when the user runs /prototype.
   disable-model-invocation: true
   ---

   The feature is the text after /prototype. If there isn't any, ask.
   Don't infer it from the branch or worktree name.

   1. Read the code the feature touches. Find the design tokens (tokens
      file, CSS custom properties, or Tailwind config). If there are none,
      ask before inventing any.
   2. Find real content for the feature in the codebase (fixtures, seed
      data, existing copy). If there isn't enough, ask. Never use placeholder
      content.
   3. Write a one-line premise for each of five variants. Each one changes
      the interaction, layout, or density, not just the styling.
   4. Make sure prototypes/ is listed in the project's .gitignore. Add it
      if it's missing, and create the .gitignore if there isn't one.
   5. Create prototypes/<feature>/v1.html through v5.html at the project
      root. Each file is self-contained: inline the token values as CSS
      custom properties and don't link to project files. Covering the
      empty state is optional. Do it when the feature has a meaningful one.
   6. Create prototypes/<feature>/index.html that shows all five side by side.
   7. Write prototypes/<feature>/rationale.md: one paragraph per variant
      covering its premise, what it gives up, and rough build cost. Then
      your pick and why.
   8. Serve the folder. Starting at port 8000, check each port with
      `lsof -ti:<port>` and take the first free one. Never stop a server
      you didn't start. Run `python3 -m http.server <port> --directory
      prototypes/<feature>` in the background.
   9. End your reply with clickable links: http://localhost:<port>/ for
      the side-by-side view, then each variant, then the full path to
      rationale.md. Say how to stop the server.
   10. Stop. Change no production code until the user picks a variant.
   ```
3. Restart Claude Code and type `/` to confirm `prototype` appears.

The `disable-model-invocation` line means Claude runs the skill only when you type `/prototype`, never on its own judgment. The line about changing the interaction, layout, or density does the most work. Without it, you get one idea in five color schemes.

## Run it

Meaghan runs the skill in auto mode so Claude can build all five without asking permission at every step.

1. Press Shift+Tab until the status line shows auto mode.
2. Run `/prototype add autocomplete to the projects search field`.
3. Click the `localhost` link Claude ends with to see all five side by side, read the rationale, then pick one or combine parts of two.

Describe the user's problem instead of the solution. "People can't find old projects" produces more range than "add autocomplete."

## Ship it with a screenshot

A picture and a written reason for the change will make it easier for the dev reviewer to approve. Finish by having Claude open a pull request with a screenshot taken through [Claude in Chrome](https://claude.com/chrome). Reviewers see the change before they read any code. Tell Claude: "Screenshot the new feature in Chrome and open a pull request with the screenshot and the rationale for this variant."

## Key takeaways

- A /prototype skill has Claude build five HTML versions of a feature and recommend one with its reasons.
- Tell the skill to vary the interaction, layout, or density, or you get one idea in five color schemes.
- Describe the user's problem instead of the solution to get more range from the five versions.