As the sole design engineer on my team, my job is to help both designers and frontend engineers move faster, together.

The problem? Traditional handoff feels like passing documents between silos. Designers polish a Figma file, add a bunch of comments, and toss it over the wall. Engineers try to interpret it, but small details slip through the cracks.

Everyone gets frustrated.

What’s worse? We all use AI now. So The real differentiator isn’t speed anymore, it’s whether you can use AI to produce high-quality work.

So I spent five months researching with senior devs, interviewing designers, and pushing a free tool like Cursor to its limits, to understand how you should use it, actually.

What I found is a shared workflow, one that helps designers (even without coding experience) and developers use AI to bridge the gap between design, prototyping, and production.

This workflow has helped my team of 20 designers, developers, and PMs work more efficiently: designers design with better alignment to the components in our codebase, developers build faster with higher-quality code, and even senior frontend engineers benefit from accelerated development and less rework.

In this post, I’ll share with you what I learned, and what's the ideal workflow for you (using Cursor as an example). Whether you are a designer trying to prototype an interaction, or a frontend dev trying to code smarter, while following your company's codebase conventions.

P.S. If you have access to Claude Code and Figma MCP, the workflow would be a lot easier. But this post will still help you!

1. What you can actually achieve?

2. What is an AI Code Editor?

3. The cornerstone for success: Cursor Rules

4. The right mental model

5. Your ideal workflow

6. Tips, tricks, and common challenges

But before we dive in, let me tailor the guide to your role.