The Design Playground: How coding agents changed my design workflow
Why I'm using Figma a lot less, and how working with an AI coding agent in a private sandbox changed how I explore product ideas.
00 Same craft, different tools
If you're a product designer today, your days probably look familiar: drawing frames in Figma, nudging auto-layout padding, linking click-through prototypes, writing handoff specs for engineers.
That's shifted for me over the last few months. I use Figma a lot less now. The job itself hasn't changed—I still run user research, define what a user is actually trying to get done, and obsess over the small stuff. What changed is where I do the work: inside an isolated sandbox repo I call the Design Playground, working directly with a coding agent.
01 What is a Design Playground?
A Design Playground isn't an engineering codebase and it isn't a production feature branch. It's closer to a workshop—a small, fast frontend repo that exists only so I can try things.
Two parts make it work.
1. A lightweight clone of your product's frontend
Built on Vite + React + Tailwind CSS + shadcn/ui—nothing from your company's real component library. It just needs to look and feel like the product, not be it.
2. A rich design context architecture
A folder of context the agent can read: personas.md, jtbd.md, research/, design-principles.md, CLAUDE.md. That's what stops the agent from guessing at what your users need before you've typed a single prompt.
Instead of throwing mockups over the wall to engineering, this is a space where the agent and I build something, poke at it, and bin it if it's wrong—fast enough that throwing work away doesn't sting.
02 Why not just Figma, or designing in production?
People usually ask one of two things: why not just stay in Figma, or why not just build straight in the real repo? Both have a problem.
Why canvas tools aren't enough
Figma is genuinely good for early spatial thinking. But a static artboard won't show you what happens with real data density, how the layout actually reflows, or where the focus order breaks. Those bugs show up months later in QA instead.
Why production repos slow you down
Production repos are built for stability and change control, not for throwing something together and deleting it an hour later. CI pipelines and PR review are the wrong friction for this kind of work.
03 The Modern Designer's Toolkit
You don't need an engineering background to run this. Here's the stack I use most days:
Canvas & Whiteboard (Paper Design, Figma, Miro)
Quick spatial layouts, rough user journeys, and initial mental model sketches.
Research & Intent (Obsidian, Notion, Jira)
Qualitative interviews, user pain points, and Jobs to Be Done committed as markdown context.
Frontend Playground (Vite + React + Tailwind + shadcn/ui)
An ultra-fast, zero-friction playground that boots instantly and reloads in milliseconds.
Coding Agent & IDE (Claude Code, Cursor, VS Code)
Your partner in the terminal or editor, translating design requirements into working UI.
Version Control & Hosting (GitHub + Vercel)
Date-stamped branches (prototyping/aug-22) with instant shareable links for stakeholder testing.
04 The Workflow: Same craft, 10x exploration speed
Working with an agent doesn't skip any step of the design process—it just makes each step faster and higher-fidelity.
Step 01
Create Shared Context Through Research
Start with research, same as always. Interview notes go into the repo. So does whatever we know about what the user's trying to do. Give the agent that, and it stops guessing.
Step 02
Spec the Intent in Natural Language
Write the interaction requirements and states in plain language before any UI code exists. Decide what the user needs and where it currently breaks.
Step 03
Build & Explore Working Variants
Rather than spending three days on 15 Figma variants, I'll ask the agent for three working layouts side by side. Click through them. See how they hold up with real data.
Step 04
Evaluate, Refine, and Refactor
This is where the actual design judgment happens—spacing, balance, color, accessibility, reviewed against something you can click, not just look at.
Step 05
Frictionless Developer Collaboration
When I hand a prototype to engineering, it isn't a flat picture anymore. It's a working React component with real tokens and accessible markup, already tested against the edge cases.
05 How the Role Changes: Same craft, new superpower
There's a worry going around that AI replaces the designer. What I've found is closer to the opposite—it strips out the mechanical parts of the job and leaves more room for taste and judgment, not less.
I'm not turning into an engineer, and I'm not handing the creative decisions to the agent either. My job is still deciding what's right—the agent just builds it faster than I can drag a rectangle in Figma.
Same job I've always done. Better tools.