Von Figma zum fertigen Produkt: Dein Guide zu Claude Code & Superpowers

Der Graben zwischen Design und Code

Designer hören seit zehn Jahren: „Lern programmieren.“ Das Problem liegt nicht am Talent. Es liegt am Overhead: Build-Systeme, Abhängigkeiten, Node-Versionen, Kontextwechsel zwischen Figma und Terminal. Jede Schicht erzeugt Reibung.

Claude Code beseitigt die Schicht zwischen Design-Denken und Umsetzung. Du beschreibst, was du willst – der Agent macht es. Ohne Struktur wird der Prozess aber schnell chaotisch: Ergebnisse unvorhersehbar, Code als Einwegware, Rückgängigmachen ist unmöglich.

Superpowers bringt Struktur. Es ist ein Skill-Set für Claude Code: Brainstorming, Planung, Ausführung durch Sub-Agenten und Verifikation. Alle Phasen sind dokumentiert, und jede Änderung wird in Git festgehalten.

Was du bauen kannst

Echte Projekte, die Designer mit Claude Code + Superpowers umsetzen:

App zur Suche nach Vintage-Uhren: Ein AI-Agent überwacht Marktplätze, filtert nach Preis und Zustand und schickt Benachrichtigungen.
Figma-to-Code-Pipeline: Design-Tokens aus Figma werden zu React-Komponenten mit korrekten Abständen, Farben und Typografie.
Analytisches Dashboard in 2 Tagen: Vom Figma-Mockup zum lauffähigen Deployment mit echten Daten.

Du beschreibst die Aufgabe – der Agent baut sie.

Installation

Claude Code

npm install -g @anthropic-ai/claude-code

Node.js 18+ erforderlich. Falls nicht installiert:

# macOS
brew install node
# oder via nvm
nvm install 18

Superpowers

Superpowers wird als Plugin installiert:

/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers@superpowers-marketplace

Check: Tippe /help in Claude Code. Du solltest Befehle wie brainstorm, write-plan, execute-plan sehen.

Terminal: Das Minimum zum Start

Falls du noch nie mit dem Terminal gearbeitet hast – diese drei Befehle decken 90 % der Navigation ab:

Befehl	Funktion
`pwd`	Zeigt den aktuellen Ordner an
`ls`	Listet Dateien im Ordner auf
`cd folder`	Wechselt in einen Ordner

Typischer Projektstart:

cd ~/Projects
mkdir my-portfolio
cd my-portfolio
claude

So funktioniert Superpowers

Kernidee: Skills aktivieren sich automatisch. Du musst dir keine Befehle oder Syntax merken. Du beschreibst deine Idee – der Agent startet das Brainstorming. Du sagst „Los, machen wir das“ – er startet die Planung. Du sagst „Auf geht’s“ – Sub-Agenten beginnen mit der Umsetzung.

Alles per natürlicher Sprache. Du steuerst den Prozess einfach durch die Beschreibung deiner Ziele.

Phase 1: Brainstorming

Skill: superpowers:brainstorming

Aktiviert sich automatisch. Stellt Fragen einzeln – ohne dich zu überfordern. Schlägt 2–3 Ansätze mit den jeweiligen Kompromissen vor und erklärt, was du erhältst und was du opfern musst. Dann zeigt es dir das Design in Portionen von 200–300 Wörtern und überprüft jeden Abschnitt gemeinsam mit dir.

Ergebnis: Ein Design-Dokument im Verzeichnis docs/plans/.

Für Designer ist dies die wichtigste Phase. Der Skill erfasst ästhetische Vorlieben vor der eigentlichen Planung: Farben, Abstände, Animationen, Responsive Design, Typografie. Das Ergebnis ist dein Design, nicht ein generisches Bootstrap-Template.

Beispiel-Dialog:

Superpowers: Welcher visuelle Stil gefällt dir am besten?
1. Minimalistisch – viel Luft, Monochrom
2. Bunt – satte Farben, große Typografie
3. Brutalistisch – roh, kontrastreich

Du: 1, aber mit einer Akzentfarbe
Superpowers: Welche Akzentfarbe? Warm oder kühl?

Und so weiter – bis das Gesamtbild vollständig ist.

Phase 2: Schreiben der Pläne

Skill: superpowers:writing-plans

Zerlegt die Arbeit in Mikro-Tasks von jeweils 2–5 Minuten. Jeder Task enthält:

Exakte Dateien, die erstellt oder geändert werden müssen.
Vollständigen Code, der geschrieben werden muss.
Verifikations-Befehle (Tests ausführen, im Browser öffnen).

Das TDD-Prinzip (Test-Driven Development) ist obligatorisch: Zuerst der Test, dann die Implementierung. Jeder Task endet mit einem Commit. DRY (Don't Repeat Yourself) und YAGNI (You Aren't Gonna Need It) – wir schreiben nichts Überflüssiges.

Phase 3: Subagent-Driven Development

Skill: superpowers:subagent-driven-development

Superpowers hilft auch hier: Atomare Commits ermöglichen es, den letzten Schritt mit git revert rückgängig zu machen, falls eine Korrektur nicht möglich ist.

Häufige Fragen

Muss ich coden können?

Nein. Aber grundlegende Kenntnisse helfen beim Review des Ergebnisses. Ein Verständnis der HTML-Struktur, CSS-Eigenschaften und des Unterschieds zwischen Client und Server reicht aus, um Probleme zu erkennen.

Wie viel kostet es?

Service	Kosten
Claude Code (Max)	$100/Monat – volle Funktionalität ohne Einschränkungen
Claude Code (Pro)	$20/Monat – Demo-Modus, reicht für einige Prompts
Claude Code (Free)	$0 – 1–2 Prompts, um es auszuprobieren
Vercel	Kostenloser Plan für persönliche Projekte
Supabase	Kostenloser Plan (500 MB Speicher, Projekt schläft nach 7 Tagen Inaktivität)
OpenRouter	288+ Modelle: GLM-4.7-Flash kostenlos, Kimi K2.5 ab $0.50/1M, GLM-5 ab $1/1M

Für die tatsächliche Arbeit mit Superpowers benötigst du den Max-Plan für $100/Monat – Sub-Agenten verbrauchen schnell Kontext. Die restliche Infrastruktur (Vercel, Supabase) ist für persönliche Projekte kostenlos.

Ist die Code-Qualität produktionsreif?

TDD + zweistufiges Review (Spezifikation + Qualität) + Verifikation durch tatsächlichen Start. Jeder Schritt wird überprüft, bevor der Agent zum nächsten übergeht.

Wie steht es um die Sicherheit?

API-Schlüssel werden in Umgebungsvariablen gespeichert, nicht im Code. Row Level Security in Supabase – Benutzerdaten sind isoliert. Der Code wird auf Geheimnislecks überprüft.

Kann ich den Code später an einen Entwickler weitergeben?

Ja. Atomare Commits, TDD, eine saubere Struktur – der Entwickler wird eine Standard-Codebasis vorfinden. Superpowers generiert Code, der allgemein anerkannten Praktiken folgt.

Erste Schritte

Installiere Claude Code und Superpowers.
Erstelle einen Ordner für dein Projekt.
Beschreibe deine Idee dem Agenten.
Superpowers startet das Brainstorming – beantworte die Fragen.
Gib dein Einverständnis zum Plan.
Beobachte, wie die Sub-Agenten das Projekt zusammenstellen.
Verifiziere das Ergebnis im Browser.
Deploye auf Vercel.

Das erste Projekt wird mehr Zeit in Anspruch nehmen – du gewöhnst dich an den Prozess. Das zweite geht schneller. Beim dritten wirst du wissen, wie du Anforderungen so formulierst, dass der Agent genau das tut, was du möchtest.

Dein Design-Denken – ein Skill, den Agenten noch nicht ersetzen können. Du weißt, wie das Produkt aussehen und sich anfühlen soll. Claude Code + Superpowers übernehmen die Umsetzung.

Reihenfolge der Implementierung (Beispiel: AI-Chat-App)

Für einen AI-Chat in der Anwendung muss keine teure Modell-API verwendet werden. Kimi K2.5 ($0.50/$2.40 pro 1M Tokens) ist Open-Source, multimodal und konkurriert auf Benchmarks mit GPT-5. GLM-5 von Z.AI ($1/$3.20) ist auf Agentenaufgaben und Coding spezialisiert (SWE-bench 77,8 %). Und GLM-4.7-Flash ist sogar kostenlos – für einen einfachen Chat reicht er locker aus.

Google OAuth – Zuerst die Authentifizierung, damit Daten an den Benutzer gebunden sind.
AI-Chat mit Streaming – Wenn eine AI-Funktion benötigt wird, fügen wir diese nach der Authentifizierung hinzu.
Kommentare mit Echtzeit – Supabase Realtime für Updates ohne Neuladen.

Sicherheit

API-Schlüssel werden in Umgebungsvariablen gespeichert. Die Datei .env befindet sich im Stammverzeichnis des Projekts und ist in .gitignore eingetragen. Sie wird niemals committet.

# .env (lokal)
SUPABASE_URL=https://xxx.supabase.co
SUPABASE_ANON_KEY=eyJ...
OPENROUTER_API_KEY=sk-or...

In der Produktion werden Variablen über das Vercel Dashboard → Settings → Environment Variables definiert.

Der OpenRouter-Schlüssel darf niemals in den Client-Code gelangen. Aufrufe an die API erfolgen über eine Server-Funktion – Supabase Edge Functions oder Vercel Serverless Functions.

Row Level Security in Supabase – Benutzerdaten sind nur für den jeweiligen Benutzer sichtbar. Dies wird auf Datenbankebene konfiguriert, nicht im Code.

Figma MCP

Figma ermöglicht über das Model Context Protocol (MCP), dass Claude Code Design-Dateien direkt lesen kann. Der Agent extrahiert Tokens, Komponentenspezifikationen und Layoutstrukturen.

Arbeitsablauf:

Design in Figma
│
▼
Extrahieren über MCP
│
▼
Bauen über Superpowers
│
▼
Deploy auf Vercel
│
▼
Test → Iteration

Phasen für ein Figma-Projekt:

Design-Tokens extrahieren – Farben, Typografie, Abstände, Rundungsradien.
Komponenten bauen – Buttons, Karten, Eingabefelder aus Figma-Spezifikationen.
Bildschirme zusammenstellen – Layouts von Seiten aus Komponenten.
Pixel-Perfect überprüfen – Visueller Vergleich mit dem Mockup.
Iterationen – Anpassungen an Änderungen in Figma.

Timeline: Dashboard in 2 Tagen

Wann	Was
Tag 1, Vormittag	Design in Figma – Struktur, Komponenten, Stile
Tag 1, Abend	Projekt-Initialisierung, Token-Extraktion, Basiskomponenten
Tag 2, Vormittag	Zusammenstellung der Bildschirme, Datenanbindung
Tag 2, Abend	Verifikation, finale Politur, Deployment

Der vollständige Zyklus – zwei Arbeitstage: ein Tag für Design und Initialisierung, ein Tag für Aufbau und Deployment.

Warum das funktioniert

Kontext-Engineering

Bei der normalen Arbeit mit Claude Code verstrickt sich der Agent nach dem fünfzigsten Prompt in seinen eigenen Lösungen. Er vergisst frühere Vereinbarungen und generiert widersprüchlichen Code.

Superpowers löst dies architektonisch: Jeder Sub-Agent beginnt mit einem sauberen Kontext. Er sieht nur seine Aufgabe und den Plan – keinen Müll von vorherigen Schritten. Ein strukturiertes Dateisystem speichert Entscheidungen zwischen den Sitzungen.

Multi-Agenten-Orchestrierung

Spezialisierte Agenten für jede Phase:

┌──────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐
│Brainstorm│───▶│ Planner  │───▶│Implement │───▶│ Reviewer │
│ Agent    │   │ Agent    │   │ Agent    │   │ Agent    │
└──────────┘   └──────────┘   └──────────┘   └──────────┘
   │              │              │              │
   ▼              ▼              ▼              ▼
Design-       Mikro-          Code +         Prüfung
dokument      Aufgaben        Tests          der Qualität

Parallele Ausführung, wo immer möglich. Der Zyklus läuft, bis Pläne und Code die Überprüfung bestanden haben.

Atomare Commits

Eine Aufgabe – ein Commit. git bisect findet einen problematischen Schritt in etwa 7 Prüfungen in einem Projekt mit 100 Commits – binäre Suche statt manuellem Durchsuchen.

Bonus: Wenn du nach einem Monat zu einem Projekt zurückkehrst, liest der Agent das git log und versteht, was warum gemacht wurde. Eine saubere Historie = Kontext für zukünftige Sitzungen.

Designer-Denken

Superpowers stellt die richtigen Fragen vor dem Schreiben von Code. Was passiert, wenn keine Daten vorhanden sind? Wie sieht ein Fehler aus? Was auf einem kleinen Bildschirm? Welcher Hover-Effekt? Ästhetische Präferenzen werden frühzeitig festgelegt und in eine Spezifikation umgewandelt. Kein chaotisches „versuch mal so, nein, nicht so“ – sondern dokumentierte Lösungen.

Fehlerbehandlung

Fehler sind unvermeidlich. Die Formel ist einfach:

Du kopierst die Fehlermeldung.
Du fügst sie in Claude Code ein.
Du beschreibst, was du vor dem Fehler gemacht hast.
Der Agent kümmert sich darum.

Je mehr Kontext du gibst, desto schneller findet der Agent die Ursache. „Funktioniert nicht“ – schlecht. „Beim Klicken auf den Submit-Button wird das Formular nicht gesendet, in der Konsole TypeError: Cannot read property ‘value’ of null“ – gut.

Für jede Aufgabe wird ein frischer Sub-Agent mit einem vollständigen Kontextfenster (200k Tokens) gestartet. Vorherige Schritte verunreinigen den Speicher nicht – der Sub-Agent sieht nur seine Aufgabe, den Plan und die Spezifikationen.

Zweistufige Überprüfung:

Übereinstimmung mit der Spezifikation – Hat der Sub-Agent das getan, was im Plan steht?
Codequalität – Gibt es keine Duplizierung, Lecks, Hardcoding?

Wenn der Reviewer Probleme findet, korrigiert der Sub-Agent, und das Review wird wiederholt. Der Zyklus läuft, bis der Code beide Phasen bestanden hat.

┌─────────────┐   ┌─────────────┐   ┌─────────────┐
│ Brainstorm  │───▶│ Write Plan  │───▶│ Execute     │
│ (Design)    │   │ (Aufgaben)  │   │ (Sub-Agenten) │
└─────────────┘   └─────────────┘   └─────────────┘
   │              ┌─────────────┐    │
   │              │ Spec        │◀───┘
   │              └──────┬──────┘
   │              ┌──────▼──────┐
   │              │ Quality     │
   │              │ Review      │
   │              └──────┬──────┘
   │              ┌──────▼──────┐
   └──────────────▶│ Commit      │
                    └─────────────┘

Jede Aufgabe wird mit einem Commit abgeschlossen. Wenn etwas schiefgeht, kann ein einziger Schritt rückgängig gemacht werden, nicht das gesamte Projekt.

Phase 4: Verifikation

Skill: superpowers:verification-before-completion

Eiserne Regel: Keine „Fertig“-Erklärungen ohne aktuelle Beweise.

Der Agent hat den Befehl ausgeführt. Hat die Ausgabe gelesen. Erst dann sagt er, dass es funktioniert. „Sollte funktionieren“ – zählt nicht. „Ich habe es überprüft, und hier ist das Ergebnis“ – zählt.

Dies ist ein Schutz vor Halluzinationen. Der Agent kann sicher sein, dass der Code korrekt ist – aber ohne einen echten Start bedeutet das nichts.

Beispiel: Portfolio-Website

Wir analysieren den vollständigen Zyklus anhand eines konkreten Beispiels.

Anforderungen (V1)

Vollbild-Hero-Bereich mit Name und Slogan.
Projekt-Raster (4 Arbeiten).
„Über mich“-Sektion.
Kontakte (LinkedIn, E-Mail).
Responsive für mobile Geräte.
Ladezeit unter 2 Sekunden.

Brainstorming

Du beschreibst die Idee. Der Skill erfasst Details:

Parameter	Wert
Hintergrund	Dunkel (#0A0A0A)
Name	48px, bold
Slogan	18px, gedämpfte Farbe
Abstände	48px zwischen Sektionen
Hover auf Karten	Anheben + Schatten
Bildproportionen	16:9
Scrollen	Sanft (smooth)

All dies wird im Design-Dokument festgehalten, bevor auch nur eine Zeile Code geschrieben wird.

Plan

Der Skill unterteilt in Phasen:

Phase 1 – Design-System:

CSS-Variablen für Farben, Schriftarten, Abstände.
Grundlegende Typografie.
Grid und Container.

Phase 2 – Haupt-Layouts:

Hero-Sektion mit Einblendanimation.
Projekt-Raster mit Hover-Effekten.
„Über mich“-Sektion.
Kontakte.

Phase 3 – Inhalt und Politur:

Befüllung mit echtem Inhalt.
Bildoptimierung.
Meta-Tags und SEO.
Finale Überprüfung der Responsivität.

Ausführen

Sub-Agenten stellen jede Phase zusammen. TDD bei jedem Schritt – zuerst der Test (Element wird gerendert, Stile angewendet, Responsivität funktioniert), dann die Implementierung. Commit für Commit. Am Ende – eine saubere Git-Historie, in der jeder Schritt sichtbar und rückgängig machbar ist.

GitHub

Initialisierung des Repositories:

git init
git remote add origin https://github.com/username/portfolio.git

Superpowers committet automatisch atomar – eine Aufgabe, ein Commit. Eine saubere Historie. Problematische Schritte können mit git bisect gefunden werden.

Typische Commit-Historie:

feat: add design system (CSS variables, typography)
feat: add hero section with fade-in animation
feat: add project grid with hover effects
feat: add about section
feat: add contact section with links
fix: adjust grid breakpoint for tablets

Jeder Commit ist ein funktionsfähiger Zustand. Jeder kann ohne Beeinträchtigung des Rests rückgängig gemacht werden.

Deploy auf Vercel

Vercel deployt Frontend-Projekte in Minuten:

Registriere dich auf vercel.com über GitHub.
Klicke auf „Import Project“ und wähle dein Repository aus.
Vercel erkennt das Framework automatisch.
Jeder Push in main führt zu einem automatischen Deployment.

Benutzerdefinierte Domain:

Kaufe eine Domain (Namecheap, Cloudflare Registrar).
Im Vercel Dashboard → Settings → Domains.
Füge die Domain hinzu, trage die DNS-Einträge ein.

Das war's. Dein Portfolio ist online.

Web-Anwendungen mit Daten

Ein Portfolio ist statisch. Aber mit Claude Code + Superpowers kannst du vollwertige Anwendungen mit Datenbank, Authentifizierung und AI-Funktionen erstellen.

Stack

Service	Wofür
Supabase	Datenbank + Authentifizierung
Google OAuth	Login über Google
OpenRouter	AI-Funktionen in der Anwendung

Supabase ist eine Open-Source-Alternative zu Firebase. Der kostenlose Plan deckt persönliche Projekte ab. Google OAuth ermöglicht Benutzern die Anmeldung über Google, ohne Registrierung mit Passwort. OpenRouter – eine einzige API für 288+ Modelle (Claude, GPT, Gemini, DeepSeek). Ein Schlüssel, eine Integration – du wechselst das Modell per Parameter, ohne den Code neu schreiben zu müssen.

Dein Design-Brain + Claude Code + Superpowers = Produkte in Tagen, nicht Monaten.