WEITERE LEKTÜRE
Weiterführende Lektüre zu Pi
Tutorials, Dokumentation und Anleitungen zum Designen mit Pi, wie im veröffentlichten Guide aufgeführt.
Pi 
OpenDesign Mit Pi
in OpenDesign
gestalten.
So gestalten Sie Benutzeroberflächen mit Pi in OpenDesign: portable Skills, das Modell und der Key, den Sie wählen, eine Plan-Vergleichsaufgabe vom Briefing bis zur geprüften Datei sowie die Grenzen, die Sie vorher kennen sollten.
Vom Briefing zum Interface01 / Pi
SIE BRINGEN DIE IDEE EIN↗
„Planvergleich mit einem
portablen Skill, jedes Modell.“
DREI WEGE IN DIESEN PI-GUIDE
Wählen Sie, wo Sie mit Pi starten
DIESER LEITFADEN · UI-DESIGN
Eine Produktoberfläche mit Pi erstellen
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGPi von Grund auf einrichten
Hier ist der vollständige Weg von einer leeren Maschine zu einem Pi, das UI erstellen und prüfen kann.
Zum Setup VERGLEICHPi mit anderen Agenten vergleichen
Wie sich Pi von Codex, Claude Code und Cursor bei Design-Arbeiten unterscheidet und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Design-Aufgabe mit Pi
Eine Design-Aufgabe mit Pi, vom Briefing zur Oberfläche
Eine einzelne Aufgabe, end-to-end gezeigt: das Briefing und die Vorgaben, die Sie übergeben, das Artefakt, das zurückkommt, und die Prüfungen, die Sie vor dem Abschluss noch durchführen. Die unten gezeigte Oberfläche ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Pi-Lauf.
1Design-Briefing und Vorgaben
BriefingGestalten Sie eine Plan-Vergleichsseite für eine Notiz-App: kostenloser, persönlicher und Team-Plan, ein Funktionsvergleich und ein kurzes FAQ. Desktop und Smartphone.
- Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenBilling-Toggle, Plan-CTAs, Vergleichszeile ausklappen
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Aufgabenverteilung: Sie, Pi und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Pi
Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet es auf Anfrage.
- OpenDesign
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
- Prüfung
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
3Pi-Artefakt: Die Plan-Vergleichsseite bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Die drei Pläne und der Vergleich teilen sich das 8px-Grid; die Funktionszeilen sind spaltenübergreifend ausgerichtet.
Hierarchie
Visuelle Hierarchie
Preis und Plan-Name stehen zuerst; der Akzent markiert das Badge „Meistgewählt“ und dessen Button.
Responsive
Mobiles Layout
Zuerst der persönliche Plan, dann der kostenlose, dann der Team-Plan; der Toggle bleibt oben.
Interaktion
Interaktionsprüfungen
Toggle umschalten, per Tab durch die CTAs gehen, eine Vergleichszeile ausklappen.
Eignung
Wann Pi zur Aufgabe passt – und wann nicht
Pi passt, wenn
- Jedes Modell, Ihre Keys. Routen Sie mit Ihren eigenen Keys zu Anthropic, OpenAI, Google und mehr; wählen Sie ein starkes multimodales Modell für Screenshot-zu-UI und wechseln Sie mit /model.
- Portable Skills. Kodieren Sie Ihre Design-Konventionen als Agent-Skills-Standard-Skills, die über kompatible Agents hinweg funktionieren, nicht nur mit Pi.
- MCP + Extensions. Bringen Sie echten Design-Kontext über einen Figma-MCP-Server ein und skripten Sie den Verifikations-Loop mit TypeScript-Extensions.
- Offen und BYOK. MIT-lizenziert und local-first; Sie zahlen nur für das zugrunde liegende Modell, und Ihre Zugangsdaten bleiben auf Ihrem Rechner.
Wählen Sie einen anderen Workflow, wenn
- Sie benötigen bearbeitbare Vektordateien. Das Artefakt ist HTML, kein bearbeitbares Design-Dokument. Prüfen Sie einen separaten Vektor-Workflow für Ihr benötigtes Asset-Format.
- Sie haben weder Referenz noch Vorgaben. Ohne Designsystem oder Beispiele tendiert die Ausgabe zu einem generischen Look; schreiben Sie zuerst das Briefing.
- Sie verfügen nicht über die für diesen Agent erforderlichen Zugangsdaten. Erforderlich: Ihr eigener Provider-API-Key (bring your own key) oder Abonnement-Login über /login. OpenDesign stellt keine Zugangsdaten bereit und leitet keine weiter.
- Ihr Team arbeitet mit Aider oder OpenCode. Diese Agents haben eigene Seiten; der Workspace ist derselbe, das Setup unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Pi-Voraussetzungen vor dem Start
Dieser Leitfaden behandelt Pi, wie es über die OpenDesign-Desktop-App angebunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangPi, von der Community
Pi ist ein Open-Source-Terminal-Coding-Agent (MIT) von earendil-works. Er liest Ihre Codebasis, bearbeitet Dateien und führt Befehle über einen kleinen Vier-Tool-Kern aus — read, write, edit, bash. Diese Seite behandelt das Gestalten von Interfaces mit Pi über OpenDesign, nicht die eigene Oberfläche von Pi. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agents auf.
Konten und AuthentifizierungIhr eigener Provider-API-Key (BYOK) oder
Ihr eigener Provider-API-Key (BYOK) oder Abonnement-Login via /login. Authentifizieren Sie sich mit Ihrem eigenen Provider-API-Key (BYOK) oder einem Abonnement-Login — Zugangsdaten bleiben auf Ihrem Rechner. Diese Seite verspricht kein Kontingent und keinen Preis.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Download-Seite auf Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quell-Quickstart gelten für die Ausführung aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible Pi-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Folgen Sie den in Ihrer installierten Version angezeigten Verbindungsanweisungen und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Pi sie bearbeitet hat und dass sich das Artifact öffnet. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Pi-Setup in drei Schritten
Laden Sie zuerst herunter, schließen Sie das Pi-Setup für Ihre installierte Version ab und prüfen Sie dann ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode bauen, um diesen Weg zu befolgen.
- 1
Die OpenDesign-Desktop-App herunterladen
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenMEILENSTEINDie Desktop-App öffnet sich. Bereits installiert? Fahren Sie mit dem nächsten Schritt fort; ein erneuter Download ist nicht erforderlich. - 2
Bereiten Sie Ihre Pi-Verbindung vor
Folgen Sie den Pi-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem eigenen Provider-API-Key (BYOK) oder einem Abonnement-Login — Zugangsdaten bleiben auf Ihrem Rechner.
Pi-Provider- & Authentifizierungsdokumentation# 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)Aus den Pi-Setup-Hinweisen im veröffentlichten Leitfaden; prüfen Sie die Anbieterdokumentation für den aktuellen Befehl.
MEILENSTEINBestätigen Sie den vorgesehenen Agent und das Konto. Ist er nicht verfügbar, prüfen Sie die Kompatibilität, bevor Sie eine größere Aufgabe versuchen. - 3
Führen Sie eine kleine Pi-Aufgabe aus
Verwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.
Start-BriefingErstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
MEILENSTEINÖffnen Sie das Ergebnis, testen Sie den Speicherstatus und fordern Sie eine konkrete Änderung an. Eine generierte Datei ist der Beginn der Überprüfung, nicht das Ende.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der Pi-Design-Workflow
Der Pi-Design-Workflow in fünf Schritten
Dieselbe Aufgabe zur Plan-Vergleichsseite, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt zeigt, was Sie bereitstellen, was Pi übernimmt, was OpenDesign beiträgt und was Sie prüfen.
- 1
Design-Briefing
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
- SieSchreiben Sie das Briefing; hängen Sie einen Referenz-Screenshot an, falls vorhanden.
- PiLiest das Briefing und die Anweisungsdatei des Projekts; fragt nach, wenn etwas mehrdeutig ist.
- OpenDesignStellt das Projekt, die Prompt-Oberfläche und das Skill für den Artefakttyp bereit.
- PrüfenStellen Sie sicher, dass das Briefing die Abnahmekriterien enthält. Diese jetzt hinzuzufügen ist günstiger als nach der Generierung.
- 2
Design-Vorgaben
Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
- SieWählen Sie ein Design-System; legen Sie Breakpoints und verbindlich zu verwendende Komponenten fest.
- PiLädt die DESIGN.md-Tokens und Verhaltensregeln in den Kontext, bevor eine Zeile geschrieben wird.
- OpenDesignLiefert die Design-System-Bibliothek und bindet das ausgewählte System in die Skill-Vorlage ein.
- PrüfenDie Token entsprechen Ihrer Marke. Ein Akzent, die richtigen Schriften, der richtige Radius.
- 3
Die Oberfläche generieren
Pi schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- PiPlant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt Fehler.
- OpenDesignSpeichert das Artefakt im Projektordner und indexiert es für die Vorschau.
- PrüfenNoch nichts. Beurteilen Sie die Datei nach dem Rendern, nicht anhand des Quellcodes.
- 4
Vorschau
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
- SieWechseln Sie zwischen Breiten, klicken Sie sich durch die Interaktionen, hinterlassen Sie Kommentare zu Elementen.
- PiLiest Ihre Kommentare zur Vorschau und bereitet die nächste Überarbeitung vor.
- OpenDesignRendert die Vorschau, stellt
data-od-id-Ziele für Kommentare und Änderungen bereit. - PrüfenHierarchie, Kontrast, Überlauf bei 390px, Fokuszustände und ob der Akzent sparsam eingesetzt wird.
- 5
Überarbeiten und Verifizieren
Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
- SieVerwandeln Kommentare in Anfragen; entscheiden, wann die Aufgabe abgeschlossen ist.
- PiWendet die Änderungen direkt an und führt die Datei erneut aus.
- OpenDesignBehält Versionen nebeneinander; exportiert ein Bild oder das HTML, wenn Sie fertig sind.
- PrüfenNur den geänderten Bereich erneut prüfen, dann die gesamte Seite einmal bei jedem Breakpoint.
Ressourcen
Pi Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Pi in OpenDesign erzeugen kann, ein Skill pro Typ.
Design Systems
Marken-Tokens und Komponenten, die vor der Generierung durch Pi gebunden werden müssen.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Einschränkungen von Pi, manuelle Prüfungen und Fallbacks
- UmfangPi ist anbieterunabhängig: Es normalisiert über Anthropic, OpenAI, Google und mehr als 20 weitere Anbieter, sodass Sie Ihre eigenen Schlüssel mitbringen und das Modell mitten in der Sitzung wechseln können. Diese Seite behandelt Pi als mit OpenDesign verbundenen Agent, nicht jede Pi-Funktion.
- NutzungsgrenzenNutzungsgrenzen und Kosten richten sich nach dem verwendeten Zugang (eigener Provider-API-Key oder Abonnement-Login über /login). Diese Seite macht keine Aussage über kostenlose Kontingente.
- NetzwerkLokale Projektdateien bedeuten nicht, dass die Inferenz offline erfolgt. Prüfen Sie die Anbietereinstellungen und Datenrichtlinien Ihres Agents, bevor Sie sensible Eingaben teilen.
- Ausgabe ist HTMLArtefakte sind HTML-Dateien, keine Vektor-Designdateien.
- Manuelle ÜberprüfungBarrierefreiheit, echte Inhalte, Markenkonformität und korrekte Interaktionen werden von Ihnen in der Vorschau geprüft. Betrachten Sie jede Selbstprüfung des Agents als ersten Durchgang.
- FallbackWenn der Agent nicht verfügbar ist oder eine Aufgabe fehlschlägt, prüfen Sie die Verbindungsanleitung und Authentifizierung der installierten Version. Bewahren Sie den Fehler und das letzte funktionierende Artefakt auf, bevor Sie die Konfiguration ändern.
FAQ
Häufige Fragen zu Pi und OpenDesign
Kann Pi wirklich Designarbeit leisten?
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.
Muss ich bezahlen, um mit Pi zu designen?
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.
Was macht Pi speziell für Design gut?
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.
Welches Modell sollte ich mit Pi für Frontend-Design verwenden?
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.
Wie verbinde ich Pi mit Figma?
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.
Starten Sie eine erste Design-Aufgabe mit Pi
Beginnen Sie mit einer kleinen Aufgabe, bewerten Sie den Ablauf, und bringen Sie dann das eigentliche Briefing ein. Wählen Sie die Option, die zu Ihrem Setup passt; die Seite erkennt dies nicht automatisch.