MVP Blueprint für Designer
Schluss mit Einstiegscode. Fang an zu liefern.
Eine Sammlung von Claude-Code-Befehlen, die die lästigen Teile der Webentwicklung automatisieren.
Zeit mit wiederkehrenden Befehlen für den Projektstart zu verschwenden, ist Unsinn
Für jeden MVP-Build musst du Tokens, Repository und Projektstruktur aufsetzen. Dieselben Workflows ohne Automatisierung zu wiederholen, ist sinnlos
Das Setup kostet vor dem Start viel Aufwand
Projekt anlegen, Design Tokens anbinden, Auth konfigurieren — jeder Schritt erfordert einen Dialog mit dem Agent, damit er richtig eingerichtet wird.
Figma Tokens werden nicht automatisch zu Code
Zwar gibt es den Figma MCP, doch er verbindet nicht automatisch alle deine Variablen. Es jedes Mal von Hand zu machen, nervt.
Das Backend-Setup zwingt dich, dein Terminal zu verlassen
Supabase, Row-Level-Security, Profiltabelle, Auth-Helper - du musst jedes Mal Supabase öffnen, um alles zu konfigurieren
Ein Repository zu verwalten ist nicht trivial
Branching-Strategie, Commit-Nachrichten, .gitignore, Secrets in der Versionskontrolle - damit hatten Designer oft noch keine Berührung
11 Skills & Befehle enthalten
8 Skills, die etwas bauen. 3 Befehle, die den Workflow straff halten. Eine Installation, um alle zu bekommen.
/install-skills
Einmal nach dem Klonen ausführen - installiert alle Skills, prüft das Setup und führt durch die Konfiguration der API-Tokens
/setup-env
Prüft Figma- und Supabase-Tokens, legt die Token-Datei an, falls sie fehlt, und führt dich Dienst für Dienst durch das Setup
/init-vite
Erzeugt ein Vite-Projekt, das schon für Design Tokens verdrahtet ist, entfernt Boilerplate und startet den Dev-Server
/figma-tokens
Füge deinen Figma-JSON-Export ein und erhalte sortierte CSS Custom Properties zurück: Farben, Typografie, Größen
/init-backend
Richtet ein Supabase-Projekt mit Auth, Profiltabelle, Row-Level-Security und Auth-Helper-Funktionen ein
/test-auth
Verdrahtet deine bestehende Login-Seite mit Supabase Auth, ergänzt die Anmelde- und Registrierungslogik und prüft den Build
/github
Legt ein GitHub-Repo an, prüft die .gitignore, pusht deinen Code und erklärt den Branching-Workflow
/grill-my-code
Gnadenloses Code-Review - Bugs, Sicherheitslücken, geleakte Secrets - nach Schweregrad gruppiert, mit exakten Fundstellen in den Dateien
/commit
Schreibt aus deinen gestagten Änderungen eine Conventional-Commit-Nachricht - unter 72 Zeichen, korrekter Typ, Body bei komplexen Änderungen
/lean
Schaltet Claude in den maximalen Effizienzmodus - keine Erklärungen, keine Kommentare, schnelle, fokussierte Ausführung
/rules
Gibt eine Kurzreferenz aus: Branching-Regeln, Commit-Format, Reihenfolge der Skill-Workflows, Sicherheitshinweise
Der Weg von der Idee zur geprüften Änderung, Schritt für Schritt.
Core 3 des kostenlosen Claude-Code-Kurses geht denselben Weg, den diese Skills automatisieren: Recherche, eine gemeinsame Seite, ein Prototyp, ein Plan, ein kleiner Build, eine zweite Meinung.
Häufig gestellte Fragen
Claude Code Skills sind Slash Commands, die du einmal in Claude Code installierst. Jeder Befehl automatisiert eine bestimmte Entwicklungsaufgabe — ein Projekt aufsetzen, Figma Tokens einlesen, Supabase Auth verdrahten, auf GitHub veröffentlichen — du tippst eine Zeile und die AI erledigt den Rest.
Für Product Designer, UX Leads und Design-Gründer, die echte, funktionierende Apps ausliefern wollen — nicht nur Figma-Prototypen. Wenn du weißt, was du bauen willst, dich aber das Terminal ausbremst, schließen diese Skills die Lücke.
Claude Code (die CLI), einen Figma-Account für Design Tokens und einen Supabase-Account für Auth und Datenbank. Der Skill /init-vite setzt das Projekt auf. Alles Weitere ergibt sich daraus — Terminal-Erfahrung ist nicht nötig.
Skills bauen Dinge: /init-vite erstellt ein Projekt, /figma-tokens wandelt deinen Design-Export um, /init-backend richtet Supabase ein. Befehle steuern den Workflow: /commit schreibt deine Git-Nachricht, /lean lässt die Erklärungen weg, /rules gibt die Kurzreferenz aus. Beide werden zusammen installiert.
Nein. Du beschreibst in normaler Sprache, was du willst, prüfst, was Claude baut, und iterierst. Die Skills übernehmen Boilerplate, Konfiguration und Verdrahtung. Du triffst die Entscheidungen.
Exportiere deine Variablen aus Figma als JSON, füge die Ausgabe in den Prompt von /figma-tokens ein und erhalte sortierte CSS Custom Properties zurück, aufgeteilt in colors.css, typography.css, sizes.css und index.css. Kein manuelles Mapping.
Ja. Wir haben diese Skills aus unserem eigenen internen Workflow bei Bonanza Studios entwickelt und teilen sie mit der Design-Community. Wenn wir mit deinem Team einen Build Sprint durchführen sollen, ist das ein bezahltes Engagement — die Skills sind aber kostenlos.
Die Backend-Skills sind aktuell auf Supabase ausgelegt — für Designer der schnellste Weg von null zu Auth + Datenbank. Wenn du ein anderes Backend nutzt, funktionieren /figma-tokens, /init-vite, /github und die Workflow-Befehle unabhängig von der Backend-Wahl.
Wie wir dir helfen können
AI Chief of Staff
01
Richte deinen AI Chief of Staff ein: gemeinsame Regeln, vernetzte Tools und ein Gedächtnis, das AI-Nutzung in Firmenwissen verwandelt. Mit dir gebaut.
Design Retainer
02
Eine Design-Abteilung auf Abruf, ohne Neueinstellungen. Produkt-, Marketing- und Markendesign im flexiblen Retainer, umgesetzt von Designern mit über 60 ausgelieferten Produkten.
UX Innovation
03
UX Research, Design und Strategie im Startup-Tempo, in flexiblen Sprints. Drei Stunden pro Woche von dir, voller Einsatz von uns und in jedem Sprint ein Prototyp zum Testen.
Soll dein Team auch so liefern?
Wir führen individuelle AI Build Sprints mit Design- und Produktteams durch. Dein Produktkontext, dein Stack, dein Zeitplan. Wir bringen den Prozess, das Setup und die passenden Skills mit.