Pi voor design.

Wat Pi eigenlijk is

Pi is een open-source (MIT) AI-codingagent voor de terminal, onderdeel van de earendil-works pi-toolkit. Hij leest je repository, bewerkt bestanden en voert shell-opdrachten uit — hij plant en verifieert werk vanuit taken in natuurlijke taal in plaats van alleen regels aan te vullen. Zijn kern is bewust klein: vier standaardtools — read, write, edit en bash — plus ingebouwde grep, find en ls.

Voor designwerk is de opvallendste eigenschap dat Pi provider-onafhankelijk is. Hij normaliseert over Anthropic, OpenAI, Google en vele andere providers achter één uniforme API, zodat je je eigen sleutels meebrengt en het model per taak kiest — bijvoorbeeld een sterk multimodaal model om referentie-screenshots te lezen — en wisselt met /model of Ctrl+L midden in een sessie zonder je workflow te veranderen.

• Elk model, je sleutels: Pi routeert naar 20+ providers waaronder Anthropic en OpenAI. Je authenticeert met je eigen API-sleutels (BYOK), of logt in op een Claude Pro/Max-, ChatGPT Plus/Pro- of GitHub Copilot-abonnement met /login.
• Skills + Extensions: Pi laadt Skills (Markdown-capability-pakketten die de Agent Skills-standaard volgen) en TypeScript-Extensions — de natuurlijke plek om je designconventies te coderen en aangepaste tools toe te voegen.
• Vertakkende sessies: Sessies worden opgeslagen als JSONL-bomen, zodat je een verkenning kunt vertakken en door de geschiedenis kunt navigeren in één bestand zonder eerdere rondes te verliezen.

• Leverancier: earendil-works (open-source communityproject)
• Credential: je eigen provider-API-sleutel (BYOK — Anthropic, OpenAI, Google, enz.) of een abonnements-login via /login; lokaal opgeslagen in ~/.pi/agent/auth.json (0600)
• Licentie: MIT, open source

Waarom een multi-provider, BYOK-agent bij design past

Pi's designvoordeel is flexibiliteit, niet één ingebouwd model — maar, zoals bij elke agent, smaak moet nog steeds worden aangeleverd.

• Kies het juiste model per taak: Omdat Pi naar elke provider routeert, kun je grijpen naar een sterk multimodaal model om referentie-screenshots te lezen, en dan wisselen naar een ander voor refactoring — zonder de agent te verlaten.
• Je sleutels, geen lock-in: BYOK betekent dat je niet vastzit aan de prijzen of contextlimieten van één leverancier; kies het model waarvan de sterke punten passen bij de designklus voor je.
• Conventies in Skills: Een Skill (plus een MCP-bron zoals een Figma-server) wijst de agent op je tokens, componenten en echte specificaties, zodat hij werkt tegen een merk in plaats van een standaard look.

De les is dezelfde die elke agent leert: Pi heeft standaard geen smaak, en geen modelkeuze levert die. Hij produceert goed design wanneer je hem beperkingen geeft — een designsysteem, een esthetische skill en concrete referenties. Open Design verpakt precies die inputs, en daarom passen de twee bij elkaar (meer hieronder).

Pi opzetten voor designwerk, vanaf nul

Hier is het volledige pad van een schone machine naar een Pi die UI kan bouwen en verifiëren.

# 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

• Codeer je designregels: Plaats je tokens, primitieven en conventies in een Skill en wijs Pi erop, zodat output overeenkomt met een merk in plaats van terug te vallen op een generieke look.
• Voeg browserverificatie toe: Bedraad een Playwright- of browser-MCP zodat Pi rendert in een echte browser en zijn output controleert over breakpoints heen in plaats van alleen te bevestigen dat de build slaagt.

De screenshot-naar-UI-workflow

De designlus met de meeste hefboomwerking met Pi is het omzetten van een referentieafbeelding in werkende, responsieve UI en daarop itereren tot het overeenkomt — leunend op een multimodaal model om output te vergelijken met de referentie. Omdat Pi provider-onafhankelijk is, wijs hem op welk model voor deze ronde ook het beste afbeeldingen leest.

1. Begin met de duidelijkste visuele referenties die je hebt — en neem meerdere staten mee (desktop en mobiel, hover, leeg, laden), niet slechts één hero-shot.
2. Kies met /model een sterk multimodaal model voor de ronde, want beeldbegrip is wat de screenshot-naar-UI-kwaliteit aandrijft.
3. Wees specifiek in de prompt; vage prompts leveren generieke UI op, zelfs met een sterk model.
4. Bewaar je designsysteem en conventies in een Skill, en vertel Pi waar de tokens en canonieke primitieven leven.
5. Draai een dev-server en laat Pi renderen in een echte browser, met formaataanpassing naar breakpoints, en itereer dan door zijn implementatie te vergelijken met de screenshots — niet alleen bevestigen dat het bouwt.

Geef de agent vooraf de referenties en concrete beperkingen:

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.

Houd prompts klein en gericht, commit goede iteraties en draai slechte terug (en vertel Pi wanneer je terugdraait), zodat elke ronde voortbouwt op een schone basis. Pi's vertakkende JSONL-sessies laten je ook een alternatief verkennen zonder de oorspronkelijke draad te verliezen.

Skills, Extensions en thema's

Pi breidt zichzelf tijdens runtime uit via een paar lagen, en die passen netjes op een open design-workflow.

• Skills: Markdown-capability-pakketten die de Agent Skills-standaard volgen — de duurzame, overdraagbare thuisbasis voor je designconventies, tokens en reviewchecklists. Dezelfde Skill werkt over compatibele agents heen, niet alleen Pi.
• Extensions en prompt-sjablonen: TypeScript-Extensions voegen aangepaste tools, commando's en UI toe; herbruikbare prompt-sjablonen draaien via /name. Beide laten je de verificatielus scripten zonder de terminal te verlaten.
• MCP en thema's: Pi verbindt met MCP-servers om externe designcontext binnen te halen (het meest relevant een Figma MCP-server), en thema's herladen direct zodat de terminal-UI leesbaar blijft terwijl je werkt.

Dit zijn overdraagbare mogelijkheden — vooral Skills en MCP — precies het soort dingen die Open Design is gebouwd om te orkestreren, in plaats van per project opnieuw te creëren.

Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI voor design

Er is geen enkele winnaar voor designwerk — elke agent heeft een ander sterk punt, en ervaren teams stapelen ze. Een eerlijke samenvatting:

Pi's invalshoek staat haaks op de andere: hij is de agent die je elk van die onderliggende modellen op je eigen sleutels laat gebruiken. Het terugkerende oordeel van de community geldt nog steeds — smaak komt van mensen: ze vallen allemaal terug op een generieke esthetiek zonder skills, referenties en beperkingen. Dat is het echte probleem om op te lossen, en het heeft de vorm van een designtool, niet van een model.

Valkuilen, en hoe je de “AI-slop”-look vermijdt

De meest voorkomende klacht over door AI gegenereerd design is dat het er generiek uitziet — zachte gradiënten, zwevende panelen, overdreven afgeronde hoeken, dramatische schaduwen, een Inter-en-paars-sfeer die “schreeuwt dat een AI dit heeft gemaakt.” Andere gemelde problemen zijn kapotte mobiele lay-outs en instructies die in de UI-tekst lekken. Geen van deze is uniek voor Pi of voor enig model; ze zijn wat er gebeurt wanneer welke agent dan ook draait zonder een samengestelde designcontext.

• Voeg een esthetische skill toe: Een samengestelde design-skill dwingt de agent om zich vast te leggen op een echte richting in plaats van de standaard look — en omdat het een overdraagbare Skill is, reist hij met je mee over modellen heen.
• Verifieer in een echte browser: Kies een multimodaal model en laat Pi renderen en zichzelf controleren over breakpoints heen zodat lay-outs niet stilletjes breken op mobiel.
• Lever tokens en referenties aan: Echte design-tokens en referentie-screenshots zijn de grootste enkele hefboom op outputkwaliteit.
• Codeer regels waar Pi ze leest: Plaats stijlregels als “geen hero-cards, maximaal twee lettertypes, merk-eerst-hiërarchie” in een Skill die de agent elke ronde laadt.

Merk op dat elke mitigatie gaat over het geven van een samengestelde designcontext aan de agent — onafhankelijk van naar welke provider je routeert. Die context handmatig onderhouden, per project, is het zware werk dat Open Design wegneemt.

Ontwerpen met Pi in Open Design

Open Design is de open-source designlaag waar de bovenstaande workflow steeds om vraagt. Het behandelt Pi als een first-party adapter en wikkelt hem in een samengestelde bibliotheek van skills en designsystemen, een gestructureerde render-pijplijn en een lokale desktop-UI — zodat de designcontext die Pi goed maakt er vanaf de eerste ronde is, niet telkens handmatig samengesteld. Beide zijn open-source en local-first, wat de combinatie een natuurlijke match maakt.

1. Installeer Open Design en selecteer Pi als je agent.
2. Authenticeer met je eigen provider-API-sleutel (BYOK) of een abonnements-login — credentials blijven op je machine in ~/.pi/agent/auth.json en worden nooit via ons doorgesluisd.
3. Kies een designsysteem en een skill, en genereer dan decks, prototypes en landingspagina's met consistente smaak.
4. Elk artefact en DESIGN.md-bestand leeft in je eigen repo, niet in een gehoste cloud.

Dezelfde Pi-agent, dezelfde sleutels, dezelfde vrijheid om van model te wisselen — plus een echte, overdraagbare, open-source design-workflow eromheen. Het is local-first en MIT, dus niets van je werk of je credentials verlaat je machine.

Veelgestelde vragen

1. 01 Kan Pi echt designwerk doen? +

   Ja — met een esthetische skill, een designsysteem en echte referentieafbeeldingen in context produceert Pi responsieve UI van productiekwaliteit, en je kunt hem routeren naar een sterk multimodaal model om output te verifiëren tegen referenties. Zonder die context valt hij doorgaans terug op een generieke look, en dat is de kloof die Open Design dicht.

2. 02 Moet ik betalen om met Pi te ontwerpen? +

   Pi zelf is gratis en open source (MIT). Je betaalt alleen voor het onderliggende model — breng je eigen provider-API-sleutel mee (BYOK), of gebruik een Claude Pro/Max-, ChatGPT Plus/Pro- of GitHub Copilot-abonnement via /login. Open Design sluist je credentials sowieso nooit door.

3. 03 Wat maakt Pi specifiek goed voor design? +

   Hij is provider-onafhankelijk: je brengt je eigen sleutels mee en routeert naar elk van 20+ providers, en kiest het model waarvan de sterke punten bij de taak passen en wisselt midden in een sessie. Maar smaak komt nog steeds van het designsysteem, de skill en de referenties die jij aanlevert, niet van het model.

4. 04 Welk model moet ik met Pi gebruiken voor frontend-design? +

   Pi routeert naar veel providers, dus kies per taak — een sterk multimodaal model leest referentie-screenshots goed, terwijl andere geschikt kunnen zijn voor refactoring. Het voordeel van Pi is dat je kunt wisselen zonder je workflow te veranderen. Met Open Design behoud je dezelfde designcontext over welk model je ook kiest.

5. 05 Hoe verbind ik Pi met Figma? +

   Pi ondersteunt MCP-servers, zodat je een Figma MCP-server kunt toevoegen en echte designcontext kunt binnenhalen — componenten, variabelen, lay-outdata — zodat de gegenereerde code overeenkomt met de bron in plaats van die te benaderen.

6. 06 Is Open Design verbonden met Pi? +

   Nee. Pi is een onafhankelijk open-source project van earendil-works; Open Design is een apart onafhankelijk open-source project dat Pi ondersteunt als first-party adapter.

7. 07 Zijn mijn bestanden en credentials veilig? +

   Ja — Open Design is local-first en open source. Je bestanden, artefacten en DESIGN.md blijven in je eigen repo, en je providersleutels worden rechtstreeks door Pi gebruikt (lokaal opgeslagen in ~/.pi/agent/auth.json), nooit gerouteerd via Open Design-servers.