Question 1

Was ist Vibe Coding und wie nutzt HARWAY es?

Accepted Answer

Vibe Coding ist ein moderner Ansatz, bei dem wir AI-Tools (Cursor, Claude, Copilot) als Kollaborateure einsetzen, um schneller und fokussierter zu entwickeln — ohne Qualitätsverlust. Wir nutzen es für Frontend-Entwicklung, Prototyping und explorative Feature-Arbeit.

Question 2

Wie unterscheidet sich Vibe Coding von traditioneller Entwicklung?

Accepted Answer

Beim Vibe Coding übernimmt die AI repetitive Aufgaben (Boilerplate, Pattern-Matching, Refactoring), während wir uns auf Architektur, UX-Entscheidungen und Qualitätssicherung konzentrieren. Das Ergebnis: 3–5× schnellere Iterationszyklen bei gleicher oder höherer Codequalität.

Question 3

Welche AI-Tools werden beim Vibe Coding eingesetzt?

Accepted Answer

Wir nutzen primär Cursor als AI-first IDE, Claude Sonnet/Opus für komplexe Architekturfragen, GitHub Copilot für tägliche Dev-Arbeit und Claude Code für autonome Multi-Step-Tasks. Die Tool-Auswahl hängt vom Projekt und der jeweiligen Aufgabe ab.

Question 4

Wie viel Programmierkenntnisse brauche ich für Vibe Coding?

Accepted Answer

Als Agentur bringen wir alle nötigen technischen Skills mit. Für unsere Kunden: Vibe Coding senkt die Einstiegshürde für Prototypen und MVPs deutlich. Mit klarer Anforderungskommunikation können auch nicht-technische Stakeholder den Prozess aktiv mitgestalten.

Question 5

Was sind typische Ergebnisse nach einem Vibe Coding Sprint?

Accepted Answer

Nach einem 5-Tage-Sprint liefern wir typischerweise: einen funktionalen Prototyp mit 10–20 Screens, eine saubere Next.js Codebasis, Supabase-Backend-Integration und eine erste Nutzertestversion. Alles deploybar und weiterentwickelbar.

Question 6

Wie lange dauert ein typisches Vibe Coding Projekt?

Accepted Answer

Unsere Vibe Coding Sprints dauern 3–10 Werktage, je nach Scope. Ein MVP-Sprint für eine SaaS-App: 5 Tage. Eine vollständige Frontend-Implementation mit Design System: 8–12 Tage. Wir definieren gemeinsam klare Scope und Liefergrenzen vor Beginn.

Question 7

Was kostet Vibe Coding im Vergleich zu traditioneller Entwicklung?

Accepted Answer

Vibe Coding reduziert die Entwicklungszeit um 60–80%, was direkt die Kosten senkt. Für einen MVP, der traditionell 40–80 Stunden kosten würde, rechnen wir mit 12–25 Stunden. Unsere Tagessätze beginnen bei 1.200 € netto.

Question 8

Welche Arten von Projekten eignen sich für Vibe Coding?

Accepted Answer

Besonders geeignet: SaaS-Frontend-Entwicklung, MVP-Prototypen, Design System Implementation, Dashboard-UIs und Landingpages. Weniger geeignet: hochsicherheitskritische Systeme, Legacy-System-Integration mit komplexen APIs oder stark regulierte Branchen mit speziellen Compliance-Anforderungen.

Question 9

Was ist der Unterschied zwischen Vibe Coding und No-Code?

Accepted Answer

No-Code-Tools (Webflow, Bubble) erzeugen proprietären Code ohne echte Ownership. Vibe Coding produziert sauberen, produktionsfähigen Code (React, Next.js, TypeScript) den ihr vollständig besitzt, deployed und weiterentwickelt. Kein Vendor-Lock-In, keine Skalierungsgrenzen.

Question 10

Wie qualitätssicher ist Vibe Coding?

Accepted Answer

Wir setzen strenge Quality Gates: TypeScript strict mode, Lighthouse ≥ 90, WCAG 2.1 AA, automatisierte Tests und Code Review durch erfahrene Senior Developer. Die AI beschleunigt die Produktion — die Qualitätskontrolle bleibt menschlich.

Question 11

Was ist ein Design System?

Accepted Answer

Ein Design System ist eine zentrale Bibliothek aus wiederverwendbaren Komponenten, Design Tokens (Farben, Typografie, Spacing) und Guidelines, die sicherstellen, dass alle digitalen Produkte eines Unternehmens konsistent aussehen und sich konsistent anfühlen.

Question 12

Welche Vorteile bietet ein Design System?

Accepted Answer

Ein gut aufgebautes Design System reduziert Design-Entscheidungsaufwand um bis zu 60%, beschleunigt Frontend-Entwicklung um 40–70%, verbessert Brand-Konsistenz über alle Touchpoints und macht Produkt-Teams deutlich agiler. Es ist die Grundlage für skalierbare Produktentwicklung.

Question 13

Was kostet ein Design System?

Accepted Answer

Je nach Scope: Ein Basis-Design System (Tokens + 20 Core Components + Figma Library) kostet 8.000–15.000 €. Ein vollständiges Enterprise-Design System (50+ Components, vollständige Dokumentation, Storybook, Design-Dev-Handoff-Prozess) 25.000–60.000 €. Wir erstellen gerne ein individuelles Angebot.

Question 14

Wie lange dauert der Aufbau eines Design Systems?

Accepted Answer

Ein Basis-Design System dauert 3–6 Wochen. Ein vollständiges Enterprise-Design System 8–16 Wochen. Wir empfehlen einen iterativen Aufbau: erst die 20% Components, die 80% des Produkts ausmachen, dann schrittweise erweitern.

Question 15

Ab welcher Unternehmensgröße lohnt sich ein Design System?

Accepted Answer

Ab 3–5 Personen in Design + Entwicklung, sobald Konsistenzprobleme auftreten oder Features langsam werden. Für Startups: ein Micro-Design System (Tokens + 10 Components) reicht oft für 6–12 Monate und kostet 3.000–6.000 €.

Question 16

Was ist der ROI eines Design Systems?

Accepted Answer

Unsere Kunden berichten: 40% kürzere Feature-Entwicklungszeiten, 60% weniger Design-Revisionen, 30% reduzierte QA-Kosten durch Konsistenz. Typischer Break-Even: 3–6 Monate nach Einführung. Langfristig ist es die ROI-stärkste Design-Investition.

Question 17

Was ist der Unterschied zwischen Design System und Komponenten-Bibliothek?

Accepted Answer

Eine Komponenten-Bibliothek ist nur der Code-Teil (React Components, Storybook). Ein Design System umfasst zusätzlich: Design Tokens, Figma-Bibliothek, Usage Guidelines, Naming Conventions, Contribution-Prozess und Governance-Modell. Das System macht die Bibliothek skalierbar.

Question 18

Wie wird ein Design System maintained?

Accepted Answer

Wir empfehlen: ein dedizierter Design-System-Owner (20% einer Person), ein Contribution-Model (jedes Team kann PRs einreichen), Quarterly Reviews und SemVer-Versionierung. Wir bieten auch Retainer-Pakete für kontinuierliche Pflege und Evolution an.

Question 19

Was sind die häufigsten Fehler beim Design System Aufbau?

Accepted Answer

Top 3 Fehler: (1) Zu viele Components von Anfang an — lieber 20 perfekte als 80 halbfertige. (2) Keine Token-Strategie — hardcodierte Werte machen Theming unmöglich. (3) Kein Adoption-Plan — das beste System scheitert wenn Teams es nicht nutzen wollen.

Question 20

Welche Tools nutzt HARWAY für Design Systems?

Accepted Answer

Design: Figma mit Variables + Component Properties. Code: React + TypeScript + Tailwind CSS + Storybook. Tokens: Style Dictionary für Multi-Platform Export. Dokumentation: Storybook Docs + Notion. CI/CD: Chromatic für Visual Regression Testing.

Question 21

Was bedeutet Design-to-Code und wie nutzt HARWAY AI dabei?

Accepted Answer

Design-to-Code bedeutet, Figma-Designs direkt in produktionsfähigen Code zu übersetzen. Wir nutzen AI (Claude, Cursor) um diesen Prozess zu automatisieren: Figma MCP extrahiert Design-Kontext, Claude generiert sauberes React/Tailwind-Code, unsere Engineers finalisieren und qualitätssichern.

Question 22

Wie beschleunigt HARWAY den Design-to-Code Prozess mit AI?

Accepted Answer

Mit unserem AI-gestützten Workflow reduzieren wir die Zeit von approved Figma Design bis deployed Code von typisch 2–3 Wochen auf 2–4 Tage. AI übernimmt den Component-Aufbau, wir fokussieren uns auf Interaktionslogik, Performance und Barrierefreiheit.

Question 23

Von Figma zu produktivem Code — wie lange dauert das?

Accepted Answer

Mit unserem Figma MCP + Claude Code Workflow: Eine komplexe Seite (Homepage mit 6 Sections) dauert 4–6 Stunden statt 2–3 Tage. Eine vollständige App (6–10 Seiten) braucht 2–4 Tage statt 2–4 Wochen. Voraussetzung: sauberes Figma mit Design Tokens.

Question 24

Was ist der Unterschied zwischen manuellem und AI-gestütztem Design-to-Code?

Accepted Answer

Manuell: Developer liest Figma, schreibt Code, baut Components einzeln. AI-gestützt: Design-Kontext wird automatisch extrahiert, Basis-Code in Sekunden generiert, Engineer reviewt und optimiert. Der kreative und architektonische Teil bleibt menschlich — die repetitive Übersetzungsarbeit wird delegiert.

Question 25

Welche Technologien setzt HARWAY beim AI-gestützten Design-to-Code ein?

Accepted Answer

Unser Stack: Figma MCP (Design-Context-Extraktion), Claude Sonnet/Opus (Code-Generierung), Cursor (AI-first IDE), Next.js 14 + TypeScript (Framework), Tailwind CSS (Styling), Supabase (Backend). Alles Open-Source oder Standard-Enterprise-Tech ohne Vendor-Lock-In.

Question 26

Was passiert wenn sich das Design während der Entwicklung ändert?

Accepted Answer

Unser Token-basierter Ansatz macht Design-Änderungen deutlich einfacher. Farb- und Spacing-Änderungen werden in einer Datei (tokens.css) gemacht und propagieren automatisch. Strukturelle Änderungen dauern mit AI-Unterstützung 60–80% weniger Zeit als in traditionellen Workflows.

Question 27

Wie sieht die Qualitätssicherung beim AI-gestützten Design-to-Code aus?

Accepted Answer

Wir nutzen eine mehrstufige QA: (1) AI generiert Code, (2) Senior Engineer reviewt Architektur und Logik, (3) Design QA vergleicht Pixel-für-Pixel mit Figma, (4) Lighthouse Audit (Score ≥ 90), (5) WCAG 2.1 AA Check, (6) Cross-Browser-Test. AI beschleunigt Schritt 1 — der Rest ist streng menschlich.

Question 28

Kann HARWAY auch Legacy-Code in ein neues Design System migrieren?

Accepted Answer

Ja. Unser Migration-Playbook: (1) Design Audit des bestehenden Systems, (2) Token-Extraktion aus bestehendem Code, (3) AI-gestützte Component-Refaktorierung, (4) Schrittweise Migration ohne Feature-Freeze. Typische Migration von 50 Components: 4–8 Wochen.

Question 29

Was kostet der AI-gestützte Design-to-Code Service?

Accepted Answer

Wir rechnen nach Tagessatz (1.200–1.800 € netto) oder Festpreis. Eine typische Website (6–10 Seiten + Design System): 8.000–20.000 €. Ein MVP-Frontend (10–20 Screens): 12.000–30.000 €. Durch unseren AI-Workflow liefern wir schneller und günstiger als der Marktdurchschnitt.

Question 30

Welche Frameworks werden beim Design-to-Code unterstützt?

Accepted Answer

Primär: Next.js 14 (App Router) + React. Auf Anfrage: Vue 3 + Nuxt, SvelteKit, Astro. Für reine Component Libraries: React + Storybook, Web Components. Wir empfehlen Next.js für neue Projekte aufgrund von Server Components, SEO und dem Vercel-Deployment-Ökosystem.

Question 31

Für welche Unternehmen arbeitet HARWAY?

Accepted Answer

Wir arbeiten mit B2B-SaaS-Startups (Seed bis Series B), etablierten Mittelständlern mit Digitalisierungsbedarf und innovationsgetriebenen Unternehmenseinheiten. Unser Sweet Spot: Produkte, die schnell auf den Markt müssen und technische Exzellenz von Anfang an benötigen.

Question 32

Wie läuft ein typisches HARWAY-Projekt ab?

Accepted Answer

Unser Prozess: (1) Discovery Call (kostenlos, 20 Min.), (2) Scope Definition + Angebot (2–3 Tage), (3) Kickoff + Design Briefing, (4) Iterative Design Sprints mit wöchentlichen Reviews, (5) Development Handoff oder direktes Coding durch HARWAY, (6) QA + Launch, (7) Optionaler Support-Retainer.

Question 33

Was sind HARWAYs typische Projektlaufzeiten?

Accepted Answer

Rapid Prototype (5 Screens): 3–5 Tage. Landing Page + Design System: 5–8 Tage. MVP (10–20 Screens): 2–4 Wochen. Website Relaunch: 3–6 Wochen. Enterprise Design System: 8–16 Wochen. Wir arbeiten in klaren Sprints mit definierten Deliverables pro Sprint.

Question 34

Wie kommuniziert HARWAY mit dem Kunden während des Projekts?

Accepted Answer

Wir nutzen Slack für tägliche Kommunikation, Figma für Design-Feedback und Notion für Projektdokumentation. Wöchentliche Video-Reviews (30 Min.) halten alle Stakeholder aligned. Kein Overhead, kein Bürokratismus — direkte Kommunikation auf Augenhöhe.

Question 35

Bietet HARWAY auch Retainer/langfristige Zusammenarbeit an?

Accepted Answer

Ja. Unsere Retainer-Pakete: Design System Maintenance (10 h/Monat), Ongoing Development (20–40 h/Monat), Full-Stack Product Partner (Dediziertes Team-Slot). Retainer-Kunden haben Priority Access, fixe Kapazität und reduzierte Tagessätze ab 3-Monats-Commitment.

Question 36

Was unterscheidet HARWAY von anderen Design-Agenturen?

Accepted Answer

Drei Differenzierungsmerkmale: (1) AI-first Workflow — wir liefern 3–5× schneller als traditionelle Agenturen. (2) Design + Code aus einer Hand — kein Reibungsverlust beim Handoff. (3) Technische Exzellenz — unsere Designer können Code lesen, unsere Developer können Design denken.

Question 37

In welchen Branchen hat HARWAY Erfahrung?

Accepted Answer

Unsere Schwerpunkte: B2B SaaS (HRTech, FinTech, PropTech), E-Commerce (D2C Brands), Professional Services (Beratung, Legal-Tech), Healthcare-Adjacent (kein regulierter Bereich) und Climate-Tech. Wir arbeiten branchenübergreifend, sofern der Produkt-Fokus digital ist.

Question 38

Wie wird HARWAY beauftragt?

Accepted Answer

Einfach: (1) Discovery Call buchen (cal.com/harway, kostenlos), (2) Scope + Angebot besprechen, (3) Werkvertrag oder Rahmenvertrag unterschreiben, (4) Anzahlung (50%), (5) Projektstart. Keine langen Procurement-Prozesse — wir können innerhalb von 3–5 Werktagen starten.

Question 39

Bietet HARWAY Workshops oder Trainings an?

Accepted Answer

Ja. Unser Workshop-Portfolio: Design System Workshop (1 Tag, 2.500 €), Vibe Coding Bootcamp für Dev-Teams (2 Tage, 4.500 €), AI-in-Design Workshop für Designer (0,5 Tage, 1.500 €), Custom Workshops auf Anfrage. Alle Workshops auch remote verfügbar.

Question 40

Wie ist HARWAY erreichbar?

Accepted Answer

Email: hello@harwayexperience.com (Antwort < 24h an Werktagen). Discovery Call: cal.com/harway (kostenlos, 20 Min.). LinkedIn: linkedin.com/company/harway-experience. Headquarter: Hamburg, Germany. Wir arbeiten mit Kunden in DACH, Europa und global (auf Englisch).

Häufig gestellte Fragen — Vibe Coding, AI Design & Rapid Prototyping

Mehr zum Thema lesen

Design Tokens 101: Die Grundlage skalierbarer Design-Architektur

AI-Driven Product Design: Wie AI Agents Designer verstärken

Design Systems: Der komplette Guide für 2026

FAQ Liste — Vibe Coding

Mehr zum Thema lesen

Design Tokens 101: Die Grundlage skalierbarer Design-Architektur

AI-Driven Product Design: Wie AI Agents Designer verstärken

Design Systems: Der komplette Guide für 2026