Open Design: Open-Source-Version von Claude Design, einem KI-Design-Tool zur Erstellung von Web- und Mobile-Prototypen

Open Design ist ein quelloffenes, natives, KI-gesteuertes Tool für das Design und Prototyping von Benutzeroberflächen mit dem Ziel, eine Anthropic 的 Claude Design's Open Source Parsimony-Lösung. Sie hebt die Beschränkungen der Modellbindung auf und verwandelt große Modelle in professionelle UI/UX-Designer, indem sie eine Verbindung zu den 11 lokal installierten Code-Intelligenzen des Benutzers (z. B. Claude Code, Cursor, Gemini CLI usw.) oder zu APIs von Drittanbietern herstellt, die mit dem OpenAI-Format (BYOK) kompatibel sind. Die Plattform verfügt über 31 eingebaute Module für professionelle Design-Szenarien (für Web-Prototypen, SaaS-Landingpages, mobile Apps, Daten-Dashboards, Präsentationen usw.) sowie über 129 Design-Systeme von Top-Marken. Das System verwendet Interaktionsfragebögen, um die Designrichtung zu bestätigen, und KI generiert automatisch Code und Schnittstellen mit Sandbox-Echtzeitvorschau und unterstützt den Export in die Formate HTML, PDF, PPTX und ZIP mit einem Klick.

Funktionsliste

• Unterstützung mehrerer Modelle und lokaler IntelligenzenErkennt automatisch 11 KI-Programmierclients (einschließlich Claude Code, Cursor Agent, Gemini CLI, GitHub usw.) in lokalen Umgebungsvariablen und greift darauf zu. Copilot CLI usw.) oder über den Modus "Bring Your Own Key" (BYOK) Zugang zu jedem großen Modell, das mit dem OpenAI-API-Format kompatibel ist.
• 31 Out-of-the-Box-Design-FähigkeitenEingebaute Web-Prototypen, SaaS-Landingpages, Management-Dashboards, mobile Apps, dynamische Seiten, Präsentationen (PPT) und andere massive Szene-Vorlagen, ein Klick, um die Ausgabeform von AI zu wechseln.
• 129 eingebaute MarkendesignsystemeDas Designsystem bietet einen vollständigen Satz von Designsystem-Spezifikationen für weltbekannte Hersteller und Produkte wie Apple, Stripe, Vercel, Notion, Figma usw., die mit einem einzigen Klick angewendet werden können, um eine fachmännische Farbanpassung, Typografie und Interaktionston zu erhalten.
• Interaktiver Fragebogen zu Präzisionsbedürfnissen (Discovery Form)Die KI wird gezwungen sein, einen Multiple-Choice-Fragebogen aufzurufen, um grundlegende Informationen wie Zielgruppe, visueller Ton, Größenbeschränkungen usw. zu bestätigen, bevor sie mit der Ausführung des Codes beginnt, wodurch das “blinde Raten” der KI entfällt und wiederholte Nacharbeiten vermieden werden.
• Sandbox-Echtzeit-Rendering mit Multiformat-ExportDer generierte UI-Code wird in Echtzeit in einer sicheren Iframe-Sandbox-Umgebung in der Vorschau angezeigt. Unterstützung für den direkten Export des generierten Projekts in HTML-, PDF- und PPTX-Dateien mit Drucklayout-Unterstützung sowie für den vollständigen Zip-Quellcode (ZIP).
• Enthält 5 visuelle StilgenresIn Ermangelung einer klaren Markenreferenz eine Bibliothek mit 5 voreingestellten Stilen, wie z. B. minimalistisch-modern, technisch-pragmatisch, soft healing usw., mit klaren Parametern für die Farb- und Schriftdefinition.
• Fünfdimensionale Selbstkorrektur und ÜberprüfungKI-Modell: Vor der Ausgabe des Ergebnisses muss das KI-Modell 5 Dimensionen der objektiven Selbstbewertung (Designkonzept, visuelles Niveau, Detailausführung usw.) befolgen und das Ergebnis erst nach der qualifizierten Bewertung vorlegen, um den “Sinn der KI” aus dem Mechanismus der schlampigen Arbeit zu entfernen.
• Nahtlose Claude Design History ExportDrag-and-Drop-Import von Prototyp-ZIP-Archiven direkt von der Anthropic-Website, um die historische Umgebung zu lesen und lokal weiter zu bearbeiten.

Hilfe verwenden

I. Umweltanforderungen und Vorbereitung
Open Design ist ein Tooling-System, das auf einem Web-Framework und einem lokalen Backend-Daemon aufbaut. Bevor Sie es verwenden können, müssen Sie also die Basis-Laufzeitumgebung auf Ihrem lokalen Computer haben:

1. Node.jsVergewissern Sie sich, dass Node.js 24 oder eine ähnlich aktuelle Version auf Ihrem System installiert ist (nvm / fnm Tools werden für den Versionswechsel empfohlen).
2. Werkzeuge zur Paketverwaltung pnpmDas Projekt hat eine starke Abhängigkeit von pnpm (Version 10.33.x series). Sie können eine Abhängigkeit von pnpm erstellen, indem Sie die corepack enable und führen Sie dann den Befehl corepack pnpm --version Validieren Sie die Umgebung.
3. Vorbereitung der KI-BasisSie können ein individuelles lokales vLLM Kompatibel mit der OpenAI-Standard-Basis-URL und dem API-Schlüssel (mit eigenem Schlüssel); kann auch im Voraus global installiert werden. Claude Code 或 Cursor CLI und andere lokale Programmieragenten.

II. ausführlicher Installationsprozess
Bitte öffnen Sie das Terminal Ihres Computers (Terminal oder Eingabeaufforderung) und geben Sie die folgenden Befehle ein, um die Installation durchzuführen:

1. Quellcode des Projekts herunterladen：
   Verwenden Sie Git, um den Projektcode lokal zu klonen, und wechseln Sie zu dem Ordner.

   git clone https://github.com/nexu-io/open-design.git
   cd open-design
   

2. Aktivieren der zentralen Paketverwaltung und Installieren von Abhängigkeiten：

   corepack enable
   pnpm install
   

   Während Sie darauf warten, dass der Fortschrittsbalken endet, zieht das System automatisch alle Abhängigkeitspakete, einschließlich der Front-End-Workbench und des Back-End-Daemons.

3. Start von Open Design Local Services：

   pnpm tools-dev run web
   

   Nach erfolgreichem Start gibt das Terminal-Panel die lokale Zugangsadresse der Web-Seite aus (z.B. http://localhost:3000). Kopieren Sie den Link und öffnen Sie ihn in Ihrem Browser, um auf die Schnittstelle zuzugreifen. Wenn Sie das Programm zum ersten Mal starten, erzeugt es automatisch eine lokale .od/ Versteckter Ordner für die Speicherung von SQLite-Datenbanken, um Ihre historischen Gespräche und Fortschritte zu speichern.

III. operative und Workflow-Leitlinien für Kernfunktionen

Schritt 1: Konfigurieren der AI Driver Engine und der Workflow-Optionen
Rufen Sie die Startseite der Website auf, und alle Symbolleisten werden auf der linken Seite angezeigt. Wenn Sie keine unterstützten lokalen CLIs installiert haben, erhalten Sie ein “Willkommen”-Popup. Sie können wählen BYOK (Bring Your Own Key Modus)Das Einzige, was Sie tun müssen, ist, die Adresse der Schnittstelle in einem OpenAI-kompatiblen Format, das entsprechende Aufrufmodell (z.B. gpt-4o) und der API-Schlüssel werden eingefügt. Dadurch wird sichergestellt, dass Sie unabhängig von Ihrer Netzwerkumgebung eine Verbindung zu AI herstellen können.

Schritt 2: Wählen Sie “Design Skills” und “Design System”.”
Oberhalb des Eingabedialogs befinden sich zwei sehr wichtige Dropdown-Menükarten:

• Auswahl der FertigkeitenHier können Sie festlegen, welche Art von Produktformular Sie ausgeben möchten. Wählen Sie zum Beispiel saas-landing Landing-Longpages können generiert werden zur Auswahl mobile-app Der mitgelieferte iPhone 15 Pro-Rahmen wird aufgerufen und die mobile Komponente wird generiert, wählen Sie die guizang-ppt Dann gelangen Sie in den Präsentationsmodus.
• Design SystemauswahlHier legen Sie die grundlegenden visuellen Merkmale Ihrer Benutzeroberfläche fest. Die Dropdown-Menüs umfassen die stripe、vercel、linear-app Bei mehr als 129 Spezifikationen können Sie die Designphilosophie der entsprechenden Etiketten mit einem einzigen Klick übernehmen.

Schritt 3: Einreichung einer Beschreibung und Ausfüllen des Entdeckungsfragebogens
Beschreiben Sie das Ziel in einem kurzen Satz im unteren Eingabefeld, z. B. “Helfen Sie mir, eine Homepage für ein soziales Tool zu erstellen, die einen Anmeldeprozess enthält”.
Die KI wird vom System “gestoppt”, wenn Sie zum Senden zurückkehren. In der Mitte des Bildschirms erscheint dann ein Pop-up mit Optionen für die Zielgruppe, die visuelle Emotion, die Farbpalette und mehr.Dynamische FormulareDieser Mechanismus zwingt die KI dazu, sich dem vorgestellten Bereich anzunähern. Kreuzen Sie so viele Kästchen wie nötig an (in der Regel dauert es weniger als eine Minute). Dadurch wird die KI gezwungen, sich dem vorgestellten Bereich anzunähern, und es wird sichergestellt, dass der generierte Code sehr professionell ausgerichtet ist.

Schritt 4: Echtzeit-Zugriff auf die Code-Generierung und das Rendering der Ergebnisse
Nachdem der Fragebogen abgeschickt wurde, ändert sich die Schnittstelle wie folgt:

• Todo Progress (Aufgabenkarte)Die linke Seite des Bildschirms gibt das Verhalten der KI (z. B. das Parsen von CSS, das Schreiben einer HTML-Struktur, das Testen eines dynamischen Effekts usw.) sofort in einer Reihe von Karten aus.
• Sandboxed VorschauDer Hauptarbeitsbereich auf der rechten Seite ist ein iframe, der eine sichere Isolierung enthält, die die gerenderte Benutzeroberfläche in Echtzeit lädt, während das zugrunde liegende HTML und CSS erstellt wird. Sie können sehr realitätsnahe Schatten, Interaktionen und reaktionsfähige Effekte sehen.

Schritt 5: Nahtlose Modifizierung und Dateiexport

• Wenn Sie eine lokale Änderung an der Benutzeroberfläche vornehmen müssen, brauchen Sie die aktuelle Seite nicht zu verlassen. Geben Sie die Anforderung einfach in das Chat-Feld ein (z. B. “Verkleinere die Schrift der großen Überschrift und ändere den Hintergrund in einen dunklen Modus”), und die KI wird die Aktualisierung in der Sandbox in Echtzeit entsprechend dem Kontext ersetzen.
• Klicken Sie auf die obere rechte Ecke der SchnittstelleSchaltfläche "Exportieren. Wenn ein Seitenprototyp erzeugt wird, können Sie auf die Schaltfläche Export HTML 或 Export ZIP Der Download enthält die Entwicklungs-Zip-Datei für alle lokalisierten Stil-Abhängigkeiten; wenn eine Diashow erzeugt wird, unterstützt sie auch das Klicken auf die Export PPTX/PDF Erhalten Sie native Office-Präsentationsdokumente für Firmenbesprechungen. Projektdaten werden automatisch beibehalten und lokal gespeichert, und der Fortschritt wird nach dem Ausschalten und Neustart ohne Verlust wiederhergestellt.

Anwendungsszenario

1. Schnelle und kostengünstige Erstellung von Prototypen für Produktmanager und Designer
   Ohne die Notwendigkeit, komplexe Figma-Verdrahtungstechniken zu beherrschen, kann eine Ein-Satz-Beschreibung mit einem Fragebogenfilter innerhalb von Minuten einen interaktiven High-Fidelity-Prototyp für das Web oder eine mobile Anwendung mit einem realistischen, markengerechten visuellen Stil (z. B. Apple oder Vercel) erzeugen, was die Effizienz der Verbreitung von Anforderungsdokumenten und der internen Teamüberprüfung erheblich verbessert.
2. Front-End-Verstärkung für Full-Stack-Entwickler und Ingenieure
   Back-End- oder Full-Stack-Entwicklern fehlt es oft an überlegenen Design- und Layout-Kenntnissen. Sie können die zu implementierenden funktionalen Anforderungen direkt in Open Design eingeben. Durch die Auswahl des in sich geschlossenen Front-End-Framework-Fähigkeitsmoduls kann der saubere und frische HTML- und CSS-Quellcode, der von AI generiert wird und der Spezifikation des professionellen Designsystems folgt, im ZIP-Format exportiert werden, das für die Sekundärentwicklung in der realen Produktionsumgebung verwendet werden kann.
3. Erstellung von Marketing- und Vermarktungsmaterial
   Durch die Wahl zwischen “Deck-Modus” und “Social Carousel” geben Marketer einfach eine Skizze ihres Textes ein und AI skaliert den Text automatisch, erstellt eine Diashow im Stil eines Online-Magazins oder eine Social-Media-Multi-Grid-Karte mit fortschrittlichen Animationen und Effekten und unterstützt den direkten Export in PDF für Business Pitches oder Kundenpräsentationen. AI skaliert den Text automatisch und erstellt Diashows im Stil eines Online-Magazins mit fortschrittlichen Animationen oder Social-Media-Karussells, die als PDF-Dateien exportiert werden können, um sie in Geschäftsgesprächen oder Kundenpräsentationen zu verwenden.
4. Materialien für den täglichen Betrieb und die Berichterstattung für agile Teams
   Mit den Modulen Kanban-Tafel, Finanzbericht und Besprechungsnotizen können Teammitglieder trockenen Text sofort und kostengünstig in funktionale Büroobjekte wie große Datenanzeigen und schöne Finanzdokumentenseiten verwandeln.

QA

1. Was sind die Hauptunterschiede zwischen Open Design und dem offiziellen Claude Design von Anthropic?
   formal Claude Design Open Design ist ein geschlossenes, kostenpflichtiges, Cloud-spezifisches Modell-Tool, während Open Design eine vollständig quelloffene, lokal ausgerichtete Systemarchitektur ist. Es übernimmt nicht nur die Sandbox-Vorschau und die Rendering-Logik, sondern ermöglicht es Ihnen auch, auf lokal bereitgestellte KI-Code-Intelligenzen zuzugreifen oder über eine Proxy-API zwischen fast allen großen Sprachmodellen auf dem Markt zu wechseln, ohne dass Funktionen blockiert werden.
2. Brauche ich Programmierkenntnisse, um Open Design zu nutzen?
   Nicht erforderlich. Die Betriebslogik des Systems ist sehr nahe an natürlichsprachlichen interaktiven Gestaltungswerkzeugen. Es verfügt über grafische Schnittstellen, interaktive Fragebögen und Dropdown-Menüs. Selbst wenn Sie keine Grundkenntnisse in Code haben, wird der im Hintergrund geschriebene Code direkt übersetzt und als intuitive, visuelle Schnittstelle mit hoher Wiedergabetreue dargestellt.
3. Sind die generierten Code-Projekte und Entwurfsmaterialien im Handel erhältlich?
   Open Design selbst ist unter dem Apache-2.0-Open-Source-Protokoll freigegeben, und die erzeugte Ausgabe gehört dem Benutzer. Es sei jedoch darauf hingewiesen, dass das System über integrierte Vorlagen mit echten Design-Spezifikationen einiger bekannter Marken (z. B. Stripe, Tesla usw.) verfügt. Wenn Sie also diese stark reproduzierten Benutzeroberflächen für die öffentliche kommerzielle Umsetzung verwenden, müssen Sie prüfen, ob ein rechtliches Risiko der Verletzung des Urheberrechts von Drittmarken besteht.
4. Wie kann ich die KI-Intelligenzen nutzen, wenn ich keine lokal installiert habe?
   Überhaupt keine Probleme. Das System bietet BYOK (Bring Your Own Key). In der Begrüßungsschnittstelle müssen Sie beim ersten Mal nur die OpenAI-kompatible API-Anfrageadresse, den API-Schlüssel und den Modellnamen von Plattformen wie DeepSeek, OpenRouter usw. eingeben, und schon können Sie den gesamten Funktionsumfang reibungslos nutzen.
5. Warum öffnet die KI ein Formular, anstatt direkt nach Eingabe der Anforderung mit dem Zeichnen zu beginnen?
   Dies ist eine der Hauptfunktionen des Tools. Während herkömmliche KI-Zeichnungen oft blindlings “freihändig” erstellt werden und zu unausgegorenen Ergebnissen führen, zwingt das in Open Design eingebettete “Smart Discovery Form” die KI dazu, die wichtigsten Ziele und Randbedingungen zu definieren, bevor sie mit dem Schreiben beginnt. Obwohl der Benutzer 30 Sekunden braucht, um mehrere Entscheidungen zu treffen, spart er sich später Dutzende von ineffektiven Überarbeitungen.