Vai alla guida all’uso
prototypedi Emil Kowalski

Prototype Skill.

Una skill Claude Code e Codex per la progettazione UI: costruisce diverse versioni autenticamente differenti di un elemento UI dietro un selettore visivo live.

  • Web & UI
  • Codice UI
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 e intestazioni di sezione letti dal file upstream il 14/09/2026 · 7.432 caratteri in totale

01 Cosa fa

Cosa fa la skill prototype in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Una skill di divergenza per esplorare un singolo elemento di UI alla volta — un toast, la card dei prezzi, un pulsante hold-to-delete. Prende un elemento descritto, costruisce diverse versioni realmente differenti che divergono su un asse dato (layout, densità, personalità, motion, modello di interazione) e le mette dietro un selettore visivo così l'utente può scorrerle dal vivo e promuovere una vincitrice.

Viene eseguita solo se invocata esplicitamente, di default genera tre varianti, mantiene l'esplorazione fuori dal codice di produzione ed elimina la superficie di prototipazione una volta integrata una variante.

Che cosa produce

  • Un selettore visivo dal vivo che contiene le varianti, così possono essere scorse e una promossa.
  • Una tabella comparativa che indica l'asse di ciascuna variante, quando è la scelta giusta e il suo costo.
  • Codice di produzione per la variante scelta, integrato nel codebase con la superficie di prototipazione eliminata.
  • Screenshot di ciascuna variante quando è disponibile uno strumento browser.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Limitare a un Solo Elemento

    Se il brief copre diversi componenti, la skill seleziona l'elemento a maggiore leva, indica quale e perché, e offre il resto come esecuzioni successive.

  2. 02
    Fare Ricognizione del Terreno

    Mappa framework, sistema di styling, libreria di motion, token, personalità del prodotto e il contesto in cui l'elemento viene renderizzato, così le varianti possono apparire native al prodotto.

  3. 03
    Nominare Prima le Direzioni

    Di default produce tre varianti e fino a cinque su richiesta o quando lo spazio è realmente ampio; ognuna riceve un nome e un asse prima che venga scritto alcun codice.

  4. 04
    Costruire l'Harness del Selettore

    In un progetto, una route isolata contiene un file per variante più un piccolo file harness; il selettore stesso viene copiato da PICKER.md piuttosto che progettato.

  5. 05
    Verificare Prima di Mostrare

    L'harness viene eseguito e ogni variante viene scorsa per verificarne la correttezza di rendering e interazione, con screenshot se esiste uno strumento browser.

  6. 06
    Promuovere la Vincitrice

    Dopo che l'utente ha scelto, quella variante viene integrata seguendo la struttura dei file, la nomenclatura e l'uso dei token del progetto, e la superficie di prototipazione viene rimossa.

02 Trova la tua applicazione

Quando usare lo Skill prototype

Usa lo skill prototype in Claude Code o Codex quando il lavoro è UI design di questo tipo. Idoneità e limiti sotto sono presi dal file stesso dello skill.

Buona applicazione

  • Avete un singolo elemento di UI descritto da esplorare — un toast, una card dei prezzi, un pulsante hold-to-delete.
  • Volete diverse direzioni difendibili affiancate e preferite scegliere scorrendole dal vivo piuttosto che leggendo una specifica.
  • Il lavoro si trova in un progetto attivo con un dev server, dove una route isolata può ospitare l'harness.
  • State esplorando senza alcun progetto e avete semplicemente bisogno di qualcosa da aprire direttamente in un browser.

Conosci i limiti

  • Revisionare UI già esistente — questo compito appartiene a review-animations.
  • Pianificare correzioni per un'animazione esistente o scegliere una dipendenza; entrambe sono altre skill.
  • Usare la divergenza come licenza per abbassare la qualità di esecuzione: una variante sciatta non insegna nulla sulla direzione che rappresenta.

Cosa fornire

  • Una descrizione dell'elemento UIChe cos'è, dove vivrà e cosa deve fare — il brief viene riformulato in un'unica frase.
  • Accesso al progetto per la ricognizioneCosì i token, la personalità e il contesto circostante possono delimitare quanto lontano possa arrivare la variante più audace.
  • Un numero di varianti, opzionaleLa forma x5 dell'invocazione richiede più varianti, con un massimo di cinque.
  • La sua scelta finaleLa skill si interrompe dopo aver presentato l'insieme; la promozione attende la scelta o un comando keep/riff.

03 Dentro la skill

Regole che la Skill del prototipo dà a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Non toccare mai il codice di produzione durante l'esplorazione

    Tutto il lavoro resta in una superficie di prototipo isolata; l'integrazione avviene solo nella Fase 6, solo per la variante scelta dall'utente.

  2. Ogni variante occupa un asse denominato

    Le varianti devono divergere su layout, densità, personalità, motion o modello di interazione, e ogni asse deve essere esprimibile in una frase prima di costruire.

  3. Contenuto reale in ogni variante

    Interazioni reali, motion reale, testo effettivamente di prodotto con nomi e numeri plausibili; niente lorem ipsum, niente bottoni morti, niente "immagina questa parte".

  4. Il Picker è chrome fisso

    Il suo markup, gli stili, il cablaggio da tastiera e il comportamento provengono letteralmente da PICKER.md e non si adattano mai al progetto — il suo aspetto non è una decisione di design.

  5. La craft bar si applica per variante

    La divergenza non abbassa il livello: ease-out sugli ingressi e mai ease-in, motion UI sotto i 300ms, transform-origin corretto, solo transform/opacity, reduced-motion gestito.

  6. Il passaggio tra varianti è istantaneo

    Passare da una variante all'altra è un'azione da 100+ per sessione, quindi secondo la regola della frequenza il cambio di variante non ha animazione.

  7. I nomi descrivono le direzioni

    Le varianti prendono il nome dalla direzione — Quiet, Editorial, Playful, Dense — mai Opzione A/B/C; due direzioni che differiscono solo per colore d'accento o copy sono un'unica direzione.

  8. Eliminare la superficie dopo la scelta

    Quando una vincitrice viene promossa, la superficie di prototipo viene rimossa a meno che l'utente non chieda di conservarla.

04 Mettila al lavoro

Installa prototype in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi prototype a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma generica della CLI skills per skills/prototype/SKILL.md; il repository può documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Ogni variante ha un nome e un asse dichiarato, e nessuna variante condivide la posizione dell'asse con un'altra.
  • Ogni variante è raggiungibile dal picker e si comporta correttamente, senza errori in console.
  • Nella tabella di consegna non viene pre-selezionato alcun preferito; se le viene chiesto quale scegliere, la motivazione deriva dalla personalità del prodotto e dalla frequenza d'uso.
  • Se due varianti convergono durante la build, ne elimina una e lo dichiara, invece di gonfiare l'insieme.
  • Dopo un comando keep, verifica se il picker doveva sopravvivere: la forma keep semplice elimina la superficie del prototipo, la forma leave-the-picker la conserva.

In OpenDesign importi il prototype dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni nella barra superiore.

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Repository
github.com/emilkowalski/skills Branch main
File della skill
skills/prototype/SKILL.md Checksum del contenuto registrato alla verifica; commit d23d7f8
License
MIT Da LICENSE.
Stelle del repository
37.516 Snapshot GitHub acquisito il 2026-09-14 per l'intero repository emilkowalski/skills, che contiene 9 skill presenti in questo catalogo. Non è un punteggio né un conteggio di utilizzo per prototype.
Verificato da OpenDesign
14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

  1. Postura OperativaAtteggiamento da senior design engineer; la divergenza è il valore stesso, il livello qualitativo resta invariato
  2. Regole RigideCinque vincoli numerati su codice di produzione, assi, varianti funzionanti, picker e pulizia
  3. WorkflowFasi da 1 a 6: ambito, ricognizione, direzioni, harness, verifica, promozione
  4. Varianti di InvocazioneTabella di descrizione, x5, riff e comandi keep e loro comportamento
  5. TonoPresenta ogni variante onestamente, ne indica il costo, non pre-seleziona mai un preferito
Descrizione della skill
«Costruisce più versioni genuinamente diverse di un elemento UI che descrivi, renderizzate dietro un selettore visivo così puoi scorrerle dal vivo e promuovere quella che ti convince. Viene eseguito solo quando esplicitamente invocato; non si attiva da solo.»

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 7.432 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande Sullo Skill prototype

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Si attiva da solo mentre modifico l'UI?

No. Si esegue solo quando viene invocato esplicitamente e non si attiva mai da solo, e l'invocazione da parte del modello è disabilitata per questo skill. Lo si richiama con una descrizione, un conteggio x5 opzionale, o un comando riff o keep.

Prototype

Esegui prototype su un compito di design UI reale.

Scarica OpenDesign, importa prototype dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

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

OpenDesign Desktop

Un solo design system. Il tuo brand, coerente ovunque

Nel Vibe Design Workspace completo, applica le stesse regole di brand a siti, presentazioni, prototipi interattivi, dashboard, immagini e video HTML. Collega Codex, Claude Code, Cursor e gli altri agenti di coding locali e crea gratis.

  • Siti, presentazioni, prototipi, dashboard, immagini e video
  • Oltre 140 design system e la libreria completa di template e skill
  • Codex locale e oltre 21 agenti di coding · Gratis
Scarica gratis

Disponibile per macOS e Windows