Prototyping UI in code to stress-test designs early

Hey designers! Check out my fav use case for Claude ⬇️

Remember prototyping interactions in Figma? Connecting frame after frame until the canvas looked like a freaking mess, duplicating a whole screen just to toggle one switch, building 10 component variants to fake a single interaction... and then changing one small thing and having to update all of it by hand.... Oh and my personal fav - when you created an interaction that was not technically feasible in code 😅

So...whenever I think about UX I think about gestures, interactions, how a certain moment feels... the tap, the swipe, the drag, the haptic feedbacks..

Getting Claude to help you explore these interactions is one of my favorite use cases. You build the moment, put it in front of real users, and find the solution that actually feels right instead of being limited because of time and proper feedback...

You can start with simple HTML artifacts in Claude. Good enough to get the feeling of it in your hands.

You can also push them live with Netlify (drag and drop, no Claude artifact frame around it) when you want to send a clean live link to test with real people.

Then when you need more complex interactions, or you're ready to ship, you move into Claude Code...

🔗If you haven't grabbed my prototype skill yet here you go - I keep trying to push it to see how far it can go!
https://lnkd.in/eeRzyJpa

PS: we go deep into AI prototyping in our design sprints.

The next one's June 22 and we're partnering with a big AI ed-tech company on their iOS product, so you'll be exploring these exact kinds of interactions on something real!

Half the spots are already taken, link's in the comments if you want in 👇🏻
🔗 yummy-labs.com

Before: Figma -> Webflow/Framer. Now: Ideate with Claude -> Fine-tune in Figma -> Take back to code (all 50x faster). It's genuinely insane!

I shipped 50+ screens as a solo design engineer in 3 months. Here's the exact workflow I use every single day.

Most designers treat AI like a search engine. Ask it a question, get an answer, go back to Figma.

That's not how I use it. AI is my starting point, not my assistant.

Here's my actual daily workflow, step by step:

Step 1: Problem breakdown (Claude Code, 15 min)
Before I open any design tool, I paste the brief into Claude Code and have a conversation. Not "design me a dashboard." Instead:

"Here's a hiring pipeline with 9 stages. A recruiter needs to move 40+ candidates through these stages daily. What are the information hierarchy challenges? What are the edge cases when 3 stages have 20+ candidates each?"

This forces you to think about the real problem before you start pushing pixels. 80% of bad designs happen because the designer skipped this step.

Step 2: Explore in code, not Figma (Cursor, 1-2 hrs)
I scaffold the actual React component in Cursor. Not a mockup. Real code with real data.

Why? Because a Figma mockup with 5 cards looks great. A real component with 47 cards, 3 empty states, and a loading skeleton tells you the truth about your design.

I catch layout problems in 20 minutes that would take 2 days to discover after handoff.

Step 3: Refine the craft (Figma + Code, 1 hr)
This is where I apply the judgment AI can't give you. Does the spacing create the right visual rhythm? Does the hierarchy guide the eye correctly? Does the interaction feel right, or just function correctly?

AI is fast. But it has no taste. This step is where good design becomes great design.

Step 4: Push a PR (30 min)
What I designed IS what ships. Zero handoff gap. No "the developer interpreted it differently." The designer and the engineer are the same person.

Why this matters for you even if you don't code:

You can still use Steps 1 and 3.
Step 1 works for any designer. Paste your brief into Claude or ChatGPT before opening Figma. Ask it to find the edge cases, the conflicts, the scenarios your PM didn't mention. You'll start every project with a better understanding of the problem.

Step 3 is a mindset. AI can generate layouts. It can't tell you why one layout feels trustworthy and another feels cheap. That judgment is your real skill. Protect it.

The designers who will thrive in the next 2 years aren't the ones who avoid AI. They're the ones who use AI for speed and apply human judgment for quality.
Speed is a tool. Taste is a career.

A design workflow where AI holds the context, I do the thinking: from brainstorm to prototype