Eine WebApp in Tagen bauen — mit AI und No-Code.

Worum es geht

Dieser Beitrag ist Teil unseres Themen-Clusters Software & Digitale Produkte — eine Übersicht über alle Beiträge zu App-Architekturen, Webapp-Prototyping und dem Custom-Code-Migrations-Pfad.

Im Blog über App-Arten habe ich beschrieben, warum PWAs und Web-Apps 2026 für viele Startup- und KMU-Projekte die optimale Wahl sind, und welcher Stack dafür funktioniert: Cloudflare, GitHub, Cursor + Claude Code, Lovable / v0, Resend.

In diesem Beitrag bekommst du den konkreten, ehrlichen Walkthrough, wie ich diesen Stack für zwei reale Projekte eingesetzt habe:

• aheadoftime.ch — meine eigene Agentur-Website, mehrere Locales (DE / EN / FR), Cases, Services, Blog, Kontakt-Formular mit Spam-Schutz
• purebosnia.com — eine Marketing-/Produkt-Website für ein bosnisches Lifestyle-Projekt, mehrsprachig, mit Newsletter und einfachem Shop-Vorlauf
• Plus Hinweise auf weitere kleinere Setups, die ich nach demselben Pattern aufgebaut habe

Zielgruppe dieses Blogs: Menschen, die nicht aus dem klassischen Software-Engineering kommen — Marketing-Verantwortliche, Gründer:innen, Innovations-Team-Leitende, Geschäftsleitungs-Mitglieder von KMU. Du brauchst kein Coding-Vorwissen, aber Bereitschaft, Schritt für Schritt mitzudenken.

Disclaimer vorab: "Ohne klassisches Coden" heisst nicht "ohne Verstehen". Du wirst lernen müssen, was ein Git-Repo ist, was eine Branch ist, wie ein Deployment funktioniert. Aber: 2026 reichen ein paar Stunden Onboarding plus iteratives Lernen on-the-job. Du musst keinen JavaScript-Code mehr selbst schreiben.

Warum AI + No-Code + Cloudflare gerade jetzt

Drei Entwicklungen sind in den letzten 18 Monaten zusammengekommen, und das macht den Stack 2026 ungewöhnlich kraftvoll:

1. KI-Coding-Assistenten haben ein Level erreicht, das produktiv ist. Cursor und Claude Code generieren funktionierenden, wartbaren Code aus natürlicher Sprache. Was 2023 noch "Spielzeug" war, ist 2026 produktiver Alltag.
2. Cloudflare ist 2026 der Default-Hosting-Stack für kleine bis mittlere Web-Apps. Pages, Workers, D1, R2, KV — komplette Backend-Infrastruktur, serverless, mit guter Free-Tier.
3. AI-Design-Tools (Lovable, v0, Figma AI) liefern brauchbare Frontend-Komponenten in Minuten — als Startpunkt, den man dann verfeinert.

Diese drei Layer zusammen verändern, was eine einzelne Person oder ein kleines Team mit minimalem Budget bauen kann. Drastisch. Für anspruchsvollere Vorhaben kombinieren wir denselben Stack mit klassischer Custom-Plattform-Entwicklung, wenn ein MVP traction zeigt und auf Stabilität ausgelegt werden muss.

Mein Stack — Übersicht

Der ganze Stack als ASCII-Übersicht zum Mitlesen:

┌─ Konzept & Anforderungen ─────────────────────────────────┐
│  Claude / ChatGPT — Sparring-Partner für Sitemap, Flows,  │
│  Anforderungs-Spec, Edge-Cases                            │
├─ Design ───────────────────────────────────────────────────┤
│  Figma + Figma AI ODER Lovable / v0 (für schnelle Sprints)│
├─ Code & Build ─────────────────────────────────────────────┤
│  Cursor (VS-Code-Fork mit AI) + Claude Code (CLI-Agent)   │
├─ Repo ─────────────────────────────────────────────────────┤
│  GitHub (privat oder public)                              │
├─ Hosting ──────────────────────────────────────────────────┤
│  Cloudflare Pages + Workers + D1 + R2                     │
├─ Email & Forms ────────────────────────────────────────────┤
│  Resend (transactional) + Cloudflare Turnstile (Anti-Spam)│
├─ Analytics & SEO ──────────────────────────────────────────┤
│  Plausible + Cloudflare Web Analytics + Google Search Console│
└────────────────────────────────────────────────────────────┘

Total monatliche Kosten für beide Projekte: ~35 CHF (Cursor Pro, Resend Pro-Tier optional, sonst alles Free-Tier).

Case 1: aheadoftime.ch — Schritt-für-Schritt-Walkthrough

Die neun Setup-Schritte als Übersicht:

Ausgangslage

Ich brauchte eine Agentur-Website mit:

• Mehreren Sprachen (DE, EN, FR)
• Sektionen: Home, Services (4 Sub-Pages), Cases (7 Sub-Pages), Blog (15+ Artikel), About, Kontakt
• Modernem Design mit Header-Hero, Parallax, Scrollytelling
• Funktionierendem Kontaktformular ohne Mailto-Switch
• DSG/DSGVO-konformer Maps-Integration

Schritt 1 — Konzept und Inhalts-Strategie (Claude als Sparring-Partner)

Ich habe Claude meine Geschäftsausrichtung, Zielgruppen und Brand-Voice in 5–6 Nachrichten erklärt. Dann iterativ:

• Sitemap definiert: "Hier ist meine Tätigkeitsbeschreibung. Welche Struktur ergibt SEO-mässig und Conversion-mässig Sinn?"
• Pro Page einen Content-Brief erarbeitet (Tonalität, Sections, Pflicht-Elemente)
• SEO-Keywords und LLMO-Stichworte recherchiert (Klar, mit Verifikation der Faktenaussagen — siehe Denkfehler 14 und 15)

Output: 25+ Content-Brief-Files in Markdown, die direkt in den Coding-Schritt floss.

Aufwand Schritt 1: ~12 Stunden über mehrere Sessions verteilt.

Schritt 2 — Design-Konzept

Hier habe ich kein Lovable/v0 genommen, sondern Cursor + Claude Code direkt mit einem klaren Design-System gefüttert:

• Brand-Farben (cyan/grün/lila/orange als Service-Akzente, dunkelgrau als BG-Default)
• Typografie (light/300 weight, Sans-Serif, klare Hierarchie)
• Card-Style (dunkelgrau #1a1a1a, dünner weisser Border 15% / 40% hover)
• Icon-System (Lucide React, weiss flat)

Begründung: Bei einer Agentur-Website wollte ich volle Kontrolle über Look & Feel — und das System ist klar genug, dass Claude Code es konsistent über alle Pages umsetzt.

Alternative für andere Projekte (z.B. purebosnia.com): Lovable als Schnellstart, dann manuelle Feinjustierung. Spart 60–80% Initialaufwand bei einfacheren Brands.

Aufwand Schritt 2: ~6 Stunden (Design-System-Definition + erste Mockups in Figma)

Schritt 3 — Repo aufsetzen (GitHub)

• Neuer Repository auf GitHub erstellt (privat — public macht für Agentur-Site keinen Sinn)
• README, .gitignore, basic Folder-Structure
• Lokal via Cursor geklont

Aufwand Schritt 3: ~30 Minuten

Schritt 4 — Code-Initialisierung (Cursor + Claude Code)

• Next.js-Projekt mit Tailwind CSS und MDX-Support initialisiert (Claude Code generiert das mit einem Prompt)
• Brand-Farben in tailwind.config.js definiert
• Basis-Komponenten (Header, Footer, Card, Section, PageHero) gemeinsam mit Claude Code gebaut

Bei jedem Schritt habe ich klar formuliert, was ich will:

• "Bau eine Card-Komponente mit dunkelgrauem BG (#1a1a1a), weissem Border (15% Opacity, 40% bei Hover), Lucide-Icon oben links, Headline, Body-Text. Mobile-responsive."
• Claude Code generiert den Code, ich review (lesen, nicht editieren), kleine Anpassungen via natürlicher Sprache, fertig.

Aufwand Schritt 4: ~8 Stunden für die komplette Basis-Komponenten-Bibliothek

Schritt 5 — Content einpflegen (MDX + Content-Briefs)

• Die in Schritt 1 vorbereiteten Content-Briefs als MDX-Dateien in /content/blog/, /content/cases/, /content/services/ ablegen
• Claude Code baut die dynamischen Routen, die SEO-Meta, die Schema-Markup, die Related-Articles-Logic

Aufwand Schritt 5: ~10 Stunden für alle Inhalte

Schritt 6 — Header-Hero + Parallax + Scrollytelling

• <PageHero> als Shared-Component mit Header-Image-Slot, Eyebrow, H1, Sub, optionalem CTA
• Parallax-Layer via JS (Faktor 0.5 Desktop / 0.25 Mobile, deaktiviert bei prefers-reduced-motion)
• Content-Block-Reveal via Intersection Observer

Aufwand Schritt 6: ~6 Stunden — inklusive Performance-Tuning, weil LCP wichtig war

Schritt 7 — Kontakt-Formular + Backend

Hier wird's spannend für Nicht-Coder:innen. Mein Setup:

• Frontend-Form mit allen Pflichtfeldern (in Schritt 4 mit Claude Code generiert)
• Cloudflare Turnstile als Anti-Spam-Layer
• Honeypot-Feld als zusätzliche Verteidigung
• Cloudflare Worker als API-Endpoint (/api/contact), der die Form-Submission empfängt
• Resend-Integration im Worker für E-Mail-Versand an info@aheadoftime.ch (Adresse im Frontend versteckt!)
• Auto-Reply an die einsendende Person via Resend
• Two-Click-Google-Maps-Embed für die Basel-Adresse (DSGVO-konform)

Aufwand Schritt 7: ~5 Stunden — komplett mit Testing der End-to-End-Mail-Pipeline

Schritt 8 — Deployment auf Cloudflare Pages

• Cloudflare-Account verbunden mit GitHub-Repo
• Pages-Projekt erstellt: Cloudflare merkt automatisch, dass es ein Next.js-Projekt ist
• Custom-Domain (aheadoftime.ch) konfiguriert — SSL auto-provisioned
• Environment-Variables (Resend-API-Key, Turnstile-Keys, Receiving-Email) hinzugefügt

Jeder Push auf den main-Branch deployt automatisch. Preview-Deployments für Feature-Branches gibt's gratis dazu.

Aufwand Schritt 8: ~2 Stunden, inklusive DNS-Migration der Domain

Schritt 9 — SEO, Analytics, Schema-Markup

• Plausible-Snippet eingebunden (cookie-frei, DSGVO-konform)
• Cloudflare Web Analytics aktiviert
• sitemap.xml und robots.txt generiert via Next.js-Tooling
• Article-Schema und FAQ-Schema in Blog-Posts (für SEO + LLMO)
• Google Search Console + Bing Webmaster Tools verbunden

Aufwand Schritt 9: ~3 Stunden

Gesamtaufwand aheadoftime.ch

• Effektive Arbeitszeit: ca. 52 Stunden über 4 Wochen verteilt (in den Abendstunden / Wochenenden, weil parallel zu Kundenmandaten)
• Tool-Kosten in dieser Phase: ~30 CHF (Cursor Pro Subscription für 1 Monat) + 0 CHF Hosting/Email/Domain (alles Free-Tier oder bereits gekauft)
• Output: voll funktionale Multi-Locale-Agentur-Website mit Blog, Cases, Services, Kontakt-Form, Header-Hero + Parallax — production-ready

Was hätte das klassisch gekostet? Realistisch: 40'000–80'000 CHF bei einer klassischen Agentur, 6–10 Monate Projektzeit.

Case 2: purebosnia.com — Schritt-für-Schritt

Ausgangslage

Marketing-/Produkt-Website für ein bosnisches Lifestyle-Projekt:

• Mehrsprachig (DE, EN, BS)
• Brand-Storytelling-Page
• Newsletter-Signup
• Shop-Vorlauf (mit "Coming Soon"-Status, Mailchimp/Brevo-Integration für Pre-Launch-Liste)
• Mobile-first Design

Was war anders als bei aheadoftime.ch?

• Lovable als Initial-Generator: Hier habe ich nicht von Grund auf in Cursor gebaut, sondern in Lovable die erste UI-Iteration generiert. Begründung: das Brand-Design war flexibler, ein moderner, photo-getriebener Look reichte initial. Lovable hat in 20 Minuten eine erste Version geliefert, die zu 60% brauchbar war.
• Cursor + Claude Code zur Verfeinerung: Den Lovable-Output habe ich nach GitHub exportiert, in Cursor geöffnet und gemeinsam mit Claude Code verfeinert — Header, Bilder, Mehrsprachigkeit, Newsletter-Integration.
• Cloudflare Pages identisch: Gleicher Hosting-Stack wie aheadoftime.ch.
• Resend für Newsletter-Confirmation und für Form-Submissions.

Gesamtaufwand purebosnia.com

• Effektive Arbeitszeit: ca. 16 Stunden über 2 Wochen
• Tool-Kosten: Lovable Subscription (~25 USD für den einen Monat) + sonst Free-Tier
• Output: produktive Marketing-Site mit Newsletter, mehrsprachig, mobile-first, production-ready

Lerneffekt: Lovable als Initial-Generator spart bei einfacheren Brands enorm Zeit. Bei komplexerem Brand-System (wie aheadoftime.ch mit 4 Service-Akzenten und strikten Card-Patterns) lohnt sich der direkte Cursor-Einstieg.

Weitere Projekte nach demselben Pattern

Ich nutze diesen Stack mittlerweile für:

• Kleinere Microsites von Kund:innen (typisch 8–20 Stunden Aufwand)
• Landingpages für Kampagnen (typisch 4–8 Stunden)
• Interne Tools für AOT-Workflow-Automation (Bots, Dashboards, Mini-Apps mit Cloudflare Workers)
• Bootcamp-Übungsumgebungen für Workshop-Teilnehmer:innen

Der Stack skaliert wunderbar von "20-stündige Microsite" bis "vollständige Agentur-Website". Wo es um eine echte Produkt-Plattform mit Nutzerkonten und Transaktionen geht, zeigt unser Sharyoo-Plattform-Case, wie weit du dasselbe Pattern tragen kannst.

Wann es Zeit für Custom-Code wird

Bei aller Liebe zum AI + No-Code-Stack: es gibt eine reale Grenze, an der die Effizienzgewinne kippen. Sobald deine Webapp entweder echte Skala bekommt (hunderte gleichzeitige Nutzer:innen, transaktionale Workflows mit Geld-Bezug) oder Spezial-Features braucht, die der Generator nicht kann (komplexe Permission-Modelle, Real-Time-Sync, Custom-Algorithmen, sensible Daten-Pipelines), dann frisst das Workaround-Engineering deine Zeit auf.

Die Entscheidung zwischen "weiter mit No-Code" und "Migration zu Custom" lässt sich auf zwei Achsen abbilden: Nutzer-Skala (wie viele Menschen nutzen die App wirklich, in welcher Frequenz?) und Custom-Feature-Bedarf (wie speziell sind die fachlichen Anforderungen?). Für die meisten KMU-MVPs bleibst du im Bottom-Left-Quadranten — No-Code reicht völlig. Erst wenn du in Richtung Top-Right driftest, lohnt sich der Schritt zu einer eigenen Codebase mit Next.js, einer dedizierten Infrastruktur und einem klassischen Dev-Setup.

Wichtig: Migration ist nicht der Erfolg, sondern der Punkt, an dem dein Produkt aus dem MVP-Stadium raus ist. Wer zu früh migriert, verbrennt Budget für Engineering statt für Produkt-Validierung.

Praktische Anleitung für Nicht-IT-Menschen — der Aktionsplan

Wenn du jetzt selbst loslegen willst, hier dein 7-Punkte-Plan:

Tag 1 — Konzept

• Beschreib dein Projekt in 5 Sätzen
• Chatte mit Claude oder ChatGPT durch: Sitemap, User-Flows, Kernfunktionen, Edge-Cases
• Schreib dir am Ende einen Content-Brief pro Page (max 1 Seite pro Page)

Tag 2 — Accounts und Tools

Setup-Liste, in der Reihenfolge:

1. GitHub-Account (gratis)
2. Cloudflare-Account (gratis)
3. Cursor installieren (gratis Free-Tier, oder Pro für 20 USD/Monat)
4. Anthropic-Account für Claude / Claude Code (gratis Free-Tier, oder Pro für 20 USD/Monat)
5. Resend-Account (gratis bis 3'000 Mails/Monat)
6. Plausible-Account (optional, 10 EUR/Monat) oder Cloudflare Web Analytics (gratis)
7. Domain kaufen (typisch 12–20 USD/Jahr bei Cloudflare Registrar oder Namecheap)

Tag 3 — Design

• Entweder: Figma öffnen, mit Figma AI ein Grundlayout generieren, manuell verfeinern
• Oder: Lovable öffnen, deine App in natürlicher Sprache beschreiben, Initial-UI generieren lassen
• Brand-Farben, Typografie, Komponenten-System notieren

Tag 4–5 — Code-Setup

• GitHub-Repo erstellen
• Cursor mit Claude Code öffnen, Repo klonen
• Claude Code mit deinem Konzept und Design füttern: "Initialisiere ein Next.js-Projekt mit Tailwind CSS und MDX, basierend auf folgendem Brief: [Brief einfügen]"
• Komponenten bauen (Card, Header, Footer, Hero, Form) — Schritt für Schritt mit Claude Code

Tag 6 — Content einpflegen + Form-Backend

• Deine Inhalte als MDX-Files anlegen
• Form-Backend via Cloudflare Worker + Resend bauen (Claude Code kann das End-to-End)

Tag 7 — Deployment + Polish

• Cloudflare Pages mit GitHub-Repo verbinden
• Custom-Domain konfigurieren
• Lighthouse-Audit laufen lassen, Performance optimieren
• SEO-Meta, sitemap.xml, robots.txt

Realistische Zeitabschätzung: Wenn du das zum ersten Mal machst, brauchst du statt 7 Tagen eher 14–20 Tage — Lerneffekte, Stolperfallen, Iterationen. Das ist normal. Beim zweiten Projekt bist du 3× so schnell.

Häufige Stolperfallen für Nicht-IT-Menschen

• Git-Workflows: Branch, Commit, Push, Merge — verstehe diese Basics, bevor du startest. 30 Minuten YouTube-Tutorial reichen.
• Environment Variables: API-Keys gehören in .env (lokal) und in Cloudflare-ENV (production), nie ins Repo. Sonst leakst du Credentials.
• Cursor-Cost-Spiral: Claude Code via Cursor verbraucht Tokens. Wenn du den ganzen Tag prompted ohne Sinn, kostet dich das mehr als geplant. Klare Tasks formulieren.
• Hallucinations: KI erfindet manchmal Library-Funktionen, die's nicht gibt. Wenn Code crasht: "Geht das wirklich, oder hast du das erfunden?" ist ein legitimer Re-Prompt.
• Performance: AI-generierter Code ist oft funktional, aber nicht immer performance-optimal. Lighthouse-Audits laufen lassen, mit Claude Code optimieren.
• Mobile-Testing: Im Browser-Devtools nicht ausreichend. Auf echtem iPhone und echtem Android testen.

Workshop / Bootcamp: ich coache dein Team beim Setup

Wenn du oder dein Team genau dieses Setup hands-on lernen wollt, biete ich 2- bis 5-tägige Workshops und Bootcamps an:

Format-Optionen

• 2-Tage-Intensiv-Workshop für 4–8 Personen: Konzept, Setup, erste Page deployed
• 5-Tage-Bootcamp für 4–8 Personen: komplette MVP-Web-App produktionsreif, plus Schulung zur eigenständigen Weiterentwicklung
• Begleit-Coaching über 4–8 Wochen (1× wöchentlich 2h Call) für Teams, die ihre erste Anwendung parallel zum Job aufbauen

Was die Teilnehmenden mitnehmen

• Praktisches Verständnis des kompletten Stacks (Cloudflare, GitHub, Cursor, Claude Code, Resend)
• Eine eigene, laufende Web-App / PWA am Ende
• Verständnis, wie sie ähnliche Projekte eigenständig replizieren und erweitern können
• Klare Einschätzung, wann sie das selbst machen können — und wann externe Partner:innen sinnvoll sind

Für wen

• Marketing- und Innovations-Teams in KMU, die digital handlungsfähig werden wollen
• Gründer-Teams, die einen ersten MVP eigenständig bauen wollen
• Geschäftsleitungs-Mitglieder, die das Setup einmal selbst verstehen wollen, um bessere Tech-Entscheidungen zu treffen
• Interne IT- oder Digital-Teams, die mit Modern-Stack-Setups in Kontakt kommen wollen

Nachhaltiger Mehrwert

Anders als ein klassisches Agentur-Projekt, das dir ein Produkt liefert, vermittelt das Bootcamp die Fähigkeit, viele Produkte selbst zu bauen. Du hast danach nicht nur eine fertige Web-App, sondern auch das Team, das die nächste eigenständig macht. Wer lieber begleitet startet, findet in unserer Workshop-Begleitung das passende Format dafür.

Interesse? Schreib mir über das Kontaktformular — wir besprechen in einem 30-Min-Call dein konkretes Szenario.

Q&A — die häufigsten Fragen zum AI + No-Code-Setup

Kann ich wirklich eine produktionsreife Web-App ohne Coding-Background bauen? Ja, mit der richtigen Begleitung in den ersten Schritten. Du wirst dabei Coding-Konzepte lernen (Git, ENV, Builds) — aber nicht selbst Code schreiben müssen. Iteratives Lernen on-the-job.

Wo sind die Grenzen? Komplexe Backend-Logik (Multi-Step-Workflows, Daten-Pipelines, Echtzeit-Features), tiefe Hardware-Integration (Mobile-Apps mit Bluetooth o.ä.), und sehr hohe Performance-Anforderungen (Spiele, Real-Time-3D) — da brauchst du klassische Software-Entwickler:innen. Für wiederkehrende Betriebsprozesse lassen sich diese Grenzen aber oft mit Multi-Agent-Workflows verschieben, statt alles selbst zu coden.

Was passiert, wenn der Stack 2027 anders aussieht? Wird er. Cloudflare wird mehr Features bringen, Cursor/Claude Code werden besser, neue AI-Design-Tools kommen. Aber: das Grund-Pattern (Konzept → Design → Code → Repo → Hosting → Forms/Email) bleibt. Wer das Pattern versteht, kann jeden konkreten Tech-Wechsel mitmachen.

Lohnt es sich für ein Schweizer KMU, einen internen "Web-App-Champion" auszubilden statt eine Agentur zu beauftragen? Ja, in den meisten Fällen. Eine Person im Team, die diesen Stack beherrscht, schlägt jede externe Agentur in Geschwindigkeit, Kosten und Iterations-Tempo — für Standard-MVPs und Marketing-Web-Apps. Für sehr komplexe Custom-Builds bleibt eine Agentur oder Senior-Dev sinnvoll.

Wie sieht es mit Wartung und Updates aus? Cloudflare patcht die Infrastruktur. Cursor/Claude Code helfen bei Dependency-Updates. Wenn du den Stack einmal verstanden hast, ist die Wartung pro Monat realistisch 2–4 Stunden für eine mittelgrosse Site.

Was ist mit Datenschutz und Compliance (DSG, DSGVO)? Cloudflare hat EU-Datenzentren, Resend ebenfalls, Plausible ist DSGVO-konform — der Stack lässt sich sauber compliant aufsetzen. Wichtig: Datenschutz-Erklärung mit konkreten Tool-Nennungen, Cookie-Banner wo nötig, Auftragsverarbeitungsverträge mit Cloudflare und Resend abschliessen.

Mein Fazit

2026 hat sich die Eintrittsbarriere für eigene Web-Apps und MVPs drastisch gesenkt. Wer 2020 noch ein 5-köpfiges Team und 6 Monate brauchte, kann 2026 mit dem richtigen Setup in 2–4 Wochen alleine starten. Das verändert die Spielregeln für Startups, KMU und Innovations-Teams fundamental. Damit aus dem Tempo auch Wirkung wird, koppeln wir das Prototyping bei Bedarf an eine saubere Strategie-Implementation — sonst baust du schnell, aber am Ziel vorbei.

Was sich nicht verändert hat:

• Du brauchst Klarheit, was du bauen willst (Konzept).
• Du brauchst Disziplin, KI-Output zu verifizieren (siehe Denkfallen 14 + 15).
• Du brauchst Iterations-Bereitschaft — erste Würfe sind nie perfekt.

Aber wenn du diese drei Sachen mitbringst — und ein paar Tage Onboarding investierst — hast du 2026 ein Werkzeug, das vor wenigen Jahren noch komplett undenkbar war.

Wenn du Lust auf einen konkreten Start hast, melde dich. Bootcamp, Workshop oder einfach ein Sparring-Call — ich helfe gerne, das Setup für deinen Kontext aufzubauen.