A take-home brief became a real question: could I build my own designs, using AI as my engineering team?

SmartSync: from brief to built

I led the full UX process across user research, personas, and hi-fi Figma designs. I then ran an AI experiment using Figma MCP, Claude, and Cursor to turn those designs into a working React prototype. No developer. One session. This documents both what I designed and what I learned from building it.

Timeline

1 week brief + ongoing

Role

UX Design + AI Build

Tools

Figma, Claude, Cursor, React

Status

Live prototype ↓

If you’re skimming What I did, how I did it, what I learned

What I did

Led the full design across research, personas, and Figma hi-fi. I then ran an AI build experiment to turn those designs into a working React prototype myself, without a developer.

How I did it

Connected Figma to Cursor live via the Figma MCP plugin
Uploaded screens to Claude simultaneously to generate build prompts
Iterated through 7 prompts, catching every AI mistake with design judgment

The experiment result

8-page working prototype built in one session
Dual-persona modes, dark and light themes, WCAG AA
Proof that a designer can build with the right AI pipeline

Pages built with AI prompts

User personas, distinct UX

WCAG accessibility standard

1 wk

Figma to working prototype

Live prototype

Fully working React app, not a Figma preview. Click around, toggle devices, navigate between pages. Switch between Simple and Advanced mode from the topbar. Toggle dark and light themes.

The research, design decisions, and Figma screens that led to this prototype are documented in Part 01. View the design process →

The AI build process that took those high fidelity screens to this working prototype is documented below.

Live React app Simple Mode: home owner Advanced Mode: power user Dark + Light themes WCAG AA

Key design decisions

Structure

Two modes, not one

Home owners and power users think differently. The interface splits at a mode picker rather than trying to serve both at once.

Interaction

Voice first in Simple Mode

Users reached for voice in every interview. Simple Mode leads with that and gets everything else out of the way.

Visual

Themes with character

Navy and indigo for dark. Warm white and soft shadows for light. Two distinct identities, not just a colour swap.

Access

Accessibility from prompt one

WCAG AA was a requirement from the start, not a checklist at the end. Every prompt included aria-labels, focus trapping, and semantic HTML.

The AI build experiment

Once the Figma designs were complete, I ran an experiment: could I build them into a working prototype myself, with no developer? I used two AI tools in parallel. Figma MCP connected my design file directly into Cursor so it had live access to my components and tokens. At the same time, I uploaded each screen to Claude, which read my layouts and generated the structured build prompts Cursor needed. I reviewed every output against the live Figma spec and caught every mistake before moving on.

Figma MCP

Live design sync

Claude

Prompt architect

Cursor

AI code editor

React App

Experiment result

🎨

Figma MCP: I kept the source of truth live

I connected my Figma file to Cursor via the MCP plugin. Cursor had real-time access to my components, spacing, and colour tokens. No manual export, no drift between design and code.

✦

Claude: I used it as my prompt architect

I uploaded each screen to Claude alongside the Figma sync. Claude read the layout and component structure, then generated 7 structured prompts with my WCAG requirements already embedded.

⌨

Cursor: I stayed in the design judgment seat

I pasted each prompt into Cursor one at a time and reviewed every output against the live Figma spec. When the AI was wrong, I caught it. The decisions stayed mine throughout.

Example: Claude-generated prompt for Dashboard page, Prompt 3 of 7

Build the full Dashboard page in src/pages/Dashboard.jsx.

1. HERO CARD (full width, background #1e2130, border-radius 12px, padding 24px):
Left: circular avatar + "Hi User!" + "Home Owner" purple Tag
Right: "Add a Device" (primary) + "Switch Modes" (outlined)

2. TWO COLUMN ROW: Quick Actions (2x2 grid) | Device Status (4 toggles)

Accessibility requirements:
All Switch components have aria-label describing what they control.
Chart containers need role="img" and aria-label describing the data shown.

Claude generated all 7 prompts from uploaded Figma screenshots. Figma MCP kept Cursor in sync with the live design as each prompt ran.

What AI nailed

React project scaffolding in minutes
Ant Design component wiring for tables, modals, and switches
Recharts integration with mock data
WCAG aria attributes when explicitly instructed
Dark theme CSS variable system

Where human judgment was needed

Donut charts rendering as half-circles
Light mode contrast failing silently
Sidebar text truncating without warning
Button alignment breaking across card heights
Gradient text becoming invisible in dark mode

The experiment result

Before the experiment

Figma designs with no working equivalent

Reviewers could only see static screens

No way to experience dual-persona mode switching

Accessibility claims unverifiable without a live build

After the experiment

Fully interactive React prototype I built myself

8 pages, dual modes, dark and light themes

Anyone can switch between Simple and Advanced mode live

WCAG AA verified: keyboard nav and aria labels throughout

Hi-fidelity screens

Five screens designed in Figma formed the brief for every Cursor prompt. Each was uploaded to Claude to generate the build instructions.

SmartSync dashboard showing quick actions, device status toggles, tasks, security stats, and energy insights — Dashboard overview

Device management page with searchable table and new device detection modal — Device management

Security management with camera recordings table and activity tracker timeline — Security management

Device detail modal showing warranty, energy donut chart and usage statistics — Device detail overlay

Device management alternate view — Device management alt

The most valuable thing I brought to this experiment was not learning to code. It was knowing precisely when the AI was wrong, and why it mattered to the design.

Ila Bharadwaj, reflection from the build

What the experiment taught me

I was the quality gate

AI is good at scaffolding and poor at visual nuance. Every mistake I caught, the half-circle donut chart, the broken contrast, came from design knowledge, not code knowledge. That judgment was irreplaceable.

Prompting is a design skill

Writing a good Cursor prompt felt closer to writing a design brief than writing code. The more specific I was about layout, states, and constraints, the better the output. Vague prompts produced vague results.

The speed changes what you can attempt

A working React page from a Figma screen in under 10 minutes. The value was not the time saved. It was using that time to attempt 8 pages, two modes, and a dual-theme system I would have spent much more time on to create.