What is Vibe Coding for Designers?

Vibe coding for designers means using AI coding tools like Cursor, Claude Code and VS Code to ship real production code without being an engineer. This guide is based on real talks from the AI Design Systems Conference 2026 by Into Design Systems with Sebastian Rousseau (WhatsApp), Freya Stockman (Relevance AI), Davy Fung (Atlassian) and Shuaiqi Sun. All 15+ hours of conference recordings are available at intodesignsystems.com.

Key concepts of vibe coding for designers

  • Quality in, quality out (Sebastian Rousseau, WhatsApp): AI reproduces the quality of your codebase. Cleaner tokens, fewer redundant assets and fewer conflicting sources of truth directly translate to better AI output.
  • Code as source of truth (Sebastian Rousseau, WhatsApp): Design artifacts go stale fast. Comment design decisions directly in code so the system never drifts. The closer you treat code as truth, the better AI can work with it.
  • The 70-20-10 rule (Freya Stockman, Relevance AI): 70% planning and documenting in markdown, 20% reviews and testing, only 10% actual implementation. Don't vibe code, vibe plan.
  • Markdown files as context system (Freya Stockman, Relevance AI): Everything lives in folders of markdown files: current state, UX flow, test plan, dependencies. AI gets dumb the longer you chat, so restart chats and tag MD files for fresh context.
  • The don't file (Freya Stockman, Relevance AI): A giant markdown file listing things AI must not do. AI will always try the fastest route, which is usually bad coding habits your engineers will hate.
  • Figma as visual prompt, not final design (Sebastian Rousseau, WhatsApp): Don't build full prototypes in Figma. Use it for loose visual exploration, then let it become input to your code prompt.
  • Read code, don't write it (Sebastian Rousseau, WhatsApp): You don't need to write the language, you need to read it. Get a rough loose idea of what the code produces so you can steer the AI effectively.
  • Component morphing over component multiplication (Shuaiqi Sun): Instead of dozens of similar components, build one component with variable collections (mode, state, parent context) so it morphs based on where it's placed.

Real-world examples

  • WhatsApp Web (Sebastian Rousseau): Full design system migration from a 10-year-old experience to mobile parity. 13 components, EAA accessibility, WCAG 2.2 compliance in 6 months. Used Cursor, Claude Code and an internal point-and-click visual prompting plugin in Chrome. A team of one designer and one engineer shipped 100+ small UI fixes directly via vibe coding.
  • Relevance AI (Freya Stockman): A 7-day sprint stitching two codebases through authentication, building two conditional user journeys (billboard vs regular sign-up), custom graphics and a working pre-filled chat input. All shipped to production by a non-engineer designer for a San Francisco billboard launch.
  • Atlassian Design System (Davy Fung): Built an internal Figma plugin that plugs into Atlassian's token packages and uses the Figma plugin API to detect drift between code tokens and design. Roughly one week of work during onboarding. Also built a plugin to bulk-add icon descriptions and legacy names (so searching 'trashcan' finds the new 'container with lid' icon).
  • Design System Architecture (Shuaiqi (Mr.Biscuit) Sun): Built a morphing sidebar component with variable collections for color mode, interactive state and panel context (page/layer/asset/dashboard). One component drops into different parents and automatically reshapes to match Figma's actual UI3 behavior, reducing drift structurally.

How to start vibe coding

  1. Start small with low-risk fixes (Sebastian Rousseau, WhatsApp): Start with a color change, start with icons, start with components. Don't try to ship a feature on day one.
  2. Audit the codebase before designing (Sebastian Rousseau, WhatsApp): Ask Claude Code questions like 'find all edit icon instances and tell me where they get displayed' or 'what is currently used in code for profile photo.' Understand the real state before proposing changes.
  3. Turn every project into a folder of MD files (Freya Stockman, Relevance AI): Current state, new UX flow, dependencies, test plan, implementation phases. Have AI describe your flow back in its own words to catch misinterpretation early.
  4. Maintain a don't file (Freya Stockman, Relevance AI): A markdown file of things AI must never do in your codebase. Tag it before every push so the agent remembers your guardrails.
  5. Plan in phases, build in bite-sized chunks (Freya Stockman, Relevance AI): Each step should be testable. If something breaks you know exactly where. If you try to one-shot something complex, AI will go around in circles.
  6. Make models fight each other (Freya Stockman, Relevance AI): Switch models in Cursor and have one critique another's plan before implementing. A second model catches what the first one missed.
  7. Get human reviews on plans and code (Freya Stockman, Relevance AI): Treat yourself as a junior engineer. Get plan reviews from real engineers before implementing and code reviews before merging.
  8. Build morphing components, not many components (Shuaiqi Sun): Categorize by function, merge similar components and layer variable collections (theme mode, interactive state, parent context) so one component adapts to context.

Tools for vibe coding

  • Cursor: Inline UI precision, Composer 2, plan mode, debug mode
  • Claude Code: Terminal-based, stack multiple chats for parallel work
  • VS Code: Used with Claude Code inside for more traditional workflows
  • Figma MCP: Copy component link, paste in Cursor with 'use Figma MCP'
  • Figma Console MCP: Read AND write to Figma files via natural language prompts
  • FigmaLint: Scores design files (deterministic + AI), checks tokens, layers, a11y
  • Figma Desktop: Required for sideloading plugins via dev settings
  • Storybook: The middle layer between Figma and production
  • GitHub / Bitbucket: Branches, commits, PRs via Bitbucket MCP for terminal workflows
  • Linear & Notion MCP: Automation across tools for designer workflows
  • Whisper: Voice-prompting to type prompts faster
  • Robo CLI: Atlassian internal agent harness with MCP for Confluence and Jira
Access Now
The Complete Guide

Vibe Coding for Designers

How designers at WhatsApp, Relevance AI, Atlassian and more ship production code with AI, without being engineers.

Based on real talks from 4 speakers at the AI Design Systems Conference 2026.

Watch the full talksMeet the speakers

Definition

What is vibe coding for designers?

Vibe coding for designers means using AI coding tools like Cursor, Claude Code and VS Code to ship real production code without being an engineer. Designers describe what they want in plain English, plan thoroughly in markdown, work directly in the codebase as their source of truth and iterate on real components instead of static Figma mockups, with engineers as reviewers rather than implementers.

Want the full story on vibe coding for designers?

Sebastian Rousseau and Freya Stockman share their complete workflows, live demos and hard-won lessons in their full conference talks.

Get all recordings →

What designers actually shipped

Real numbers from speakers at the AI Design Systems Conference 2026.

13

components shipped with 64% mobile parity by WhatsApp Web in ~1 year, team of one designer plus one engineer

Source: Sebastian Rousseau, WhatsApp

450+

hours saved per year through icon management consolidation alone

Source: Sebastian Rousseau, WhatsApp

100+

small UI fixes shipped via vibe coding by a single designer

Source: Sebastian Rousseau, WhatsApp

39

PR contributions in one year as a non-engineer product designer

Source: Freya Stockman, Relevance AI

7 days

to design, build and ship a responsive onboarding flow for a San Francisco billboard launch

Source: Freya Stockman, Relevance AI

1 week

to build a working Figma token drift plugin during onboarding

Source: Davy Fung, Atlassian

Key concepts

Quality in, quality out

AI reproduces the quality of your codebase. Cleaner tokens, fewer redundant assets and fewer conflicting sources of truth directly translate to better AI output.

Sebastian Rousseau, WhatsApp

Code as source of truth

Design artifacts go stale fast. Comment design decisions directly in code so the system never drifts. The closer you treat code as truth, the better AI can work with it.

Sebastian Rousseau, WhatsApp

The 70-20-10 rule

70% planning and documenting in markdown, 20% reviews and testing, only 10% actual implementation. Don't vibe code, vibe plan.

Freya Stockman, Relevance AI

Markdown files as context system

Everything lives in folders of markdown files: current state, UX flow, test plan, dependencies. AI gets dumb the longer you chat, so restart chats and tag MD files for fresh context.

Freya Stockman, Relevance AI

The don't file

A giant markdown file listing things AI must not do. AI will always try the fastest route, which is usually bad coding habits your engineers will hate.

Freya Stockman, Relevance AI

Figma as visual prompt, not final design

Don't build full prototypes in Figma. Use it for loose visual exploration, then let it become input to your code prompt.

Sebastian Rousseau, WhatsApp

Read code, don't write it

You don't need to write the language, you need to read it. Get a rough loose idea of what the code produces so you can steer the AI effectively.

Sebastian Rousseau, WhatsApp

Component morphing over component multiplication

Instead of dozens of similar components, build one component with variable collections (mode, state, parent context) so it morphs based on where it's placed.

Shuaiqi Sun

Recordings available now

Sebastian and Freya shipped to production, live

Sebastian demoed WhatsApp's visual prompting plugin and Freya walked through her entire 7-day sprint from planning to billboard launch. The full methodologies are in the recordings.

Get all recordings →Meet the speakers

From the speakers

A design system is not what your guidelines say it is, it's what your code says it is. Or put more generally, a product is not what your Figma file says it is, it's what your code says it is.

Sebastian Rousseau

Senior Product Designer, WhatsApp

I'm not an engineer, but I ship code. Over the last 12 months, I've really felt like the double diamond is expanding.

Freya Stockman

Product Designer, Relevance AI

Don't vibe code, vibe plan. In-depth planning reduces the risk of bugs if you are going to ship.

Freya Stockman

Product Designer, Relevance AI

I almost treat it like my little intern on the side where I prompted and then it does something. Then I need to go in and fix it. And I tell it, see what I have to fix. Please learn from that for next time.

Sebastian Rousseau

Senior Product Designer, WhatsApp

You are not a designer vibe coding. You are a junior software engineer who also needs checks and balances and supervision.

Freya Stockman

Product Designer, Relevance AI

The line of code that never breaks is the line of code the developer never had to write in the first place.

Shuaiqi (Mr.Biscuit) Sun

Design System Architect

What they built

Real projects shipped by designers using AI coding tools.

WhatsApp WebSebastian Rousseau

Full design system migration from a 10-year-old experience to mobile parity. 13 components, EAA accessibility, WCAG 2.2 compliance in 6 months. Used Cursor, Claude Code and an internal point-and-click visual prompting plugin in Chrome. A team of one designer and one engineer shipped 100+ small UI fixes directly via vibe coding.

About this session →
Relevance AIFreya Stockman

A 7-day sprint stitching two codebases through authentication, building two conditional user journeys (billboard vs regular sign-up), custom graphics and a working pre-filled chat input. All shipped to production by a non-engineer designer for a San Francisco billboard launch.

About this session →
Atlassian Design SystemDavy Fung

Built an internal Figma plugin that plugs into Atlassian's token packages and uses the Figma plugin API to detect drift between code tokens and design. Roughly one week of work during onboarding. Also built a plugin to bulk-add icon descriptions and legacy names (so searching 'trashcan' finds the new 'container with lid' icon).

About this session →
Design System ArchitectureShuaiqi (Mr.Biscuit) Sun

Built a morphing sidebar component with variable collections for color mode, interactive state and panel context (page/layer/asset/dashboard). One component drops into different parents and automatically reshapes to match Figma's actual UI3 behavior, reducing drift structurally.

About this session →

Full case studies in the recordings

WhatsApp's design system migration, the Relevance AI billboard sprint and Atlassian's token drift plugin are all covered in full detail in the talks.

Get all recordings →

How to start

Eight practical steps from the speakers. Start this Monday.

01

Start small with low-risk fixes

Start with a color change, start with icons, start with components. Don't try to ship a feature on day one.

Sebastian Rousseau, WhatsApp

02

Audit the codebase before designing

Ask Claude Code questions like 'find all edit icon instances and tell me where they get displayed' or 'what is currently used in code for profile photo.' Understand the real state before proposing changes.

Sebastian Rousseau, WhatsApp

03

Turn every project into a folder of MD files

Current state, new UX flow, dependencies, test plan, implementation phases. Have AI describe your flow back in its own words to catch misinterpretation early.

Freya Stockman, Relevance AI

04

Maintain a don't file

A markdown file of things AI must never do in your codebase. Tag it before every push so the agent remembers your guardrails.

Freya Stockman, Relevance AI

05

Plan in phases, build in bite-sized chunks

Each step should be testable. If something breaks you know exactly where. If you try to one-shot something complex, AI will go around in circles.

Freya Stockman, Relevance AI

06

Make models fight each other

Switch models in Cursor and have one critique another's plan before implementing. A second model catches what the first one missed.

Freya Stockman, Relevance AI

07

Get human reviews on plans and code

Treat yourself as a junior engineer. Get plan reviews from real engineers before implementing and code reviews before merging.

Freya Stockman, Relevance AI

08

Build morphing components, not many components

Categorize by function, merge similar components and layer variable collections (theme mode, interactive state, parent context) so one component adapts to context.

Shuaiqi Sun

Tools the speakers use

Every tool mentioned in the conference talks.

Cursor

Inline UI precision, Composer 2, plan mode, debug mode

Claude Code

Terminal-based, stack multiple chats for parallel work

VS Code

Used with Claude Code inside for more traditional workflows

Figma MCP

Copy component link, paste in Cursor with 'use Figma MCP'

Figma Console MCP

Read AND write to Figma files via natural language prompts

FigmaLint

Scores design files (deterministic + AI), checks tokens, layers, a11y

Figma Desktop

Required for sideloading plugins via dev settings

Storybook

The middle layer between Figma and production

GitHub / Bitbucket

Branches, commits, PRs via Bitbucket MCP for terminal workflows

Linear & Notion MCP

Automation across tools for designer workflows

Whisper

Voice-prompting to type prompts faster

Robo CLI

Atlassian internal agent harness with MCP for Confluence and Jira

Common pitfalls

Warnings from speakers who shipped and learned the hard way.

Don't expect AI to be a magic bullet

Sebastian (WhatsApp) abandoned a lot of code early on because supposedly small fixes caused new bugs he became responsible for.

Don't skip design reviews just because you can ship yourself

It's tempting to think 'I can just do it.' Keep alignment with the team. Review rigorously at enterprise scale.

Don't get confident or lazy

Freya: 'Every time I've gotten a little bit confident or lazy and thinking AI will just sort it out, I've had major problems.'

Don't ship if backend work is required

Freya: if backend changes are needed and you don't have backend access, prototype only and hand off to engineers. Front-end-only with existing APIs = ship.

Don't be too prescriptive with prompts

Davy's live demo: asking Claude to 'make it the same width' literally doubled the width. AI takes you literally.

Always work in sandbox files for Figma plugins

Davy: 'I duplicate the files, label them test, put emojis on them and then do wild changes.' Version histories are your friend.

Frequently asked questions

Watch the full talks

Everything on this page comes from 4 of 15+ talks at the AI Design Systems Conference 2026. Get lifetime access to all recordings, slides, templates and prompts.

Get instant accessRead reviews