Vai alla guida all’uso
imagegen-frontend-webdi Leonxlnx

ImageGen Frontend Web Skill.

Uno skill Claude Code e Codex per UI design: riferimenti di progettazione di siti web sezione per sezione tramite generazione di immagini.

  • Web & UI
  • Image
Leonxlnx/taste-skill · skills/imagegen-frontend-web/SKILL.mdSKILL.md
--- name: imagegen-frontend-web description: Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. THE COMBINATORIAL VARIATION ENGINE ## 3. FRONTEND REFERENCE RULE ## 4. HERO MINIMALISM RULES ## 5. IMAGE COUNT & PAGE SLICING ## 6. CREATIVITY ESCALATION RULE
Metadati iniziali e intestazioni di sezione letti dal file upstream il 14/09/2026 · 36.780 caratteri in totale

01 Cosa fa

Cosa Fa la Skill imagegen-frontend-web 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

La skill genera riferimenti di design per siti web di livello premium sotto forma di immagini orizzontali separate, una per sezione. Impone una varietà compositiva che va oltre l'abusato schema testo-a-sinistra/immagine-a-destra, utilizza sfondi a piena tela con sicurezza, varia le scale dell'hero (gigante/media/mini) e mantiene una singola palette coerente in tutte le sezioni. Progettata per landing page, siti marketing e comp di prodotto che sviluppatori o modelli di codice possono ricreare.

Utilizza dial di base configurabili: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8. La skill rompe le impostazioni predefinite dell'IA attraverso una variazione combinatoria—scegliendo un paradigma del tema, un carattere tipografico, un'architettura hero, un sistema di sezioni e una spina narrativa concettuale—mantenendo al contempo disciplina di conversione e uno spaziamento generoso e uniforme tra le sezioni.

Che cosa produce

  • Immagini orizzontali (16:9, 16:10 o 21:9) che rendono una sezione mirata per fotogramma ad alta fedeltà
  • Set di immagini etichettate per sezione: 'Section X of N: <name>' fino al completamento del numero totale
  • Mondo di brand coerente in tutti i fotogrammi: stessa palette, stessa famiglia tipografica, stessa identità delle CTA, stesso border radius, stesso trattamento delle immagini, stesso tono di voce
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Leggere il Brief e Adattare i Dial di Base

    La skill legge attentamente il prompt dell'utente, poi regola i dial (variance del design, densità visiva, direzione artistica, chiarezza implementativa, uso delle immagini, spaziatura, variazione del layout, disciplina di conversione), la scala dell'hero, la modalità di sfondo, l'uso dei gradienti e la varietà compositiva in base al brief.

  2. 02
    Scegliere Un'Opzione da Ogni Categoria Combinatoria

    La skill si impegna su un paradigma del tema, un carattere di sfondo, un carattere tipografico, un'architettura hero, un sistema di sezioni, esattamente 4 componenti distintivi, esattamente 2 linguaggi che implicano movimento e una spina narrativa concettuale—tutto basato sul prompt.

  3. 03
    Generare Un'Immagine Orizzontale per Sezione

    Ogni sezione riceve la propria immagine orizzontale separata in formato 16:9, 16:10 o 21:9. La skill non combina mai più sezioni in un unico fotogramma né restituisce un'unica fetta verticale.

  4. 04
    Variare gli Ancoraggi Compositivi e le Modalità di Sfondo

    Tra le sezioni, la skill sceglie diversi ancoraggi compositivi (centrato, in basso a sinistra sopra l'immagine, in alto a sinistra come guida, impilato al centro, editoriale fuori griglia, ecc.) e modalità di sfondo (tinta unita, immagine a piena tela, immagine editoriale laterale, duotono, vignetta radiale) in modo che la pagina eviti layout IA ripetitivi.

  5. 05
    Eseguire un Controllo di Chiarezza a 21 Punti Prima dell'Output

    Prima di finalizzare, la skill verifica la gerarchia, la nettezza dell'hero, la distintività visiva, l'assenza di tratti riconducibili all'IA, la sensazione premium, la codificabilità, la coerenza tra più immagini, la forza dell'immaginario, il respiro visivo, la spaziatura uniforme, la creatività intenzionale e il numero corretto di immagini.

02 Trova la tua applicazione

Quando usare la Skill imagegen-frontend-web

Usa la skill imagegen-frontend-web in Claude Code o Codex quando il lavoro è UI design di questo tipo. Adattamento e limiti qui sotto sono tratti dal file della skill stessa.

Buona applicazione

  • Landing page, siti marketing e comp di prodotto che sviluppatori o modelli di codice devono ricreare con precisione
  • Design premium con funnel di conversione chiari—non semplici moodboard artistici
  • Design guidati dalle immagini che usano la fotografia come materiale di design centrale
  • Sviluppatori o modelli di codice che necessitano di riferimenti UI molto codificabili
  • Siti che richiedono una decisa varietà compositiva tra le sezioni per evitare layout IA ripetitivi

Conosci i limiti

  • Richieste che desiderano un'unica immagine verticale combinata invece di fotogrammi separati per sezione
  • Layout commerciali sicuri, senza ambizione creativa o dichiarazioni audaci

Cosa fornire

  • Tipo di sito e obiettivo di conversioneLo skill deduce il tipo di sito (landing page, sito marketing, pagina prodotto, portfolio, SaaS, e-commerce, agenzia, editoriale) e l'obiettivo di conversione principale dal prompt per guidare le scelte di design.
  • Numero di sezioni o ambiguità predefinitaSpecifichi il numero di sezioni, altrimenti lo skill imposta di default 6 per le landing page e 8 per i siti web completi.
  • Parole chiave sul mood del brandParole chiave come minimalista, pulito, editoriale, magazine, cinematico, atmosferico, premium, lusso, SaaS, prodotto, fintech, agenzia, studio creativo, e-commerce orientano la scala dell'hero, la modalità di sfondo, l'uso dei gradienti e le scelte di composizione.
  • Settore o regione per la coerenza culturaleQuando il brief indica un settore o una regione, lo skill orienta palette e temperamento tipografico di conseguenza, senza limitarsi al neutro stile startup di San Francisco a meno che non si tratti intenzionalmente di un SaaS generico.

03 Dentro la skill

Le regole che lo skill imagegen-frontend-web fornisce a Claude Code e Codex

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

  1. Evitare per Default l'Hero con Testo a Sinistra/Immagine a Destra

    L'hero predefinito con testo a sinistra e immagine a destra è il pattern AI più abusato.

  2. Variare la Composizione — Devono Comparire Almeno 3 Ancoraggi Diversi

    Ogni sezione adotta un ancoraggio compositivo (centrato, guida in alto a sinistra, in basso a sinistra sopra l'immagine, cluster CTA in basso a destra, un terzo sinistro/due terzi destro, un terzo destro/due terzi sinistro, centrato in basso, editoriale fuori griglia, impilato al centro, immagine come tela).

  3. Numero Predefinito di Sezioni in Base al Tipo di Richiesta

    Landing page o template di sito ha di default 6 sezioni (6 immagini). Sito web completo o sito marketing ha di default 8 sezioni (8 immagini). Pagina prodotto o portfolio ha di default 6 sezioni.

  4. Mantenere il Titolo dell'Hero Breve e Incisivo

    L'H1 deve leggersi visivamente come un'affermazione premium. I titoli dovrebbero di norma comporsi di 5-10 parole d'impatto, non un paragrafo.

04 Mettila al lavoro

Installa imagegen-frontend-web in Claude Code o Codex

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

Aggiungi imagegen-frontend-web 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 imagegen-frontend-web

Forma generica della CLI skills per skills/imagegen-frontend-web/SKILL.md; il repository può documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Adatta questo prompt con i tuoi contenuti e vincoli, poi eseguilo in Claude Code o Codex.

Example prompt
design 8 sections for a fintech website

Fonte: esempio SKILL.md (testuale).

Verifica il primo risultato

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

  • Il numero totale di immagini è pari al numero di sezioni — mai inferiore
  • La pagina respira — la spaziatura tra le sezioni è uniforme e controllata, non troppo densa
  • La composizione varia tra le sezioni — ancoraggi e modalità di sfondo sono mescolati
  • Chiunque può programmare partendo da questo riferimento

In OpenDesign imagegen-frontend-web è incluso: Plugins → Skills, lo selezioni nella barra superiore.

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/imagegen-frontend-web/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 è un punteggio o un conteggio di utilizzo per imagegen-frontend-web.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. REGOLA DI OUTPUT RIGIDA — LEGGERE PRIMAGeneri sempre un'immagine orizzontale separata per ogni sezione, non combini mai più sezioni in un unico frame
  2. BIAS DI COMPOSIZIONE DELL'HERO — LEGGERE PRIMAEviti la scelta predefinita ormai abusata di testo a sinistra/immagine a destra; preferisca alternative come centrato sopra lo sfondo o in basso a sinistra sopra l'immagine
  3. 1. CONFIGURAZIONE BASE ATTIVAImposta i parametri: DESIGN_VARIANCE 8, VISUAL_DENSITY 4, ART_DIRECTION 8, IMPLEMENTATION_CLARITY 9, IMAGE_USAGE_PRIORITY 9, SPACING_GENEROSITY 8, adattati dal prompt
  4. 2. IL MOTORE DI VARIAZIONE COMBINATORIAScegliere un'opzione per ogni categoria: paradigma del tema, carattere dello sfondo, carattere tipografico, architettura dell'hero, sistema di sezioni, 4 componenti distintivi, 2 linguaggi di motion, spina narrativa
  5. 4. REGOLE DI MINIMALISMO PER L'HEROMantenere l'hero pulito, il titolo breve e potente, dare priorità allo spazio negativo, evitare di sovraccaricare il primo viewport con pill e dettagli
  6. 5. NUMERO DI IMMAGINI E SUDDIVISIONE DELLA PAGINAUn'immagine orizzontale per sezione; la landing page prevede di default 6 immagini, il sito completo 8; variare le dimensioni delle sezioni; garantire continuità tra i frame
  7. 6. REGOLA DI ESCALATION CREATIVADimostrare una reale ambizione creativa aumentando almeno 3 elementi tra: composizione, tipografia, contrasto di scala, concetto dell'hero, trattamento delle immagini, ritmo delle sezioni, inquadratura
  8. 7. ART DIRECTION IMAGE-FIRSTUtilizzare attivamente le immagini come materiale di design principale: fotografia art-directed, immagini di prodotto, immagini editoriali, ritagli di immagine, pannelli incorniciati, composizioni a strati
  9. 8. REGOLE ANTI-AI-SLOPVietati: sezioni centrate all'infinito, gradienti viola/blu tipici dell'AI, blob fluttuanti, glassmorphism eccessivo, titoli con gradiente, copy generico, strisce di loghi in marquee, KPI falsi
  10. 10. REGOLA DEL RITMO DELLE SEZIONIVariare il ritmo delle sezioni cambiando densità, rapporto immagine-testo, allineamento, scala, spazio bianco, raggruppamento delle card, intensità dello sfondo; evitare box ripetitivi e schematici
  11. 12. DISCIPLINA DI DENSITÀ E SPAZIATURALa pagina deve respirare; usare una spaziatura verticale uniforme tra le sezioni principali, evitare salti da compresso a vuoto, lo spazio bianco è uno strumento di design
  12. 13. REGOLE DI COLORE E MATERIALEUtilizzare una palette controllata: 1 colore primario, 1 secondario, 1 accento, scala neutra; sono ammessi gradienti tonali professionali; vietati blob a rete arcobaleno
Descrizione della skill
"Skill avanzato per la direzione di immagini frontend che genera riferimenti di design per siti web premium, orientati alla conversione. REGOLA CRITICA DI OUTPUT — genera UN'immagine orizzontale separata PER OGNI sezione. Una landing page con 8 sezioni produce 8 immagini. Non comprimere mai più sezioni in un'unica immagine. Impone varietà compositiva (non sempre testo a sinistra / immagine a destra), libertà nelle immagini di sfondo, CTA variate, scale hero variate (gigante / media / mini minimalista), spina concettuale narrativa, momenti di seconda lettura e un'unica palette coerente in tutte le immagini. Ottimizzato per landing page, siti marketing e composizioni di prodotto che sviluppatori o modelli di codifica possono ricreare accuratamente."

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

ImageGen Frontend Web

Esegui imagegen-frontend-web su un task di design UI reale.

Lo skill imagegen-frontend-web è incluso in OpenDesign. Scarica l'app, seleziona lo skill in Plugins → Skills, incolla il prompt qui sopra e leggi il piano prima del risultato.

Terminale
npx skills add https://github.com/Leonxlnx/taste-skill --skill imagegen-frontend-web