Pi per il design.

Cos'è realmente Pi

Pi è un agente di codice AI open source (MIT) per il terminale, parte del toolkit pi di earendil-works. Legge il tuo repository, modifica i file ed esegue comandi shell — pianificando e verificando il lavoro a partire da task in linguaggio naturale anziché limitarsi a completare righe. Il suo nucleo è deliberatamente piccolo: quattro strumenti predefiniti — read, write, edit e bash — più grep, find e ls integrati.

Per il lavoro di design, la proprietà che spicca è che Pi è indipendente dal provider. Normalizza tra Anthropic, OpenAI, Google e molti altri provider dietro un'unica API unificata, così porti le tue chiavi e scegli il modello per task — ad esempio un forte modello multimodale per leggere gli screenshot di riferimento — e cambi con /model o Ctrl+L a metà sessione senza modificare il tuo flusso di lavoro.

• Qualsiasi modello, le tue chiavi: Pi instrada verso oltre 20 provider, inclusi Anthropic e OpenAI. Autentichi con le tue chiavi API (BYOK), oppure accedi a un abbonamento Claude Pro/Max, ChatGPT Plus/Pro o GitHub Copilot con /login.
• Skill + Extension: Pi carica Skill (pacchetti di capacità in Markdown che seguono lo standard Agent Skills) ed Extension in TypeScript — il luogo naturale per codificare le tue convenzioni di design e aggiungere strumenti personalizzati.
• Sessioni ramificate: Le sessioni sono memorizzate come alberi JSONL, così puoi ramificare un'esplorazione e navigare la cronologia in un singolo file senza perdere i passaggi precedenti.

• Fornitore: earendil-works (progetto open source della community)
• Credenziale: la tua chiave API del provider (BYOK — Anthropic, OpenAI, Google, ecc.) o un accesso ad abbonamento tramite /login; memorizzata in locale in ~/.pi/agent/auth.json (0600)
• Licenza: MIT, open source

Perché un agente BYOK multi-provider si adatta al design

Il vantaggio di Pi nel design è la flessibilità, non un singolo modello integrato — ma, come con ogni agente, il gusto va comunque fornito.

• Scegli il modello giusto per task: Poiché Pi instrada verso qualsiasi provider, puoi affidarti a un forte modello multimodale per leggere gli screenshot di riferimento, poi passare a un altro per il refactoring — senza lasciare l'agente.
• Le tue chiavi, nessun vincolo: Il BYOK significa che non sei legato ai prezzi o ai limiti di contesto di un solo fornitore; scegli il modello i cui punti di forza si adattano al lavoro di design davanti a te.
• Convenzioni nelle Skill: Una Skill (più una fonte MCP come un server Figma) punta l'agente verso i tuoi token, componenti e specifiche reali, così lavora rispetto a un brand invece che su un aspetto predefinito.

La lezione è la stessa che insegna ogni agente: Pi non ha gusto per impostazione predefinita, e nessuna scelta di modello lo fornisce. Produce un buon design quando gli dai dei vincoli — un design system, una skill estetica e riferimenti concreti. Open Design impacchetta esattamente questi input, ed è per questo che i due si integrano bene (più avanti il dettaglio).

Configura Pi per il lavoro di design, da zero

Ecco il percorso completo da una macchina pulita a un Pi capace di costruire e verificare UI.

# 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)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+L

• Codifica le tue regole di design: Metti i tuoi token, le primitive e le convenzioni in una Skill e punta Pi verso di esse, così l'output corrisponde a un brand invece di ripiegare su un aspetto generico.
• Aggiungi la verifica nel browser: Collega un MCP Playwright o di browser così Pi renderizza in un browser reale e controlla il suo output attraverso i breakpoint invece di limitarsi a confermare che la build passi.

Il flusso di lavoro dallo screenshot all'UI

Il ciclo di design a maggior leva con Pi è trasformare un'immagine di riferimento in un'UI funzionante e responsive e iterare finché non corrisponde — appoggiandosi a un modello multimodale per confrontare l'output con il riferimento. Poiché Pi è indipendente dal provider, puntalo verso il modello che legge meglio le immagini per questo passaggio.

1. Parti dai riferimenti visivi più chiari che hai — e includi più stati (desktop e mobile, hover, vuoto, caricamento), non solo un'unica schermata hero.
2. Scegli un forte modello multimodale per il passaggio con /model, dato che la comprensione delle immagini è ciò che guida la qualità dallo screenshot all'UI.
3. Sii specifico nel prompt; i prompt vaghi producono UI generiche anche con un modello forte.
4. Tieni il tuo design system e le tue convenzioni in una Skill, e indica a Pi dove si trovano i token e le primitive canoniche.
5. Avvia un dev server e fai renderizzare a Pi in un browser reale, ridimensionando ai breakpoint, poi itera confrontando la sua implementazione con gli screenshot — non limitarti a confermare che si compili.

Dai all'agente i riferimenti e i vincoli concreti fin da subito:

pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

Tieni i prompt piccoli e mirati, committa le buone iterazioni e annulla quelle cattive (dicendolo a Pi quando annulli), così ogni passaggio si costruisce su una base pulita. Le sessioni JSONL ramificate di Pi ti permettono anche di esplorare un'alternativa senza perdere il thread originale.

Skill, Extension e temi

Pi si auto-estende a runtime attraverso alcuni livelli, e si mappano in modo pulito su un flusso di lavoro di design aperto.

• Skill: Pacchetti di capacità in Markdown che seguono lo standard Agent Skills — la sede durevole e portabile per le tue convenzioni di design, i token e le checklist di revisione. La stessa Skill funziona tra agenti compatibili, non solo Pi.
• Extension e template di prompt: Le Extension in TypeScript aggiungono strumenti, comandi e UI personalizzati; i template di prompt riutilizzabili si eseguono tramite /name. Entrambi ti permettono di scriptare il ciclo di verifica senza lasciare il terminale.
• MCP e temi: Pi si connette a server MCP per portare contesto di design esterno (più rilevante un server MCP Figma), e i temi si ricaricano a caldo così l'UI del terminale resta leggibile mentre lavori.

Sono capacità portabili — Skill e MCP in particolare — esattamente il tipo di cosa che Open Design è costruito per orchestrare, invece di ricrearle per ogni progetto.

Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI per il design

Non c'è un unico vincitore per il lavoro di design — ogni agente ha un punto di forza diverso, e i team esperti li combinano. Un riepilogo onesto:

L'angolazione di Pi è ortogonale alle altre: è l'agente che ti permette di usare uno qualsiasi di quei modelli sottostanti con le tue chiavi. Il verdetto ricorrente della community vale ancora — il gusto viene dalle persone: tutti ripiegano su un'estetica generica senza skill, riferimenti e vincoli. Questo è il vero problema da risolvere, ed è di forma da strumento di design, non da modello.

Insidie, e come evitare l'aspetto da “AI slop”

La lamentela più comune sul design generato dall'AI è che sembra generico — gradienti morbidi, pannelli fluttuanti, angoli arrotondati sovradimensionati, ombre drammatiche, un'atmosfera Inter-e-viola che “urla che l'ha fatto un'AI”. Altri problemi segnalati includono layout mobile rotti e istruzioni che finiscono nei testi dell'UI. Nessuno di questi è esclusivo di Pi o di un singolo modello; sono ciò che accade quando un qualsiasi agente gira senza un contesto di design curato.

• Aggiungi una skill estetica: Una skill di design curata costringe l'agente a impegnarsi su una direzione reale invece dell'aspetto predefinito — e poiché è una Skill portabile, viaggia con te tra i modelli.
• Verifica in un browser reale: Scegli un modello multimodale e fai renderizzare e autocontrollare a Pi attraverso i breakpoint così i layout non si rompono silenziosamente su mobile.
• Fornisci token e riferimenti: Token di design reali e screenshot di riferimento sono la leva singola più grande sulla qualità dell'output.
• Codifica le regole dove Pi le legge: Metti regole in stile “niente hero card, massimo due font, gerarchia brand-first” in una Skill che l'agente carica a ogni esecuzione.

Nota che ogni mitigazione riguarda il fornire all'agente un contesto di design curato — indipendentemente dal provider verso cui instradi. Mantenere quel contesto a mano, progetto per progetto, è la fatica che Open Design elimina.

Progettare con Pi dentro Open Design

Open Design è il livello di design open source che il flusso di lavoro qui sopra continua a richiedere. Tratta Pi come un adattatore di prima parte e lo avvolge in una libreria curata di skill e design system, una pipeline di rendering strutturata e un'UI desktop locale — così il contesto di design che rende Pi valido è presente dalla prima esecuzione, non assemblato a mano ogni volta. Entrambi sono open source e local-first, il che rende l'abbinamento naturale.

1. Installa Open Design e seleziona Pi come tuo agente.
2. Autentica con la tua chiave API del provider (BYOK) o un accesso ad abbonamento — le credenziali restano sulla tua macchina in ~/.pi/agent/auth.json e non passano mai attraverso di noi tramite proxy.
3. Scegli un design system e una skill, poi genera deck, prototipi e landing page con un gusto coerente.
4. Ogni artefatto e file DESIGN.md vive nel tuo repo, non in un cloud ospitato.

Stesso agente Pi, stesse chiavi, stessa libertà di cambiare modello — più un flusso di lavoro di design reale, portabile e open source attorno ad esso. È local-first e MIT, quindi nulla del tuo lavoro o delle tue credenziali lascia la tua macchina.

Domande frequenti

1. 01 Pi può davvero fare lavoro di design? +

   Sì — con una skill estetica, un design system e immagini di riferimento reali nel contesto, Pi produce UI responsive di qualità da produzione, e puoi instradarlo verso un forte modello multimodale per verificare l'output rispetto ai riferimenti. Senza quel contesto tende a ripiegare su un aspetto generico, che è il divario che Open Design colma.

2. 02 Devo pagare per progettare con Pi? +

   Pi in sé è gratuito e open source (MIT). Paghi solo per il modello sottostante — porta la tua chiave API del provider (BYOK), oppure usa un abbonamento Claude Pro/Max, ChatGPT Plus/Pro o GitHub Copilot tramite /login. Open Design non fa comunque mai da proxy alle tue credenziali.

3. 03 Cosa rende Pi buono per il design in particolare? +

   È indipendente dal provider: porti le tue chiavi e instradi verso uno qualsiasi di oltre 20 provider, scegliendo il modello i cui punti di forza si adattano al task e cambiando a metà sessione. Ma il gusto viene comunque dal design system, dalla skill e dai riferimenti che fornisci, non dal modello.

4. 04 Quale modello dovrei usare con Pi per il design frontend? +

   Pi instrada verso molti provider, quindi scegli per task — un forte modello multimodale legge bene gli screenshot di riferimento, mentre altri possono adattarsi al refactoring. Il vantaggio di Pi è che puoi cambiare senza modificare il tuo flusso di lavoro. Open Design ti permette di mantenere lo stesso contesto di design indipendentemente dal modello che scegli.

5. 05 Come collego Pi a Figma? +

   Pi supporta server MCP, così puoi aggiungere un server MCP Figma ed estrarre contesto di design reale — componenti, variabili, dati di layout — così il codice generato corrisponde alla fonte invece di approssimarla.

6. 06 Open Design è affiliato a Pi? +

   No. Pi è un progetto open source indipendente di earendil-works; Open Design è un progetto open source indipendente e separato che supporta Pi come adattatore di prima parte.

7. 07 I miei file e le mie credenziali sono al sicuro? +

   Sì — Open Design è local-first e open source. I tuoi file, gli artefatti e DESIGN.md restano nel tuo repo, e le tue chiavi del provider vengono usate direttamente da Pi (memorizzate in locale in ~/.pi/agent/auth.json), mai instradate attraverso i server di Open Design.