Design systems
Design DNA
Extrait un design de référence en JSON structuré, puis génère à partir de lui.
De quoi il s’agit
Un workflow en trois phases qui capture l’identité d’un design à travers tokens mesurables, style qualitatif et effets visuels. Il produit un JSON Design DNA complet, puis applique ce JSON à un nouveau contenu.
>-
Pourquoi ça compte pour le design
- Transforme une capture ou une URL en valeurs nommées de couleur, de typo et d’espacement.
- Consigne l’ambiance, la composition et la voix de marque, pas seulement des tokens mesurables.
- Capture les effets Canvas, WebGL, shader et scroll que le CSS seul ne sait pas exprimer.
Ce que ça couvre
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
Comment l’installer
Design DNA
-
Clonez le dépôt.
git clone https://github.com/zanwei/design-dna -
Pointez Codex sur le fichier du skill.
SKILL.md -
Décrivez ensuite l’interface voulue. Codex suit le skill.
Comment le faire tourner avec Codex
-
Demandez le schéma pour voir les trois dimensions avant toute analyse.
-
Confiez à Codex des images de référence ou des URL et réclamez un JSON DNA rempli.
-
Passez le JSON avec votre contenu pour générer une page HTML autonome.
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.