image-to-codedi Leonxlnx

Image to Code Skill.

Una skill per Claude Code e Codex dedicata al design UI: genera e analizza prima un'immagine di design, poi implementa la pagina corrispondente.

Web & UI
Codice UI

Scarica OpenDesign Guida all'uso

Leonxlnx/taste-skill · skills/image-to-code-skill/SKILL.mdSKILL.md

--- name: image-to-code description: 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 Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. MANDATORY IMAGE-FIRST RULE ## 3. GENERATE ENOUGH IMAGES RULE ## 4. CODEX-SPECIFIC SECTION IMAGE RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. FRESH RE-GENERATION RULE

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 36.361 caratteri in totale

01 Cosa fa

Cosa Fa la Skill image-to-code in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Questa skill impone un workflow obbligatorio image-first per le attività web visivamente rilevanti. L'agente deve generare autonomamente le immagini di design prima di scrivere qualsiasi codice, per poi analizzarle in profondità per estrarre tipografia, spaziatura, pulsanti, colori e logica di layout. In Codex, per impostazione predefinita genera un'unica immagine grande e leggibile per sezione, invece di board multi-sezione compresse, e crea nuove immagini indipendenti per le sezioni o le viste di dettaglio invece di ritagliarle.

Evita risolutamente layout con box annidati, etichette UI fittizie, pillole minuscole e sezioni hero affollate. La hero deve rimanere pulita, con titoli di massimo 1-3 righe. La skill impone una spaziatura generosa, riduce il disordine visivo e implementa il frontend in modo fedele ai riferimenti generati, senza scivolare in layout codificati generici.

Servizio di generazione immaginiCodice UI

Vedi l'esempio di prompt ↗

Come funziona

01
Crea Immagini di Sezione Separate in Codex
All'interno di Codex, la skill genera un'unica immagine grande e leggibile per sezione, invece di comprimere più sezioni in un'unica board.
02
Genera Nuove Immagini, Mai Ritagliare
Quando una sezione richiede una vista dedicata, la skill genera una nuova immagine preservando lo stesso linguaggio di design, invece di ritagliarla da un'immagine più grande generata precedentemente.
03
Analizza in Profondità Tutte le Immagini Generate
La skill estrae il testo visibile esatto, le relazioni tipografiche, la logica di spaziatura, i dettagli dei pulsanti, la palette colori, la struttura del layout e lo stile dei componenti da ciascuna immagine prima di implementare.
04
Implementa il Frontend Coerente con i Riferimenti
Il codice traduce fedelmente il design analizzato, preservando la logica di layout, il ritmo delle spaziature, l'ordine delle sezioni, l'atmosfera tipografica e lo stile dei componenti, senza scivolare in pattern generici.

02 Trova la tua applicazione

Quando Usare la Skill image-to-code

Usa la skill image-to-code in Claude Code o Codex quando il lavoro riguarda la progettazione UI di questo tipo. Capacità e limiti indicati di seguito sono presi dal file della skill.

Buona applicazione

Sezioni hero, landing page, siti marketing, siti di startup e pagine editoriali di brand dove la qualità visiva è importante
Siti web premium multi-sezione e redesign dove il gusto visivo e la fedeltà di implementazione sono centrali

Conosci i limiti

Attività puramente tecniche, correzioni di bug o richieste che forniscono già un design system preciso, dove la generazione visiva è superflua
Attività strutturali che sono principalmente tecniche piuttosto che di natura visiva

Cosa fornire

Numero di sezioni o tipo di sitoLa skill deduce il numero di sezioni necessarie o il tipo di sito web (solo hero, landing page a 4 sezioni, sito a 8 sezioni, ecc.) per determinare quante immagini generare.
Direzione visiva o preferenze di stileRichieste dell'utente come 'pulito', 'creativo folle', 'SaaS premium' o 'editoriale' guidano l'interpretazione della skill dei parametri di configurazione di base DESIGN_VARIANCE, ART_DIRECTION e altri.

03 Dentro la skill

Regole che la Skill image-to-code Fornisce a Claude Code e Codex

6 istruzioni concrete, valori predefiniti e limiti che SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

La Generazione di Immagini È Obbligatoria per Prima
Per le richieste di design di siti web dove la qualità visiva è importante, la skill deve generare le immagini di design prima di scrivere qualsiasi codice.
I Titoli della Hero Restano al Massimo 1-3 Righe
Il titolo della hero dovrebbe idealmente rimanere entro 1-3 righe. Se il titolo diventa troppo lungo, la skill deve ridurre il numero di parole invece di forzare più righe.
Niente card dentro card dentro card
Lo skill non deve utilizzare per impostazione predefinita layout a box annidati con enormi contenitori di sezione arrotondati che racchiudono card dentro card più grandi dentro card esterne.
Ridurre Drasticamente il Disordine nella Micro-UI
Lo skill non deve affollare i design con pillole non necessarie, marcatori pseudo-di sistema, etichette di controllo fittizie, tag decorativi simil-codice o metadati minuscoli e privi di significato che non migliorano la chiarezza.
Generare Immagini a Sufficienza per Garantire la Qualità
Lo skill deve generare tutte le immagini necessarie per rendere il design leggibile ed estraibile. È meglio generare troppe immagini chiare che troppo poche e compresse.
La Prima Schermata Deve Essere Ordinata su Laptop Piccoli
L'area hero e la prima vista devono risultare utilizzabili e ordinate su un laptop piccolo.

04 Mettila al lavoro

Installa image-to-code in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi image-to-code a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code

Forma generica della CLI skills per skills/image-to-code-skill/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

Starter prompt

Design me an 8-section landing page for [AI startup name]. Keep the hero clean and readable, use separate images for each section so I can extract typography and spacing properly, and make sure the first screen feels premium on a small laptop. Avoid nested cards and fake system labels.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verificare che le immagini di design siano state generate prima di qualsiasi implementazione di codice per attività visivamente importanti
Confermare che il testo resti leggibile e, in caso contrario, verificare che siano state create immagini di dettaglio aggiuntive o nuove rigenerazioni piuttosto che ritagli
Verificare che siano state generate immagini a sufficienza e che il numero di immagini non sia stato ridotto per comodità
Verificare che l'hero resti ordinato con titoli di massimo 1-3 righe e non risulti sovraccarico su un laptop piccolo
Confermare che siano stati rimossi box annidati non necessari, pillole inutili, etichette e falsi micro-elementi tecnici
Verificare che il codice implementato corrisponda fedelmente ai riferimenti generati senza deviare verso layout codificati generici

In OpenDesign importare image-to-code dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionarlo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
File della skill: skills/image-to-code-skill/SKILL.md Checksum del contenuto registrato alla verifica; commit ccbc156
License: MIT Da LICENSE.
Stelle del repository: 86.946 Snapshot GitHub del 2026-09-14 per l'intero repository Leonxlnx/taste-skill, che contiene 11 skill in questo catalogo. Non è una valutazione o un conteggio di utilizzo per image-to-code.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

DIRETTIVA PRINCIPALE: DESIGN DI SITI WEB IMAGE-FIRST TRASFORMATO IN CODICEDefinisce il compito dello skill come generare riferimenti premium di siti web facili da implementare per poi trasformarli in un frontend reale
CONFIGURAZIONE DI BASE ATTIVAImposta valori numerici predefiniti per varianza del design, densità visiva, direzione artistica, chiarezza implementativa e altri parametri di controllo
REGOLA OBBLIGATORIA IMAGE-FIRSTRichiede di generare prima le immagini per le attività visive relative al sito web; il codice è lo strato di traduzione successivo all'analisi delle immagini
REGOLA GENERA IMMAGINI A SUFFICIENZAIstruisce a generare tutte le immagini necessarie per la leggibilità e l'estrazione; non ridurre mai il numero di immagini per comodità
REGOLA SPECIFICA PER CODEX SULLE IMMAGINI DI SEZIONEIn Codex, preferire una singola immagine grande per sezione piuttosto che comprimere molte sezioni in un'unica board illeggibile
REGOLA NON RITAGLIARE IMMAGINI VECCHIEGenerare nuove immagini specifiche per sezione invece di ritagliare o tagliare porzioni da immagini più grandi generate precedentemente
REGOLA DI RIGENERAZIONESe una sezione non è chiara, generarla nuovamente come immagine autonoma preservando lo stesso linguaggio visivo
REGOLA OPZIONALE PER IMMAGINI DI DETTAGLIO/ESTRAZIONECreare immagini di dettaglio più vicine per le sezioni quando la qualità dell'estrazione richiede testo più grande o spaziatura più chiara
REQUISITO DI ANALISI APPROFONDITA DELLE IMMAGINITrattare le immagini generate come specifiche di design; estrarre testo, tipografia, spaziatura, pulsanti, colori e layout prima di implementare
WORKFLOW IMAGE-FIRST PER SITI WEB CON CODEXDefinisce l'ordine di esecuzione: genera le immagini delle sezioni, analizza in profondità, estrae il design system, implementa il frontend in modo che corrisponda
IL MOTORE DI VARIAZIONE COMBINATORIAFornisce scelte di direzione visiva per tema, sfondo, tipografia, architettura dell'hero, sistema delle sezioni e componenti distintivi
REGOLE DI MINIMALISMO PER L'HEROImpone hero cinematografici e puliti con titoli di massimo 1-3 righe, senza elementi superflui, leggibili anche su laptop piccoli

Descrizione della skill

Skill elite image-to-code per siti web per Codex. Per task web visivamente importanti, deve prima generare le immagini di design, analizzarle in profondità, quindi implementare il sito web per farle combaciare il più possibile. In Codex deve preferire immagini grandi, leggibili e specifiche per sezione invece di piccole tavole compresse, generare immagini standalone fresche per sezioni o viste di dettaglio invece di ritagliare quelle vecchie, evitare sotto-generazione pigra, evitare UI con card-dentro-card-dentro-card, e mantenere l'hero pulito, spazioso, leggibile e visibile su un piccolo laptop.

Descrizione front-matter da SKILL.md. Il file completo è di circa 36.361 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo skill image-to-code

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Con quale agente di codice dovrei usare questo skill?

Lo skill è progettato per Codex e fa riferimento esplicito a comportamenti specifici di Codex. Specifica che all'interno di Codex deve preferire immagini grandi e leggibili specifiche per sezione invece di board compresse, e per default genera un'immagine per sezione. Fuori da Codex può consentire una composizione multi-sezione più compatta.

Cosa succede se l'immagine di design generata non è chiara o il testo è troppo piccolo?

Lo skill deve generare immagini aggiuntive di dettaglio o di estrazione per quella sezione, oppure rigenerare la sezione come nuova immagine autonoma.

Non deve mai ritagliare da un'immagine più grande generata precedentemente. Se generare più immagini migliorerebbe la leggibilità o la qualità dell'estrazione, ne genera altre invece di essere sbrigativo con il numero di immagini.

Image to Code

Esegui image-to-code su un task di design UI reale.

Scarica OpenDesign, importa image-to-code dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code