Umgestalten ohne Neuaufbau — Visuelle Identitäten in Open Design erkunden

Eine visuelle Richtung zu wählen bedeutet meist, neu bauen zu müssen, sobald man seine Meinung ändert. Diese Anleitung zeigt den besten Trick von Open Design für die Erkundung: einmal bauen, dann das Ganze umgestalten — gleicher Inhalt und gleiche Struktur, ein völlig anderer Look — in Sekunden. Sie folgt der Demo, die die AI Fire Academy in ihrem Video vorführt, neu geschrieben und auf den aktuellen Release gebracht. Sieh dir das Video oben an oder lies weiter für die schriftliche Fassung.

Ein echter generierter Prototyp, in der Vorschau gerendert — eine dunkle, filmische Agentur-Landingpage.

Was ist Open Design?

Open Design ist eine quelloffene, lokal ausgerichtete Alternative zu geschlossenen Cloud-Design-Tools. Die Grundidee ist bring deinen eigenen Agenten mit: Es ist nicht das KI-Gehirn, sondern der Dirigent. Es erkennt automatisch die Coding-Agenten, die bereits auf deinem Rechner sind (Claude Code, Codex, Gemini, DeepSeek und mehr), und verwandelt sie in UI/UX-Designer — kein Ökosystem-Lock-in, keine wöchentliche Obergrenze, und alles läuft lokal (deine Dateien, dein SQLite, deine Projekte bleiben auf deinem Gerät).

• Quelloffen, Apache-2.0 — klone es, hoste es selbst oder lade einfach die App herunter.
• Jedes Modell — wähle, was zu deinem Budget und deinem Workflow passt.
• Lokal ausgerichtet — null Cloud-Abhängigkeit, null Plattform-Lock-in.

Schritt 1 — Installieren (der einfache Weg)

Der einfachste Weg ist die Desktop-App: Lade sie von open-design.ai/download (macOS/Windows) herunter und ziehe sie wie eine normale App hinein — kein Docker, kein Terminal. Beim ersten Start scannt sie deinen Rechner und erkennt deine lokalen Coding-Agenten (die Umgebung der AI Fire Academy erkennt Claude Code automatisch), die zur Design-Engine werden. Du kannst weitere Anbieter einbinden (ElevenLabs-Stimme, Suno-Musik, Bildmodelle, MCP), aber die Voreinstellung reicht für den Anfang.

Schritt 2 — Die erste Version bauen

Erstelle einen Prototyp (in der Demo eine Newsletter-Landingpage), behalte hohe Detailtreue bei und gib einen Prompt ein. Open Design stellt zuerst klärende Fragen (wer abonniert, welche Frequenz, CTA, visuelle Richtung), statt zu raten, und baut dann. Der erste Durchgang sieht bereits aus wie eine echte Startup-Seite — und du kannst ihn im Gespräch weitertreiben („mach die Hero-Sektion dramatischer und hochwertiger, füge eine leuchtende Kugel hinzu, verstärke die CTA“).

Der Open-Design-Arbeitsbereich: Beschreibe, was du bauen möchtest, wähle einen Modus, und dein Agent erledigt den Rest.

Schritt 3 — Der Umgestaltungs-Move (der eigentliche Durchbruch)

Hier ist die Technik. Sobald du etwas hast, das dir gefällt, ändere die gesamte visuelle Identität, ohne den Inhalt anzurühren:

„Ändere die gesamte Design-Richtung in einen luxuriösen Editorial-Stil, während Inhalt und Struktur gleich bleiben.“

Gleicher Text, gleiches Layout, eine völlig andere Designsprache — in einem einzigen Prompt. Die AI Fire Academy macht das sowohl bei einer Landingpage als auch bei einem kompletten Finanz-Dashboard: dunkles Neon → luxuriöses Editorial, sofort. Genau das lässt Open Design sich wie ein Designer anfühlen und nicht wie ein Mockup-Generator — es iteriert am Look, während es die Substanz bewahrt, sodass du mehrere Richtungen ausprobieren kannst, bevor du dich festlegst, statt jedes Mal neu zu bauen.

Foliendeck-Modus: Wähle eine Deck-Kategorie und forke ein Beispiel als Ausgangspunkt.

Schritt 4 — Wo es passt

Die praxisnahe Einschätzung der AI Fire Academy: Freelancer/Agenturen können Landingpages und Dashboards für Kunden schnell prototypisieren; Gründer können MVP-Oberflächen und Admin-Panels hochziehen; Kreative können völlig unterschiedliche visuelle Identitäten ausprobieren, ohne neu zu bauen. Ehrlicher Hinweis: Es steckt noch in den Anfängen (rechne mit der einen oder anderen Ecke und Kante), und es ist nicht auf magische Weise unbegrenzt — deine API-Nutzung hängt weiterhin von den Modellen ab, die du anbindest. Aber die Flexibilität (deine Modelle, dein Stack, lokal) ist der springende Punkt.

Tipps

• Einmal bauen, dann umgestalten — „behalte Inhalt und Struktur, ändere die Design-Richtung“ ist der entscheidende Prompt.
• Probiere Richtungen aus (Editorial, Brutalismus, minimal …), bevor du dich festlegst, statt neu zu bauen.
• Beantworte die Discovery-Fragen, damit die erste Version nah dran ist, und erkunde dann die Looks.
• Nutze die Desktop-App für den Weg ohne Konfiguration; sie erkennt deinen Agenten automatisch.
• Umgestalten funktioniert auch bei Dashboards, nicht nur bei Landingpages.

FAQ

Kann ich den gesamten Look ändern, ohne den Inhalt neu zu machen? Ja — das ist der herausragende Move. Fordere es auf, die Design-Richtung zu ändern, während Inhalt und Struktur gleich bleiben, und es gestaltet an Ort und Stelle um.

Muss ich einen Agenten konfigurieren? Meist nicht — die Desktop-App erkennt die bereits installierten Coding-Agenten automatisch und nutzt einen davon als Design-Engine.

Ist es wirklich unbegrenzt/kostenlos? Es ist kostenlos und lokal, ohne separate wöchentliche Obergrenze, aber du zahlst weiterhin für die API-Nutzung des jeweils angebundenen Modells.

Ist es quelloffen? Ja — Apache-2.0. Führe es lokal aus; du zahlst nur für die Modell-/Medien-Nutzung dessen, was du anbindest.

---

Diese schriftliche Anleitung basiert auf der Demo der AI Fire Academy. Sieh dir oben das vollständige Video an und abonniere die AI Fire Academy für weitere quelloffene KI-Workflows.