98.8K+Download
Skip to the usage guide
prototypeby Emil Kowalski

Prototype Skill.

A Claude Code and Codex skill for UI design: builds several genuinely different versions of a UI piece behind a live visual picker.

  • Web & UI
  • UI code
Download OpenDesignView usage guide
emilkowalski/skills · skills/prototype/SKILL.mdSKILL.md
--- name: prototype description: Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own. --- ## Operating Posture ## Hard Rules ## Workflow ## Invocation Variants ## Tone
Front matter and section headings read from the upstream file on 2026-09-14 · 7,432 characters in full

01 What it does

What the prototype Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

A divergence skill for exploring one piece of UI at a time — a toast, the pricing card, a hold-to-delete button. It takes a described piece, builds several genuinely different versions of it diverging on a named axis (layout, density, personality, motion, interaction model), and puts them behind a visual picker so the user can flip through them live and promote a winner.

It runs only when explicitly invoked, defaults to three variants, keeps exploration out of production code, and deletes the prototype surface once a variant is integrated.

What it produces

  • A live visual picker holding the variants, so they can be flipped through and one promoted.
  • A comparison table naming each variant's axis, when it is the right choice, and its cost.
  • Production code for the chosen variant, integrated in the codebase with the prototype surface deleted.
  • Screenshots of each variant when browser tooling is available.
See the example prompt ↗

How It Works

  1. 01
    Scope to One Piece

    If the brief spans several components, the skill picks the single highest-leverage piece, says which and why, and offers the rest as follow-up runs.

  2. 02
    Recon the Ground

    Maps framework, styling system, motion library, tokens, product personality and the context the piece renders in, so variants can look native to the product.

  3. 03
    Name the Directions First

    Defaults to three variants and up to five when asked or when the space is genuinely wide; each gets a name and an axis before any code is written.

  4. 04
    Build the Picker Harness

    In a project, an isolated route holds one file per variant plus a small harness file; the picker itself is copied from PICKER.md rather than designed.

  5. 05
    Verify Before Showing

    The harness is run and every variant flipped through for render and interaction correctness, with screenshots if browser tooling exists.

  6. 06
    Promote the Winner

    After the user picks, that variant is integrated following the project's file layout, naming and token usage, and the prototype surface is removed.

02 Find your fit

When to Use the prototype Skill

Use the prototype skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • You have one described UI piece to explore — a toast, a pricing card, a hold-to-delete button.
  • You want several defensible directions side by side and would rather choose by flipping through them live than by reading a spec.
  • The work sits in a running project with a dev server, where an isolated route can host the harness.
  • You are exploring with no project at all and just need something you can open directly in a browser.

Know the Boundaries

  • Reviewing UI that already exists — that job belongs to review-animations.
  • Planning fixes for existing animation or choosing a dependency; both are other skills.
  • Using divergence as licence to drop execution quality: a sloppy variant teaches nothing about the direction it represents.

What to Provide

  • A description of the UI pieceWhat the thing is, where it will live and what it must do — the brief gets restated in a single sentence.
  • Access to the project for reconSo tokens, personality and surrounding context can bound how far the boldest variant may go.
  • A variant count, optionallyThe x5 form of the invocation asks for more variants, capped at five.
  • Your pick at the endThe skill stops after presenting the set; promotion waits on the choice or on a keep/riff command.

03 Inside the skill

Rules the prototype Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Never Touch Production Code While Exploring

    All work stays in an isolated prototype surface; integration happens only in Phase 6, only for the variant the user picked.

  2. Every Variant Occupies a Named Axis

    Variants must diverge on layout, density, personality, motion or interaction model, and each axis has to be statable in a phrase before building.

  3. Real Content in Every Variant

    Real interactions, real motion, actual product-shaped copy with plausible names and numbers; no lorem ipsum, no dead buttons, no "imagine this part".

  4. The Picker Is Fixed Chrome

    Its markup, styles, keyboard wiring and behavior come verbatim from PICKER.md and never adapt to the project — its look is not a design decision.

  5. Craft Bar Applies per Variant

    Divergence does not lower the bar: ease-out on entrances and never ease-in, sub-300ms UI motion, correct transform-origin, transform/opacity only, reduced-motion handled.

  6. Variant Switching Is Instant

    Flipping is a 100+ per session action, so by the frequency rule the variant swap gets no animation.

  7. Names Describe Directions

    Variants are named for the direction — Quiet, Editorial, Playful, Dense — never Option A/B/C; two directions differing only in accent color or copy are one direction.

  8. Delete the Surface After the Pick

    When a winner is promoted the prototype surface is removed unless the user asks to keep it around.

04 Put it to work

Install prototype in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add prototype to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/emilkowalski/skills --skill prototype

Generic skills CLI form for skills/prototype/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Build me a few versions of the toast that appears after someone saves a filter. It shows bottom-left over the dashboard, has an undo action, and auto-dismisses. We're on React with Tailwind and the tokens live in theme.css. Give me 3 variants and put them behind the picker.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Every variant has a name and a stated axis, and no two variants share an axis position.
  • Every variant is reachable from the picker and behaves correctly, with no console errors.
  • No favourite is pre-picked in the hand-off table; if asked which you would choose, the reason comes from the product's personality and frequency of use.
  • If two variants converged during the build, cut one and say so rather than padding the set.
  • After a keep command, check whether the picker was meant to survive: the plain keep form deletes the prototype surface, the leave-the-picker form keeps it.

In OpenDesign import prototype from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Emil Kowalski
Repository
github.com/emilkowalski/skills Branch main
Skill file
skills/prototype/SKILL.md Content checksum recorded at verification; commit d23d7f8
License
MIT From LICENSE.
Repository stars
37,516 GitHub snapshot taken 2026-09-14 for the whole emilkowalski/skills repository, which contains 9 skills in this catalog. Not a rating or usage count for prototype.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Operating PostureSenior design engineer stance; divergence is the whole value, craft bar still applies
  2. Hard RulesFive numbered constraints on production code, axes, working variants, picker and cleanup
  3. WorkflowPhases 1 to 6: scope, recon, directions, harness, verify, promote
  4. Invocation VariantsTable of description, x5, riff and keep invocations and their behavior
  5. ToneSell each variant honestly, name its cost, never pre-pick a favourite
The Skill's Own Description
“Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own.”

Front-matter description from SKILL.md. The full file is about 7,432 characters. Read the full file on GitHub.

06 Before you install

Questions About the prototype Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does it fire on its own when I'm editing UI?

No. It only runs when explicitly invoked and never triggers on its own, and model invocation is disabled for it. You call it with a description, an optional x5 count, or a riff or keep command.

Prototype

Run prototype on a Real UI Design Task.

Download OpenDesign, import prototype from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/emilkowalski/skills --skill prototype

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows