Frontend & UI
design-skills · Terracotta
Accent argile sur crème, titres DM Serif Display, lecture au long cours.
De quoi il s’agit
Un skill de directives pour une interface éditoriale gorgée de soleil : surfaces crème #F3E9D8, un unique accent terracotta #C56A3C, titres DM Serif Display, JetBrains Mono. Calibré pour les blogs et le storytelling.
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.
Pourquoi ça compte pour le design
- Une seule couleur d’accent : l’emphase reste rare et les titres portent la hiérarchie.
- Les surfaces crème chaudes réduisent l’éblouissement des longs articles face aux pages blanc pur.
- Des titres en serif de titrage sur un corps brun encre posent un rythme éditorial net.
Ce que ça couvre
- Brand
- Style foundations
- Rules: do
- Rules: don’t
- Component rule expectations
- Quality gates
Comment l’installer
design-skills · Terracotta
-
Clonez le dépôt.
git clone https://github.com/bergside/awesome-design-skills -
Pointez Codex sur le fichier du skill.
skills/terracotta/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Orientez Codex vers les tokens terracotta et crème avant qu’il n’écrive le moindre composant.
-
Demandez anatomie, variantes et états par composant, avec des tokens d’espacement nommés explicitement.
-
Réclamez anti-patterns et notes de migration quand vous reprenez une UI existante incohérente.
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.