The only AI workflow I use in production

Welcome back.

Two quick things before we dive in:

1. Our teaser trailer is out. This Is Taste premieres October 27th. We go on-location with some of the best designers and creatives in the world.
   Watch the teaser →

2. I'm thinking of giving a talk on the patterns I've seen while documenting these teams and UX Tools data. If you'd be interested, let me know →

After a year of "AI is killing __" noise and thousands of hours testing every new toolchain, this is the only workflow I'm ready to endorse:

Figma → Claude Code (Sonnet 4.5)

It's how I'm building my app Lorelight, and it's the most designer-controlled, production-ready setup I've explored.

Let's talk about it.

– Tommy (@designertom)

Design Tools Are Finding Their Next Loop

For months, I thought I was done with Figma. I assumed all my product design work would move into Claude Code or whatever AI powered tool won the market.

I was wrong.

Figma MCP with Claude Code (Sonnet 4.5)

Since their IPO, Figma has been making some impressive moves.

They just partnered with OpenAI, and Dylan Field has been posting videos showing how Figma Make works with Sonnet 4.5. He even used ChatGPT to create a sci-fi inspired timeline from now to 2100 inside FigJam, demonstrating how AI is integrating directly into the design tool.

But the real sauce here isn't Figma's AI features alone, it's Figma MCP (Model Context Protocol).

Figma MCP panel in Figma

MCP is an API that lets services like Claude Code access your Figma files with full context. Not just screenshots, but actual design intent: structure, spacing, typography, colors, component relationships.

Here's the workflow that's changed everything for me:

1. Design the happy path in Figma. Not every edge case. Not every possible state. Just the optimal flow. The core experience.

2. Feed it to Claude Code via Figma MCP. Claude reads the design file directly and understands the intent behind the pixels.

3. Get a strong foundation in minutes. What used to take 50+ hours to hand-code now scaffolds in 15 minutes.

The loop that used to be broken (design in Figma, hand off to dev, iterate in code, update Figma, repeat) is finally closing. Figma connects directly to production code without losing your creative control in translation.

Dylan Field talks Figma Make + Sonnet workflow →

The "One-Shot" Era Is a Myth

Let's start to retire some hype language: vibe coding, AI slop, one-shot.

None of it matters and it won't be here this time next year. Here's why:

After Claude Code scaffolds that initial foundation from my Figma designs, I spent 50+ hours refining, tweaking, and building out new iterations.

Design iteration of Lorelight's functional audio library. Designed in Claude Code

And I don't consider those 50 hours "development work." I consider it design work.

Because that's exactly what it was: making decisions about hierarchy, interaction patterns, edge cases, error states, loading behaviors, and all the micro-decisions that make an interface feel cohesive.

The "one-shot" concept fundamentally misunderstands the real power of these workflows. And it's an even sillier measurement of tool effectiveness (stop using it).

But it can quickly give your AI-powered tool a visual language to work from.

Building a Design System in 90 Seconds

Here's where it gets interesting.

After I had my foundation in place, I asked Claude Code:

"Build me a design system markup document. Then create a design system demo page that reflects the components we've created and the rules from that document."

Lorelight's design system demo page.

Within minutes, I had:

• A complete design system based on my custom Figma designs

• A living demo page showing every component in context

• Markup documentation that updates as I make changes

• Rules covering mobile, accessibility, content patterns, visual language, and interaction behaviors

This is the fastest I've ever produced a design system. And it's a completely custom, living document.

When I moved from my audio library feature to the scene manager dashboard, I could pull in the same layout patterns, mix and match components, and maintain consistency simply by asking AI to reference the document and demo page.

Contra's Feature Leak: The Freelance Network Feed

Contra is announcing a new community feature for the general public tomorrow (live at 10AM PST), and this is going to become a popular spot for freelancers.

I interviewed Ben Huffman, Contra's co-founder, on State of Play earlier this year. Became an instant fan. Not just because of what he said, but because of how Contra actually works with their community.

They're not just talking about supporting freelancers. They're investing real resources into building community features on their platform. That's rare.

If you're a freelancer or looking for side work, Contra is where everyone's moving. I called Framer two years ago. I'm calling Contra now. This is the modern freelance platform.

What About Tools Like Lovable, Replit, and Bolt?

I'm not here to 💩 on other tools.

Lovable, Replit, v0 and Bolt all have use cases for prototyping. I've used them. But with Figma Make hitting the market, it's hard to recommend them to designers when Figma Make does this quite well.

But after 16 months of trying them all, these workflows quickly hit a ceiling compared to Figma + Claude Code for moving closer to the production layer.

My Figma Make iteration of Lorelight

Why?

• Lowest time-to-task. I get to meaningful work faster

• Highest designer control. I'm not fighting the tool or making significant compromises

• Best for shipping real products. Not demos. Not prototypes. Real, production-ready apps (and while this claim is still nuanced, it's truer now than it was 3 months ago when we laughed at security vulnerabilities making into prod.)

The craft lives in the iterations that follows the "one-shotted" scaffold. And this workflow gives you the foundation to iterate fast.

It's also surprisingly simple: adopt one additional tool.

The Bottom Line

After a year of hype, here's what actually works:

Figma for intent. Claude Code for translation. Tailwind + Shadcn for foundation.

Design tools are finding their next loop, connecting visual intent to production code without sacrificing designer control.

If you're a designer who wants to build and ship, this is the stack worth trying.

What workflow are you using?

See you next week,
Tommy