Frontend & UI
gpt-taste
Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas.
O que é
Uma diretriz de frontend que força variação de layout por seleção aleatória simulada de hero, tipografia, componentes e paradigmas de GSAP. Também impõe a estrutura de página AIDA e espaçamento generoso entre seções.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP Scro
Por que isso importa para design
- Os títulos do hero ficam em duas ou três linhas porque o container se alarga em vez de virar parede de texto.
- Os grids bento usam grid-flow-dense, então nenhuma célula fica vazia ou quebrada.
- Rótulos genéricos são proibidos e o contraste do texto dos botões é verificado antes de entregar.
O que cobre
- Python-driven true randomization
- AIDA structure and spacing
- Hero architecture and the 2-line iron rule
- The gapless bento grid
- Advanced GSAP motion and hover physics
- Content, assets and strict bans
Como instalar
gpt-taste
-
Clone o repositório.
git clone https://github.com/Leonxlnx/taste-skill -
Aponte o Codex para o arquivo da skill.
skills/gpt-tasteskill/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça uma página; a skill emite um bloco design_plan antes de qualquer código de UI.
-
Revise as escolhas aleatórias: layout do hero, conjunto de fontes, componentes, paradigmas de GSAP.
-
Confira os itens de pré-voo: matemática da largura do hero, densidade do grid, varredura de rótulos, contraste.
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
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. 
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.