AI UI Designer Logo
AI UI Designer

Prima la struttura, poi lo sviluppo

Uno skill di design UI gratuito per progettare le tue schermate

Hai i requisiti ma non sai come organizzare la pagina? Usa Codex o Claude Code per creare un wireframe SVG statico, verificarne la struttura e affinare il design. Puoi partire senza un pacchetto di scenari a pagamento.

Download senza accesso. Output SVG statico; assistente e utilizzo dei modelli sono separati.

Dai requisiti a un layout da valutare

Definisci campi, contenuti e azione principale prima di scegliere caratteri e colori.

Wireframe SVG con campi prodotto, dimensioni, azione principale e quattro risultati
02 Controlla il wireframe
Design SVG dello stesso strumento con controlli viola e poster di prodotti in bottiglia
03 Affina la grafica

Un progetto, due fasi da confrontare

L’esempio di uno strumento per poster di prodotto mantiene gli stessi campi e risultati nel wireframe e nella versione a colori. Apri i due SVG per esaminare il flusso gratuito, senza pacchetti aggiuntivi.

01 Descrivi la pagina

Usa lo skill ai-ui-designer.
Progetta uno strumento per poster di prodotto con nome, punti di forza, selettore delle dimensioni, pulsante di generazione e griglia dei risultati.

Indica cosa deve poter fare l’utente.

02 Controlla il wireframe

Wireframe SVG con campi prodotto, dimensioni, azione principale e quattro risultati
Verifica gli input, il pulsante principale e lo spazio per i risultati.
Apri SVG

03 Affina la grafica

Design SVG dello stesso strumento con controlli viola e poster di prodotti in bottiglia
Mantieni la struttura approvata e regola tipografia, spazi e colori.
Apri SVG

Installa lo skill e crea il primo wireframe

Scarica ed estrai lo ZIP. Inserisci la cartella ai-ui-designer nella directory degli skill del tuo ambiente Codex o Claude Code.

  1. 1.Posiziona i file

    SKILL.md deve trovarsi direttamente in ai-ui-designer. Sono inclusi istruzioni di design, riferimenti e script di supporto.

    Codex
    ~/.agents/skills/ai-ui-designer/
    Claude Code
    ~/.claude/skills/ai-ui-designer/

    Controlla che l’estrazione non abbia creato una cartella annidata in più.

  2. 2.Specifica obiettivo e azione principale

    Richiama lo skill e descrivi pagina, destinatari e contenuti necessari.

    Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

Progetta un wireframe SVG della homepage del mio prodotto con proposta di valore, funzionalità e registrazione.

  3. 3.Apri il file e chiedi una revisione

    Usa un browser o un visualizzatore SVG. Chiedi modifiche precise, ad esempio titoli più chiari o più spazio attorno al pulsante.

    Se non compare, controlla percorso e SKILL.md. Codex rileva le modifiche automaticamente; riavvialo se necessario. In Claude Code controlla il menu /.

Occorrono il tuo assistente e l’accesso ai modelli. Gli script locali dei pacchetti richiedono Python 3.9 o successivo. I pacchetti facoltativi del sito richiedono un abbonamento a pagamento attivo per il download.

Decidi il design una fase alla volta

Organizza i contenuti

Disponi blocchi, campi e azioni in un wireframe in scala di grigi.

Definisci lo stile

Regola caratteri, spazi, colori e immagini sulla struttura già approvata.

Continua sullo stesso progetto

Conserva gli SVG nel progetto e richiedi modifiche mirate quando i requisiti cambiano.

Cosa offre il download gratuito

Parti dalle tue esigenze

Lo skill comprende wireframe, design UI a colori, applicazione di temi e gestione locale dei pacchetti.

I pacchetti di scenari sono riferimenti facoltativi, non necessari per iniziare.

Elaborati statici da valutare

L’output consiste in SVG e indicazioni di design. I pulsanti disegnati non eseguono accessi, pagamenti o generazione di immagini.

L’applicazione richiede uno sviluppo separato. Disponibilità dell’assistente e costi dei modelli seguono le condizioni dei rispettivi strumenti.

Domande prima di iniziare

Serve un abbonamento o un pacchetto?
Lo skill si scarica gratis e lavora sui tuoi requisiti. Solo il download dei pacchetti facoltativi di questo sito richiede un abbonamento a pagamento attivo.
Come si richiama nei due assistenti?
Dopo l’installazione nella directory corretta, usa $ai-ui-designer in Codex o /ai-ui-designer in Claude Code e descrivi il compito.
Genera un’applicazione funzionante?
Questo flusso produce wireframe e design UI in SVG statico. Codice, backend e interazioni reali richiedono un’implementazione distinta.
Lo skill non compare: cosa verificare?
Controlla il percorso e che SKILL.md sia direttamente in ai-ui-designer. Se necessario riavvia Codex; in Claude Code cerca /ai-ui-designer.

Dai una struttura chiara alla prossima pagina

Installa lo skill di design UI gratuito e trasforma i requisiti in un layout SVG da esaminare e migliorare prima di sviluppare.

Scarica lo skill gratuitoTorna all’installazione