AI Prototyping for Product Designers
Anna Arteeva
a product design leader and AI educator
Kevin Cannon
Design Director @ Superhuman/Grammarly
This course is popular
3 people enrolled last week.
Vibe-code functional apps with design systems, real data and AI-powered logic.
Designers who code used to be called unicorns. Now it's becoming the baseline, and the gap between those who can build and those who can't is widening fast.
The good news is that AI tools have changed what's possible. But the designers who get the most out of them aren't just prompting their way through UIs. They understand how apps actually work: components and composition, data and state, APIs and logic. That vocabulary is what turns vibe-coding from a party trick into a professional skill.
This course was built specifically for designers who want to close that gap. We go deep enough on frontend architecture, data, and AI functionality that you can make real decisions about tools, trade-offs, and what's worth building.
After completing this course, you'll be able to turn your designs into working web apps: styled to match your visual language, wired to real data, and powered by AI functionality.
A functional web app, styled to match a brand and using design-system components.
Complex interactions using JS libraries.
Non-trivial logic and dynamic data.
AI features wired via API keys, prompts, and guardrails.
Collaborate and handover via GitHub.
Tooles used: Lovable, Cursor, Claude Code
What you’ll learn
The technical vocabulary and depth designers need to build functional prototypes. No coding experience required.
How vibe-coding fits into a professional design workflow
The AI coding landscape: Lovable, v0, Figma Make, Replit, Cursor, Antigravity, Codex, Claude Code, When to use what.
Prompting strategies for exploration and creativity, structured builds, and functional product features
How modern frontends are structured: pages, components, composition, and why it matters for your work
React, Tailwind, and shadcn/ui. The tech stack most AI tools are built on
Design tokens, themes, and reusable UI kits that hold up beyond a single prototype
Cursor + Claude Code + Figma MCP setup and back-and-fourth between design and code
Responsive layouts, accessibility, and personalised experiences (theme, language, device, location)
Building with design systems and reusable components
How backend, frontend, data, and APIs fit together — explained for designers
Working with databases and dynamic data: Supabase, public APIs, and data visualisation
Debugging basics and reading your app in the browser
The AI model landscape: what LLMs, image generation, voice, and vision models unlock
Working with AI APIs directly: keys, cost, latency, failure modes
Agentic tools and Claude Code as an engineering partner for moving beyond the prototype
Who this course is for
Mid-Senior Product, UX and Interaction Designers, looking to future-proof their workflow, increase the scope of deliverables and impact
Design leaders, looking to make their teams more effective and impactful
Product Managers, who want to become product builders, ideate, validate and deliver their ideas faster
Prerequisites
Understanding of product design fundamentals
User flows, design systems, variables and design tokens
No previous coding experience required
Familiarity and curiosity helps
Basic product thinking
Clear problem, user, and outcome definitions
What's included
Live sessions
Learn directly from your instructors in a real-time, interactive format.
Lifetime access
Go back to course content and recordings whenever you need to.
Community of peers
Stay accountable and share insights with like-minded professionals.
Certificate of completion
Share your new skills with your employer or on LinkedIn.
Maven Guarantee
Your purchase is backed by the Maven Guarantee.
Course syllabus
13 live sessions • 68 lessons • 13 projects
Week 1
Apr
20
⚡ Session 1: Kickstart AI prototyping. Tools, use cases, project planning and prompting patterns.
Introduction to AI prototyping: what it changes, why now
Prompting strategies and project planning
Tools overview: Lovable, V0, Bolt, Replit; Cursor, Claude Code
Apr
22
⚡ Live session 2 with Anna Arteeva: Frontend foundations: components, themes, ui libraries, code reuse. Styling with Tailwind, ShadCN, and your design tokens.
Shape your product architecture. Building strategies for different project types
Figma to Lovable. Part 1.
Apr
24
⚡ Q&A with Kevin, Jan and Anna
Week 2
Apr
27
⚡ Live session 3 with Anna Arteeva. Push your prototype beyond the basics. Third party libraries, rich interactions, and personalised experiences.
Frontend foundations, component libraries and styling, Tailwind & ShadCN
Apr
29
⚡ Session 4: Build real app logic. Complex user flows, states, and databases without hand coding.
Essentials of web app architecture: Backend, Frontend, Data, APIs
Building logic and complex user flows
Building reusable layout components
May
1
⚡ Optional: Weekly Office Hours
Schedule
Live sessions
5 hrs / week
2 sessions a week, 2.5h each
Mon, Apr 20
2:00 PM—4:30 PM (UTC)
Wed, Apr 22
2:00 PM—4:30 PM (UTC)
Fri, Apr 24
3:00 PM—4:00 PM (UTC)
Projects
2 hrs / week
Async content
1 hr / week
Short focused tutorials on specific topics
Testimonials
At Flatpay, we already use AI daily to boost research, strategy, writing, and design. Anna Arteeva's AI & UX workshop at our Copenhagen HQ helped us take things further. PMs, designers, and engineers sharpened our AI skills and explored new ground: getting more impact from the tools we already rely on; expanding into AI prototyping, building on our existing designs and design system to deliver higher-fidelity results faster; exploring new UX paradigms like non-deterministic and agentic experiences; and building a shared mindset on how AI will shape the way we create for our merchants. We're raising the bar on how we collaborate with each other—and with AI—to deliver even more impact. Highly recommended.
Derek F.
Director, Product Strategy & UX @ FlatpayI’m getting so much out of this course!!! I can’t even tell you! I’m making so much! I’m somewhat of a course junky, and I’ve never had a course so instantly providing value and clarity. Over night I’ve become the vibe code expert at my company (and we’re only partway through the course!
Briana (May) Mazzio
Senior Interaction Designer at FrogI learnt way more than I expected to and it's really sparked my brain with all the different use cases that are naturally sitting within my HR ops foundations.
Amanda James
HR Director, Onboarding Operations at RemoteAfter Anna Arteeva's AI prototyping training, using Lovable for quick prototyping became a no brainer. Looking at Figma screens versus clicking through a live prototype now feels like looking at 2D blueprints of a 3D object versus holding the real model in your hands. The speed of trying changes and the depth of what you can prototype, frontend and backend together, is on a completely different level.
Danila Turuntaev
Group Product Manager at RemoteThis course is close to a must-have if you want to stay current and in demand as a designer. The detailed tips and tricks Anna shares clearly come from longer practice and are things that are hard to catch up on quickly as a self-learner.
Judith S.
Digital Product & Experience DesignerStill blown away by the workshop. So much packed in (can't wait for the recording to rewatch, especially the second part covering design systems and database integration), almost everything made sense, and most importantly it no longer feels like some mystical thing only available to coding prodigies.
Ekaterina C.
UX expert specializing in complex domains
Frequently asked questions
$975
USD