Frontend & UI
design-skills · Claymorphism
Formas 3D roliças e arredondadas, títulos em Poppins, azul sobre branco.
O que é
Uma skill de guideline para UI claymórfica: formas suaves, arredondadas e roliças que imitam argila maleável. Display em Poppins, corpo em Montserrat, um destaque azul #3B82F6 e texto azul-escuro sobre branco.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Por que isso importa para design
- Formas roliças e arredondadas dão aos botões uma clara sensação de que dá para apertar, sem rótulos extras.
- O texto azul-escuro #1C398E sobre branco garante contraste enquanto a paleta segue lúdica.
- As regras proíbem misturar metáforas, então a profundidade de argila nunca se junta a vidro ou flat.
O que cobre
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Como instalar
design-skills · Claymorphism
-
Clone o repositório.
git clone https://github.com/bergside/awesome-design-skills -
Aponte o Codex para o arquivo da skill.
skills/claymorphism/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça primeiro ao Codex os tokens de raio e sombra, já que são eles que definem o visual de argila.
-
Combine o display Poppins com o corpo Montserrat como especificado, não duas fontes sans parecidas.
-
Confira que os estados focus-visible e disabled sobrevivem ao tratamento de formas suaves.
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.