Claude Code 
OpenDesign So gestalten Sie Interfaces mit Claude Code in OpenDesign: CLAUDE.md und der Frontend-Design-Skill als Vorgaben, eine Workspace-Settings-Aufgabe vom Briefing bis zur geprüften Datei, und wo der Figma-Hin-und-Rückweg endet.
„Workspace-Einstellungen, die
unseren Tokens folgen, nicht einer Vorlage.“
DREI EINSTIEGE IN DIESEN CLAUDE-CODE-LEITFADEN
Dieser Leitfaden: Briefing, Referenzen, Designregeln und ein überprüftes HTML-Ergebnis.
Diese Anleitung lesen EINRICHTUNGHier ist der vollständige Weg von einer sauberen Maschine zu einem Claude Code, das UI bauen und prüfen kann.
Zum Setup VERGLEICHWie sich Claude Code von Codex und Cursor bei Design-Arbeit unterscheidet, und wann Sie einen anderen Workflow wählen sollten.
Zum VergleichEine vollständige Claude Code Design-Aufgabe
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 Oberfläche unten ist ein illustratives Beispiel für diese Seite, kein aufgezeichneter Claude Code-Lauf.
BriefingGestalten Sie den Workspace-Settings-Bereich für ein kleines SaaS-Team: General, Members, Notifications und Billing. Verwenden Sie die Tokens in CLAUDE.md; nichts von Hand angepasst. Es muss auf Desktop und auf dem Smartphone funktionieren.
data-od-id-HooksSchreiben Sie das Briefing, wählen Sie das Design-System aus und definieren Sie die Abnahmekriterien.
Plant das Layout, schreibt HTML, CSS und JavaScript und überarbeitet es auf Anfrage.
Stellt das Design-System und den Skill bereit, rendert die Vorschau und speichert jede Version als Datei im Projekt.
Visuelle Hierarchie, Abstände im 8px-Raster, beide Breakpoints und jede Interaktion werden vor der Übergabe geprüft.
Sub-Navigation, Formular und Aktionen sitzen auf dem 8px-Raster; die fixierte Speicherleiste überlappt nie ein Feld.
Gruppentitel stehen über Labels; der Akzent markiert nur die aktivierten Toggles und sonst nichts.
Die Unternavigation wird zu einem segmentierten Schalter; Toggles behalten eine Trefferfläche von 44px; die Schaltfläche „Speichern“ nimmt die volle Breite ein.
Tabben Sie durch jedes Feld, kippen Sie einen Toggle, brechen Sie ab und bestätigen Sie den Hinweis auf nicht gespeicherte Änderungen.
Eignung
Kompatibilität
Dieser Leitfaden behandelt Claude Code, wie es über die OpenDesign-Desktop-App verbunden wird. Veröffentlichte Referenzen geprüft am 6. September 2026.
Claude Code ist Anthropics agentisches Kommandozeilen-Tool: Sie beschreiben eine Aufgabe in natürlicher Sprache, und es liest, schreibt und führt Code in Ihrem Projekt aus, bis die Aufgabe erledigt ist. Diese Seite behandelt das Gestalten von Interfaces mit Claude Code über OpenDesign, nicht die eigene Oberfläche von Claude Code. OpenDesigns Setup-Hinweise listen die verfügbaren Agents auf.
Anthropic-API-Key (BYOK) oder Claude-Abonnement. Authentifizieren Sie sich mit Ihrem Anthropic-API-Key (BYOK) oder Claude-Abonnement — nichts wird über uns geproxyt. Diese Seite verspricht kein Kontingent und keinen Preis.
Oberflächen: Terminal-CLI, Erweiterungen für VS Code / Cursor / JetBrains, Desktop-App, Web. Desktop-Builds finden Sie auf der Download-Seite. Die Node.js- und pnpm-Anforderungen im Quickstart für die Quellinstallation gelten für das Ausführen aus dem Quellcode, nicht für die Installation eines Desktop-Pakets. Mindestens kompatible Claude Code-Version: hier nicht verifiziert.
Folgen Sie den Verbindungsanweisungen Ihrer installierten Version und führen Sie dann eine kleine Aufgabe aus. Bestätigen Sie, dass Claude Code sie bearbeitet hat und dass sich das Artefakt öffnet. Ein Download allein stellt noch keine funktionierende Verbindung her.
Mit der Desktop-App beginnen
Laden Sie zunächst herunter, schließen Sie die Claude Code-Einrichtung für Ihre installierte Version ab und prüfen Sie anschließend ein kleines Ergebnis. Sie müssen OpenDesign nicht aus dem Quellcode erstellen, um diesem Ablauf zu folgen.
Wählen Sie das Paket für Ihren Computer, installieren Sie es und öffnen Sie die App.
OpenDesign herunterladenBefolgen Sie die Claude Code-Anweisungen in Ihrer installierten Version. Authentifizieren Sie sich mit Ihrem Anthropic API-Key (BYOK) oder Ihrem Claude-Abonnement — nichts wird über uns weitergeleitet.
anthropics/skills — frontend-design-Skill# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex
# 2. Start it in your project and sign in on first run
cd your-project
claude # sign in with your Claude subscription or API keyAus den Claude Code-Setup-Hinweisen im veröffentlichten Guide; den aktuellen Befehl finden Sie in der Herstellerdokumentation.
Verwenden Sie ein kleines Briefing, damit Sie den gesamten Ablauf beurteilen können, einschließlich einer Überarbeitung.
Erstellen Sie einen Einstellungsbildschirm mit einem Profilformular und einer Speicherbestätigung. Verwenden Sie meine Designregeln. Prüfen Sie ihn bei Desktop- und Mobilbreiten.
Um OpenDesign aus dem Quellcode auszuführen, folgen Sie stattdessen dem technischen Schnellstart.
Der Claude Code Design-Workflow
Dieselbe Einstellungsbildschirm-Aufgabe, verfolgt vom Briefing bis zur verifizierten Datei. Jeder Schritt listet auf, was Sie bereitstellen, was Claude Code macht, was OpenDesign beiträgt und was Sie prüfen.
Klare Sprache, drei bis sechs Zeilen. Benennen Sie die Zielgruppe, die Aufgabe des Screens und die Plattformen.
Ein Design-System und ein paar feste Regeln. Das unterscheidet markenkonforme Ergebnisse von einem generischen Look.
Claude Code schreibt eine eigenständige HTML-Datei: Layout, Styles, Interaktionen und stabile Hooks.
Die Datei wird innerhalb von OpenDesign in den angeforderten Breiten dargestellt. Hier wird das Design beurteilt.
data-od-id-Ziele für Kommentare und Änderungen bereit.Fordern Sie Änderungen an, indem Sie auf Elemente in der Vorschau zeigen. Jede Überarbeitung ist eine neue Datei; nichts wird stillschweigend überschrieben.
Ressourcen
Tutorials, Dokumentationen und Anleitungen zum Design mit Claude Code, wie im veröffentlichten Guide aufgeführt.
Die Artefakttypen, die Claude Code in OpenDesign erzeugen kann, ein Skill pro Typ.
Markentokens und Komponenten, die vor der Generierung durch Claude Code gebunden werden müssen.
Ausgangspunkte für Decks, Landingpages und Produktbildschirme.
Einschränkungen
FAQ
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.