Redesign

Was ist Redesign?

Redesign ist ein kostenloses, Open-Source-Tool, das Claude LinkedIn- und Instagram-Carousels mit deinem eigenen Codebase als Styleguide erstellen lässt. Du beschreibst, was du möchtest, und Claude baut die Slides in einem Canvas-Editor, den du previewen und bearbeiten kannst.

Die Kernidee ist, nicht mit einer leeren Leinwand zu starten: Redesign zieht echte Komponenten (wie Cards, Buttons, Icons und Typografie-Optionen) aus deinem Repository und platziert sie im Post, damit das Ergebnis zu deinem bestehenden Design-System passt.

Wichtige Funktionen

• Lokaler, Open-Source-Design-Workflow (MIT-lizenziert): Das Tool läuft auf deinem Rechner und ist MIT-lizenziert.
• Codebase-gesteuerte Styling: Zeige Redesign auf dein Repo, damit Claude deine bestehenden Icons, Buttons, Farben, Fonts und Komponentenstrukturen als Basis für neue Posts nutzt.
• Canvas-Editor mit Live-Preview: Claude generiert Layer und validiert Änderungen, bevor sie gespeichert werden, und du kannst den Build in der UI verfolgen.
• Wiederverwendbare Assets aus Layer-Kompositionen: Du kannst Layer oder Kompositionen als Assets speichern und in zukünftigen Posts wiederverwenden.
• MCP-Integration für Claude Code: Redesign ist ein MCP, das in Claude-Code-Workflows einhakt, ohne dass für Redesign selbst ein API-Key benötigt wird.
• Kein vom Redesign kontrollierter Server: Die Seite betont, dass Redesign keinen Backend-Server kontrolliert; Posts, Bilder und API-Keys bleiben auf deinem Rechner.

So nutzt du Redesign

1. Mit einem Befehl installieren: Führe npx @nodewave-io/redesign in einem Terminal aus, um die Canvas-App einzurichten und den MCP automatisch bei Claude Code zu registrieren.
2. Lokalen Canvas starten: Der Workflow verweist darauf, http://localhost:3000 zu öffnen, um die Build-Oberfläche zu sehen.
3. Verbinden, falls Tools nicht erscheinen: Wenn nach dem Neustart die Tools in Claude Code nicht sichtbar sind, führe npx @nodewave-io/redesign connect aus.
4. Anweisung geben: Beschreibe den gewünschten Post. Die Seite gibt an, dass Claude dann Layer, Ausrichtung und Validierungen erstellt und die resultierenden Slides im Editor speichert.
5. Bearbeiten und exportieren: Nutze den Canvas-Editor, um Slide-Inhalte und Komponenten-Code anzupassen, dann exportiere den Carousel für die Zielplattform.

Anwendungsfälle

• Branded Launch-Carousels für LinkedIn/Instagram: Generiere einen Multi-Slide-Carousel, dessen visuelle Elemente (Icons, Card-Styles, Button-Formen und Typografie) aus deinen bestehenden Site-Komponenten stammen.
• Schnelle Iteration bei Promo-Posts: Ändere Text, Layout oder Abstände per Prompt, während die zugrunde liegenden Komponentendefinitionen aus deinem Repository erhalten bleiben.
• Hochperformante Slide-Sektionen zu Templates machen: Speichere Layer-Sets oder Kompositionen (z. B. CTA-Sektion oder Slide-Layout) als wiederverwendbare Assets für nächste Woche.
• Design mit bestehender Team-Komponentenbibliothek: Für Teams mit UI-Komponenten im Code nutzt Redesign diese als gemeinsame Quelle der Wahrheit statt manueller Neuerstellung.
• Lokale-First-Workflows ohne Asset-Uploads: Wenn du eine Setup bevorzugst, bei dem Redesign keinen Backend betreibt, bleiben Generierung und Assets auf deinem Rechner.

FAQ

• Was ist Redesign? Redesign ist ein kostenloses, Open-Source-Tool, das Claude LinkedIn- und Instagram-Carousels in einem kontrollierten Canvas-Editor designen lässt.

• Ist Redesign wirklich kostenlos? Ja. Die Seite betont, es ist MIT-lizenziert und läuft auf deinem Rechner. Du zahlst Anthropic für deine Claude-Nutzung, das Redesign-Tool selbst ist gratis.

• Was brauche ich zum Ausführen? Die Seite nennt Node.js 20+ und Claude Code. Ein Terminal-Befehl richtet den Rest ein.

• Ladet Redesign etwas auf einen Server hoch? Nein. Die Seite betont, Redesign kontrolliert keinen Backend-Server, und Posts, Bilder sowie API-Keys bleiben auf deinem Rechner.

• Wie bekomme ich die Tools in Claude Code sichtbar? Starte Claude Code neu (es liest MCP-Konfig beim Start). Wenn Tools immer noch fehlen, führe npx @nodewave-io/redesign connect aus, um den MCP zu registrieren.

Alternativen

• Template-basierte Social-Post-Tools: Services zum Carousel-Design mit Templates. Diese integrieren typischerweise nicht mit deiner Codebase als Styleguide, sodass du mehr Zeit mit manueller Brand-Anpassung verbringst.
• Design-Tools mit manueller Komponenten-Neuerstellung: Tools, in denen du UI-Komponenten per Hand baust oder neu erstellst (z. B. in einem visuellen Editor). Das ist flexibel für Layouts, nutzt aber nicht automatisch Repo-Komponenten.
• Code-first UI-Preview-Workflows: Ansätze, die Designs im Code rendern und lokal previewen. Sie passen zu UI-Code-Teams, bieten aber nicht denselben Claude-gesteuerten Slide-Generierungs- und Validierungs-Workflow wie bei Redesign.