Claude Code 
OpenDesign Come progettare interfacce con Claude Code in OpenDesign: CLAUDE.md e la skill Frontend Design come vincoli, un'attività di impostazioni dell'area di lavoro dal brief al file revisionato, e dove si interrompe il ciclo con Figma.
“Impostazioni del workspace che seguono
i nostri token, non un template.”
TRE MODI DI ACCEDERE A QUESTA GUIDA SU CLAUDE CODE
Questa guida: brief, riferimenti, regole di design e un risultato HTML revisionato.
Leggi questa guida CONFIGURAZIONEEcco il percorso completo da una macchina pulita a un Claude Code in grado di creare e verificare la UI.
Vai alla configurazione CONFRONTOIn cosa Claude Code si differenzia da Codex, Cursor per il lavoro di design, e quando scegliere un altro workflow.
Vedi il confrontoUn'attività di design completa con Claude Code
Un'unica attività, mostrata dall'inizio alla fine: il brief e i vincoli che consegni, l'artefatto che ritorna e i controlli che esegui ancora prima che sia completata. L'interfaccia qui sotto è un esempio illustrativo creato per questa pagina, non l'esecuzione registrata di Claude Code.
BriefProgetta l'area delle impostazioni dell'area di lavoro per un piccolo team SaaS: generali, membri, notifiche e fatturazione. Usa i token in CLAUDE.md; niente regolato manualmente. Deve funzionare su desktop e su smartphone.
data-od-id stabiliScrivete il brief, selezionate il design system e definite i criteri di accettazione.
Pianifica il layout, scrive l'HTML, il CSS e il JavaScript e lo rivede su richiesta.
Fornisce il design system e lo skill, genera l'anteprima e salva ogni versione come file nel progetto.
Gerarchia visiva, spaziatura sulla griglia da 8px, entrambi i breakpoint e ogni interazione sono verificati prima della consegna.
Sotto-navigazione, form e azioni si trovano sulla griglia da 8px; la barra di salvataggio fissa non si sovrappone mai a un campo.
I titoli dei gruppi hanno priorità sulle etichette; l'accento segna solo i toggle abilitati e nient'altro.
La sotto-navigazione diventa un interruttore segmentato; i toggle mantengono un'area di tocco di 44px; il pulsante di salvataggio si estende su tutta la larghezza.
Scorra ogni campo con Tab, attivi un toggle, annulli e confermi la richiesta di modifiche non salvate.
Adeguatezza
Compatibilità
Questa guida riguarda Claude Code collegato tramite l'app desktop di OpenDesign. Riferimenti pubblicati verificati il 6 settembre 2026.
Claude Code è lo strumento agentico da riga di comando di Anthropic: descriva un compito in linguaggio naturale ed esso legge, scrive ed esegue codice nel suo progetto finché il compito non è completato. Questa pagina riguarda la progettazione di interfacce con Claude Code tramite OpenDesign, non l'interfaccia di Claude Code stessa. Le note di configurazione di OpenDesign elencano gli agenti disponibili.
Chiave API Anthropic (BYOK) o abbonamento Claude. Si autentichi con la sua chiave API Anthropic (BYOK) o con l'abbonamento Claude — nulla viene inoltrato tramite noi. Questa pagina non garantisce una quota o un prezzo.
Superfici: CLI da terminale, estensioni VS Code / Cursor / JetBrains, app desktop, web. Verifichi la pagina di download per le build desktop. I requisiti Node.js e pnpm nella guida rapida della fonte si applicano all'esecuzione dal codice sorgente, non all'installazione di un pacchetto desktop. Versione minima compatibile di Claude Code: non verificata qui.
Segua le istruzioni di connessione mostrate dalla sua versione installata, quindi esegua un piccolo compito. Confermi che Claude Code lo abbia gestito e che il risultato si apra. Il solo download non stabilisce una connessione funzionante.
Inizia con l’app desktop
Scarichi prima, completi la configurazione di Claude Code per la versione installata, quindi verifichi un piccolo risultato. Non è necessario compilare OpenDesign dal codice sorgente per seguire questo percorso.
Scegli il pacchetto per il tuo computer, installalo e apri l’app.
Scarica OpenDesignSegua le istruzioni di Claude Code nella sua versione installata. Si autentichi con la sua chiave API Anthropic (BYOK) o con l'abbonamento Claude — nulla viene inoltrato tramite noi.
anthropics/skills — skill frontend-design# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex
# 2. Start it in your project and sign in on first run
cd your-project
claude # sign in with your Claude subscription or API keyDalle note di configurazione di Claude Code nella guida pubblicata; verifichi la documentazione del fornitore per il comando aggiornato.
Usa un brief piccolo per poter valutare l’intero ciclo, inclusa una revisione.
Crea una schermata delle impostazioni con un modulo del profilo e una conferma di salvataggio. Usa le mie regole di design. Verificala a larghezza desktop e mobile.
Per eseguire OpenDesign dal codice sorgente, segui invece la guida rapida tecnica.
Il workflow di design di Claude Code
La stessa attività della schermata delle impostazioni, seguita dal brief al file verificato. Ogni step elenca cosa fornisce lei, cosa fa Claude Code, cosa contribuisce OpenDesign e cosa verifica lei.
Linguaggio semplice, da tre a sei righe. Indichi il pubblico, la funzione della schermata e le piattaforme.
Un design system e alcune regole rigide. È ciò che distingue un risultato coerente con il brand da un aspetto generico.
Claude Code scrive un file HTML autonomo: layout, stili, interazioni e hook stabili.
Il file viene visualizzato all'interno di OpenDesign alle larghezze richieste. È qui che il design viene valutato.
data-od-id per commenti e modifiche.Richieda modifiche indicando gli elementi nella preview. Ogni revisione è un nuovo file; nulla viene sovrascritto silenziosamente.
Risorse
Tutorial, documentazione e guide passo passo per progettare con Claude Code, come elencato nella guida pubblicata.
I tipi di artefatto che Claude Code può produrre in OpenDesign, uno skill per tipo.
Token e componenti del brand da collegare prima che Claude Code generi qualcosa.
Punti di partenza per presentazioni, landing page e schermate di prodotto.
Limitazioni
FAQ
Inizi con un task piccolo, valuti il ciclo di andata e ritorno, poi porti il brief reale. Scelga l'opzione che corrisponde alla Sua configurazione; la pagina non la rileva automaticamente.