"Claude Design Review: Der KI-Website-Workflow, den ich wirklich eingesetzt habe"

"## Claude Design Review: Der KI-Website-Workflow, den ich wirklich eingesetzt habe\n\nDer erste Prompt, den ich Claude Design geschickt habe, war eine Lüge. Ich hatte behauptet, Anfänger zu sein. Bin ich nicht. Ich schiebe seit Mitte der 2000er Jahre Pixel und Vektoren durch die Gegend — über fünfzehn Jahre Kundenprojekte, Markensysteme, Landing Pages, die konvertieren mussten, sonst hatte ich nichts zu essen. Aber ich wollte wissen, wie sich dieses Tool für jemanden anfühlt, der völlig unvorbereitet einsteigt.\n\nAlso öffnete ich Claude, klickte auf den neuen Design-Tab und tippte einen einzigen Satz: "Design a landing page for a cyberpunk open-world game called City Punks."\n\nSechs Minuten später starrte ich auf drei Wireframe-Varianten und eine fertige Hi-Fi-Oberfläche. Keine Figma-Datei. Kein statisches PNG. Eine lebendige, atembereite, per Inspektion durchsuchbare HTML-Seite mit Glitch-Effekten auf dem Hero-Titel, einer funktionierenden Navigation und einer Farbpalette, für die ich einem Kunden drei Stunden berechnet hätte.\n\nUnd meine erste Reaktion war nicht: „Figma ist tot." Sie war: „Oh, das deckt vielleicht 80 % dessen ab, was ich tue. Die anderen 20 % sind das, worüber niemand spricht."\n\nDas hier handelt von diesen anderen 20 %. Es ist auch der vollständige Workflow, den ich genutzt habe, um eine echt wirkende Cyberpunk-Game-Website zu liefern — von Claude Design über Midjourney und Claude Code bis hin zu Cloudflare — und die genauen Stellen, an denen die KI an ihre Grenzen stieß und ein Mensch (ich) eingreifen musste.\n\n## Was Claude Design eigentlich ist\n\nAnthropic hat Claude Design am 17. April 2026 als Research Preview innerhalb der Claude-Apps veröffentlicht. Es steht Pro-, Max-, Team- und Enterprise-Abonnenten zur Verfügung — Free-Nutzer sind ausgesperrt. Es läuft auf Claude Opus 4.7.\n\nWenn man Claude öffnet, sieht man jetzt einen eigenen Design-Tab. Darin fünf Optionen:\n\n- Prototypes — klickbare, interaktive Abläufe\n- Wireframes — Low-Fidelity-Layoutexploration\n- Hi-fi UIs — vollständige HTML/CSS-Landing-Pages und Produktoberflächen\n- Slide decks — als HTML erstellte Präsentationen\n- Import — Figma-Dateien einlesen oder Screenshots als Ausgangspunkt hochladen\n\nWas es von v0, Lovable und Figma Make unterscheidet, ist nicht ein einzelnes Feature — es ist die Übergabe. Wenn man ein Design abgeschlossen hat, verpackt Claude Design das gesamte Ergebnis (Komponenten, Tokens, Assets, Markup) in ein Bundle, das man mit einem einzigen Befehl an Claude Code weitergibt.\n\n## Die Voraussetzungen (bevor man irgendetwas öffnet)\n\nMan braucht zwei Dinge: ein Claude-Abonnement und eine grobe Idee. Ich habe den gesamten ersten Durchgang mit dem 20 $/Monat-Pro-Plan absolviert, der während des Research-Preview-Zeitraums Claude Design einschließt.\n\nAber hier ist der Haken, über den niemand spricht: Claude Design verbraucht das Nutzungskontingent rasend schnell. Als ich von Wireframe zu Hi-Fi-UI und zwei Runden Überarbeitungen gewechselt hatte, hatte ich ungefähr die Hälfte meines Tageskontingents verbraucht. Entsprechend planen.\n\nVollständiger Stack, den ich genutzt habe:\n- Midjourney — 30 $/Monat Standard-Plan\n- Topaz Astra — optional, 39 $/Monat Personal-Plan für KI-Video-Upscaling\n- Claude Code — im Claude-Abonnement enthalten\n- GitHub + Cloudflare — beide für diesen Anwendungsfall kostenlos\n\n## Das Designsystem ist der eigentliche Schlüssel\n\nJedes KI-Design-Tool kann eine Landing Page ausspucken. Was Claude Design anders macht: Beim allerersten Projekt fragt es: „Haben Sie vorhandene Marken-Assets, oder soll ich ein Designsystem von Grund auf aufbauen?"\n\nWenn man ein Logo, eine Figma-Datei oder sogar ein GitHub-Repository einfügt, liest es diese und extrahiert:\n- Markenfarben (primär, sekundär, Akzente — mit korrekten Kontrastverhältnissen)\n- Typografieskala (Schriftfamilien, Größen, Gewichte, Zeilenhöhen)\n- Farbverläufe, Strichstärken, Border-Radius-Konventionen\n- Komponentenmuster, die im Code erkannt werden\n\nDas speichert es als persistentes Designsystem, das an den Workspace gebunden ist. Jedes neue Projekt erbt es automatisch. Das ist das, was Lovable und v0 nativ nicht machen.\n\nFür City Punks habe ich Claude Design angewiesen, von Grund auf zu bauen:\n- Vibe: Neo-Tokyo 2077, Nachtmarkt, Neon-Dunst\n- Primärfarben: elektrisches Cyan, heißes Magenta, Chromgrau\n- Schrift: Display-Schrift mit scharfen geometrischen Schnitten für Überschriften; sauberes Sans-Serif für Fließtext\n- Strichstil: dünn, präzise — 1px-Rahmen, keine schweren Konturen\n- Verlaufsintensität: stark — Atmosphäre, keine Dekoration\n\n40 Sekunden später: Farbgitter, fünf Typografiebeispiele, drei Verlaufsoptionen, Komponentenblatt. Ich habe bestätigt, angepasst, das System gesperrt.\n\n## Der Wireframe-Ablauf\n\nMit gesperrtem Designsystem schrieb ich:\n\n> "Landing page for City Punks, an open-world cyberpunk game launching late 2026. Big video hero with character footage, two feature sections explaining gameplay pillars, a news/blog teaser section, a full-width CTA before footer. Bold, atmospheric, not busy."\n\nDrei Wireframe-Varianten in unter einer Minute:\n1. Linksbündiger Hero — zu redaktionell\n2. Zentrierter Hero — generisch, aber brauchbar\n3. Split-Screen-Hero — kämpfte visuell gegen sich selbst\n\nIch wählte zentriert und gab ein Follow-up: "Stretch the video to full-bleed. Push the title down and give it a glitch effect. Minimize the nav — simple logo-plus-burger-menu, nothing else."\n\nAcht Sekunden. Fertig.\n\n## Die Hi-Fi-Oberfläche generieren\n\n„Hi-fi this with full visuals." Neunzig Sekunden später:\n\n- Vollständige HTML-Seite mit angewendetem, gesperrtem Designsystem\n- „CITY PUNKS"-Überschrift mit CSS-basierter Glitch-Animation (RGB-Split, horizontales Jitter, drei Keyframes)\n- Platzhalter-Video im Hero\n- Zwei Feature-Sektionen mit Mock-Überschriften, Subtext, Icon-Platzhaltern\n- News-Teaser mit drei Card-Slots\n- Vollbreite CTA-Sektion mit neonumrandetem Button\n- Footer mit Social-Links, Rechtlichem, Sprachwechsler\n\nAlles inline bearbeitbar. Claude Design macht etwas, das ich nirgendwo sonst gut umgesetzt gesehen habe: Inline-Style-Bearbeitung ohne Verlust der Designsystem-Bindung. Ändert man die primäre Akzentfarbe, aktualisiert sich jedes Element, das dieses Token nutzt, auf der gesamten Seite.\n\nIch habe drei Änderungen vorgenommen:\n1. Die Überschriften-Schrift auf eine eckigere Variante gewechselt\n2. Die Intensität der Glitch-Animation von „aggressiv" auf „subtil" reduziert\n3. Einen leichten Scanline-Overlay auf den Hero gelegt — zwei Sätze im Chat, fertig in sechs Sekunden\n\n## Die Midjourney-Übergabe\n\nNoch kein KI-Design-Tool erzeugt produktionsreife Bilder. Ich öffnete Midjourney und schrieb drei Prompts:\n\n1. Hero-Bild: Cyberpunk-Frau, neonbeleuchtete Straßen, Teal und Magenta, 16:9\n2. Feature-Sektion: Neo-Tokyo-Dach bei Nacht, regenglatte Oberflächen, Neon-Beschilderung\n3. Blog-Cards: drei Varianten von Cyberpunk-Fahrzeugaufnahmen\n\nRund 40 schnelle Bilder, 20 Minuten Iteration. Zurück in Claude Design, das Hero-Bild in den Platzhalter-Slot gezogen. Claude schlug automatisch einen Overlay-Farbverlauf für die Textlesbarkeit vor. Ich akzeptierte ihn und bat dann um ein leichtes Gitter-Overlay bei 15 % Deckkraft.\n\n## Das Responsivitätsproblem\n\nDie Ausgabe von Claude Design ist größtenteils responsiv. Ich habe bei Desktop (1440px), Laptop (1280px), Tablet (768px) und Mobil (375px) getestet.\n\nDesktop: perfekt. Laptop: perfekt. Tablet: gut. Mobil: kaputt.\n\nFünf Probleme: Navigation überläuft, Hero-Überschrift zu groß (vier Zeilen), Feature-Sektionen stapeln sich nicht, CTA-Button läuft über.\n\nIch tippte: "Audit the mobile layout and fix the breakpoints. Navigation should collapse to a burger menu below 768px. Hero headline should scale down to fit in two lines on mobile. Feature sections should stack vertically on tablet and below. CTA button should go full-width on mobile."\n\nZwei Minuten. Alle fünf Probleme behoben — Burger-Menü mit Slide-in-Overlay, clamp()-Überschriftenskalierung, gestapelte Sektionen, vollbreiter CTA.\n\nAber ich musste wissen, was ich fragen muss. Ein Anfänger würde Mobil-Probleme nicht erkennen.\n\n## Die Übergabe an Claude Code\n\nRund um die vierte Runde Überarbeitungen stieß ich an die Claude-Nutzungsgrenze. Klick auf Export to Claude Code — Claude verpackt das Design (HTML, CSS, JavaScript, Assets, Tokens) in ein Bundle. Claude Code im Terminal öffnen und einfügen: "Continue working on this project locally."\n\nIch nutzte Claude Code, um:\n- Das Hero-Bild durch ein komprimiertes Hintergrundvideo zu ersetzen\n- Parallax-Scroll-Effekte auf den Feature-Sektionen anzupassen\n- Hover-States auf den Blog-Cards hinzuzufügen (subtiles Anheben + Leuchten am Rahmen)\n- Den Footer-Abstand anzupassen\n- Meta-Tags und Open Graph Cards hinzuzufügen\n\nDie Designsystem-Variablen wurden sauber übernommen.\n\n## Der Video-Animationstrick\n\nMidjourney unterstützt jetzt kurze animierte Loops. Ich generierte einen 4-Sekunden-Loop mit subtiler Neon-Glow-Bewegung und leichtem Rauchzug.\n\nTopaz Astra (Personal-Plan, 39 $/Monat) — grob 160 Sekunden 4K-Creative-Mode-Ausgabe pro Monat im Standard — skalierte das Material auf echtes 4K hoch. Ich komprimierte es mit ffmpeg wieder auf 1080p bei hoher Bitrate und sagte Claude Code dann: "Replace the hero image with this video as a looping background. Keep the overlay gradient and grid. Autoplay muted with playsinline attribute."\n\nElf Sekunden. Fertig.\n\n## Wo die Hand des Designers noch zählte\n\nLogo-Platzierung und -Größe. Standard: 40px-Logo oben links. Gebraucht: größer, leicht nach rechts verschoben, gepaart mit pixelgerendertem Tagline.\n\nNavigation neu positionieren. Das Standard-„Sign up" war ein Text-Link. Ich habe es in einen umrandeten Neon-Pill-Button verwandelt, beim Scrollen sticky, mit subtilем Glow beim Hover.\n\nFarbkalibrierung. Das automatisch generierte Cyan war für Fließtext zu gesättigt. Drei Schattierungen zurückgedreht.\n\nParallax-Timing. Standard-Multiplikator 0,5 — zu schnell. Auf 0,2 für ein kinematisches Gefühl verlangsamt.\n\nBlog-Card-Hover-States. Standard war 2px Anheben + Schatten. Ich ersetzte es durch Rahmenleuchten, 1px Anheben und Farbwechsel beim Titel.\n\nMehrseitige Konsistenz. Die innere Blog-Post-Seite verwendete standardmäßig ein neues Layout, das nicht zur Startseite passte.\n\n## Deployment: GitHub + Cloudflare\n\nClaude Code initialisierte ein Git-Repository, commitete das Projekt und führte mich durch das Pushen auf GitHub. Die Verbindung zu Cloudflare Pages hergestellt — etwa fünf Klicks gemäß Cloudflares Dokumentation. Jeder Push auf main wird automatisch bereitgestellt.\n\nGesamte Deployment-Zeit von „lokal fertig" bis „live im Internet": etwa zwölf Minuten. Kostenloses Hosting. Kostenloses SSL. Globales CDN.\n\n## Das ehrliche Urteil\n\nClaude Design ist das beste Prompt-to-Prototype-Tool, das ich je genutzt habe. Übertrifft Lovable bei der Designsystem-Treue. Übertrifft v0 bei Vielseitigkeit und Exportoptionen. Übertrifft Figma Make bei der Geschwindigkeit.\n\nAber es ist kein Figma-Ersatz. Es ist ein 80-%-Tool.\n\nEs ist hervorragend für:\n- Anfänger, die eine funktionsfähige Website brauchen\n- Designer, die schnell Konzepte entwickeln wollen\n- Startup-Gründer, die Ideen validieren\n- Kleinunternehmen, die eine Web-Präsenz brauchen\n- Erfahrene Designer, die es als Rapid-Prototyping-Schicht einsetzen\n\nEs wird nicht als einziges Tool funktionieren, wenn:\n- Pixelgenaue Markentreue gefragt ist\n- An komplexen mehrseitigen Produkten gearbeitet wird\n- Echtzeit-Mehrdesigner-Zusammenarbeit benötigt wird\n- Die Ansprüche an mobile Responsivität über „funktioniert grundsätzlich" hinausgehen\n\n## Der Workflow, den ich künftig nutzen werde\n\n1. Claude Design — Marksystem, Wireframes, Hi-Fi-UI\n2. Midjourney — Hero- und Sektionsbilder\n3. Topaz Astra — nur wenn ein Hero-Video benötigt wird (optional)\n4. Claude Design → Claude Code-Übergabe — bei Kontingentgrenze oder für lokale Bearbeitung\n5. Manuelle Verfeinerung in Claude Code — Logo, Navigation, Hover-States, Parallax, Mobile-Audits\n6. GitHub → Cloudflare Pages — automatisches Deployment, kostenloses Hosting\n\nGesamtzeit für eine kompetente kleine Website: 3–5 Stunden statt 2–3 Tage.\n\n## Häufig gestellte Fragen\n\n### Benötige ich ein Claude-Pro-Abonnement für Claude Design?\nJa — Pro, Max, Team oder Enterprise ab April 2026. Der 20 $/Monat Pro-Plan beinhaltet es während der Research Preview.\n\n### Kann Claude Design Figma für professionelle Arbeit ersetzen?\nNein. Figma gewinnt bei kollaborativer Bearbeitung, Versionsverlauf, Plugin-Ökosystem und präziser Vektorarbeit. Claude Design gewinnt beim Rapid Prototyping und bei Landing Pages.\n\n### Ist die Ausgabe standardmäßig mobil-responsiv?\nGrößtenteils. Mobil braucht typischerweise einen Korrektur-Durchgang. Das Auffordern von Claude Design, mobile Breakpoints zu prüfen, löst die meisten Probleme in unter fünf Minuten.\n\n### Wie sieht die Übergabe an Claude Code eigentlich aus?\nClaude Design exportiert HTML, CSS, JavaScript, Assets und Design-Tokens. Die Designsystem-Variablen werden übernommen, sodass Farb- und Typografie-Tokens beim Weiterbearbeiten im Terminal konsistent bleiben.\n\n## Lass uns zusammenarbeiten\n\nDu möchtest KI-Systeme aufbauen, Workflows automatisieren oder deine Tech-Infrastruktur skalieren? Ich helfe dir gern.\n\n* Fiverr (individuelle Builds & Integrationen): fiverr.com/s/EgxYmWD\n* Portfolio: mejba.me\n* Ramlit Limited (Enterprise-Lösungen): ramlit.com\n* ColorPark (Design & Branding): colorpark.io\n* xCyberSecurity (Sicherheitsdienstleistungen): xcybersecurity.io"