Frontend & UI
design-skills · Editorial
Layout de revista em serifa Gelasio sobre um grid rígido de 8pt.
O que é
Uma skill de guideline de design system para um visual editorial moderno: serifa Gelasio no corpo e no display, Ubuntu Mono, quase preto #111111 sobre superfícies brancas e um grid base de 8pt.
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
Por que isso importa para design
- Display e corpo em serifa da mesma família mantêm os trechos longos de leitura consistentes na tipografia.
- Um grid base de 8pt impõe ritmo vertical entre títulos, corpo de texto e espaçamento.
- O piso de acessibilidade inclui suporte a reduced-motion, alvos de toque de 44px e tratamento de alto contraste.
O que cobre
- Style foundations
- Accessibility
- Guideline authoring workflow
- Required output structure
- Component rule expectations
- Quality gates
Como instalar
design-skills · Editorial
-
Clone o repositório.
git clone https://github.com/bergside/awesome-design-skills -
Aponte o Codex para o arquivo da skill.
skills/editorial/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça ao Codex para reafirmar a intenção de design e definir os tokens antes de mexer nos componentes.
-
Solicite regras de componente que cubram anatomia, variantes, estados e comportamento responsivo.
-
Feche com a checklist de QA para que um revisor de código consiga verificar a saída.
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.