Frontend & UI
Details that make interfaces feel better
Dezesseis regras concretas de acabamento de UI com uma checklist de revisão.
O que é
Um conjunto de princípios de design engineering para acabamento de interface: raios concêntricos, alinhamento óptico, sombras em camadas, animações de entrada escalonadas, números tabulares, áreas de clique e especificidade de transição.
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/
Por que isso importa para design
- Nomeia valores exatos, então a escala ao pressionar é sempre 0.96, nunca no chute.
- Corrige o descompasso de raios aninhados que faz a maioria dos componentes parecer errada.
- Pega o deslocamento de layout causado por números que mudam antes de chegar aos usuários.
O que cobre
- Quick reference
- Core principles
- Common mistakes
- Review output format
- Review checklist
- Reference files
Como instalar
Details that make interfaces feel better
-
Clone o repositório.
git clone https://github.com/jakubkrehel/make-interfaces-feel-better -
Aponte o Codex para o arquivo da skill.
skills/make-interfaces-feel-better/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Aponte o Codex para um componente e peça que ele aplique os princípios.
-
Solicite uma revisão; os achados voltam como tabelas de Antes e Depois.
-
Rode a checklist de quatorze itens antes de fazer merge de qualquer mudança de frontend.
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.