Três versões de verdade. Escolha uma.
Escolher entre descrições é chute. A skill desenha três direções realmente diferentes pra um componente, com as fontes e cores do próprio projeto, aplica cada uma na página no ar e coloca ao lado da versão atual, no computador e no celular. Você escolhe 1, 2, 3 ou uma mistura; ela constrói essa.
npx skills add c0le0ni/skills --skill coleoni-variants
Cupom, lousa ou blocos?
O card ao lado do título da padaria: o que está pronto, que horas, quanto, o que acabou. Três posições, todas nas cores e fontes da marca, nenhuma com um fato que não esteja na página.
{
"title": "Today's menu card",
"brief": "What's ready, when, how much,
and what's gone. First.",
"variants": [
{ "name": "Receipt",
"note": "A printed ticket..." },
{ "name": "Chalkboard",
"note": "The board behind..." },
{ "name": "Tiles",
"note": "One tile per item..." }
]
}
Brief, três posições, a página real.
Cada variação toma uma posição clara e diz do que abre mão. O quadro coloca as três na página, onde a decisão acontece de verdade.
-
Lê o componente
O HTML, o CSS, os tokens que ele usa e as regras de design do projeto.
-
Escreve o brief
Pra que serve o componente e o que a pessoa precisa entender primeiro. As variações competem nisso.
-
Desenha três direções
Calma, de marca, densa, ou o que fizer sentido pro componente. Mesmo conteúdo, tokens do projeto.
-
Aplica ao vivo
Cada uma injetada na página real, com as fontes, cores e vizinhos de verdade.
-
Monta o quadro
A atual e as três, no computador e num celular de 390px, conferidas contra rolagem lateral e texto cortado.
-
Constrói a escolhida
Do jeito que o projeto escreve estilo, com tokens, mantendo títulos, rótulos e foco.
Um comando, em qualquer agente.
O único pacote é o playwright-core, que o agente instala no primeiro uso. Ele usa o Chrome ou o Edge que você já tem.
npx skills add c0le0ni/skills --skill coleoni-variants
/coleoni-variants a tabela de preços
-g-a claude-code-a codexnpx skills add c0le0ni/skillsQualquer componente que mereça um segundo olhar.
Cards, heros, tabelas de preço, menus, formulários, telas vazias.
Três jeitos de mostrar os planos.
/coleoni-variants a tabela de preços
Com uma restrição.
/coleoni-variants o hero, uma delas sem a foto
Misturar duas.
/coleoni-variants constrói a 2 com os blocos da 3
O motor, pelo terminal.
O scripts/variants.mjs também roda sozinho: node variants.mjs http://localhost:3000 --select ".precos" --variants variants.json --lang pt.
| Opção | Para quê |
|---|---|
--select ".card" | O componente |
--variants arquivo.json | Nome, nota, CSS e HTML opcional de cada variação |
--width 1280 | Largura do computador; o celular é 390 |
--lang en|pt | Língua do quadro |
Pare de descrever. Olhe.
npx skills add c0le0ni/skills --skill coleoni-variants