Frontend & UI
design-skills · Editorial
Mise en page magazine en serif Gelasio sur une grille stricte de 8pt.
De quoi il s’agit
Un skill de directives de design system pour un look éditorial moderne : serif Gelasio en corps comme en titrage, Ubuntu Mono, un quasi-noir #111111 sur surfaces blanches, et une grille de base de 8pt.
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
Pourquoi ça compte pour le design
- Titrage et corps en serif d’une même famille gardent les longues lectures typographiquement cohérentes.
- Une grille de base de 8pt impose un rythme vertical entre titres, corps de texte et espacements.
- Le seuil d’accessibilité inclut la prise en charge du reduced-motion, des cibles tactiles de 44px et la gestion du contraste élevé.
Ce que ça couvre
- Style foundations
- Accessibility
- Guideline authoring workflow
- Required output structure
- Component rule expectations
- Quality gates
Comment l’installer
design-skills · Editorial
-
Clonez le dépôt.
git clone https://github.com/bergside/awesome-design-skills -
Pointez Codex sur le fichier du skill.
skills/editorial/SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez à Codex de reformuler l’intention de design, puis de définir les tokens avant de toucher aux composants.
-
Réclamez des règles de composant couvrant anatomie, variantes, états et comportement responsive.
-
Terminez par la checklist QA pour qu’un relecteur de code puisse vérifier le rendu.
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.