Shyvee Shi

Ship a Prototype from Figma with AI Tools

Colin Matthews

Sold his first SaaS in 2021. Product Manager, 8500+ students, featured by Lenny

Product & Community Lead at Microsoft, ex-LinkedIn

See firsthand how AI tools can generate functional code from a Figma design, drastically reducing development time

AI-Powered Prototyping in Action

Learn how to debug and refine your prototype even without coding experience

Overcoming Technical Barriers

Understand the strengths and limitations of different AI coding assistants and how to integrate them into your workflow

Choosing the Right AI Tools

The technical vocabulary and depth designers need to build functional prototypes with agentic coding tools. No coding experience required.

Product design leader turned AI educator

Payoneer

Anna Arteeva

Anna Arteeva is a product design leader and a product builder

Principal Product Designer at Github

GitHub

Jan Six

Principle Designer at Github, co-founder of Tokens Studio

Principal Interaction Designer at frog

frog

Briana (Mazzio) May

Principal Interaction Designer and Discipline Lead at frog

Design at Qonto  • Founder

Qonto

Stan Reimgen

Design @Qonto • Founder • Hands-on Product Design Leader

Cohort April

June

Coding Designers used to be called Design Unicorns. Now it's a baseline expectation — and AI is what makes it accessible.Coding isn't just a way into frontend territory. It's how you get sharper insights from usability tests and stakeholder reviews, and how you push design beyond static visuals into interactive, data-driven experiences. Working code lets you prototype with real APIs, voice, vision, and user context — dimensions unavailble in Figma. This intensive course is built for product designers. You'll learn technical concepts through designer use cases, with hands-on exercises and personal feedback on every project. Topics covered:<ul><li>AI coding tools: when to use what</li><li>Frontend foundations</li><li>Design systems and prototyping environments </li><li>Interaction and motion </li><li>Figma ↔ code workflows </li><li>Building with databases and APIs </li><li>AI-powered features </li></ul>Tool-agnostic by design: we use Claude Code throughout, but the workflows transfer to Codex, Cursor, Antigravity, and Copilot. Tools like Lovable, v0, Figma Make are covered briefly, but not the focus of the course. <pre><code class="language-markdown"></code></pre>

From designer to AI-powered prototype builder.

The mindset and the tools

Visual exploration before code

Frontend foundations for designers

Prototype with your brand and design system

App architecture and real data

Beyond the prototype

User flows, design systems, variables and design tokens

Understanding of product design fundamentals

No previous coding experience required

Clear problem, user, and outcome definitions

Basic product thinking

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

Turn Your UI Into a Working App in One Day Using AI

Build products you're proud to share

Apple

Amazon

Microsoft

LinkedIn

Nima Tahami

Product Designer (15 years), Instructor (18K+ students), Founder @CueClip.app

Cohort 3

Cohort 4

Most designers can create great UI, but struggle to turn it into a real, working app.At the same time, AI tools promise speed, yet often produce messy results without the right approach.This workshop bridges that gap.You’ll learn how to go from a clean UI to a functional app in a single day, by using AI the right way:<ul><li>Structuring your Figma designs for build (using Auto-layout, setting up MCP, etc)</li><li>Getting started with a Cursor app</li><li>Making a real working app from designs</li><li>Launching it on the web for others to use</li></ul>By the end, you’ll have a working app and a repeatable system to bring future ideas to life, without relying on developers.

<h3>Designers Who Want to Build</h3>You design in Figma but can’t turn ideas into real apps. Learn to build and ship without relying on developers.

Indie Builders &amp; Early FoundersYou have ideas but move slow or lack polish. Learn to design, build, and ship faster using AI.

Product Managers &amp; CreatorsYou think in flows but can’t prototype real apps. Learn to quickly build and share functional products.

Build concept prototypes to drive faster decision making cycles 

Principal PM at Yelp, ⭐ 4.9 on Maven

Yelp

Google

eSpark

Codeverse

Priya Mathew Badger

Principal PM for Yelp's AI Assistant, Lenny's Community Top 25 contributor 

Learn how to build functional prototypes to drive faster feedback cycles

Cohort 1

AI prototyping is the #1 skill PMs need to learn, but most are still learning how to apply it to their product work.As a Principal PM at Yelp, I built repeatable AI prototyping workflows to explore ideas faster and drive leadership buy-in.<a target="_blank" rel="noopener noreferrer nofollow" class="underline underline underline-offset-2 decoration-1 decoration-current/40 hover:decoration-current focus:decoration-current" href="https://www.youtube.com/watch?v=wDA6DslBeqk">See my How I AI episode with Claire Vo →</a><h2>The Program</h2>This one-day live workshop takes you from ad hoc experimentation to building prototypes that drive better and faster product decisions.Get hands-on with AI prototyping as a core discovery skill: turning rough ideas into functional prototypes and driving faster feedback cycles. You leave with a working prototype that you can use for the next idea on your roadmap or job interviews."This was a very valuable course that not only teaches the basics of prototyping that you can immediately apply, but also instills the right mindset to work with the AI tools." — LK, Staff PM at Pinterest ⭐⭐⭐⭐⭐<h2>What's included</h2><ul><li>4 hours of live instruction with repeatable workflows</li><li>Experience prototyping with multiple tools (Claude, Magic Patterns, and Google AI Studio) </li><li>20+ learning modules and custom Skills you keep for reference</li><li>Lifetime recording access</li><li>Private AI Prototyping Slack community</li><li>1 free month of Magic Patterns </li></ul>

You will leave with a prototype you can use for team alignment and user feedback

How to turn rough ideas into functional prototypes using AI tools

Get a repeatable workflow you can run for any roadmap area or interview process 

Use prototypes to drive faster internal alignment and leadership buy-in

Individual Contributor PMs looking to master how to build functional prototypes and use them to get faster feedback and alignment

Product leaders (GPM/Director/VPs) interested in leveraging AI prototyping for vision and team upskilling

Job Seeking PMs who need to learn prototyping for interviews with AI-first product companies

Build functional prototypes with real data and AI-powered logic.

Design Leader turned AI-Code Educator

Product Designer turned AI-Code Educator

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 architecture, dynamic data, APIs and AI logic. These foundations is what turns vibe-coding 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.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.<ul><li>A functional web app, styled to match your brand</li><li>Non-trivial logic and dynamic data.</li><li>Prototype AI features wired via APIs</li><li>Collaborate and handover via GitHub</li><li>❤️ Lovable Pro is included</li></ul>

Familiarity with design basics and terminology — design systems, design tokens, and standard design tools and workflows — is assumed.

You are a designer or a design leader

You'll cover many technical concepts throughout the course, but writing or reading code syntax is not required.

Prior coding experience is not required (but would not hurt!)

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

Agentic AI

Coding with AI

AI Workflows

Claude Code

OpenClaw

Vibe Coding

AI Evals

AI Transformation

RAG & Search

AI for PMs

AI for Engineers

AI for Designers

AI for Marketers

AI for Founders

Product Sense

Product Discovery

User Research

Prototyping

Growth

Analytics

Tech Foundations

Strategy

Influence

Leadership

Career Growth

Machine Learning

LLM Ops

Context Eng

Security

System Design

Figma

Design Systems

Visual Design

Design Strategy

Automation

Content Marketing

Demand Gen

Go-to-Market

Product Marketing

Positioning

Social Media

Brand

B2B Marketing

SEO & AEO

AI for Leaders

AI Governance

Communication

Management

People Operations

Exec Presence

Storytelling

Goal-setting

Personal Brand

Fundraising

Everyone

Operators

Data Scientists

Business Analysts

User Researchers

Customer Success

Project Managers

HR Professionals

Sales People

Lawyers

Finance

Investors

Real Estate

Educators

Creators

Introduction and Welcome

Introducing Colin Matthews: AI Prototyping Expert

Agenda and AI Prototyping Tool Overview

Live Demo: Simple Figma Import with V0

Iterating and Adding Functionality in V0

Live Demo: Figma Import with Bolt

Building Multi-Page Prototypes

Live Demo: Figma Import with Lovable

Deploying, Sharing, and Securing Prototypes

Advanced Demo: Recreating the LinkedIn Analytics Page

Cleaning Up and Refining the UI with Prompts

Choosing the Right Tool for the Job: Bolt vs. Replit

Team Adoption and Workflow Using Forking

Enterprise Concerns: Security and Production Use

Hot Take: The Future of Building and "Bycoding"

Practical Advice for Product Managers

Change Management and Team Collaboration

Conclusion and Final Remarks

Product managers who drive strategy, development, and launch of products.

Startup founders building new businesses, from MVP to scale.

Applying AI tools and techniques to professional workflows — assign alongside more specific AI topics.

Building prototypes and MVPs to test ideas quickly before committing to full development.

Mastering Figma for design workflows — components, auto-layout, prototyping, and collaboration features.

Ship a Prototype from Figma with AI Tools

What you'll learn

Why this topic matters

You'll learn from

Colin Matthews

Shyvee Shi