AI Prototyping for Designers
Anna Arteeva
product design leader turned AI educator
Jan Six
Principal Product Designer at Github
From designer to AI-powered prototype builder.
Designers who code used to be called unicorns.
The first AI-generated demo feels magical. The next step is learning how to turn that magic into prototypes grounded in your design system, real data, custom interactions, deployment, and a codebase your team can understand.This course teaches senior product designers how to use AI as a real prototyping partner, from visual exploration to deployed web apps. You’ll start with fast generation, then move into agentic coding with Claude Code, Figma MCP, Supabase, GitHub, and Vercel.
By the end, you will have shipped working prototypes that look like your product, use real data, support richer interactions, and can become portfolio pieces, stakeholder demos, or starting points for engineering collaboration.
You’ll leave with:
A deployed web app built from your own product idea
A branded UI system connected to real code
Working data, APIs, and non-trivial product logic
A practical workflow for Claude Design, Claude Code, Figma MCP, Supabase, GitHub, and Vercel
The technical vocabulary to collaborate better with engineers
Better judgment about when to use quick AI tools and when to take ownership in a real codebase
What you’ll learn
The technical vocabulary and depth designers need to build functional prototypes with agentic coding tools. No coding experience required.
How agentic coding fits into a professional design workflow
The AI coding landscape: v0, Claude Design, Claude Code, Codex, Cursor, Figma Make, Lovable. When to use what.
Prompting patterns for exploration, structured builds, and shipping product features
Claude Design as a thinking tool for designers
The shift from Figma-first to natural-language-first ideation
Conversational design patterns: how to brief, when to redirect, when to start fresh
How modern frontends are structured: pages, components, composition, and why it matters for your work
React, Tailwind, and shadcn/ui — the tech stack AI tools default to
Design tokens, themes, and reusable UI kits that hold up beyond a single prototype
Claude Code + Figma MCP: back-and-forth 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
Supabase: databases, dynamic data, public APIs, and data visualisation
Debugging basics and reading your app in the browser
Mobile prototyping, rich interactions, and animations
AI features wired via API: LLMs, image generation, voice, and vision
Claude Code as an engineering partner for moving beyond the prototype
Learn directly from Anna & Jan
Anna Arteeva
Anna Arteeva is a product design leader and a product builder
Jan Six
Principle Designer at Github, co-founder of Tokens Studio
Who this course is for
Senior and lead Product, UX, and Interaction Designers, looking to future-proof their workflow and increase scope, 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 ship 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 Anna Arteeva & Jan Six 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
9 live sessions • 89 lessons • 5 projects
Week 1
Jun
8
⚡ Live session 1 with Anna Arteeva — New workflow, AI coding tool landscape, Build and ship your first AI prototype
Introduction to AI prototyping: what it changes, why now
Prompting strategies and project planning
🏋 Practice. Build your first app
Jun
10
⚡ Live session 2 with Anna Arteeva — Design before code: visual ideation with Claude Design
Frontend foundations
Styling, UI primitives and Design Systems. Tailwind & ShadCN
🏋 Practice. Build and style a SAAS app
Week 2
Jun
15
⚡ Live session 3 with Anna Arteeva — Claude Code foundations. Environment setup and project initiation
Essentials of web app architecture: Backend, Frontend, Data, APIs
Third party JS libraries: data visualisation
API basics: Sourcing stock images with public API
Personalisation and user context
🏋 Practice. Building a Data Dashboard with a Database, Charts, and Public APIs
Jun
17
⚡ Live session 4 with Anna Arteeva — Brand your prototype and build your Design System: Figma MCP, design tokens, and ui primitives
AI model landscape
Working with AI APIs: keys, cost thinking, latency, failure modes
System prompts and prompt structure for product features
Prototyping AI features
Prototyping native apps
Schedule
Live sessions
5 hrs / week
2 sessions a week, 2.5h each
Mon, Jun 8
2:00 PM—4:30 PM (UTC)
Wed, Jun 10
2:00 PM—4:30 PM (UTC)
Mon, Jun 15
2:00 PM—4:30 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
Principal 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