Design

Prototyping UI in code to stress-test designs early

AI-assisted coding tools are used to scaffold real UI components and rough code prototypes from briefs, design-system context, and realistic data so designers can stress-test layouts, states, and interaction direction before handoff.

Why the human is still essential here

AI speeds up component generation and prototyping, but the designer must evaluate usability, visual hierarchy, spacing, interaction quality, and fidelity to the original problem. Human taste and product judgment determine what is actually ready to ship.

How people use this

React screen scaffolding

AI generates a first-pass React interface from a written screen concept so the designer can assess structure with real components instead of static mockups.

Cursor / v0

Design-system-aware UI prototype

AI generates a rough React interface using existing tokens, components, and layout patterns so the prototype stays close to the real product.

v0 / Cursor

Prompt-to-prototype concept screen

AI turns a written problem statement or Figma frame into an interactive prototype that can be clicked through and shared for feedback.

Figma Make

Need Help Implementing AI in Your Organization?

I help companies navigate AI adoption -- from strategy to production. Whether you are building your first LLM-powered feature or scaling an agentic system, I can help you get it right.

LLM Orchestration

Design and build LLM-powered products and agentic systems

AI Strategy

Go from idea to production with a clear implementation roadmap

Compliance & Safety

Build AI with human-in-the-loop in regulated environments

Related Prompts (4)

Latest community stories (2)

How-To
LinkedIn

I shipped 50+ screens as a solo design engineer in 3 months.

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.

MS
Muhammad ShakirDesign Engineer at Pavago
May 8, 2026
Personal Story
Medium

How I use AI to partner on design problems

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

SS
Suleiman ShakirDesigner, developer & artist | Design Systems @Amazon
May 11, 2026