How designers at Adyen started shipping UI code using AI

Overview

At Adyen, I pioneered a workflow where designers build UI changes directly in production code, using AI connected to our design system, with engineers reviewing the result. About half of our designers now use it for small UI fixes.

Format

Article · ~5 min read

Role

Designed and piloted the workflow, wrote the team playbook

Timeframe

June 2026 to present

Talk

Figma Workflow Lab · customer story

ms.MyStoreCompany

Search CMD + /Messages 3PAGESHomeOrdersProductsCustomersAnalyticsSettings

BBruce Wayneb.wayne@mystore.com

Analytics / Reports

Reports

All24Bookmarks3Sales8Customers5Inventory4Marketing4

★Monthly sales summaryAutomatedRevenue, orders and average order value by month.View reports83 Hug × 20 HugGenerate

★Customer ordersManualEvery order with customer, items and status.View reportsGenerate

★Inventory levelsManualStock on hand and low-stock items by product.View reportsGenerate

ButtonVariantTertiaryLabelView reports

Implement this design from Figma.

get_design_contextButton

Editreports-page.vue+4

Context

Designers owned how the product looked, but not how it was built.

At Adyen, designers hand finished designs to front-end engineers, who rebuild them in code. Small fixes rarely made a release; seven had sat in our backlog for two years.

Before: The old handoff

Designer1. DesignHigh-fidelity screens and prototypes
Designer + Engineer2. HandoffAnnotations and walkthroughs3 to 5 hours
Engineer3. BuildRebuilt by hand2 to 3 days
Designer4. Design QAWaiting for a test environment1 to 2 days
Silence phase

A new loop: designers build, engineers review.

I proposed a different loop: designers build small UI changes with AI, and engineers review and merge them.

Designer01Design in Figma
Designer, with AI02AI generates UI code
Engineer03Review
Engineer04Merge

I set it up so each group spends its time where it's strongest. Designers own the last mile of UI quality: they build small fixes themselves, supported by a step-by-step playbook, naming rules in Figma and pilot sessions I led. Engineers stay the final gate: every change goes through their code review before production, and with repetitive styling work off their plate, they can focus on complex work.

Roadblock

The first attempts hallucinated.

Out of the box, the AI didn't know our codebase. It invented components and hard-coded values, so engineers would have rewritten its output rather than reviewed it.

First attempt

reports-page.vueAI OUTPUT

1<button2  className="btn-blue"3  style="background: #1a73e8; color: #ffffff; border-radius: 3px"4>5  View report6</button>

The recipe

AI only became useful with production context and our design system.

Generic AI code would have been rewritten. Grounding it in our codebase and design system is what made the output reviewable rather than redone.

The recipe

AI agent› Add a View report button next to Generate report
+
Production contextThe real codebase and its conventions
```
t('reports.view')
```
+
Design systemReal components and tokens
=
UI that's ready for reviewMerge requestready for review

Ground the AI in three layers

Figma's MCP server gives the AI the design, a component map pairs each Figma component with its coded version, and skills hold the rules our engineers follow.

Figma Design mode: the View reports button selected, showing its Tertiary variant and properties — The same page, from the Figma file to production code: read the design, match each component, then follow the team's rules.

Figma Dev Mode: the same button selected, with redline spacing and its component information in Inspect — The same page, from the Figma file to production code: read the design, match each component, then follow the team's rules.

Stop and ask when there's no match

If a match is still unclear, the AI stops and asks the designer instead of guessing. The catch: designers have to keep components attached and named after what they do. A layer renamed "Rectangle 5" breaks the link.

Stop and ask

1# Component map2<!-- Read by the AI before it builds. One line per Figma component. -->34## Lookup56```text7b-button              → Button   status: ready8b-header              → Header   status: ready9b-dashboard-template  → ?        status: needs-user-input10```1112## Rules1314- Match on the Figma component name, not the layer name15- `ready` lines are used as they are16- `needs-user-input` means stop and ask the designer

Claude Code

Readcomponent-map.md

No code match for b-dashboard-template (status: needs-user-input). I'll ask rather than guess.

Which component should this use?

Header + Filters
Header
Something else…

Result

A backlog untouched for two years was cleared in one afternoon.

To test it, I picked those seven fixes. Engineering estimated two to three days of work.

Working with my front-end engineer, I built all seven in about two hours, including moving the Invoice Detail page onto our design system. He reviewed it and approved the merge request. He didn't write the code.

Time to ship seven fixes

Engineering estimate2 to 3 days of work
With AI, reviewed by an engineerAbout 2 hours

Three kinds of fix

FrontendLabel changeSaveSave contactSaveSave contact
contact-form.vueDIFF
```
1label='Save'2label='Save contact'
```

FrontendAdding a component

form-footer.vueDIFF

1<Button>Cancel</Button>2<Button variant='primary'>Submit</Button>

FrontendDesign system migration

invoice-detail.vueDIFF

1<Button2  className='btn btn-default btn-legacy'3  variant='primary'4>Submit</Button>

to ship seven backlog fixes~2 hours

vs. 2–3 days estimated by engineering

Adoption

of designers adopted itAbout half

1<script setup>2import { ref } from 'vue'3import { Header, FilterBar, Table, Button } from '@/components'4import { useReports } from '@/composables/useReports'56const filters = ref(['All', 'Sales', 'Orders'])7const { reports } = useReports()8</script>910<template>11 <Header title="Reports" />12 <FilterBar :filters="filters" />13 <Table :rows="reports">14 <template #row="{ report }">15 <div class="report-info">16 <span class="report-title">{{ report.title }}</span>17 <span class="report-description">{{ report.description }}</span>18 </div>19 <Button variant="secondary">Generate report</Button>20 <Button variant="tertiary">View reports</Button>21 </template>22 </Table>23</template>2425<style scoped>26.report-info {27 display: flex;28 flex-direction: column;29 gap: var(--space-1);30}31</style>

1# Component map234## Lookup56```text7b-button → Button status: ready8b-header → Header status: ready9b-dashboard-template → ? status: needs-user-input10```1112## Rules1314- Match on the Figma component name, not the layer name15- `ready` lines are used as they are16- `needs-user-input` means stop and ask the designer