Vibe Coding for Designers

What designers actually shipped

Real numbers from speakers at the AI Design Systems Conference 2026

Key concepts

1. 01

   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

2. 02

   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

3. 03

   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

4. 04

   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

5. 05

   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

6. 06

   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

7. 07

   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

8. 08

   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

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 RousseauSenior 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 StockmanProduct Designer, Relevance AI

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

Freya StockmanProduct 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 RousseauSenior 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 StockmanProduct 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) SunDesign 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.

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.

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).

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.

How to start

Eight practical steps from the speakers. Start this Monday

1. 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

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

1. 01

   Cursor

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

2. 02

   Claude Code

   Terminal-based, stack multiple chats for parallel work

3. 03

   VS Code

   Used with Claude Code inside for more traditional workflows

4. 04

   Figma MCP

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

5. 05

   Figma Console MCP

   Read AND write to Figma files via natural language prompts

6. 06

   FigmaLint

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

7. 07

   Figma Desktop

   Required for sideloading plugins via dev settings

8. 08

   Storybook

   The middle layer between Figma and production

9. 09

   GitHub / Bitbucket

   Branches, commits, PRs via Bitbucket MCP for terminal workflows

10. 10

    Linear & Notion MCP

    Automation across tools for designer workflows

11. 11

    Whisper

    Voice-prompting to type prompts faster

12. 12

    Robo CLI

    Atlassian internal agent harness with MCP for Confluence and Jira

Common pitfalls

Warnings from speakers who shipped and learned the hard way

1. 01

   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.

2. 02

   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.

3. 03

   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.'

4. 04

   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.

5. 05

   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.

6. 06

   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.