Prototyping Workshop · UVB Akademie KI und Wirtschaft
Von Idee zu
Live-Webseite
Prototyping mit KI, Cursor, GitHub und Netlify.
Luis Rieke
Stiftung der Deutschen Wirtschaft
11. Juni 2026 · Berlin
Du brauchst heute kein Entwicklerteam,
um etwas Echtes zu bauen.
Heute Abend hast du eine URL, die du rumschicken kannst.
Die neue Realität
Die Distanz zwischen Idee
und Launch ist kollabiert.
Früher vs. heute
Was eine Webseite früher gekostet hat.
Und was sie heute kostet.
Früher
- Product Manager
- Designer
- Frontend Developer
- Backend Developer
- DevOps
- QA
→ mehrere Monate
VS
Heute
- Eine klare Idee
- Cursor
- GitHub
- Netlify
- Ein paar gute Prompts
→ ein Abend oder ein Wochenende
Wer ich bin
Luis Rieke
„Ich baue Tech-Produkte, die ich selbst gerne nutzen würde.“
Product
Senior Product Manager bei Finanzguru
Builder
Gründer von Spacifik, Indie Maker, Side Projects
Podcast
Host des Digitalconomics Tech Founder Podcasts
Background
B.Sc. Computer Science, PM mit Dev-Hintergrund
Nichts davon war ein Masterplan. Ich habe einfach angefangen, Dinge zu bauen.
Meine Stationen
Vom Support-Ticket zum Produkt-Launch.
Support
Searchmetrics
SEO-Software, Einstieg in Web & Softwareprodukte
PM
Starthilfe
Gründungsplattform, AI-Chatbot auf GCP
Dev → PM
Europace / Finn
FinTech, Self-Service-Baufinanzierung
PM
Usercentrics
Privacy-Produkt, Launch über 4 Browser + iOS/macOS
Senior PM
Finanzguru
Personal Finance, Subscription, Growth
Parallel seit 2018: Spacifik — eigene UG für Webprojekte, DNS, Server-Setups, CI/CD mit GitHub und Netlify. Genau der Stack von heute.
Tagsüber
Mein Job: Finanzguru.
Damit ihr wisst, dass ich nicht nur rede.
3,5 Mio
registrierte User
25 Mio €+
Funding
Plus
Subscription, Pricing, Conversion, Retention — mein Bereich
Seit Dezember 2024 verantworte ich dort Wachstum, Produktstrategie und das Subscription-Modell — und den Launch von Finanzguru Split.
Tagsüber · Finanzguru Split
Split: App für geteilte Ausgaben.
Lief besser als gedacht.
130k+
User in 6 Monaten
228k
Gruppenmitglieder
1,54 Mio
Transaktionen
4.8 ★
App Store & Play Store, 1.800+ Reviews
#1
Finance im App Store (zeitweise)
Organisch
Gruppen funktionieren nur mit anderen — User laden User ein
Davor
Ein paar Jahre Enterprise, FinTech
und echte Teams.
Usercentrics · Product Manager
Neues Privacy-Produkt von Discovery bis Delivery gelauncht
Browser-Extension für Chrome, Firefox, Edge & Safari plus iOS/macOS-App.
Team: 3 Entwickler, 1 Architekt, 1 Designer, 1 Marketer.
Usercentrics: ~100 Mio € ARR (2023), 100k+ zahlende Kunden.
Europace / Finn · React Dev → Junior PM
Self-Service-Plattform für Immobilienfinanzierung gebaut
2,5 Mio Finanzdokumente geteilt, 2,4 TB Daten übertragen, 400k User-Aktivierungen,
+10 % Abschlussrate bei Berater:innen. Europace bewegt ~90–100 Mrd € Volumen pro Jahr.
Ich bin kein Genie.
Ich baue einfach seit Jahren Dinge.
Und KI hat genau das brutal beschleunigt.
Abends & am Wochenende
Ich rede nicht nur über Bauen.
Ich baue ständig.
App
Lystl
Shopping List & Kochbuch für besseres Kochen
Community
Tech Explorer
Slack-Community für Berlin Tech Events
Event
AI Mini Hackathon
Berlin, bauen statt reden
Podcast
Digitalconomics
Tech-Founder-Podcast, Deutsch & Englisch
Webseite
Move to Germany
Guide für den Umzug nach Deutschland
Tool
Usermap
User-Feedback sichtbar machen
Tool
Klappbrotpreisbremse
Ein Internet-Spaß mit Haltung
Agentur
Spacifik
Webprojekte, Server, CI/CD seit 2018
+ Chords & Lyrics, Unplug & Recharge und ein Dutzend kleiner Webtools. Vieles davon ist gefloppt. Ein paar Sachen sind geflogen. So funktioniert das.
Mini Case Study · Kochbuch-App
Zwei Abende gebaut.
Version 1 war hässlich. Egal.
2
Abende Bauzeit — mit KI, neben dem Vollzeitjob
10.000
User in den ersten zwei Monaten
1
Person. Kein Team, kein Budget, kein Sprint-Planning.
Sie war nicht schön. Sie war live. Das hat gereicht.
Was daran verrückt ist
Vor wenigen Jahren hätte ich dafür
ein Team und Monate eingeplant.
Ich weiß das, weil ich in genau solchen Teams gearbeitet und solche Teams koordiniert habe.
Meine These
KI ersetzt nicht deine Ambition.
KI multipliziert deine
Umsetzungsgeschwindigkeit.
Warum ihr
Ihr sitzt gerade in einer
ungewöhnlich guten Position.
- Interdisziplinär — ihr seht Probleme, die Entwickler:innen nie sehen
- Ambitioniert — ihr seid hier, am Ende einer intensiven Woche
- Nah an echten Problemen — Studium, Projekte, Engagement
- Keine Legacy — kein alter Code, keine alten Gewohnheiten
- Zugang zu den Tools — alles, was ihr braucht, ist heute kostenlos oder fast kostenlos
Die besten KI-Produkte entstehen dort,
wo Fachwissen auf
Umsetzungsgeschwindigkeit trifft.
Psychologie
Maschinenbau
Jura
Physik
BWL
Bildung
Immobilien
Cognitive Science
IT-Sicherheit
Medienproduktion
Was im Raum steckt
Fast alles im Raum passt in 4 Typen.
01
Portfolio
Persönliche Seite, akademischer CV, Lehrtätigkeits-Portfolio
02
Projekt / Verein
Politische Bildung, studentischer Verein, Sport-Sponsoring, Persönlichkeitsentwicklung
03
Startup / Landingpage
Bildungs-Startup, Sensorik für Brücken, Quantum-Ideen, Kanzlei mit Newsfeed
04
Tool / Mini-App
Ableitungs-Rechner, KI-Plattform für Papers, Paywall für Lernvideos, Rezeptseiten
Noch keine Idee? Auch gut — heute geht es um den Skill, nicht um die Idee.
Heute · 15:00–19:30
Der Plan für heute.
15:00 – 15:25
Opening — Kontext, Beispiele, was heute möglich ist
Talk
15:25 – 15:45
Wie man KI richtig führt — Prompting & Produktdenken
Input
15:45 – 16:30
Gemeinsames Setup — Cursor, GitHub, Netlify
Setup
16:30 – 17:15
Erste Webseite bauen — gemeinsam, Schritt für Schritt
Hands-on
17:15 – 17:30
Pause & Checkpoint
Pause
17:30 – 18:45
Freie Bauphase — dein eigenes Projekt
Bauen
18:45 – 19:15
Deploy, Debugging, Design-Polish
Ship
19:15 – 19:30
Showcase, nächste Schritte, Abschluss
Showcase
Erwartung
Was wir heute bauen.
- Eine saubere, echte Webseite
- Lokal in Cursor — mit KI generiert und iteriert
- Optional mit React / Vite, sonst einfaches HTML & CSS
- Auf GitHub gespeichert und versioniert
- Mit Netlify live im Internet veröffentlicht
- Mit gutem Design, echtem Text und klarer Struktur
Erwartung
Was wir heute nicht bauen.
- Keine fertige, skalierbare SaaS-App
- Kein perfektes Backend
- Kein vollständiges Payment-System
- Kein rechtssicheres Produkt
- Keine Production-App mit Accounts, Datenbank, Auth & Monitoring
- Keine fertige Mobile App im App Store
Aber: Wir lernen heute genau den Workflow, der danach dorthin führt.
Jede App beginnt als
Interface, Story und
erster Prototyp.
Die Toolchain
Drei Tools. Ein Workflow.
Bauen
Cursor
KI-Code-Editor — hier entsteht dein Projekt
→
Speichern
GitHub
Versionierung und Zuhause für deinen Code
→
Veröffentlichen
Netlify
Automatisches Deployment — deine Live-URL
Genau dieser Stack treibt unzählige echte Produkte an. Kein Spielzeug-Setup.
Tool 1 von 3
Cursor
Ein KI-Code-Editor, den du wie einen Junior Developer führst.
- Nicht „ChatGPT neben dem Code“ — die KI arbeitet direkt in deinem Projekt
- Erstellt Dateien, ändert Code, analysiert Fehler
- Verbessert Designs und macht Refactorings
- Du gibst Richtung — Cursor liefert Umsetzung
Tool 2 von 3
GitHub
Der Speicherort und die Versionshistorie deines Projekts.
- Kostenlos
- Jeder Stand deines Projekts bleibt wiederherstellbar
- Grundlage für automatische Deployments
- Der professionelle Standard — weltweit
Tool 3 von 3
Netlify
Der schnellste Weg von Code zu Live-Webseite.
- Kostenloser Einstieg
- Verbindet sich direkt mit deinem GitHub-Repo
- Jede Änderung geht automatisch live
- Ideal für Landingpages, Portfolios, Projektseiten und statische Apps
Kosten & Zugang
Heute kostet dich das: fast nichts.
GitHub
Kostenlos
Netlify
Kostenlos
Cursor
Großzügiger Free Tier
Falls der Free Tier nicht reicht
Cursor Pro: 20 $/Monat — mit Referral ≈ 8,68 € im ersten Monat
cursor.com/referral?code=BS6I1IHD8DV1 ·
Wenn du meinen Code nutzt, übernehme ich die Kosten für deinen ersten Monat.
Bonus · Optional
Free Featherless API Credits für Open-Source-LLMs — für alle, die später weiter experimentieren wollen.
Die wichtigste Fähigkeit
Nicht coden.
Sondern klar sagen,
was gebaut werden soll.
So bitte nicht
Der Prompt, den alle zuerst schreiben.
Prompt
„Mach mir eine Website.“
Vage rein, generisch raus. Die KI kann nicht lesen, was du meinst — nur, was du schreibst.
So geht's besser
Ein guter Prompt beantwortet 7 Fragen.
Ziel — was soll die Seite erreichen?
Zielgruppe — für wen ist sie?
Inhalt — welche Sektionen, welche Botschaft?
Designrichtung — welcher Stil, welche Referenzen?
Technische Constraints — einfach halten, welche Tools?
Output — welche Dateien sollen entstehen?
Iteration — was verbessern wir im nächsten Schritt?
Copy-Paste-Prompt · Typ 1
Portfolio
prompt-portfolio.txt
Create a clean personal portfolio website for me. Include a hero section, short bio, projects, skills, contact section, and a simple navigation. The design should feel like Linear and Apple: minimal, sharp, premium, dark mode, glass cards, subtle gradients. Make it responsive and easy to edit.
Alle Prompts bekommt ihr gleich als Datei zum Kopieren.
Copy-Paste-Prompt · Typ 2
Startup-Landingpage
prompt-startup.txt
Create a startup landing page for [IDEA]. Target audience: [AUDIENCE]. Problem: [PROBLEM]. Solution: [SOLUTION]. Include hero, problem, solution, features, how it works, social proof placeholder, FAQ and CTA. Make it look like a premium SaaS landing page inspired by Linear, Vercel and Apple.
Die Platzhalter in [KLAMMERN] füllst du mit deinem Projekt.
Copy-Paste-Prompt · Typ 3
Verein / Projekt
prompt-projekt.txt
Create a modern website for [PROJECT/ORGANIZATION]. It should include mission, team, events, ways to participate, and contact. Make it warm, trustworthy, modern and easy to update.
Copy-Paste-Prompt · Typ 4
Tool / Mini-App
prompt-tool.txt
Create a small single-page web tool: [WHAT THE TOOL DOES]. Inputs: [INPUTS]. Output: [OUTPUT]. Build it with plain HTML, CSS and JavaScript on one page. Premium dark design, large typography, glass cards. Keep the logic simple, readable and well commented.
Plus drei Bonus-Prompts in der Datei: Design verbessern · Debugging · Netlify-Check.
Live-Demo
Was wir jetzt gemeinsam machen.
Neues Projekt
→
Erste Seite
→
Design verbessern
→
GitHub
→
Netlify
→
Live 🟢
Ich mache jeden Schritt am Beamer vor. Ihr macht parallel mit. Wer hängt, sagt sofort Bescheid.
Setup-Check
Das brauchst du. Jetzt abhaken.
- Cursor installieren cursor.com
- GitHub Account anlegen github.com
- GitHub Desktop installieren desktop.github.com
- GitHub Desktop einrichten mit GitHub Account anmelden
- Mini-Projekt in Cursor anlegen Prompt: „HTML + CSS Webseite“
- Mini-Projekt anschauen index.html im Browser öffnen
- Zu GitHub pushen via GitHub Desktop
- Netlify Account anlegen netlify.com — mit GitHub anmelden
- Netlify aufsetzen Repo verbinden → Deploy
1
Gemeinsamer Schritt
Projektordner in Cursor öffnen.
- Cursor starten
- „Open Folder“ → deinen leeren Projektordner wählen
- Chat-Panel öffnen (Cmd+L / Ctrl+L)
2
Gemeinsamer Schritt
Den ersten Prompt ausführen.
prompt-landingpage.txt
Create a modern responsive landing page for [PROJECT NAME]. The website should explain what the project does, who it is for, why it matters, and include a clear call to action. Use a premium Apple-like glassmorphism design, dark mode, large typography, subtle gradients, clean cards, and mobile-first responsive layout. Keep the code simple and easy to understand. Create all necessary files.
3
Gemeinsamer Schritt
Verstehen, was entstanden ist.
- index.html — die Struktur deiner Seite
- styles.css — das Aussehen
- script.js — das Verhalten
- Frag Cursor: „Explain what each file does, in simple terms.“
4
Gemeinsamer Schritt
Design iterieren.
prompt-design.txt
Improve the visual design dramatically. Make it feel more premium, more spacious, more modern and more consistent. Use better typography, spacing, visual hierarchy, responsive layout, subtle animations, glassmorphism, gradients and clean cards. Do not add unnecessary complexity.
Danach gezielt nachschärfen: „Make the hero section bolder.“ — „Use a warmer color palette.“
5
Gemeinsamer Schritt
Zu GitHub pushen.
- GitHub Desktop öffnen → „Add local repository“ → deinen Projektordner wählen
- Commit-Nachricht schreiben → „Commit“
- „Publish repository“ — fertig, dein Code liegt auf GitHub
6
Gemeinsamer Schritt
Mit Netlify live gehen.
- netlify.com → „Add new site“ → „Import an existing project“
- GitHub verbinden → dein Repo wählen → „Deploy“
- ~30 Sekunden warten → deine Live-URL
- Ab jetzt: jeder Push geht automatisch live
Checkpoint · 17:15
Alle haben jetzt
etwas Sichtbares.
Lokal oder live — beides zählt. Kurze Pause, dann wird's persönlich.
17:30 – 18:45
Jetzt baust du
dein eigenes Ding.
75 Minuten. Dein Projekt, dein Tempo. Die Prompts hast du — die Idee auch.
Regeln für die Bauphase
So kommst du heute am weitesten.
Klein starten — eine Seite reicht
Nicht perfektionieren — Version 1 darf rough sein
Erst live, dann schön
Fehlermeldungen einfach kopieren und der KI geben
KI erklären lassen, nicht nur machen lassen
Oft committen — guter Stand ist ein Speicherstand
Nicht im Tooling verlieren — bauen, nicht konfigurieren
Prinzipien
Was heute wirklich zählt.
Erst live, dann perfekt
Gute Prompts sind Produktentscheidungen
KI braucht Richtung, nicht Magie
Kleine Schritte gewinnen
Copy-paste ist erlaubt — Verstehen ist besser
Fehler sind Teil des Workflows
Das Ziel ist nicht, heute
Entwickler:in zu werden.
Sondern die Angst vor Umsetzung
zu verlieren.
Während der Bauphase
Ich bin heute dein Pair Programmer.
Setup-Probleme
Fehlermeldungen
Prompts schärfen
Produktstruktur
Design-Feedback
Deployment
Einfach Hand heben oder zu mir kommen. Keine Frage ist zu klein.
Wenn etwas kaputt ist
Debugging ist ein Loop, kein Drama.
Fehler lesen
→
Klein reproduzieren
→
Cursor fragen
→
Änderung testen
→
Committen
prompt-debugging.txt
I get this error: [PASTE ERROR]. Explain what it means in simple terms. Then fix the code. Keep the solution minimal and explain which files you changed.
Schon fertig?
Es gibt immer einen nächsten Schritt.
Eigene Domain
Analytics
Newsletter-Signup
Kontaktformular
CMS
Datenbank
Login
Payments
Mobile App
Jedes davon ist ein eigener Prompt entfernt. Such dir eins aus und frag die KI, wie es geht.
Ausblick
Von der Website zur SaaS-App.
Frontend ✓ heute
→
Auth
→
Datenbank
→
Payments
→
E-Mail
→
Analytics
→
Admin
Derselbe Workflow: Cursor führt dich durch jeden Baustein. Supabase, Stripe & Co. machen den Rest.
Ausblick
Von der Website zur Mobile App.
Expo / React Native
→
Supabase
→
Stripe
→
Push Notifications
→
App Store
Genau so ist Lystl entstanden — die Kochbuch-App mit 10.000 Usern. Gleicher Workflow, anderes Ziel.
Was ich euch mitgeben will
Ihr müsst nicht warten,
bis euch jemand baut,
was ihr im Kopf habt.
Ab heute ist die Distanz zwischen
Idee und Launch
viel kleiner.
Bleibt in Kontakt