Frontend & UI
design-skills · Claymorphism
Formes 3D rebondies et arrondies, titres Poppins, bleu sur blanc.
De quoi il s’agit
Un skill de directives pour une UI claymorphique : des formes douces, arrondies et rebondies qui imitent l’argile malléable. Titrage Poppins, corps Montserrat, un accent bleu #3B82F6 et un texte bleu profond sur blanc.
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
Pourquoi ça compte pour le design
- Les formes rebondies et arrondies donnent aux boutons une évidence d’appui sans libellé supplémentaire.
- Un texte bleu profond #1C398E sur blanc tient le contraste pendant que la palette reste ludique.
- Les règles interdisent de mêler les métaphores : la profondeur argile ne se combine jamais au verre ni au plat.
Ce que ça couvre
- Brand
- Style foundations
- Rules: don’t
- Expected behavior
- Component rule expectations
- Quality gates
Comment l’installer
design-skills · Claymorphism
-
Clonez le dépôt.
git clone https://github.com/bergside/awesome-design-skills -
Pointez Codex sur le fichier du skill.
skills/claymorphism/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez d’abord à Codex les tokens de rayon et d’ombre, car ils définissent le look argile.
-
Associez le titrage Poppins au corps Montserrat comme spécifié, pas deux sans-serif similaires.
-
Vérifiez que les états focus-visible et désactivé survivent au traitement de formes douces.
Chaque plugin présenté ici est gratuit, open source, et renvoie à sa vraie source amont.
En savoir plus sur la liste codex-design ↗Autres plugins design pour Codex
Frontend & UI Ce qu’il fait gpt-taste Construit des pages primables avec du scroll GSAP et des grilles bento sans trous. 
Design systems Ce qu’il fait Stitch Design Taste Rédige un DESIGN.md qui oriente Google Stitch vers des écrans non génériques. 
Frontend & UI Ce qu’il fait image-to-code Génère d’abord des images de design, les analyse, puis construit le code frontend correspondant. 
Frontend & UI Ce qu’il fait imagegen-frontend-mobile Génère des parcours d’écrans d’app mobile premium en images, pas en code. Prochaine étape
Designez avec Open Design, sans la config
Installez ce plugin vous-même, ou faites tourner toute une couche design sélectionnée autour de Codex avec Open Design. Apportez votre clé, gardez la main sur ce que vous produisez.