Verwandle ein Referenzbild mit Open Design in eine echte Seite (kostenlos über Gemini)

In dieser Anleitung geht es um einen bestimmten, zu wenig genutzten Open-Design-Workflow: von einem Referenzbild ausgehen. Finde ein Design, das dir gefällt — einen Dribbble-Shot, einen Screenshot irgendeiner Website — wirf es hinein, und Open Design baut eine echte Seite in dieser Bildsprache. Und das Ganze kannst du kostenlos im Free-Tier eines Coding-Agents laufen lassen. Sie folgt dem Walkthrough, den Compile Future in ihrem Video zeigt, neu geschrieben und auf den aktuellen Release gebracht. Sieh dir das Video oben an oder lies die schriftliche Version.

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

Was ist Open Design?

Open Design ist eine quelloffene, lokal-first Design-Plattform — eine Claude-Design-Alternative, die auf deinem eigenen Rechner läuft. Der entscheidende Unterschied: Statt an ein einziges Modell gebunden zu sein, steuert es den Coding-Agent, den du ohnehin schon nutzt — Claude Code, Codex, Cursor, Gemini, OpenCode und mehr. Es kommt mit einer umfangreichen Bibliothek aus Skills und Marken-Designsystemen (Airbnb, Apple, Cursor, Ferrari, Figma und viele mehr), sodass die Generierung von einer echten Ästhetik ausgeht statt von einem generischen Prompt.

• Quelloffen, Apache-2.0 — klone es, hoste es selbst oder lade einfach die App herunter.
• Läuft lokal — deine Projekte liegen auf deinem eigenen Rechner.
• Jedes Modell — einschließlich Free-Tiers; keine GPU erforderlich (das Modell läuft über deine CLI in der Cloud, nicht auf deiner Hardware).

Schritt 1 — Installieren und ein kostenloses Modell verbinden

Lade den Installer von open-design.ai/download herunter (macOS DMG oder Windows .exe) oder führe ihn aus dem Quellcode aus. Wähle beim ersten Start deinen Agent. Compile Future nutzt die Gemini CLI, weil ihr Free-Tier großzügig ist (reichlich kostenlose Anfragen pro Tag) — so kostet der gesamte Workflow nichts:

• Wähle in der Einrichtung Gemini. Wird es nicht erkannt, installiere die Gemini CLI (ein Befehl von ihrer Website) und melde dich mit einem Google-Konto an.
• Lieber etwas anderes? Jede erkannte CLI funktioniert, oder bring deinen eigenen API key mit.

Deshalb „keine GPU“: Das Modell läuft über deine CLI in der Cloud, sodass selbst ein bescheidener Laptop ausreicht.

Schritt 2 — Aus einem Text-Prompt bauen (die Grundlage)

Lege ein Standard-Designsystem fest (Compile Future mag ein kühnes), wähle Prototype, benenne es und wähle high fidelity für das beste Ergebnis. Schick dein Briefing. Open Design stellt ein paar Discovery-Fragen (einzelnes Tool / Landingpage / All-in-one? responsiv? Tonalität? Markenkontext?) und eine visuelle Richtung (z. B. ein minimalistischer Look im Vercel-Stil) und baut dann eine saubere erste Version. Akzentfarben kannst du direkt auf der Seite anpassen.

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

Schritt 3 — Der Referenzbild-Workflow (der gute Teil)

Hier ist die Technik, die das Video wert ist. Statt einen Look in Worten zu beschreiben, zeige Open Design den Look:

1. Finde ein Design, das dir gefällt — durchstöbere Dribbble (suche z. B. nach „tools website“) oder irgendeine Live-Site für Inspiration.
2. Speichere einen Screenshot davon.
3. Erstelle zurück in Open Design ein Projekt im free-form-Modus, hänge den Screenshot an und prompte: „build my [site], use the design language from the image I shared.“
4. Beantworte die Discovery-Fragen und sage ihm, es solle die UI des Bildes treffen.

Open Design schreibt eine Brand-Spec aus der Referenz (es zeigt sie an und bittet dich um Bestätigung) und baut dann die Seite in dieser Bildsprache — dieselbe Layout-Anmutung, Farben und Typografie wie deine Referenz, angewandt auf deine Inhalte. Es ist der schnellste Weg zu einem markengerechten Ergebnis, wenn du sehen kannst, was du willst, es aber nicht beschreiben kannst.

Die Plugin-Bibliothek: Installiere Skills direkt aus der registry — einschließlich Anti-Slop-Designskills.

Schritt 4 — Bearbeiten und ausliefern

Verfeinere in einfacher Sprache — „remove the sign-in button“, „adjust the card radius“ — und sieh zu, wie es sich aktualisiert. Sieh den Code über Source an, lade dann über Share ein ZIP, PDF oder PowerPoint herunter, exportiere eigenständiges HTML oder deploy to Vercel mit einem Klick (füge einfach ein Vercel token ein) für einen teilbaren Link.

Tipps

• Kostenlos im Free-Tier der Gemini CLI laufen lassen (oder in jeder CLI mit Free-Tier) — kein Abo, keine GPU.
• Verwende ein Referenzbild, wenn du dir den Look vorstellen, ihn aber nicht beschreiben kannst — Dribbble oder irgendein Website-Screenshot.
• free-form-Modus + „match the image“ ist das Prompt-Muster, das die Referenz auf den Punkt trifft.
• Bestätige die generierte Brand-Spec, bevor es baut, damit die Richtung stimmt.
• high fidelity für ausgefeilte Ergebnisse; iteriere mit Bearbeitungen in einfacher Sprache.

FAQ

Brauche ich eine GPU? Nein. Das Modell läuft über deine CLI (in der Cloud), nicht auf deinem Rechner — ein normaler Laptop reicht.

Kann ich es wirklich kostenlos laufen lassen? Ja — richte es auf eine CLI mit Free-Tier wie Gemini aus, und du kannst Designs ohne Kosten generieren; du zahlst nur, wenn du ein kostenpflichtiges Modell/API wählst.

Wie designe ich aus einem Bild, das mir gefällt? Nutze den free-form-Modus, hänge den Screenshot an und sage ihm, es solle die Designsprache des Bildes verwenden; es extrahiert eine Brand-Spec und baut in diesem Stil.

Ist es kostenlos und quelloffen? Ja — Apache-2.0. Lass es lokal kostenlos laufen; du zahlst nur für die Modell-/Mediennutzung dessen, was du verbindest.

---

Diese schriftliche Anleitung basiert auf dem Walkthrough von Compile Future. Sieh dir das vollständige Video oben an und abonniere Compile Future für mehr kostenlose KI-Workflows.