Frontend & UI
imagegen-frontend-web
Gera uma imagem de referência horizontal para cada seção da landing page.
O que é
Uma skill de direção de imagem para referências de design de sites. Ela gera uma imagem horizontal separada por seção, com uma única paleta fixa e composição de hero variada ao longo do conjunto.
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections pro
Por que isso importa para design
- Uma landing page de oito seções resulta em oito comps legíveis, não um quadro único e espremido.
- A composição do hero varia além do padrão batido de texto à esquerda e imagem à direita.
- Uma só paleta, escala tipográfica e família de CTA se mantém em todos os quadros gerados.
O que cobre
- Image count and page slicing
- The combinatorial variation engine
- Hero minimalism rules
- Color and material rules
- Multi-image consistency rule
- Default site packs
Como instalar
imagegen-frontend-web
-
Clone o repositório.
git clone https://github.com/Leonxlnx/taste-skill -
Aponte o Codex para o arquivo da skill.
skills/imagegen-frontend-web/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Diga quantas seções você quer; se não for informado, a landing page assume seis por padrão.
-
A skill anuncia a contagem e depois rotula cada saída pelo número da seção.
-
Dê palavras de clima como editorial ou cinematográfico para guiar a escala do hero e o fundo.
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.