Frontend & UI
image-to-code
Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente.
O que é
Um fluxo que começa pela imagem para tarefas visuais na web. O agente gera imagens de referência por seção, extrai delas tipografia, espaçamento, cor e componentes, e então implementa o site para bater com a referência.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In C
Por que isso importa para design
- O código segue uma referência visual real, então a implementação não escorrega para layouts genéricos.
- Cada seção ganha sua própria imagem em tamanho grande, o que mantém texto e espaçamento analisáveis.
- Os heros ficam com até três linhas de título e sem pilhas de containers aninhados.
O que cobre
- Mandatory image-first rule
- Generate enough images rule
- Deep image analysis requirement
- Hero minimalism rules
- Anti-drift implementation rule
- Anti-AI-slop rules
Como instalar
image-to-code
-
Clone o repositório.
git clone https://github.com/Leonxlnx/taste-skill -
Aponte o Codex para o arquivo da skill.
skills/image-to-code-skill/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Informe o número de seções; no Codex a skill gera uma imagem por seção.
-
Peça uma renderização mais próxima quando o detalhe de botão ou tipografia ficar ilegível.
-
Deixe que ela rode a checagem de clareza antes de escrever qualquer arquivo de implementação.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. 
Frontend & UI O que ele faz imagegen-frontend-web Gera uma imagem de referência horizontal para cada seção da landing page. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.