Design system
Stitch Design Taste
Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche.
Che cos’è
Genera un file DESIGN.md ottimizzato per la generazione di schermate con Google Stitch. Codifica atmosfera, colore, tipografia, componenti, layout, movimento e un elenco esplicito di pattern vietati.
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion,
Perché conta per il design
- Le schermate Stitch ereditano un unico accento sotto l’80% di saturazione, invece di gradienti viola al neon.
- Hero centrati e tre righe di card identiche sono vietati oltre la varietà impostata.
- Gli stati di caricamento e vuoti diventano scheletrici e curati, invece dei soliti spinner generici.
Cosa copre
- Overview
- Prerequisites
- Analysis and synthesis instructions
- Output format
- Best practices
- Common pitfalls to avoid
Come installarlo
Stitch Design Taste
-
Clona il repository.
git clone https://github.com/Leonxlnx/taste-skill -
Punta Codex sul file della skill.
skills/stitch-skill/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Descrivi l’atmosfera del progetto: la skill imposta i punteggi di densità, varietà e movimento.
-
Produce un DESIGN.md in sette sezioni con codici hex e ruoli funzionali del colore.
-
Dai in pasto quel file a Stitch direttamente, oppure tramite il server MCP di Stitch.
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. 
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. 
Frontend e UI Cosa fa imagegen-frontend-web Genera un’immagine di riferimento orizzontale per ogni sezione della landing page. 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.