ULTERIORI LETTURE
Letture di approfondimento per Pi
Tutorial, documentazione e guide per progettare con Pi, come elencato nella guida pubblicata.
Pi 
OpenDesign Progettare con
Pi in
OpenDesign.
Come progettare interfacce con Pi in OpenDesign: skill portabili, il modello e la chiave che scegli, un task di confronto piani dal brief al file revisionato, e i limiti da conoscere prima di iniziare.
Dal brief all'interfaccia01 / Pi
PORTI TU L'IDEA↗
“Confronto di piani con un unico
skill portabile, qualsiasi modello.”
TRE MODI PER INIZIARE CON QUESTA GUIDA A PI
Scegli da Dove Iniziare con Pi
QUESTA GUIDA · DESIGN UI
Crea un'Interfaccia di Prodotto con Pi
Questa guida: brief, riferimenti, regole di design e un risultato HTML revisionato.
Leggi questa guida CONFIGURAZIONEConfigura Pi da Zero
Ecco il percorso completo da una macchina pulita a un Pi in grado di costruire e verificare la UI.
Vai alla configurazione CONFRONTOConfronta Pi con Altri Agenti
In che modo Pi si differenzia da Codex, Claude Code, Cursor per il lavoro di design, e quando scegliere un altro workflow.
Vedi il confrontoIn questa pagina Esempio
Un Task di Design Completo con Pi
Un Task di Design con Pi, dal Brief all'Interfaccia
Un singolo task, mostrato dall'inizio alla fine: il brief e i vincoli che fornisci, il produtto che ritorna, e i controlli che esegui ancora prima che sia completato. L'interfaccia qui sotto è un esempio illustrativo creato per questa pagina, non l'esecuzione registrata di Pi.
1Brief di design e vincoli
BriefProgetta una pagina di confronto piani per un'app di note: piani free, personale e team, un confronto delle funzionalità e una breve FAQ. Desktop e telefono.
- Design systemOpenDesign paper canvas: Albert Sans, un accento verde
- Breakpoint1440px desktop e 390px mobile, senza scorrimento orizzontale
- InterazioniToggle di fatturazione, CTA dei piani, espansione riga di confronto
- OutputUn unico file HTML autonomo con hook
data-od-idstabili
2Divisione del Lavoro: Tu, Pi e OpenDesign
- Voi
Scrivete il brief, selezionate il design system e definite i criteri di accettazione.
- Pi
Pianifica il layout, scrive l'HTML, il CSS e il JavaScript e lo rivede su richiesta.
- OpenDesign
Fornisce il design system e lo skill, genera l'anteprima e salva ogni versione come file nel progetto.
- Revisione
Gerarchia visiva, spaziatura sulla griglia da 8px, entrambi i breakpoint e ogni interazione sono verificati prima della consegna.
3Artifact Pi: la pagina di confronto piani a 1440px e 390px
4Revisione prima della consegna
Layout
Griglia e spaziatura
I tre piani e il confronto condividono la griglia a 8px; le righe delle funzionalità si allineano tra le colonne.
Gerarchia
Gerarchia visiva
Prezzo e nome del piano in primo piano; l'accento marca il badge più scelto e il suo pulsante.
Responsive
Layout mobile
Piano personale prima, poi free, poi team; il toggle resta in alto.
Interazione
Controlli di interazione
Attiva il toggle, scorri con tab tra le CTA, espandi una riga di confronto.
Adeguatezza
Quando Pi è Adatto al Task, e Quando Non lo È
Pi è Adatto Quando
- Qualsiasi modello, le vostre chiavi. Instradate verso Anthropic, OpenAI, Google e altri con le vostre chiavi; scegliete un modello multimodale solido per lo screenshot-to-UI e cambiate con /model.
- Skill portabili. Codificate le vostre convenzioni di design come Skill conformi allo standard Agent-Skills, che si spostano tra agenti compatibili, non solo Pi.
- MCP + Estensioni. Portate un contesto di design reale tramite un server MCP di Figma e scriptate il ciclo di verifica con Estensioni TypeScript.
- Open e BYOK. Con licenza MIT e local-first; pagate solo per il modello sottostante e le vostre credenziali restano sulla vostra macchina.
Scelga un altro workflow quando
- Ha bisogno di file vettoriali modificabili. Il risultato è HTML, non un documento di design modificabile. Verifichi un workflow vettoriale separato per il formato di asset richiesto.
- Non hai né un riferimento né dei vincoli. Senza un design system o degli esempi, l'output tende verso un aspetto generico; scrivi prima il brief.
- Non disponete della credenziale richiesta da questo agente. Richiesto: la propria chiave API del provider (bring your own key) o login con abbonamento tramite /login. OpenDesign non fornisce né funge da proxy per le credenziali.
- Il vostro team lavora in Aider o OpenCode. Questi agenti hanno pagine proprie; lo spazio di lavoro è lo stesso, la configurazione differisce. Consultate gli agenti correlati.
Compatibilità
Requisiti Pi prima di iniziare
Questa guida illustra Pi connesso tramite l'app desktop di OpenDesign. Riferimenti pubblicati verificati il 6 settembre 2026.
Ambito dello strumentoPi, dalla community
Pi è un agente di codice AI da terminale open-source (MIT) di earendil-works. Legge la sua codebase, modifica file ed esegue comandi da un nucleo essenziale di quattro strumenti — read, write, edit, bash. Questa pagina riguarda la progettazione di interfacce con Pi tramite OpenDesign, non l'interfaccia propria di Pi. Le note di configurazione di OpenDesign elencano gli agenti disponibili.
Account e autenticazioneLa sua chiave API del provider (BYOK) oppure
La sua chiave API del provider (BYOK) oppure un login con abbonamento tramite /login. Si autentichi con la sua chiave API del provider (BYOK) o un login con abbonamento — le credenziali restano sulla sua macchina. Questa pagina non promette una quota o un prezzo.
Sistema e versioniApp desktop o codice sorgente
Controlli la pagina di download per le build desktop. I requisiti Node.js e pnpm indicati nel quickstart sorgente si applicano all'esecuzione da codice sorgente, non all'installazione di un pacchetto desktop. Versione minima compatibile di Pi: non verificata qui.
Verifica della connessioneIl segnale di riuscita
Segua le istruzioni di connessione mostrate dalla sua versione installata, poi esegua un piccolo task. Confermi che Pi lo abbia gestito e che l'artifact si apra. Un semplice download non stabilisce una connessione funzionante.
Inizia con l’app desktop
Configurazione di Pi in tre passaggi
Scarichi prima, completi la configurazione di Pi per la sua versione installata, poi verifichi un piccolo risultato. Non è necessario compilare OpenDesign dal codice sorgente per seguire questo percorso.
- 1
Scarica l’app desktop OpenDesign
Scegli il pacchetto per il tuo computer, installalo e apri l’app.
Scarica OpenDesignCHECKPOINTSi apre l'app desktop. Già installata? Passi al passaggio successivo; non è necessario scaricarla di nuovo. - 2
Prepari la sua connessione Pi
Segua le istruzioni Pi nella sua versione installata. Si autentichi con la sua chiave API del provider (BYOK) o un login con abbonamento — le credenziali restano sulla sua macchina.
Documentazione su provider e autenticazione di Pi# 1. Install the Pi coding agent CLI (Node) npm install -g --ignore-scripts @earendil-works/pi-coding-agent # 2. Authenticate with your own provider key (BYOK) export ANTHROPIC_API_KEY=sk-ant-... # or OPENAI_API_KEY=sk-... # (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)Dalle note di configurazione di Pi nella guida pubblicata; verifichi la documentazione del vendor per il comando attuale.
CHECKPOINTConfermi l'agente e l'account previsti. Se non è disponibile, verifichi la compatibilità prima di provare un'attività più complessa. - 3
Esegua un piccolo task con Pi
Usa un brief piccolo per poter valutare l’intero ciclo, inclusa una revisione.
Brief inizialeCrea 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.
CHECKPOINTApra il risultato, verifichi lo stato di salvataggio e richieda una modifica specifica. Un file generato è l'inizio della revisione, non la fine.
Per eseguire OpenDesign dal codice sorgente, segui invece la guida rapida tecnica.
Il workflow di design di Pi
Il workflow di design di Pi in cinque passaggi
Lo stesso task della pagina di confronto piani, seguito dal brief al file verificato. Ogni passaggio elenca cosa fornisce lei, cosa fa Pi, cosa apporta OpenDesign e cosa controlla lei.
- 1
Brief di design
Linguaggio semplice, da tre a sei righe. Indichi il pubblico, la funzione della schermata e le piattaforme.
- LeiScriva il brief; alleghi uno screenshot di riferimento, se ne ha uno.
- PiLegge il brief e il file di istruzioni del progetto; chiede quando qualcosa è ambiguo.
- OpenDesignFornisce il progetto, la superficie di prompt e la skill per il tipo di artefatto.
- VerificaConfermi che il brief indichi i criteri di accettazione. Aggiungerli ora costa meno che farlo dopo la generazione.
- 2
Vincoli di design
Un design system e alcune regole rigide. È ciò che distingue un risultato coerente con il brand da un aspetto generico.
- LeiScelga un design system; indichi i breakpoint e gli eventuali componenti obbligatori.
- PiCarica i token e le regole di stile di DESIGN.md nel contesto prima di scrivere una riga.
- OpenDesignFornisce la libreria di design system e collega quello scelto al modello della skill.
- VerificaI token corrispondono al brand. Un solo accento, i font corretti, il raggio corretto.
- 3
Genera l'interfaccia
Pi scrive un file HTML autonomo: layout, stili, interazioni e hook stabili.
- LeiAttenda, oppure risponda a una domanda di chiarimento. Nessuna configurazione necessaria.
- PiPianifica le sezioni, scrive HTML, CSS e JavaScript, esegue il file e corregge ciò che non funziona.
- OpenDesignSalva l'artefatto nella cartella del progetto e lo indicizza per l'anteprima.
- VerificaAncora nulla. Valuti il file dopo che è stato renderizzato, non dal codice sorgente.
- 4
Anteprima
Il file viene visualizzato all'interno di OpenDesign alle larghezze richieste. È qui che il design viene valutato.
- LeiCambia larghezza, naviga tra le interazioni, lascia commenti sugli elementi.
- PiLegge i vostri commenti sulla preview e prepara la revisione successiva.
- OpenDesignRende la preview, esponendo gli obiettivi
data-od-idper commenti e modifiche. - VerificaGerarchia, contrasto, overflow a 390px, stati di focus e se l'accento è usato con parsimonia.
- 5
Revisiona e verifica
Richieda modifiche indicando gli elementi nella preview. Ogni revisione è un nuovo file; nulla viene sovrascritto silenziosamente.
- LeiTrasforma i commenti in richieste; decide quando il compito è concluso.
- PiApplica le modifiche sul posto e riesegue il file.
- OpenDesignMantiene le versioni affiancate; esporta un'immagine o l'HTML al termine.
- VerificaRicontrolla solo l'area modificata, poi l'intera pagina una volta per ciascun breakpoint.
Risorse
Risorse di design per Pi
Skill Esplori le skill Design system Esplori i sistemi Template Esplora i template
Skill di design
I tipi di artifact che Pi può produrre in OpenDesign, uno skill per tipo.
Design System
Token di brand e componenti da collegare prima che Pi generi qualsiasi cosa.
Template
Punti di partenza per presentazioni, landing page e schermate di prodotto.
Limitazioni
Limiti di Pi, controlli manuali e alternative
- AmbitoÈ agnostico rispetto al provider: normalizza tra Anthropic, OpenAI, Google e oltre 20 provider, quindi portate le vostre chiavi e cambiate modello a metà sessione. Questa pagina tratta Pi come agente connesso a OpenDesign, non tutte le funzionalità di Pi.
- Limiti di utilizzoI limiti di utilizzo e i costi dipendono dalla credenziale che usate (la vostra chiave API del provider o l'accesso in abbonamento tramite /login). Questa pagina non fa alcuna affermazione sulle quote gratuite.
- ReteI file di progetto locali non implicano un'inferenza offline. Verificate le impostazioni del provider del vostro agente e le politiche sui dati prima di condividere input sensibili.
- L'Output È HTMLGli artifact sono file HTML, non file di design vettoriali.
- Revisione manualeAccessibilità, contenuti reali, coerenza con il brand e correttezza delle interazioni sono da rivedere tu stesso nell'anteprima. Considera ogni autoverifica dell'agente come una prima passata.
- FallbackSe l'agente non è disponibile o un task fallisce, controllate le istruzioni di connessione e l'autenticazione della versione installata. Conservate l'errore e l'ultimo artifact funzionante prima di modificare la configurazione.
FAQ
Domande comuni su Pi e OpenDesign
Pi può davvero occuparsi di design?
Sì — con uno skill estetico, un design system e immagini di riferimento reali nel contesto, Pi produce UI responsive di qualità professionale, e potete instradarlo verso un modello multimodale solido per verificare l'output rispetto ai riferimenti. Senza questo contesto tende a ricadere su un aspetto generico, ed è questa la lacuna che OpenDesign colma.
Devo pagare per progettare con Pi?
Pi in sé è gratuito e open source (MIT). Pagate solo il modello sottostante — portate la vostra chiave API del provider (BYOK), oppure usate un abbonamento Claude Pro/Max, ChatGPT Plus/Pro o GitHub Copilot tramite /login. OpenDesign non fa mai da proxy per le vostre credenziali, in nessun caso.
Cosa rende Pi particolarmente adatto al design?
È agnostico rispetto al provider: portate le vostre chiavi e instradate verso uno qualsiasi degli oltre 20 provider, scegliendo il modello i cui punti forti si adattano al compito e cambiando a metà sessione. Ma il gusto estetico deriva sempre dal design system, dallo skill e dai riferimenti che fornite, non dal modello.
Quale modello dovrei usare con Pi per il design frontend?
Pi si instrada verso molti provider, quindi scegliete in base al compito — un modello multimodale solido legge bene gli screenshot di riferimento, mentre altri possono essere più adatti al refactoring. Il vantaggio di Pi è che potete cambiare senza modificare il vostro workflow. OpenDesign vi permette di mantenere lo stesso contesto di design indipendentemente dal modello scelto.
Come collego Pi a Figma?
Pi supporta i server MCP, quindi puoi aggiungere un server Figma MCP e recuperare il contesto di design reale — componenti, variabili, dati di layout — così il codice generato corrisponde alla fonte invece di approssimarla.
Avviare una Prima Attività di Design Con Pi
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.