/ Verzeichnis / Playground / Open Design
← Alle Server ↗ GitHub
● Community nexu-io ⚡ Sofort

Open Design

von nexu-io · nexu-io/open-design

Ein Open-Source-Klon von Claude Design — 19 Skills + 71 markenstarke Design-Systeme, sandboxed Preview, Exports nach HTML/PDF/PPTX/MP4.

open-design von nexu-io ist eine Community-Alternative zu Anthropics Claude Design. Es bündelt 19 Skills für Web-Design, Mobile-Prototypen, Slides, Bilder, Video und HyperFrames, plus 71 vorgefertigte Marken-Systeme (Linear, Stripe, Vercel, Notion, Toss-Style…). Läuft in jedem Claude Code-kompatiblen Harness und liefert sandboxed Preview + Export-Pipelines.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

bereit

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

Anwendungsfälle

Praxisnahe Nutzung: Open Design

Pitch-Deck in einem bestimmten Marken-Stil generieren

👤 Gründer / PMs ⏱ ~30 min beginner

Wann einsetzen: Du brauchst ein 10-Slide-Deck und willst nicht mit Keynote kämpfen.

Ablauf
  1. Marke wählen
    Use open-design. Pick the Stripe-style skin. List its tokens.✓ Kopiert
    → Skin-tokens angezeigt
  2. Entwurf
    Generate a 10-slide deck for our launch — title, problem, solution, traction, roadmap, ask. Use the Stripe skin.✓ Kopiert
    → 10 Slides mit konsistentem Stil
  3. Exportieren
    Export to PPTX so I can edit in Keynote.✓ Kopiert
    → PPTX-Datei geschrieben

Ergebnis: Deck, das nicht KI-generiert aussieht; konsistentes Marken-Feeling.

Fallstricke
  • Bild-Generierung sieht generisch aus — Skill bietet Icon- und Illustrations-Sets; explizit angeben, welche zu nutzen sind
Kombinieren mit: filesystem

Eine Landing-Page in einem Marken-Stil prototypisieren

👤 Devs / Designer, die an Hero-Pages iterieren ⏱ ~25 min intermediate

Wann einsetzen: Du brauchst 3 visuelle Richtungen bevor du richtig baust.

Ablauf
  1. Varianten
    Generate 3 hero variants — Linear, Notion, and Vercel skins. Same content, different style.✓ Kopiert
    → 3 HTML-Previews
  2. Auswählen + iterieren
    Take the Linear one. Tighten typography and add a secondary CTA.✓ Kopiert
    → Verfeinertes HTML

Ergebnis: Schnelle Richtungsentscheidungen vor dem tiefen Build.

Fallstricke
  • Skin-tokens kollidieren mit deinem vorhandenen CSS — Sandboxed Preview vermeidet Konflikte; selektiv integrieren
Kombinieren mit: ui-ux-pro-max-skill

Ein kurzes Marketing-Video aus einem Skript generieren

👤 Marketing / DevRel ⏱ ~60 min intermediate

Wann einsetzen: Du hast ein 30-Sekunden-Skript und brauchst ein Video.

Ablauf
  1. Storyboard
    Turn this script into a HyperFrames storyboard — 6 shots, brand-styled.✓ Kopiert
    → Storyboard
  2. Rendern
    Render to MP4.✓ Kopiert
    → MP4 geschrieben

Ergebnis: Marken-konsistentes Kurzvideo ohne Designer zu bemühen.

Fallstricke
  • Render-Zeit ist nicht unerheblich — Storyboard iterieren vor dem finalen Render

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

open-design-skill + ui-ux-pro-max-skill

Marken-Skins + Design-Grundlagen

Use UI/UX Pro Max for typography, open-design for brand skin.✓ Kopiert
open-design-skill + filesystem

In Projektverzeichnisse ausgeben

Export deck to /presentations/launch/.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
list_skins (none) Marken-Stil wählen free
design_web spec, skin Web-Seiten / Prototypen tokens
design_slides outline, skin Pitch- / Talk-Decks tokens
export format: html|pdf|pptx|mp4 Finale Lieferung render time

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
N/A
Tokens pro Aufruf
Schwer bei render-intensiven Ausgaben (Video)
Kosten in €
Kostenlos
Tipp
Storyboard iterieren, nicht finalen Render

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: Local sandbox + file write
Credential-Speicherung: Keine
Datenabfluss: Keine — lokal

Fehlerbehebung

Häufige Fehler und Lösungen

Render fails for video

ffmpeg installieren; der Skill markiert fehlende Abhängigkeiten

Skin doesn't apply consistently

Manche Templates stammen aus der Zeit vor dem Skin-System; Skin-bewusste Templates aus README verwenden

Alternativen

Open Design vs. andere

AlternativeWann stattdessenKompromiss
Anthropic Claude DesignFirst-Party-Support gewünschtGeschlossen; weniger anpassbar
Handgefertigte DesignsDu hast einen DesignerLangsamere Iteration

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen