Frontend & UI
design-skills · Bento
Grid de blocos variados sobre creme, tipografia Inter, escala compacta.
O que é
Uma skill de guideline para layouts bento box que apresentam o conteúdo como blocos de grid de tamanhos variados. Inter em tudo, uma escala tipográfica compacta de 12 a 32, destaques pêssego e azul sobre creme.
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Por que isso importa para design
- Tamanhos de bloco variados carregam a hierarquia, então o próprio grid faz a ordenação.
- Uma escala tipográfica compacta de 12 a 32 acomoda texto denso dentro de blocos pequenos.
- A superfície creme #FFF5E6 mantém as bordas dos blocos legíveis sem bordas pesadas.
O que cobre
- Brand
- Style foundations
- Rules: do
- Component rule expectations
- Required output structure
- Quality gates
Como instalar
design-skills · Bento
-
Clone o repositório.
git clone https://github.com/bergside/awesome-design-skills -
Aponte o Codex para o arquivo da skill.
skills/bento/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça ao Codex para atribuir a cada bloco um tamanho conforme a prioridade do conteúdo.
-
Defina os tokens de espaçamento na escala de 4 a 32 antes de dispor os blocos.
-
Solicite o tratamento de overflow e rótulos longos, que esta skill lista como casos-limite.
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.