Frontend & UI
Impeccable
Duas dúzias de comandos para construir, criticar e refinar interfaces de frontend.
O que é
Uma skill de design de frontend com comandos agrupados em build, evaluate, refine, enhance, fix e iterate. Ela lê o contexto do projeto e uma referência de registro, e então escreve código em nível de produção.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
Por que isso importa para design
- A separação de registro leva páginas de marketing e UI de produto por regras de design diferentes.
- Proibições absolutas rejeitam texto em gradiente, bordas com faixa lateral e rótulos eyebrow acima de cada seção.
- Os pisos de contraste são explícitos: 4.5:1 para o corpo de texto, 3:1 para texto grande.
O que cobre
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
Como instalar
Impeccable
-
Clone o repositório.
git clone https://github.com/pbakaus/impeccable -
Aponte o Codex para o arquivo da skill.
plugin/skills/impeccable/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Rode context.mjs uma vez por sessão para a skill carregar PRODUCT.md e DESIGN.md.
-
Chame um comando como critique, polish ou animate com um arquivo alvo.
-
Use o modo live com um dev server rodando para gerar variantes no navegador.
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 image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
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. 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.