Mit Open Design eine Website gestalten, die zu deiner bestehenden Marke passt

Diese Anleitung konzentriert sich auf einen herausragenden Open-Design-Kniff: Richte es auf deine bestehende Website, und der Agent zieht deine echte Marke — Schriften, Farben, Tonfall — in eine Spezifikation und gestaltet dann in deiner Stimme. Außerdem geht es um die Ein-Klick-Desktop-Installation und eine ehrliche Einschätzung, warum du zu einer offenen Alternative greifen würdest. Sie folgt dem praxisnahen Aufbau, den Brendan O'Connell in seiner Anleitung durchführt, neu geschrieben und auf den aktuellen Release gebracht. Schau dir das Video oben für den Live-Durchlauf an oder lies weiter für die schriftliche Fassung.

Ein echter generierter Prototyp in der Vorschau – eine dunkle, cineastische Agentur-Landingpage.

Was ist Open Design?

Open Design ist eine quelloffene, lokal-first arbeitende Design-Plattform, die auf dem Coding-Agenten läuft, den du ohnehin schon nutzt — Claude Code, Codex, Cursor, Gemini, OpenCode und mehr — oder mit deinem eigenen API-Schlüssel. Im Kern ist es ein Arbeitsbereich im Stil von Claude Design, den du auf deiner eigenen Maschine betreibst, ohne in der Cloud eines einzelnen Anbieters festzustecken und ohne dessen Nutzungsobergrenzen. Es steht unter Apache-2.0, bringt eine umfangreiche Bibliothek an Skills und Designsystemen mit und ergänzt das Ganze um Medienerzeugung (Bild, Video, Audio).

Warum zu einer offenen Alternative greifen

Brendans Motivation ist konkret und es lohnt sich, sie zu wiederholen, weil sie für viele der entscheidende Faktor ist. Er erzeugte ein einziges Designsystem im geschlossenen Cloud-Tool, und es fraß ~75 % seines Wochenlimits — und ließ ihn bis zur nächsten Woche festhängen. Dieses Limit ist getrennt vom normalen Tarifkontingent, was den Workflow für echtes Iterieren grenzwertig unbrauchbar wirken lässt. Wenn du auf deinem eigenen Claude-Code- (oder einem beliebigen) Abo läufst, fällt diese Wand weg: Du stößt nicht an eine separate Design-Obergrenze und bist nicht in ein Ökosystem eingesperrt.

Schritt 1 — Installieren (der Ein-Klick-Weg)

Der einfachste Weg, und der, den Brendan empfiehlt, ist die Desktop-App: Geh zu open-design.ai/download und hol dir die ausführbare Datei für macOS oder Windows. Die App ist in kurzer Zeit einsatzbereit und erkennt automatisch die Agent-CLIs, die schon auf deiner Maschine sind — Brendan hat nichts konfiguriert; sie nahm sein Claude-Code-Abo auf und war startklar.

Lieber das Terminal? Aus dem Quellcode:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Öffne die lokale URL, die ausgegeben wird (ein dynamischer Port — schreib keinen fest). Rechts findest du Einstellungen: die erkannten Agenten sowie Medienanbieter (OpenAI für Bild, MiniMax für Video, ElevenLabs für Stimme), Konnektoren (Composio MCP) und sogar Desktop-Haustiere. Du kannst für jeden Anbieter auch deinen eigenen Schlüssel mitbringen.

Schritt 2 — Aus deiner bestehenden Marke gestalten

Das ist der Kniff, der den Eintrittspreis wert ist. Erstelle ein Projekt, wähle High Fidelity, und sag ihm in deinem Briefing, es solle für deine bestehende Website gestalten. Der Agent verfügt über ein Web-Fetch-Werkzeug, also liest er deine Live-Website und leitet daraus eine Markenspezifikation ab.

Im Video richtet Brendan es auf seine eigene Seite, und Open Design:

1. holt die Seite ab und liest die echten Inhalte aus.
2. schreibt eine brand-spec.md, die seine tatsächliche Schrift erfasst (es erkannte korrekt Fig Tree), seine Farbe und seine Designentscheidungen — „keine Pillen-Buttons, keine vollständig abgerundeten Karten, Akzentfarbe sparsam eingesetzt, großzügiger Weißraum“ — plus seinen Tonfall („kein atemloses Marketing“).
3. erzeugt eine DESIGN.md und baut die Seite in dieser Stimme, indem es seine bestehende Marke mit einem klareren Layout verbindet.

Der Open Design-Arbeitsbereich: Beschreibe, was du erstellen willst, wähle einen Modus, und dein Agent erledigt den Rest.

Vor dem Bauen lässt Open Design ein kurzes Discovery-Formular durchlaufen (eine Seite oder ein paar Seiten? visuelle Richtung? die aktuelle Seite treffen? realistische Platzhalter?), damit es die richtige Richtung festzurrt. Das Ergebnis behält seinen Slogan, sein Blau und seine Schrift und legt darüber ein schärferes Layout — eine mehrseitige Ausgabe, durch die du klicken kannst.

Schritt 3 — Den Anti-Slop-Selbstcheck prüfen und exportieren

Zum Abschluss lässt Open Design einen Anti-Slop-Selbstcheck laufen — Brendan sieht, wie er „keine Emojis, eine Schriftart, ein entschlossener Akzent, durchgehend echte Positionierungstexte“ bestätigt. Das ist die Leitplanke, die verhindert, dass die Ausgabe generiert aussieht.

Die HyperFrames-Galerie: code-getriebene Motion- und Video-Stücke, die du forken und remixen kannst.

Durchstöbere die Tabs Beispiele und Designsysteme nach Startpunkten (jedes Designsystem gibt dir eine vollständig bearbeitbare DESIGN.md), und wenn du zufrieden bist, exportiere das Artefakt als HTML, PDF oder ZIP. Weil alles lokal auf deinem eigenen Agenten läuft, gibt es keine separate Design-Obergrenze, an die du beim Iterieren stößt.

Tipps

• Richte es auf deine Live-Seite, um deine echten Schriften, Farben und deinen Tonfall zu erben — der schnellste Weg zu markengerechter Ausgabe.
• Nutze die Desktop-App für den Weg ohne Konfiguration; sie erkennt deinen Agenten automatisch.
• Lauf auf deinem eigenen CLI-Abo, um der separaten wöchentlichen Design-Obergrenze geschlossener Tools auszuweichen.
• Lies die erzeugte brand-spec.md / DESIGN.md — es sind bearbeitbare Dateien, also korrigiere alles, was der Scrape falsch erfasst hat.
• Investiere ein wenig in den Prompt — ein reichhaltigeres Briefing liefert einen spürbar besseren ersten Wurf.

FAQ

Kann es wirklich aus meiner bestehenden Website gestalten? Ja — der Agent hat ein Web-Fetch-Werkzeug. Sag ihm, er soll für deine Seite gestalten, und er liest deine Schriften, Farben, Layout-Entscheidungen und deinen Tonfall in eine brand-spec.md aus und gestaltet dann in dieser Stimme.

Muss ich meinen Agenten konfigurieren? Meist nicht. Die Desktop-App erkennt die bereits installierten Agent-CLIs automatisch (Claude Code, Codex, Gemini und mehr). Du kannst auch deinen eigenen Schlüssel mitbringen.

Hat es die Nutzungsgrenzen des geschlossenen Tools? Keine separate Design-Obergrenze — die Erzeugung läuft über den Agenten/das Abo, das du verbindest, sodass du nach einem Design nicht blockiert wirst.

Ist es kostenlos? Die App ist Open Source unter Apache-2.0 und kostenlos lokal lauffähig. Du zahlst nur für die Modell- und Mediennutzung des jeweiligen Agenten und der Anbieter, die du verbindest.

---

Diese schriftliche Anleitung basiert auf der Anleitung von Brendan O'Connell. Schau dir das vollständige Video oben an und abonniere Brendan O'Connell für weitere Analysen quelloffener Tools.