prototypepor Emil Kowalski

Prototype Skill.

Uma skill de Claude Code e Codex para design de UI: constrói várias versões genuinamente diferentes de um componente de UI com um seletor visual ao vivo.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de uso

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

Cabeçalho e títulos de seção lidos do arquivo original em 14/09/2026 · 7.432 caracteres no total

01 O que faz

O que a Skill prototype faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Um skill de divergência para explorar uma peça de UI por vez — um toast, o card de preços, um botão de manter-para-excluir. Ele recebe uma peça descrita, constrói várias versões genuinamente diferentes divergindo em um eixo nomeado (layout, densidade, personalidade, movimento, modelo de interação) e as coloca atrás de um seletor visual para que o usuário possa navegar por elas em tempo real e promover uma vencedora.

Ele só é executado quando explicitamente invocado, usa três variantes por padrão, mantém a exploração fora do código de produção e exclui a superfície de prototipagem assim que uma variante é integrada.

O que ele produz

Um seletor visual ao vivo contendo as variantes, para que possam ser percorridas e uma seja promovida.
Uma tabela comparativa nomeando o eixo de cada variante, quando ela é a escolha certa e seu custo.
Código de produção da variante escolhida, integrado na base de código com a superfície de prototipagem removida.
Capturas de tela de cada variante quando há ferramentas de navegador disponíveis.

Veja o exemplo de prompt ↗

Como funciona

01
Restrinja a Uma Peça
Se o briefing abranger vários componentes, o skill escolhe a peça de maior impacto, diz qual é e por quê, e oferece as demais como execuções de acompanhamento.
02
Reconheça o Terreno
Mapeia o framework, o sistema de estilos, a biblioteca de movimento, os tokens, a personalidade do produto e o contexto em que a peça é renderizada, para que as variantes pareçam nativas ao produto.
03
Nomeie as Direções Primeiro
Usa três variantes por padrão e até cinco quando solicitado ou quando o espaço é genuinamente amplo; cada uma recebe um nome e um eixo antes de qualquer código ser escrito.
04
Construa o Ambiente do Seletor
Em um projeto, uma rota isolada contém um arquivo por variante, além de um pequeno arquivo de ambiente; o próprio seletor é copiado de PICKER.md em vez de ser projetado.
05
Verifique Antes de Exibir
O ambiente é executado e cada variante é percorrida para verificar a correção de renderização e interação, com capturas de tela se houver ferramentas de navegador.
06
Promova a Vencedora
Após a escolha do usuário, essa variante é integrada seguindo a estrutura de arquivos, nomenclatura e uso de tokens do projeto, e a superfície de prototipagem é removida.

02 Encontre o ideal para você

Quando Usar a Skill prototype

Use a skill prototype no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são tirados do próprio arquivo da skill.

Boa Combinação

Você tem uma peça de UI descrita para explorar — um toast, um card de preços, um botão de manter-para-excluir.
Você quer várias direções defensáveis lado a lado e prefere escolher navegando por elas em tempo real do que lendo uma especificação.
O trabalho está em um projeto em execução com um servidor de desenvolvimento, onde uma rota isolada pode hospedar o ambiente.
Você está explorando sem nenhum projeto e só precisa de algo que possa abrir diretamente em um navegador.

Conheça os Limites

Revisar UI que já existe — essa tarefa pertence ao review-animations.
Planejar correções para uma animação existente ou escolher uma dependência; ambos são outros skills.
Usar a divergência como licença para abandonar a qualidade de execução: uma variante malfeita não ensina nada sobre a direção que representa.

O Que Fornecer

Uma descrição da peça de UIO que é a coisa, onde ela vai viver e o que precisa fazer — o briefing é reformulado em uma única frase.
Acesso ao projeto para reconhecimentoPara que tokens, personalidade e contexto ao redor possam delimitar até onde a variante mais audaciosa pode ir.
Uma contagem de variantes, opcionalmenteA forma x5 da invocação pede mais variantes, limitadas a cinco.
Sua escolha ao finalO skill para depois de apresentar o conjunto; a promoção espera pela escolha ou por um comando keep/riff.

03 Dentro da skill

Regras que o skill de prototipagem dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Nunca Tocar no Código de Produção Durante a Exploração
Todo o trabalho permanece em uma superfície de prototipagem isolada; a integração acontece apenas na Fase 6, apenas para a variante escolhida pelo usuário.
Cada Variante Ocupa um Eixo Nomeado
As variantes devem divergir em layout, densidade, personalidade, movimento ou modelo de interação, e cada eixo precisa ser expressável em uma frase antes de construir.
Conteúdo Real em Cada Variante
Interações reais, movimento real, texto com forma real de produto, com nomes e números plausíveis; sem lorem ipsum, sem botões mortos, sem "imagine esta parte".
O Seletor É Chrome Fixo
Sua marcação, estilos, controle de teclado e comportamento vêm literalmente de PICKER.md e nunca se adaptam ao projeto — sua aparência não é uma decisão de design.
A Barra de Qualidade Se Aplica por Variante
A divergência não reduz o padrão: ease-out nas entradas e nunca ease-in, movimento de UI com menos de 300ms, transform-origin correto, apenas transform/opacity, reduced-motion tratado.
A Troca de Variante É Instantânea
Alternar é uma ação de mais de 100 por sessão, então, pela regra de frequência, a troca de variante não recebe animação.
Os Nomes Descrevem Direções
As variantes recebem o nome da direção — Quiet, Editorial, Playful, Dense — nunca Opção A/B/C; duas direções que diferem apenas na cor de destaque ou no texto são uma única direção.
Excluir a Superfície Após a Escolha
Quando uma vencedora é promovida, a superfície de prototipagem é removida, a menos que o usuário peça para mantê-la.

04 Coloque em prática

Instalar prototype no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar prototype ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Forma genérica da CLI skills para skills/prototype/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Cada variante tem um nome e um eixo declarado, e nenhuma variante compartilha uma posição de eixo com outra.
Toda variante é acessível a partir do picker e se comporta corretamente, sem erros no console.
Nenhuma favorita é pré-selecionada na tabela de hand-off; se perguntado qual você escolheria, a razão vem da personalidade do produto e da frequência de uso.
Se duas variantes convergiram durante a construção, corte uma e diga isso em vez de inflar o conjunto.
Após um comando keep, verifique se o picker deveria sobreviver: a forma simples de keep exclui a superfície de prototipagem, a forma que deixa o picker o mantém.

No OpenDesign importe o prototype a partir do seu link SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Arquivo da skill: skills/prototype/SKILL.md Checksum do conteúdo registrado na verificação; commit d23d7f8
License: MIT De LICENSE.
Estrelas do repositório: 37.516 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório emilkowalski/skills, que contém 9 skills neste catálogo. Não é uma classificação ou contagem de uso para prototype.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Postura OperacionalPostura de engenheiro de design sênior; a divergência é o valor todo, o padrão de qualidade ainda se aplica
Regras RígidasCinco restrições numeradas sobre código de produção, eixos, variantes funcionais, picker e limpeza
Fluxo de TrabalhoFases 1 a 6: escopo, reconhecimento, direções, harness, verificação, promoção
Variantes de InvocaçãoTabela de invocações de description, x5, riff e keep e seu comportamento
TomVenda cada variante honestamente, nomeie seu custo, nunca pré-selecione uma favorita

A Descrição da Própria Skill

"Constrói múltiplas versões genuinamente diferentes de um elemento de UI que você descreve, renderizadas atrás de um seletor visual para que você possa alternar entre elas ao vivo e promover aquela que parece certa. Só executa quando explicitamente invocada; não é acionada automaticamente."

Descrição de front-matter do SKILL.md. O arquivo completo tem cerca de 7.432 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre o Skill prototype

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Ele dispara por conta própria enquanto estou editando UI?

Não. Ele só é executado quando explicitamente invocado e nunca é acionado por conta própria, e a invocação por modelo está desativada para ele. Você o chama com uma description, uma contagem x5 opcional, ou um comando riff ou keep.

Prototype

Execute prototype em uma tarefa de design de UI real.

Baixe OpenDesign, importe prototype a partir do link de SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

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

O que a Skill prototype faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill prototype

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o skill de prototipagem dá ao Claude Code e ao Codex

Nunca Tocar no Código de Produção Durante a Exploração

Cada Variante Ocupa um Eixo Nomeado

Conteúdo Real em Cada Variante

O Seletor É Chrome Fixo

A Barra de Qualidade Se Aplica por Variante

A Troca de Variante É Instantânea

Os Nomes Descrevem Direções

Excluir a Superfície Após a Escolha