Frontend e UI
image-to-code
Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente.
Che cos’è
Un flusso di lavoro image-first per compiti web visivi. L’agente genera immagini di riferimento per ogni sezione, ne estrae tipografia, spaziature, colore e componenti, poi implementa il sito di conseguenza.
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In C
Perché conta per il design
- Il codice segue un vero riferimento visivo, così l’implementazione non scivola verso layout generici.
- Ogni sezione ha la propria immagine grande, così testo e spaziature restano analizzabili.
- Gli hero restano sotto le tre righe di titolo e liberi da pile di contenitori annidati.
Cosa copre
- Mandatory image-first rule
- Generate enough images rule
- Deep image analysis requirement
- Hero minimalism rules
- Anti-drift implementation rule
- Anti-AI-slop rules
Come installarlo
image-to-code
-
Clona il repository.
git clone https://github.com/Leonxlnx/taste-skill -
Punta Codex sul file della skill.
skills/image-to-code-skill/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Indica il numero di sezioni: in Codex la skill genera un’immagine per ogni sezione.
-
Chiedi un rendering di dettaglio più ravvicinato quando bottoni o tipografia restano illeggibili.
-
Fai eseguire il controllo di chiarezza prima che scriva qualsiasi file di implementazione.
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 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.