When I joined my current web3 startup as a UX engineer intern, my first task wasn’t just to design a feature or fix a layout bug—it was bigger. I was asked to design a faster, smarter workflow to bridge the gap between design and frontend handoff.

Like many teams, we had a familiar problem: designers hand off static mocks, and frontend devs painstakingly translate them into working UIs. Pixel-perfect details get lost. Developers burn time tweaking CSS. Everyone wishes the process were smoother.

So I decided to explore a trending topic: Could I enable my design team to use Cursor AI to help us close that gap? Could an AI help turn high-fidelity design mocks into real frontend code, accurately and efficiently?

This is the case study of how I tested that idea—how I used Cursor AI to prototype a design-to-code workflow, from static image to production-ready React component. The goal? A system my team could adopt to accelerate handoff, reduce friction, and maintain quality.

To keep things scoped, I chose a multi-step subscription flow as the design example—something visually rich and functionally complex enough to test AI collaboration.

•Design Input: Static UI images (mockups of each step in the subscription process)

•Tech Stack: Next.js + TailwindCSS

•Tool: Cursor – an AI-powered IDE assistant that understands code, layout, and design prompts

•Project: Social Trading Subscription

The final output was developed within 60 minutes.

Through trial and error, and based on advice from AI researcher Aaron Halfaker, I focused on these prompting strategies for the best results:

•Prompt with full context, like chain-of-thought: I wrote long prompts explaining what I needed, why it mattered, and how to approach it.

•Assign roles: I asked Cursor to "act like a senior UI designer" or “UX writer” depending on the task.

•Create controlled vocabulary: align the language used with the task at hand.

•Don't fear large inputs: Long prompts and multi-step goals were fine. Cursor handled the tokens.

I began by feeding Cursor the first design mockup: a subscription plan popup. My prompt was simple:

“Analyze this pop-up in a 1440px screen as a senior designer. What do you notice about layout, fonts, spacing, background, color, effects? Then implement it in a responsive React component. JS only. Use placeholders for missing assets. Comment the logic.”

Cursor gave me a response describing the design, calling the pop-up a “subscription plan”. This approach help me create a controlled vocabulary for further prompts. Cursor also created a baseline layout in the component named SubscriptionPlan.js. Not perfect, but a good start.

Cursor missed the design's precise color palette and alignment of the button positioning. My goal: match spacing and scaling exactly.

"Analyze and extract colors from this image like a senior UI designer, and align the button to the center, also make the modal responsive. Do not change unnecessary code, and provide a detailed documentation."

The result? A fixed layout that's much more aligned with design intent.

The design had multiple modals: plan selection → discount field → API key entry. I gave Cursor the respective mockups and asked it to build the components.

“After clicking Next, load the next step’s popup. Analyze the second popup’s layout, then implement it following the styling of @SubscriptionPlan. Do not change unnecessary code, and provide a detailed documentation.”

We fixed the button navigation, added new components, and kept styling consistent across steps. Cursor handled state logic and imports smoothly with each try. I also set up a discount code to test if we can apply it to the discount field, which worked.

Since the design and UX is obviously not perfect, I wanted to see if Cursor could help me polish it.

“Act like a senior UX designer. Fix scroll issues, rewrite unclear copy, and improve accessibility. Replace all the module.css styling with tailwindcss. Follow the best practice from @Web. Do not change unnecessary code, and provide a detailed documentation."

The results:

•Scrollable modals

•Tab-friendly navigation

•Hover effects for clickable elements

•Clearer copy

What worked:

•Image-fed prompting + controlled vocabulary = better results

•Breaking tasks into single-purpose prompts avoids hallucinations

Challenges:

•If the result is way off, that may indicate the need for more controlled vocabulary, context (may need starting code), or a redefined problem scope.

Now, our workflow looks like:

•Designer exports static mockups.

•Designer feeds Cursor context and prompts step-by-step.

•Cursor produces a base component with layout, color, and structure.

•We refine iteratively: polish UX, accessibility, animation, etc.

The next post will be about the second part of the workflow, where I will use Cursor to modify the code that aligns with our frontend codebase, and also some backend touchpoints like subscription plan submission, API key validation.