# Using the Prototype Skill for UI Prototyping: Complete Examples and Workflow Guide > Explore UI prototyping with the Prototype skill from emilkowalski/skills. Generate production-ready variants safely in isolated environments. Learn workflow examples. - Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills) - Tags: how-to-guide - Published: 2026-08-09 --- **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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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: ```bash 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`](https://github.com/emilkowalski/skills/blob/main/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: ```bash 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: ```bash 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: ```bash # Promote variant 2 and remove the prototype surface skills prototype keep 2 ``` Or retain the picker for ongoing experimentation: ```bash # 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`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/SKILL.md) enforces strict isolation boundaries that separate exploration from production: - **Route Isolation** — All generated files live under `/prototypes/` 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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/SKILL.md). - All exploration occurs in **isolated routes** (`/prototypes/`) or standalone HTML files, guaranteeing zero production code contamination during the divergence phase. - The **picker harness** ([`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md)) provides consistent, unbiased variant comparison with instant switching and no animation overhead. - **Promotion commands** (`skills prototype keep `) 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`](https://github.com/emilkowalski/skills/blob/main/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 ` 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.