Design system
Design DNA
Estrae un design di riferimento in JSON strutturato, poi genera a partire da quello.
Che cos’è
Un flusso in tre fasi che cattura l’identità di design tra token misurabili, stile qualitativo ed effetti visivi. Produce un JSON di Design DNA completo, poi applica quel JSON a nuovi contenuti.
>-
Perché conta per il design
- Trasforma uno screenshot o un URL in valori nominati di colore, tipografia e spaziatura.
- Registra atmosfera, composizione e voce del brand, non solo token misurabili.
- Cattura effetti Canvas, WebGL, shader e di scroll che il semplice CSS non può esprimere.
Cosa copre
- Design system tokens
- Design style
- Visual effects
- Analyzing references
- Generating from JSON
- Phase combinations
Come installarlo
Design DNA
-
Clona il repository.
git clone https://github.com/zanwei/design-dna -
Punta Codex sul file della skill.
SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Chiedi lo schema per vedere tutte e tre le dimensioni prima di analizzare qualsiasi cosa.
-
Passa a Codex immagini di riferimento o URL e richiedi un DNA JSON popolato.
-
Passa il JSON insieme al tuo contenuto per generare una pagina HTML autonoma.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.