WEITERE LEKTÜRE
Weiterführende Lektüre zu Aider
Tutorials, Dokumentation und Anleitungen zum Gestalten mit Aider, wie im veröffentlichten Guide aufgeführt.
Aider 
OpenDesign Mit Aider
in OpenDesign
gestalten.
So gestalten Sie Interfaces mit Aider in OpenDesign: ein Commit pro Revision, CONVENTIONS.md als Regelwerk, eine Changelog-Seiten-Aufgabe vom Briefing bis zur geprüften Datei – und die Grenzen, die Sie vorher kennen sollten.
Vom Briefing zum Interface01 / Aider
SIE BRINGEN DIE IDEE EIN↗
„Eine Changelog-Seite, ein Commit
pro Revision, leicht rückgängig zu machen.“
Drei Wege in diesen Aider-Leitfaden
Wählen Sie, wo Sie mit Aider starten
DIESER LEITFADEN · UI-DESIGN
Bauen Sie ein Produktinterface mit Aider
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGAider von Grund auf einrichten
Hier ist der vollständige Weg von einem sauberen System zu einem Aider, der UI bauen und prüfen kann.
Zum Setup VERGLEICHAider im Vergleich zu anderen Agents
Wie sich Aider von Codex, Claude Code und Cursor bei Design-Arbeit unterscheidet – und wann sich ein anderer Workflow besser eignet.
Zum VergleichAuf dieser Seite Beispiel
Eine vollständige Aider-Design-Aufgabe
Eine Aider-Design-Aufgabe, vom Briefing zum Interface
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. Das Interface unten ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Aider-Lauf.
1Design-Briefing und Vorgaben
BriefingEntwerfen Sie eine Changelog- und Release-Notes-Seite für ein CLI-Tool: Versionsliste, ein hervorgehobenes Release mit gruppierten Änderungen und ein Upgrade-Kommando. Jede Revision als eigenen Commit halten. Desktop und Smartphone.
- Design-SystemOpenDesign Paper Canvas: Albert Sans, ein grüner Akzent
- Breakpoints1440px Desktop und 390px Mobil, kein horizontales Scrollen
- InteraktionenVersionsliste, Upgrade-Kommando kopieren, Anker pro Release
- AusgabeEine in sich geschlossene HTML-Datei mit stabilen
data-od-id-Hooks
2Aufteilung der Arbeit: Sie, Aider und OpenDesign
- Sie
Schreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
- Aider
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.
3Aider-Artefakt: Die Changelog-Seite bei 1440px und 390px
4Überprüfung vor der Übergabe
Layout
Raster und Abstände
Versionsliste, Notizen und Randspalte auf dem 8px-Raster; Release-Überschriften richten sich an der Liste aus.
Hierarchie
Visuelle Hierarchie
Version und Datum zuerst, dann der Breaking-Hinweis; der Akzent markiert nur die aktuelle Version.
Responsive
Mobiles Layout
Die Versionsliste wird zu einem Select-Feld; die Notizen nehmen die volle Breite ein.
Interaktion
Interaktionsprüfungen
Das Upgrade-Kommando kopieren, zu einem älteren Release springen, den Link des Breaking-Hinweises öffnen.
Eignung
Wann Aider zur Aufgabe passt – und wann nicht
Aider passt, wenn
- Modellagnostisch, BYOK. Verbinden Sie fast jedes LLM mit Ihrem eigenen Key und nutzen Sie ein vision-fähiges Modell, um ein Referenzbild in responsives Markup zu verwandeln.
- Git-native Iteration. Auto-Commits machen jeden Design-Durchgang zu einem überprüfbaren Diff, den Sie zurücknehmen können, sodass das Ergebnis übersichtlich und nachvollziehbar bleibt.
- CONVENTIONS.md-Kontext. Eine schreibgeschützte Konventionsdatei trägt Ihre Tokens, Primitives und Design-Regeln in jeden Durchlauf.
- Open Source. Apache-2.0 und local-first, direkt am Code in Ihrem eigenen Repository.
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 Zugangsdaten, die dieser Agent benötigt. Erforderlich: Ihr eigener Provider-API-Key — BYOK (OpenAI, Anthropic, DeepSeek, Gemini oder lokal). OpenDesign stellt keine Zugangsdaten bereit und leitet sie auch nicht weiter.
- Ihr Team arbeitet mit OpenCode oder Kilo. Diese Agents haben eigene Seiten; der Workspace ist derselbe, das Setup unterscheidet sich. Siehe verwandte Agents.
Kompatibilität
Aider-Voraussetzungen vor dem Start
Dieser Leitfaden behandelt Aider, wie es über die OpenDesign-Desktop-App angebunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Tool-UmfangAider, von Aider
Aider ist ein Open-Source-Tool (Apache-2.0) für KI-Pair-Programming, das in Ihrem Terminal läuft. Es kartiert Ihre Codebasis, bearbeitet Dateien direkt vor Ort und committet jede Änderung automatisch mit einer sinnvollen Nachricht. Diese Seite behandelt das Gestalten von Interfaces mit Aider über OpenDesign, nicht die Benutzeroberfläche von Aider selbst. Die Setup-Hinweise von OpenDesign listen die verfügbaren Agents auf.
Konten und AuthentifizierungIhr eigener Provider-API-Key — BYOK (OpenAI,
Ihr eigener Provider-API-Key — BYOK (OpenAI, Anthropic, DeepSeek, Gemini oder lokal). Authentifizieren Sie sich mit Ihrem eigenen Provider-API-Key (BYOK) — Zugangsdaten bleiben auf Ihrem Rechner. Diese Seite macht keine Zusagen zu Kontingent oder Preis.
System und VersionenDesktop-App oder Quellcode
Prüfen Sie die Download-Seite für Desktop-Builds. Die Node.js- und pnpm-Anforderungen im Quickstart der Quelle gelten für die Ausführung aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible Aider-Version: hier nicht verifiziert.
VerbindungsprüfungDas Erfolgssignal
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Aider sie bearbeitet hat und dass sich das Artefakt öffnen lässt. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Aider-Setup in drei Schritten
Laden Sie zuerst herunter, schließen Sie das Aider-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 Aider-Verbindung vor
Folgen Sie den Aider-Anweisungen Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem eigenen Provider-API-Key (BYOK) — Zugangsdaten bleiben auf Ihrem Rechner.
Aider — KI-Pair-Programming in Ihrem Terminal# 1. Install Aider (recommended installer; Python 3.8–3.13) python -m pip install aider-install aider-install # or with pipx: pipx install aider-chat # 2. Start it in your git project and bring your own key cd your-project aider --model sonnet --api-key anthropic=<your-key> # or: aider --api-key openai=<your-key> (also deepseek=, gemini=)Aus den Aider-Setup-Hinweisen im veröffentlichten Guide; 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 Aider-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 Aider-Design-Workflow
Der Aider-Design-Workflow in fünf Schritten
Die gleiche Changelog-Seiten-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie beisteuern, was Aider ü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.
- AiderLiest das Briefing und die Instruktionsdatei 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.
- AiderLädt die DESIGN.md-Tokens und Haltungsregeln in den Kontext, bevor auch nur 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
Aider schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
- SieWarten Sie, oder beantworten Sie eine Rückfrage. Nichts zu konfigurieren.
- AiderPlant die Abschnitte, schreibt HTML, CSS und JavaScript, führt die Datei aus und behebt, was fehlschlägt.
- 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.
- AiderLiest 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.
- AiderWendet die Änderungen direkt vor Ort 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
Aider-Design-Ressourcen
Skills Skills durchsuchen Design-Systeme Systeme durchsuchen Vorlagen Vorlagen durchsuchen
Design Skills
Die Artefakttypen, die Aider in OpenDesign erzeugen kann – ein Skill pro Typ.
Design Systems
Marken-Tokens und Komponenten, die Sie einbinden, bevor Aider etwas generiert.
Vorlagen
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
Einschränkungen, manuelle Prüfungen und Fallbacks von Aider
- UmfangDiese Seite behandelt Aider als mit OpenDesign verbundenen Agent, nicht jede Funktion von Aider.
- NutzungslimitsNutzungslimits und Kosten richten sich nach den verwendeten Zugangsdaten (Ihr eigener API-Key des Anbieters — BYOK (OpenAI, Anthropic, DeepSeek, Gemini oder lokal)). Diese Seite trifft keine Aussage zu kostenlosen Kontingenten.
- 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 Aider und OpenDesign
Kann Aider wirklich Designarbeit leisten?
Ja — mit einem ästhetischen Skill, einem Design-System und echten Referenzbildern im Kontext erzeugt Aider produktionsreife, responsive UI, und bei bildfähigen Modellen liest es Screenshots, um die Ausgabe gegen Referenzen zu prüfen. Ohne diesen Kontext tendiert es zu einem generischen Look – genau diese Lücke schließt OpenDesign.
Welche Modelle kann ich mit Aider für Design verwenden?
Aider ist modellunabhängig. Sie bringen Ihren eigenen API-Key mit und verbinden fast jedes LLM — Claude, GPT-4o, DeepSeek, Gemini oder ein lokales Modell. Für bildbasierte Designarbeit verwenden Sie ein bildfähiges Modell wie GPT-4o oder Claude. OpenDesign leitet Ihre Zugangsdaten niemals weiter.
Was macht Aider speziell für Design geeignet?
Zwei Dinge: Es ist modellunabhängig, sodass Sie das Modell wählen, das für Ihre Aufgabe am besten gestaltet, und es ist git-nativ, committet jede Änderung, sodass jede Design-Iteration überprüfbar und rückgängig machbar ist. Beides hilft — aber der Geschmack kommt weiterhin aus dem Design-System, dem Skill und den Referenzen, die Sie bereitstellen.
Bearbeitet Aider meine Dateien und committet zu Git?
Ja. Aider bearbeitet Dateien direkt in Ihrem Repository und committet jede Änderung automatisch mit einer sinnvollen Nachricht, sodass Sie die Arbeit der KI mit den git-Tools, die Sie bereits verwenden, diffen, verwalten und rückgängig machen können.
Wie übergebe ich Aider meine Design-Konventionen?
Erstellen Sie eine CONVENTIONS.md mit Ihren Tokens, Primitives und Regeln, und laden Sie sie dann schreibgeschützt mit /read CONVENTIONS.md oder aider --read CONVENTIONS.md (oder setzen Sie read: CONVENTIONS.md in .aider.conf.yml, um sie bei jedem Lauf zu laden). Aider arbeitet dann gegen Ihre Marke statt gegen einen Standard-Look.
Erste Designaufgabe mit Aider starten
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.