Vibe Coding: From prototype to production with Lovable.dev & Claude Code
Tired of seeing good ideas get stuck on paper or lost in slides? This workshop shows you how to bring them to life in just one day. You’ll start by prototyping fast with Lovable.dev, then move on to Claude Code to add features, refine, and deploy. No coding background required – just curiosity and the drive to build.
About this workshop
Master the ultimate vibe coding workflow: rapid prototyping with Lovable.dev, then advanced customization with Claude Code. You'll experience the full journey from initial concept to polished, deployed app using Lovable's conversational development and Claude Code's agentic terminal-based coding.Build one complete app using both platforms - start fast with Lovable's natural language prompts, then add custom features and polish with Claude Code's intelligent command-line tool.
Build one complete app using both platforms
Start fast with Lovable's natural language prompts
Add custom features and polish with Claude Code's intelligent command-line tool
For who?
This workshop is tailored for:
Designers ready to build their own products end-to-end
Product managers who want to prototype and iterate at lightning speed
Entrepreneurs looking to validate and refine ideas without hiring developers
Creative professionals curious about AI-powered development workflows
No coding experience required - Claude Code handles the technical complexity while you focus on features and functionality.
AI is your smart intern with a PhD – the more context you give, the more impressive things it can do.
The magic happens when we stop trying to replace creativity and start eliminating the time-consuming, repetitive, error-prone tasks that keep us from our best work.
What you'll learn
Morning: Lovable foundation & styling
- How the web works from a designer perspective
- React mental models: Components as design systems
- Prompt engineering: Research → PRD → MVP → Deploy workflow
- Tailwind CSS fundamentals and responsive design
- Professional styling with Shadcn/ui components
Afternoon: Claude Code enhancement & production
- Terminal-based development setup and workflows
- Database integration and user authentication systems
- Performance optimization and custom domain deployment
What you'll take home
Your complete app
- Working application - from prototype to production-ready
- Live deployment - accessible via custom domain
- User authentication - complete with personalized dashboards
- Database integration - persistent data and user management
Professional workflow
- Lovable → Claude Code methodology - proven workflow for rapid development
- Prompt engineering templates - 50+ tested prompts for app features
- Terminal AI mastery - conversational coding techniques for designers
- Deployment checklist - production-ready launch process
Ongoing resources
- Private skool community - peer learning and ongoing support
- Monthly tool updates - insights on platform improvements and new features
- Advanced tutorial library - video guides for complex implementations
- Direct instructor access - follow-up questions and troubleshooting
Schedule
- Platform setup and how the web works (designer perspective)
- Live demo: Research prompt → PRD prompt → MVP prompt → Deploy
- Students build their chosen app concept with Lovable
- Each student leaves with their hobby app deployed!
- Tailwind CSS fundamentals for designers
- Component-based styling and design systems thinking
- Responsive design and Shadcn/ui components
- Making your prototype look professionally designed
He who feeds the brain must also fill the stomach.
- Installing and configuring Claude Code CLI
- Form handling, user input, and conditional rendering
- Adding dynamic features through conversational coding
- Database concepts and Supabase integration
- User authentication with magic links
- CRUD operations and data persistence
- Custom domain setup and DNS configuration
- Showcase final applications to the group
- Building your ongoing AI development practice
Aswin Ranganathan
Design Manager at Delivery Hero and AI Enthusiast, Aswin has guided 100+ designers through their AI accelerated prototyping journey.His methodology focuses on building full stack applications through clear understanding of the fundamentals, leveraging the strengths of conversational prototyping and agentic coding assistance.
Tickets
We're really excited that you join us for this workshop.
Vibe Coding
Vibe Coding
(e.g. self-employed, boss hopeless getting budget, unemployed, student)
.png)
.png)
