Using the Prototype Skill for UI Prototyping: Complete Examples and Workflow Guide

The Prototype skill in the emilkowalski/skills repository is a self-contained divergence engine that generates 3–5 production-ready UI variants in isolated environments, allowing teams to explore design directions safely before promoting winners into production codebases.

The emilkowalski/skills repository provides a markdown-driven skill system for AI-assisted development workflows. Among these capabilities, the prototype skill stands out as a specialized tool for rapid UI exploration, enabling developers to generate multiple implementation variants without risking contamination of existing project files.

Understanding the Prototype Skill Architecture

The prototype skill operates through a strict six-phase workflow defined in skills/prototype/SKILL.md. This architecture ensures that exploration remains isolated until explicitly promoted.

Core Components and File Structure

The skill relies on four primary files that orchestrate the prototyping pipeline:

• skills/prototype/SKILL.md — Defines the skill’s metadata, hard rules, and the six-phase workflow (Scope → Recon → Choose directions → Build picker → Verify → Promote). This file explicitly mandates that the skill is invoked only when called, never automatically, and enforces the critical rule: "Never touch production code during exploration."

• skills/prototype/PICKER.md — Supplies the exact markup, CSS, and keyboard wiring for the visual comparison harness. The picker is considered chrome rather than a design decision, meaning the skill copies it verbatim to ensure unbiased variant comparison with instant switching and no animation overhead.

• skills/pick-ui-library/SKILL.md — Assists in selecting appropriate UI libraries (Tailwind, Radix, Shadcn) when scaffolding concrete implementations during the prototype workflow.

• skills/animate/SKILL.md — Provides animation primitives (easing curves, duration limits, transform-only rules) that all variants must respect, ensuring consistent motion standards such as ease-out on entrances and sub-300ms motion durations.

The Six-Phase Workflow

According to the source code in skills/prototype/SKILL.md, every prototype invocation follows this strict sequence:

1. Scope — Parse the user's description and establish constraints
2. Recon — Analyze the existing project context without modifying files
3. Choose directions — Identify 3–5 distinct variant axes (layout, density, personality)
4. Build picker — Generate the isolated environment with the picker harness
5. Verify — Validate that each variant functions correctly (interactions, motion, console errors)
6. Promote — Copy the selected winner into the production codebase and clean up isolation surfaces

Concrete Examples of Using the Prototype Skill

After installing the skill set via npx skills@latest add emilkowalski/skills, you can execute specific prototyping commands that demonstrate the divergence engine in action.

Basic Toast Notification Prototype

The simplest invocation creates an isolated exploration environment for a specific component:

skills prototype "toast notification"

This command triggers the full six-phase workflow. During execution, the skill:

• Creates an isolated route at /prototypes/toast (or a self-contained HTML file if no project exists)
• Generates three distinct variants along different axes (e.g., Quiet, Editorial, Playful)
• Installs the picker harness from PICKER.md to enable instant switching between implementations

You can then open the provided URL or file in a browser to interact with each toast design, verifying click handlers, motion behavior, and console integrity.

Generating Multiple Variants

To explore broader design spaces, request up to five variants explicitly:

skills prototype "toast notification x5"

The prototype skill respects the five-variant cap while ensuring genuine divergence rather than cosmetic tweaks. Each variant anchors to a clearly named axis—such as layout structure, information density, or brand personality—preventing redundant implementations.

Iterating with the Riff Command

Once you identify a promising direction, refine it without losing the comparison harness:

skills prototype riff "Playful"

This command preserves the existing picker infrastructure while spawning a fresh set of variants that diverge specifically around the Playful personality axis. The riff functionality allows deep exploration of a single design language before committing to production.

Promoting Winners to Production

When you've selected a winning variant, promote it safely into your project structure:

# Promote variant 2 and remove the prototype surface

skills prototype keep 2

Or retain the picker for ongoing experimentation:

# Promote variant 1 while keeping the isolation route active

skills prototype keep 1, leave the picker

The promotion phase (Phase 6) copies the selected variant's files into your project's component folder, updates imports to match your token system and file layout conventions, and deletes the isolated prototype surface—unless explicitly instructed to preserve it for future A/B testing.

How the Prototype Skill Ensures Safe Isolation

The implementation in skills/prototype/SKILL.md enforces strict isolation boundaries that separate exploration from production:

• Route Isolation — All generated files live under /prototypes/<slug> or within a single HTML file, preventing accidental imports into production code during Phases 1–5.
• Zero Production Imports — No production code is referenced or modified until the explicit promotion command executes.
• Picker Immutability — The comparison harness from PICKER.md remains constant across all variants, ensuring that observed differences stem from design decisions rather than testing infrastructure variations.
• Library Abstraction — Through integration with skills/pick-ui-library/SKILL.md, the prototype skill scaffolds variants with appropriate UI stacks without imposing library choices on the final promoted code.

Summary

• The prototype skill generates 3–5 production-ready UI variants through a strict six-phase workflow defined in skills/prototype/SKILL.md.
• All exploration occurs in isolated routes (/prototypes/<slug>) or standalone HTML files, guaranteeing zero production code contamination during the divergence phase.
• The picker harness (skills/prototype/PICKER.md) provides consistent, unbiased variant comparison with instant switching and no animation overhead.
• Promotion commands (skills prototype keep <n>) safely migrate selected variants into production while respecting existing project conventions and token systems.
• The skill integrates with pick-ui-library and animate skills to ensure scaffolded variants use appropriate UI stacks and motion standards.

Frequently Asked Questions

How does the prototype skill prevent accidental changes to production code?

The skill enforces a hard rule defined in skills/prototype/SKILL.md: "Never touch production code during exploration." All files generated during Phases 1–5 exist in isolated routes or temporary HTML files. Only when you explicitly run skills prototype keep <n> does the skill copy files into your production structure, and even then, it respects your existing token system and naming conventions without modifying unrelated files.

Can I use the prototype skill without an existing project structure?

Yes. If the skill detects no existing project, it generates a self-contained HTML file with all variants and the picker harness embedded. This allows UI exploration in greenfield scenarios or quick demonstrations without scaffolding an entire application.

What determines the number of variants generated?

By default, the skill creates three variants. You can request up to five variants by appending x5 to your prototype description (e.g., skills prototype "button x5"). The skill caps variants at five to ensure meaningful divergence along distinct axes—such as layout, density, and personality—rather than generating superficial cosmetic variations.

How does the riff command differ from creating a new prototype?

The riff command preserves your existing picker harness and isolation environment while generating new variants that diverge from a specific chosen direction (e.g., skills prototype riff "Playful"). This allows deeper exploration of a single design language, whereas a new prototype invocation would start fresh with the full six-phase workflow and potentially different variant axes.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}