Question 1

Kann Pi wirklich Designarbeit leisten?

Accepted Answer

Ja — mit einem gestalterischen Skill, einem Design System und echten Referenzbildern im Kontext erzeugt Pi produktionsreife, responsive UI, und Sie können es zu einem starken multimodalen Modell leiten, um die Ausgabe gegen Referenzen zu prüfen. Ohne diesen Kontext tendiert es zu einem generischen Look — genau diese Lücke schließt OpenDesign.

Question 2

Muss ich bezahlen, um mit Pi zu designen?

Accepted Answer

Pi selbst ist kostenlos und Open Source (MIT). Sie zahlen nur für das zugrunde liegende Modell — bringen Sie Ihren eigenen Provider-API-Key mit (BYOK), oder nutzen Sie ein Claude Pro/Max-, ChatGPT Plus/Pro- oder GitHub Copilot-Abonnement über /login. OpenDesign leitet Ihre Zugangsdaten in keinem Fall über einen Proxy weiter.

Question 3

Was macht Pi für Design geeignet?

Accepted Answer

Pi ist anbieterunabhängig: Sie bringen Ihre eigenen Schlüssel mit und routen zu einem von mehr als 20 Anbietern, wählen das Modell, dessen Stärken zur Aufgabe passen, und wechseln mitten in der Sitzung. Der Geschmack kommt jedoch weiterhin aus dem Design System, dem Skill und den Referenzen, die Sie bereitstellen, nicht aus dem Modell.

Question 4

Welches Modell sollte ich mit Pi für Frontend-Design verwenden?

Accepted Answer

Pi routet zu vielen Anbietern, wählen Sie also je nach Aufgabe — ein starkes multimodales Modell liest Referenz-Screenshots gut, während andere sich eher für Refactoring eignen. Der Vorteil von Pi ist, dass Sie wechseln können, ohne Ihren Workflow zu ändern. OpenDesign lässt Sie denselben Design-Kontext über jedes gewählte Modell hinweg beibehalten.

Question 5

Wie verbinde ich Pi mit Figma?

Accepted Answer

Pi unterstützt MCP-Server, sodass Sie einen Figma-MCP-Server hinzufügen und echten Design-Kontext abrufen können – Komponenten, Variablen, Layout-Daten – damit der generierte Code der Quelle entspricht, statt sie nur anzunähern.

Question 6

Was Pi tatsächlich ist

Accepted Answer

Pi ist ein quelloffener (MIT) KI-Coding-Agent für das Terminal, Teil des earendil-works pi Toolkits. Er liest dein Repository, bearbeitet Dateien und führt Shell-Befehle aus — plant und verifiziert Arbeit anhand natürlichsprachlicher Aufgaben, statt nur Zeilen zu vervollständigen. Sein Kern ist bewusst klein gehalten: vier Standardwerkzeuge — read, write, edit und bash — plus integrierte grep, find und ls.

Für Designarbeit ist die herausragende Eigenschaft, dass Pi anbieterunabhängig ist. Er normalisiert Anthropic, OpenAI, Google und viele andere Anbieter hinter einer einheitlichen API, sodass du deine eigenen Keys mitbringst und das Modell pro Aufgabe wählst — zum Beispiel ein starkes multimodales Modell, um Referenz-Screenshots zu lesen — und mitten in der Sitzung mit /model oder Ctrl+L wechselst, ohne deinen Workflow zu ändern.

Jedes Modell, deine Keys: Pi routet zu über 20 Anbietern, darunter Anthropic und OpenAI. Du authentifizierst dich mit deinen eigenen API-Keys (BYOK) oder meldest dich mit /login bei einem Claude Pro/Max-, ChatGPT Plus/Pro- oder GitHub Copilot-Abo an.

Skills + Extensions: Pi lädt Skills (Markdown-Fähigkeitspakete nach dem Agent Skills-Standard) und TypeScript Extensions — der natürliche Ort, um deine Design-Konventionen zu kodieren und eigene Werkzeuge hinzuzufügen.

Verzweigte Sitzungen: Sitzungen werden als JSONL-Bäume gespeichert, sodass du eine Erkundung verzweigen und den Verlauf in einer einzigen Datei navigieren kannst, ohne frühere Durchläufe zu verlieren.

Anmeldedaten: dein eigener Anbieter-API-Key (BYOK — Anthropic, OpenAI, Google usw.) oder ein Abo-Login über /login; lokal gespeichert in ~/.pi/agent/auth.json (0600)

Anbieter: earendil-works (Open-Source-Community-Projekt)

Lizenz: MIT, Open Source

Question 7

Warum ein Multi-Anbieter-Agent mit BYOK zu Design passt

Accepted Answer

Pis Design-Vorteil ist Flexibilität, nicht ein einzelnes eingebautes Modell — aber wie bei jedem Agenten muss Geschmack trotzdem geliefert werden.

Das richtige Modell pro Aufgabe wählen: Weil Pi zu jedem Anbieter routet, kannst du zu einem starken multimodalen Modell greifen, um Referenz-Screenshots zu lesen, und dann für das Refactoring zu einem anderen wechseln — ohne den Agenten zu verlassen.

Deine Keys, kein Lock-in: BYOK bedeutet, dass du nicht an die Preise oder Kontextgrenzen eines Anbieters gebunden bist; wähle das Modell, dessen Stärken zur vorliegenden Design-Aufgabe passen.

Konventionen in Skills: Ein Skill (plus eine MCP-Quelle wie ein Figma-Server) weist den Agenten auf deine Tokens, Komponenten und echten Specs hin, sodass er gegen eine Marke statt gegen einen Standard-Look arbeitet.

Geschmack entsteht aus drei Inputs, die du lieferst: einem Design-System, einem Skill und echten Referenzbildern.

Die Lektion ist dieselbe, die jeder Agent lehrt: Pi hat standardmäßig keinen Geschmack, und keine Modellwahl liefert ihn. Es erzeugt gutes Design, wenn du ihm Vorgaben machst — ein Design-System, einen ästhetischen Skill und konkrete Referenzen. OpenDesign bündelt genau diese Inputs, weshalb die beiden zusammenpassen (mehr dazu weiter unten).

Question 8

Pi für Designarbeit von Grund auf einrichten

Accepted Answer

Die Einrichtungsreihenfolge: installieren → authentifizieren (BYOK) → Design-Regeln in einem Skill kodieren → ein Modell wählen → Browser-Verifikation aktivieren.Kodiere deine Design-Regeln: Lege deine Tokens, Primitives und Konventionen in einem Skill ab und weise Pi darauf hin, damit die Ausgabe zu einer Marke passt, statt auf einen generischen Look zurückzufallen.Füge Browser-Verifikation hinzu: Binde ein Playwright- oder Browser-MCP ein, damit Pi in einem echten Browser rendert und seine Ausgabe über Breakpoints hinweg prüft, statt nur zu bestätigen, dass der Build durchläuft.Nutze den aktuellen Setup-Abschnitt für Befehle und versionsspezifische Details, die sich ändern können.# 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+LHistorisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.

Question 9

Der Workflow von Screenshot zu UI

Accepted Answer

Der wirkungsvollste Design-Loop mit Pi besteht darin, ein Referenzbild in funktionierende, responsive UI zu verwandeln und zu iterieren, bis es passt — gestützt auf ein multimodales Modell, das die Ausgabe mit der Referenz vergleicht. Weil Pi anbieterunabhängig ist, weise es auf das Modell, das Bilder für diesen Durchlauf am besten liest.Beginne mit den klarsten visuellen Referenzen, die du hast — und schließe mehrere Zustände ein (Desktop und Mobile, Hover, Leer, Laden), nicht nur einen Hero-Shot.Wähle für den Durchlauf mit /model ein starkes multimodales Modell, da Bildverständnis die Qualität von Screenshot zu UI bestimmt.Sei im Prompt konkret; vage Prompts erzeugen generische UI, selbst mit einem starken Modell.Halte dein Design-System und deine Konventionen in einem Skill und sage Pi, wo die Tokens und kanonischen Primitives liegen.Starte einen Dev-Server und lass Pi in einem echten Browser rendern, auf Breakpoints hin skalieren, und iteriere dann, indem du seine Implementierung mit den Screenshots vergleichst — statt nur zu bestätigen, dass sie baut.Gib dem Agenten die Referenzen und konkreten Vorgaben von Anfang an:Halte Prompts klein und fokussiert, committe gute Iterationen und setze schlechte zurück (und sage Pi, wenn du zurücksetzt), damit jeder Durchlauf auf einer sauberen Basis aufbaut. Pis verzweigte JSONL-Sitzungen lassen dich außerdem eine Alternative erkunden, ohne den ursprünglichen Strang zu verlieren.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.Historisches Befehlsbeispiel aus dem vorherigen Leitfaden; prüfe die aktuelle Syntax in der verlinkten Anbieterdokumentation.

Question 10

Skills, Extensions und Themes

Accepted Answer

Pi erweitert sich zur Laufzeit über einige Schichten selbst, und diese lassen sich sauber auf einen offenen Design-Workflow abbilden.

Skills: Markdown-Fähigkeitspakete nach dem Agent Skills-Standard — das dauerhafte, portable Zuhause für deine Design-Konventionen, Tokens und Review-Checklisten. Derselbe Skill funktioniert über kompatible Agenten hinweg, nicht nur mit Pi.

Extensions und Prompt-Templates: TypeScript Extensions fügen eigene Werkzeuge, Befehle und UI hinzu; wiederverwendbare Prompt-Templates laufen über /name. Beides lässt dich den Verifikations-Loop skripten, ohne das Terminal zu verlassen.

MCP und Themes: Pi verbindet sich mit MCP-Servern, um externen Design-Kontext einzubringen (am relevantesten ein Figma-MCP-Server), und Themes laden per Hot-Reload neu, damit die Terminal-UI während der Arbeit lesbar bleibt.

Das sind portable Fähigkeiten — insbesondere Skills und MCP — genau die Art von Sache, für deren Orchestrierung OpenDesign gebaut ist, statt sie pro Projekt neu zu erstellen.

Question 11

Pi vs. Codex vs. Claude Code vs. Cursor vs. Gemini CLI für Design

Accepted Answer

Es gibt keinen einzigen Sieger für Designarbeit — jeder Agent hat eine andere Stärke, und erfahrene Teams kombinieren sie. Eine faire Zusammenfassung:

Pi — Anbieterunabhängig und BYOK — routet zu jedem Modell (Anthropic, OpenAI, Google…) und wechselt mitten in der Sitzung; MIT, selbst-erweiterbar — Das beste Modell pro Aufgabe wählen, ohne Vendor-Lock-in

Codex — Starker visueller Feinschliff mit einem Frontend-Skill; sandboxed asynchrone Builds — Delegierte asynchrone Builds und portable AGENTS.md-Regeln

Claude Code — Konkrete Design-Entscheidungen (Hex, Abstände, Typo) und codebase-bewusste UX — Frontend-Reasoning und Refactorings mit großem Kontext

Cursor — Visueller Build-and-See-Loop mit Live-Vorschau und Inline-Edits — Enges Iterieren-und-Beobachten an UI-Arbeit in einer IDE

Gemini CLI — Starkes multimodales Bildverständnis und ein 1M-Token-Kontext; kostenlose Stufe — Screenshot-lastige Arbeit und ein ganzes Design-System im Kontext halten

Pis Ansatz ist orthogonal zu den anderen: Er ist der Agent, mit dem du jedes dieser zugrunde liegenden Modelle mit deinen eigenen Keys nutzen kannst. Das wiederkehrende Urteil der Community gilt weiterhin — Geschmack kommt von Menschen: Ohne Skills, Referenzen und Vorgaben fallen alle auf eine generische Ästhetik zurück. Das ist das eigentliche Problem, das es zu lösen gilt, und es ist design-werkzeugförmig, nicht modellförmig.

Agent — Design-Stärke — Am besten für

Question 12

Fallstricke und wie man den „AI Slop“-Look vermeidet

Accepted Answer

Die häufigste Beschwerde über KI-generiertes Design ist, dass es generisch aussieht — weiche Verläufe, schwebende Panels, überdimensionierte abgerundete Ecken, dramatische Schatten, eine Inter-und-Lila-Stimmung, die „schreit, dass eine KI das gemacht hat“. Weitere berichtete Probleme sind kaputte Mobile-Layouts und Anweisungen, die in UI-Texte durchsickern. Nichts davon ist einzigartig für Pi oder ein einzelnes Modell; es ist das, was passiert, wenn ein Agent ohne kuratierten Design-Kontext läuft.

Füge einen ästhetischen Skill hinzu: Ein kuratierter Design-Skill zwingt den Agenten, sich auf eine echte Richtung festzulegen, statt auf den Standard-Look — und da es ein portabler Skill ist, reist er mit dir über Modelle hinweg.

In einem echten Browser verifizieren: Wähle ein multimodales Modell und lass Pi über Breakpoints hinweg rendern und selbst prüfen, damit Layouts auf Mobile nicht still kaputtgehen.

Tokens und Referenzen liefern: Echte Design-Tokens und Referenz-Screenshots sind der mit Abstand größte Hebel für die Ausgabequalität.

Regeln dort kodieren, wo Pi sie liest: Lege Regeln im Stil von „keine Hero-Cards, maximal zwei Schriftarten, Marke-zuerst-Hierarchie“ in einem Skill ab, den der Agent bei jedem Lauf lädt.

Beachte, dass jede Gegenmaßnahme darauf hinausläuft, dem Agenten einen kuratierten Design-Kontext zu geben — unabhängig davon, zu welchem Anbieter du routest. Diesen Kontext pro Projekt von Hand zu pflegen, ist die Mühsal, die OpenDesign beseitigt.

Question 13

Mit Pi innerhalb von OpenDesign designen

Accepted Answer

OpenDesign ist die Open-Source-Design-Schicht, nach der der obige Workflow immer wieder verlangt. Es behandelt Pi als First-Party-Adapter und umhüllt ihn mit einer kuratierten Skill- und Design-System-Bibliothek, einer strukturierten Render-Pipeline und einer lokalen Desktop-UI — sodass der Design-Kontext, der Pi gut macht, vom ersten Lauf an da ist und nicht jedes Mal von Hand zusammengesetzt werden muss. Beide sind Open Source und local-first, was die Paarung zu einer natürlichen Verbindung macht.

Authentifiziere dich mit deinem eigenen Anbieter-API-Key (BYOK) oder einem Abo-Login — die Anmeldedaten bleiben auf deiner Maschine in ~/.pi/agent/auth.json und werden niemals über uns geleitet.

Wähle ein Design-System und einen Skill und generiere dann Decks, Prototypen und Landing Pages mit konsistentem Geschmack.

Jedes Artefakt und jede DESIGN.md-Datei liegt in deinem eigenen Repo, nicht in einer gehosteten Cloud.

Derselbe Pi-Agent, dieselben Keys, dieselbe Freiheit, Modelle zu wechseln — plus ein echter, portabler Open-Source-Design-Workflow drumherum. Es ist local-first und MIT, sodass nichts an deiner Arbeit oder deinen Anmeldedaten deine Maschine verlässt.

Installiere OpenDesign und wähle Pi als deinen Agenten.

Question 14

Ist OpenDesign mit Pi verbunden?

Accepted Answer

Nein. OpenDesign ist unabhängig und integriert Pi als community-unterstützten Adapter.

Mit Pi
in OpenDesign
gestalten.

Wählen Sie Ihren Einstiegspunkt für Pi

Eine Produktoberfläche mit Pi erstellen

Pi von Grund auf einrichten

Pi mit anderen Agenten vergleichen

Ein Pi-Designauftrag: Vom Briefing bis zur Oberfläche

1Design-Briefing und Vorgaben

2Wer macht was: Sie, Pi und OpenDesign

3Pi-Artefakt: Plan-Vergleichsseite bei 1440px und 390px

4Überprüfung vor der Übergabe

Raster und Abstände

Visuelle Hierarchie

Mobiles Layout

Interaktionsprüfungen

Wann Pi die richtige Wahl ist – und wann nicht

Pi passt, wenn

Wählen Sie einen anderen Workflow, wenn

Pi-Voraussetzungen vor dem Start

Tool-UmfangPi, von der Community

Konten und AuthentifizierungIhr eigener Provider-API-Key (BYOK) oder

System und VersionenDesktop-App oder Quellcode

VerbindungsprüfungDas Erfolgssignal

Pi-Setup in drei Schritten

Die OpenDesign-Desktop-App herunterladen

Bereiten Sie Ihre Pi-Verbindung vor

Führen Sie eine kleine Pi-Aufgabe aus

Pis fünfstufiger Design-Workflow

Design-Briefing

Design-Vorgaben

Die Oberfläche generieren

Vorschau

Überarbeiten und Verifizieren

Pi Design-Ressourcen

Weiterführende Lektüre zu Pi

Design Skills

Design Systems

Vorlagen

Einschränkungen von Pi, manuelle Prüfungen und Fallbacks

Häufige Fragen zu Pi und OpenDesign

Mit Pi in OpenDesign gestalten.