Frontend & UI
design-skills · Terracotta
Destaque terracota sobre creme, títulos em DM Serif Display, leitura longa.
O que é
Uma skill de guideline para uma interface editorial de tom terroso: superfícies creme #F3E9D8, um único destaque terracota #C56A3C, títulos em DM Serif Display, JetBrains Mono. Afinada para blogs e narrativas.
A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.
Por que isso importa para design
- Uma só cor de destaque, então a ênfase fica escassa e os títulos carregam a hierarquia.
- As superfícies creme quentes reduzem o ofuscamento em artigos longos, em comparação com páginas de branco puro.
- Títulos em serifa de display sobre corpo em marrom-tinta definem um ritmo editorial claro.
O que cobre
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
Como instalar
design-skills · Terracotta
-
Clone o repositório.
git clone https://github.com/bergside/awesome-design-skills -
Aponte o Codex para o arquivo da skill.
skills/terracotta/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Aponte o Codex para os tokens terracota e creme antes de ele escrever qualquer componente.
-
Peça anatomia, variantes e estados por componente, com os tokens de espaçamento nomeados de forma explícita.
-
Solicite anti-padrões e notas de migração ao adaptar uma UI existente e inconsistente.
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.