START&CONNECT
Live | Uni Kiel
09:00 bis 17:00 | Donnerstag 28.05.2026

HowTo: Deinen Prototyp mit KI bauen.

Von der Idee zum MVP. An einem Tag.

Am Ende des Tages hat jeder hier einen funktionierenden Prototypen. Wir gehen den kompletten Weg gemeinsam: Idee, Featureliste, Tech-Entscheidungen, Bauen mit Claude Code. Kein Theorie-Workshop, sondern ein Bauen-Workshop.

DatumDo 28.05.2026
FormatPräsenz Kiel
Dauer8 Stunden inkl. Pausen
FürGründer mit Idee
C
Claude Code
aktiv
Bau mir einen Prototyp für eine Buchungs-App für Personal-Trainer. Trainer legt Slots an, Kunden buchen, Reminder per Mail.
✓ Plan erstellt: 4 Features, 2 Pages, Auth via Supabase Magic-Link. Tech: Next.js + Supabase + Vercel. Soll ich loslegen?
Ja, los.

Der Tag im Überblick.

09:00 bis 09:30Block 01Vorstellung 09:30 bis 10:00Block 02Showcase 10:00 bis 11:00Block 03Prototyp starten 11:15 bis 12:45Block 04Was muss ich bauen 13:45 bis 14:00Block 05Vorbereitung 14:00 bis 16:30Block 06Entwicklung 16:30 bis 17:00Block 07Showcase & Q&A Take-AwayBonusMaterialien
Ben Scheurer
Wer heute mit euch baut

Ben Scheurer | Start & Connect

Seit 2018 selbstständig. Vom Freelancer zum Software-Entwickler. Heute betreibe ich vier eigene Produkte (Spotlight, Atlas, Outreach, Connector) und baue Custom-Lösungen für Selbstständige. Mein gesamter Stack entsteht mit KI, jeden Tag. Genau diesen Workflow gebe ich euch heute mit.

Block 01

Ankommen & kennenlernen.

Erste halbe Stunde: ich will wissen, wer ihr seid und was ihr heute mitnehmen wollt. Setup machen wir nach dem Mittag, kurz bevor wir bauen. Tools brauchst du erst dann.

Vorstellungsrunde

Wer bist du, was willst du bauen?

Reihum: 2 Minuten pro Person. Name, Hintergrund, Idee in einem Satz, was du heute am Ende mitnehmen willst. Damit weiss ich, wo ich euch später individuell abhole.

Block 02

Was ich schon so gebaut habe.

Zuerst eine kleine Demo, die wir parallel zum Workshop in 10 Minuten aufgesetzt haben. Danach vier eigene Produkte, die alle mit dem gleichen Workflow entstanden sind. Damit ihr seht, was am Ende des Tages real möglich ist.

Demo zum Einstieg | 10 Minuten

Vercel + Supabase Demo.

Genau der Stack, den ihr heute lernt. In 10 Minuten aufgesetzt.

Wir haben das eben parallel zum Workshop gebaut. Next.js + Supabase + Vercel, mit Login, Datenbank und Deploy. Ladet das ZIP runter, packt es in einen Ordner und gebt es Claude als Startpunkt. Spart euch die ersten Schritte und ihr seht wie so ein Setup von innen aussieht.

vercel-supabase-demo-startandconnect.vercel.app
Demo · Next.js + Supabase + Vercel

Login. Daten. Deploy.

Magic-Link-Login via Supabase Auth, ein Dashboard nach Login, gehostet auf Vercel. Eine Stunde Arbeit, aufgesetzt mit Claude Code.

Einloggen →
Build 01 | Website-Builder

Spotlight

Marken-Auftritt per KI in Minuten.

Du beschreibst, was du willst. Spotlight baut. Eigene Domain, DSGVO-konform, in Deutschland gehostet. Genau das Ding, mit dem ich diese Workshop-Seite gemacht hab.

Next.js Postgres Stripe Anthropic API
Zu Spotlight →
deine-marke.de
Studio · Marken & Design

Sichtbar. Klar. Live.

Marken-Auftritte für Selbstständige und kleine Teams. In Minuten gebaut, ohne Code.

Portfolio ansehen →
Build 02 | Second Brain & PM

Atlas

Mein Gehirn, mein PM, meine Wissensbasis.

Tasks, Wiki, CRM, Chat, Files. Alles an einem Ort und vor allem: durchsuchbar für KI. Das System, mit dem ich 20 Projekte parallel verwalte ohne den Überblick zu verlieren.

Single-Tenant Yjs Collab MCP-ready
A
Atlas | Projekt MVP
live
Backlog
FeatureUser-Profile-Page
BugLogin-Redirect
In Arbeit
FeatureBooking-Flow v2
Done
SetupAuth Magic-Link
SetupDB-Schema
Build 03 | Cold-Outreach Automation

Outreach

Erst-Kontakte automatisiert, ohne dass es spammy wird.

Recherchiert Leads, personalisiert Mails per KI, schickt sie raus, trackt Öffnungen und Replies. Wenn jemand antwortet, übernehme ich persönlich. So bekomme ich neue Anfragen ohne 40 Stunden Akquise pro Woche.

KI-Personalisierung Mailgun Webhooks
O
Outreach | Pipeline
live
Anna Weber
Capristo GmbH | München
Termin
Marco Schmidt
Studio Form | Berlin
Reply
Lisa Köhler
Atelier 47 | Hamburg
Geöffnet
Tom Berger
Werkstatt Nord | Kiel
Versendet
Build 04 | API-Gateway

Connector

Eine Schnittstelle für alle externen Tools.

Statt in jedem Projekt 20 APIs einzeln anzubinden, redet bei mir alles über Connector. Dokploy, Stripe, Mailgun, Anthropic, alles über einen Endpunkt. Spart enorm Zeit beim Bauen neuer Produkte.

REST-API Discover-Pattern Single-Tenant
C
Connector | API-Gateway
live
Spotlight
Atlas
Outreach
ConnectorAPI-Gateway
Stripe
Mailgun
Anthropic
Block 03

Wie ich eine Prototyp-Entwicklung starte.

Zwei Schritte, die alles entscheiden: erst die richtige Featureliste, dann das richtige Ziel. Beides klingt banal, ist aber meistens der Grund warum Projekte stecken bleiben.

Schritt 01 | Erklärung

Erst die Featureliste. Sonst nichts.

Die Featureliste entscheidet, was du bauen musst. Ohne klare Liste baust du im Kreis. Mit klarer Liste weiss die KI, was sie machen soll. Genau hier scheitern 80 Prozent. Drei Fragen, mehr nicht.

Frage 01

Was muss dein Produkt können?

Schreib alles auf, was dir einfällt. Erstmal ohne Priorisierung. Brain-Dump.

Frage 02

Was muss es nicht können?

Mindestens so wichtig. Was streichst du bewusst, damit du in Tagen statt Monaten fertig wirst?

Frage 03

Was ist die eine Funktion?

Wenn du nur eine bauen dürftest, welche wäre es? Das ist dein Anker, der Rest ist Beiwerk.

Schritt 01 | Beispiel

So sieht eine Featureliste aus.

Eine Markdown-Datei mit drei Blöcken: kann, kann-nicht, EINE Funktion.

Beispiel: Buchungs-App für Personal-Trainer. Trainer legt Slots an, Kunden buchen, Reminder per Mail. Klein, klar, baubar an einem Tag. Genau das Format, das du gleich Claude Code als features.md gibst.

Format-Regeln: kurz, in Bullets, ohne Marketing-Texte. Was-NICHT-Liste ist Pflicht. Die eine Funktion fett markieren.

Vorlage features.md ↑
features.md
# Buchungs-App für Personal-Trainer
## Was muss es können
- Trainer Login (Email-Magic-Link)
- Trainer legt freie Slots an
- Kunde sieht freie Slots auf öffentl. Page
- Kunde bucht mit Name + Email
- Bestätigungs-Mail an beide
## Was es NICHT kann (heute)
- Zahlung beim Buchen
- Wiederkehrende Termine
- Kalender-Sync (Google/Apple)
- Mehrere Trainer pro Account
- iPhone-App
## Die EINE Funktion
Slot anlegen → buchen → Mail
Übung 01

Schreib deine eigene Featureliste.

Leg eine features.md in einem neuen Ordner an. Folge dem Beispiel. Erst Brain-Dump, dann Was-NICHT, dann die eine Funktion markieren. Ich gehe rum.

So gehst du vor

4 Schritte

  • Neuen Projekt-Ordner anlegen
  • features.md erstellen, Titel rein
  • Brain-Dump: alles aufschreiben was dir einfällt
  • Streichen + die eine Funktion markieren
Worauf achten

Tipps gegen typische Fehler

  • Keine Marketing-Bullets ("intuitive Bedienung")
  • Konkret: was klickt der Nutzer, was passiert dann
  • Was-NICHT-Liste muss länger sein als Kann-Liste
  • Wenn unklar: frag mich oder den Nachbarn
Schritt 02 | Erklärung

Features runterbrechen. Vier Stufen.

Jede deiner Features gehört in eine Stufe. Heute kommen wir realistisch bis Stufe 1, mit Glück Stufe 2. Stufe 3 und 4 sind Arbeit für die nächsten Wochen und Monate.

Stufe 01 | heute

Prototyp

Kann heute noch fertig werden.

Eine zentrale Funktion läuft. Nicht schön, nicht stabil, aber sichtbar. Du kannst es jemandem zeigen.

Stufe 02 | Wochen

MVP

Erstes für erste Kunden testbares Produkt.

Kernfunktionen drin, Auth, Bezahlung, minimaler Onboarding-Flow. Erste echte Nutzer arbeiten damit.

Stufe 03 | Monate

Release

Alle wichtigen Funktionen für Kundenerlebnis.

Du nimmst öffentlich Geld dafür. Polish, Edge-Cases, Support-Flow, Rechtliches.

Stufe 04 | nie ganz

Feature-Ready

Alle geplanten Features sind umgesetzt.

Software ist nie fertig. Aber das Produkt ist erwachsen, spürbar reif, mit allem was du dir vorgenommen hattest.

Übung 02

Sortier deine Features in die Stufen.

Geh zurück in deine features.md. Schreib unter jeden Feature-Punkt in welche Stufe er gehört. Markier deine Stufe-1-Features klar, das ist was du heute baust.

So gehst du vor

4 Schritte

  • Jedes Feature mit [P], [M], [R] oder [F] markieren
  • [P]-Features müssen heute gehen, nicht mehr
  • Wenn [P]-Liste zu lang: streichen oder in [M] schieben
  • Ziel: maximal 3 bis 5 [P]-Features
Worauf achten

Realitätscheck

  • Auth ist immer [P] (sonst gibt's keine Demo)
  • Bezahlung ist fast nie [P], meist [R]
  • Eine Sache richtig statt drei halb
  • Im Zweifel: weniger ist mehr
11:00 bis 11:15 Pause 15 Min
Block 04

Was muss ich technisch bauen?

Fünf Aspekte, die du entscheiden musst, bevor du den ersten Prompt schreibst. Wer das überspringt, baut sich in die falsche Richtung und merkt es zu spät.

Aspekt 01

Welcher Software-Typ?

Website, WebApp, App. Komplexität steigt in der Reihenfolge.

Egal was du am Ende willst: bau immer in dieser Reihenfolge. Erst Website, dann WebApp, dann die native App falls wirklich nötig. Wer mit der App startet, verbrennt Zeit und Geld.

Regel: Native App nur wenn du Offline, Push, Kamera oder GPS wirklich brauchst.

Stufe 1 | einfach
Website

Sichtbar, Marketing, Lead-Capture, statische Inhalte.

Stufe 2 | mittel
WebApp

Login, Daten, Interaktion. Läuft im Browser.

Stufe 3 | komplex
Native App

Push, Offline, Kamera, App-Store. Nur wenn nötig.

Aspekt 02

Dein Techstack.

Drei Schichten. Jede macht einen Job.

Du musst nicht Entwickler werden. Aber du musst die drei Schichten verstehen: Wo Daten liegen (DB), wer sie verwaltet (Backend), wie der Kunde sie sieht (Frontend). Wer das versteht, kann KI viel präziser anweisen.

Heute: Next.js + Supabase + Vercel. Damit bist du in Minuten online, ohne Postgres lokal zu installieren.
Später (mein Production-Stack): Next.js + Fastify + Prisma + Postgres + Dokploy. Mehr Kontrolle, eigener Server.
Zusatz wenn nötig: Karten (Mapbox), File-Upload (Supabase Storage, R2), Realtime (Supabase Realtime, Pusher), KI-Calls (Anthropic, OpenAI). Erst dranschrauben, wenn du es wirklich brauchst.

FE
Frontend

Was der Nutzer sieht. Buttons, Forms, Pages. Next.js 15 (App Router) + Tailwind v4 + TypeScript.

BE
Backend

Was im Hintergrund passiert. Logik, Auth, API-Calls. Heute: Next.js Server Actions (kommt mit dem Frontend). Reicht für Prototyp und MVP.

DB
Datenbank + Auth

Wo alles dauerhaft liegt. User, Bestellungen, Inhalte. Supabase gibt dir Postgres + Auth fertig in einem Dashboard.

Übung 03

Tech-Entscheidung für dein Produkt.

Geh in deine features.md. Füg unter dem Titel einen kurzen Tech-Block ein. Software-Typ und Stack. Damit du gleich beim Bauen weisst, was du Claude Code als Rahmen vorgibst.

So gehst du vor

3 Schritte

  • Software-Typ markieren: Website, WebApp oder App
  • Stack notieren: Default oder Abweichung
  • Ein Satz warum: was rechtfertigt deine Wahl
Default empfohlen

Wenn unsicher, nimm das

  • Typ: WebApp (läuft überall im Browser)
  • Frontend: Next.js + Tailwind + TypeScript
  • Backend: Next.js Server Actions
  • DB + Auth: Supabase
  • Hosting: Vercel
Aspekt 03

Design ist Konzeption, nicht Farbe.

Bevor du eine Farbe wählst, beantworte sechs Fragen. Sonst baust du etwas, das hinterher die falschen Leute bedienen.

Frage 01

Wer bedient was?

Ein Nutzertyp oder mehrere? Admin, Kunde, Gast? Jede Rolle braucht eine eigene Sicht.

Frage 02

Simple oder komplex?

Fünf-Klicks-Onboarding für alle? Oder Power-Tool mit Lernkurve? Beides legitim, beides anders.

Frage 03

Self-Service oder Setup?

Meldet sich der Kunde selbst an und legt los? Oder gibt es ein Onboarding-Gespräch mit dir?

Frage 04

Onboarding-Fragen?

Was musst du im ersten Login wissen, damit das Produkt sich sofort richtig anfühlt?

Frage 05

Mobile First?

Schaut der Kunde hauptsächlich am Handy? Oder Desktop? Bestimmt das ganze Layout.

Frage 06

Brand & Tonalität

Sachlich-professionell? Locker-persönlich? KI braucht deine Stimme, sonst klingt es generisch.

Aspekt 04

Sicherheit & Recht.

Für den Prototyp reicht das Grundgerüst. Aber spätestens beim ersten echten Kunden muss das stehen.

01 | Auth

Wer darf rein?

  • Email-Magic-Link (einfach)
  • Google OAuth (bekannt)
  • Passwörter mit Hash
02 | Daten

Wo liegen sie?

  • EU-Hosting (Frankfurt, Hamburg)
  • Backups täglich
  • Verschlüsselung at-rest
03 | DSGVO

Was musst du juristisch?

  • Impressum, Datenschutz
  • AGB (bei Verkauf)
  • AVV mit Subunternehmen
Übung 04

Konzept-Block in deine features.md.

Letzter Schritt vor dem Bauen. Pack alle Konzept-Entscheidungen aus Block 04 in deine features.md. Damit hat Claude Code morgen Vormittag den vollen Kontext und kann sauber arbeiten.

So gehst du vor

4 Blöcke ergänzen

  • Zusatz-Tech: brauche ich Karten, Files, Realtime?
  • Design: 6 Fragen kurz beantworten (Rollen, Mobile, Tonalität)
  • Auth: Magic-Link, OAuth oder Passwort?
  • Security-Basics: EU-Hosting, Impressum, Datenschutz
Worauf achten

Kurz halten

  • Pro Block 2 bis 4 Bullets, nicht mehr
  • Konkret entscheiden statt offen lassen
  • Wenn unklar: Default wählen und weitermachen
  • features.md soll auf eine Bildschirmseite passen
12:45 bis 13:45 Mittag 60 Min
Block 05 | Vorbereitung

Erst der Plan, dann das Setup.

Featureliste teilen, Plan erstellen lassen, freigeben, machen lassen.

Direkt nach dem Mittag. Bevor du Tools installierst, gib Claude deine features.md und lass dir einen Entwicklungsplan erstellen. So weisst du genau, was du als nächstes brauchst. Dann erst Setup, dann bauen. Nicht andersrum.

claude
> Hier meine Featureliste in features.md. Erstell mir einen Entwicklungsplan.
· reading features.md
· analyzing scope
✓ Plan erstellt in PLAN.md
7 Steps, ca. 45 Min, Stack: Next.js + Supabase + Vercel
 
> Plan sieht gut aus. Leg los.
· creating project
✓ Step 1/7 done
Block 05 | Übung 05

Plan an Claude geben.

Direkt nach dem Mittag. Du hast deine features.md aus Block 03 + Konzept-Block aus Block 04 fertig. Jetzt gibst du das Claude und lässt dir einen Entwicklungsplan erstellen. Damit du in Block 06 sofort loslegen kannst.

So gehst du vor

4 Schritte

  • features.md offen haben (mit Konzept-Block)
  • Claude sagen: "Erstell mir einen Entwicklungsplan basierend auf features.md"
  • PLAN.md von Claude lesen und prüfen
  • Plan freigeben oder anpassen lassen
Was du am Ende hast

Deliverables

  • features.md final & vollständig
  • PLAN.md mit klaren Schritten
  • Freigegebener Plan, bereit für Setup
  • Klares Bild was Claude in Block 06 baut
Block 06 | Setup

Jetzt das Setup.

Mit deinem Entwicklungsplan im Rücken weisst du was du brauchst. Macht jetzt Accounts, installiert Claude Code, holt eure API-Keys aus Supabase und Vercel. Auf der nächsten Slide zeig ich euch, wie ihr die Keys an Claude übergebt.

Pflicht
1

Laptop & WLAN

Eigener Laptop dabei (Mac oder Windows). Uni-WLAN-Zugang.

Pflicht
2

Claude Code Pro

20 €/Monat. Der Hauptweg heute. Bei normaler Nutzung ca. 90 Min produktive Arbeit pro Reset-Zyklus. Bringt Node und alles weitere selbst mit.

claude.com/product/claude-code
Pflicht
3

Supabase Account

Deine Datenbank + Auth in der Cloud. Free Tier: 500MB Postgres, 50k Nutzer, Auth fertig eingebaut.

supabase.com
Pflicht
4

Vercel Account

Dein Hosting. Free Tier: unlimited Deploys, 100GB Bandwidth, eigene Domain möglich.

vercel.com/signup
Alternative ohne Abo
5

Antigravity

Googles Coding-Agent, aktuell in Beta und kostenlos. Andere Bedienung als Claude Code, grössere Free-Limits.

antigravity.google
Alternative ohne Abo
6

OpenAI Codex CLI

OpenAIs Terminal-Agent. Free-Tier mit ChatGPT-Account, dahinter Pay-per-Use. Solide Alternative wenn du eh schon OpenAI nutzt.

openai.com/codex
Block 06 | API-Keys

Gib Claude deine Keys.

Eine .env-Datei mit allen Zugangsdaten. Dann richtet Claude den Rest selbst ein.

Hol dir aus dem Supabase- und Vercel-Dashboard die Werte unten. Pack sie in eine .env in deinem Projekt-Ordner. Sag dann Claude: "Lies meine .env. Setze ein Next.js-Projekt auf, verbinde mit Supabase und Vercel, und leg eine erste Page live."

Wichtig: .env niemals in Git pushen. Die Datei muss in .gitignore stehen (macht Claude beim Setup automatisch).

.env
# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://...supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...
# Vercel
VERCEL_TOKEN=...
VERCEL_PROJECT_NAME=mein-prototyp
## Wo finde ich das
Supabase: Dashboard → Project Settings → API
Vercel: Account Settings → Tokens → Create
## Dann zu Claude sagen
"Lies .env, setze Next.js + Supabase + Vercel auf."
Block 06 | Runde 01

30 Minuten Bauen. 10 Minuten Austausch.

Jetzt freie Arbeit am eigenen Prototyp. Mach was du gerade brauchst. Keine Vorgabe von mir, du kennst dein Projekt am besten.

Beispiele was anstehen könnte

Du arbeitest

  • Setup-Reste oder Fehler klären
  • Erstes Kern-Feature bauen
  • Bug mit Claude debuggen
  • Datenmodell & DB-Tabellen anlegen
Austausch

Pause & Show

  • Aufstehen, kurz bewegen
  • Nachbarn deinen Stand zeigen
  • Ideen klauen, inspirieren lassen
Block 06 | Runde 02

30 Minuten Bauen. 10 Minuten Austausch.

Weiter geht's. Plan checken, Stand prüfen, nächsten Brocken angehen. Wer schon was deployed hat: iterieren und Feedback der Nachbarn einbauen.

Beispiele was anstehen könnte

Du arbeitest

  • Nächstes Feature angehen
  • Stuck? Claude erklären lassen was schiefläuft
  • Forms, Validation, Edge-Cases
  • Texte und Inhalte schreiben
Austausch

Pause & Show

  • Aufstehen, kurz bewegen
  • Stand zeigen, Feedback einholen
  • Tipps der anderen mitnehmen
Block 06 | Runde 03

30 Minuten Bauen. 10 Minuten Austausch.

Letzte Runde vor der Pause. Spätestens jetzt: Layout aufräumen, Texte schärfen, fehlende Bugs killen, deployen. Damit du nach der Pause beim Showcase eine Live-URL hast die du teilen kannst.

Beispiele was anstehen könnte

Du arbeitest

  • Polish: Spacing, Farben, Texte
  • Letzte Bugs fixen
  • Neu deployen, Live-URL prüfen
  • URL teilen-bereit machen
Austausch

Pause & Show

  • Aufstehen, Energie holen
  • Live-URL kurz zeigen
  • Erste Reaktionen sammeln
15:45 bis 16:00 Pause 15 Min
Block 07

Showcase & Q&A.

Jeder zeigt 2 Minuten, was heute entstanden ist. Danach offene Fragerunde zu allem, was noch hängt.

Was hast du gebaut?

2 Minuten pro Person. URL teilen, kurze Erklärung, eine Frage in die Runde. Wer keine 2 Minuten füllt: alles gut, hauptsache wir sehen es kurz.

Take-Away

Materialien zum Mitnehmen.

Acht Markdown-Dateien, die ihr direkt in euer eigenes Projekt-Verzeichnis legt. KI-agnostisch, funktionieren mit Claude Code, Antigravity, Codex, Cursor, allen. Damit baut ihr nach dem Workshop selbständig weiter.

MD

webapp-scoping.md

Idee zu MVP zuschneiden. Featureliste, Kern-Funktion, Was-NICHT-Liste.

Download ↓
MD

webapp-prompting.md

KI-Workflow: Plan-Mode, Iterations-Loops, /clear-Hygiene.

Download ↓
MD

webapp-design.md

Konzeption: Nutzer-Rollen, Onboarding, Self-Service, Tonalität.

Download ↓
MD

webapp-techstack.md

Default-Stack: Next.js, Postgres, Vercel. Wann was anderes.

Download ↓
MD

webapp-auth.md

Auth-Patterns: Magic-Link, OAuth, Passwort. Was wann.

Download ↓
MD

webapp-security.md

DSGVO, EU-Hosting, Backups, Verschlüsselung.

Download ↓
MD

webapp-deploy.md

Von "läuft lokal" zu "im Netz". Vercel, Dokploy, Domain.

Download ↓
MD

webapp-freestack.md

Free-Stack: Antigravity, Codex, Anthropic-API. Wenn 20 € zu viel.

Download ↓
Danke | Ende

Bleiben wir in Kontakt.

Wenn du an deinem Prototyp weiterbaust und steckenbleibst, oder einen Sparring-Partner für dein Projekt suchst, schreib oder ruf einfach an.

Ben Scheurer

Start & Connect | Software für Selbstständige

01 / 01 ↑ ↓