By: Elena Geroska, Product Designer in Funnel's AI team
If you’ve been following design or product circles lately, you’ve probably noticed a recurring theme: cross-functional up-skilling.
Designers are learning to code, engineers are experimenting with design systems and everyone’s exploring how AI can help teams move faster.
Last week, I published my first article Live Design: When Building Becomes the New Designing about how designing directly in code through Cursor reshaped how I bring ideas to life. It bridged the gap between ideation and implementation, compressing design, feedback and build cycles into one tight loop.
Since then, a lot of people have asked: How do you actually start?
That’s what this playbook is for. A practical guide to Live Design: what it is, when to use it and how to make it part of your everyday workflow.
Designing in code isn’t always the answer, but when it’s right, it’s transformative. The key is knowing when to reach for it.
Designing with real data and content
Static mocks can’t prepare you for messy, inconsistent or missing data. Cursor lets you design with real, live data, exposing edge cases instantly. You can also pull in live content, actual copy, user-generated images and unpredictable inputs to refine your layouts.
Micro-interactions and UI polish
Animations, hover states, and timing details often get lost in translation. Cursor lets you prototype micro-interactions directly in their real environment, so what you design is exactly what ships. It’s also a great place to fix visual inconsistencies, paddings, tokens, misaligned icons that would otherwise sit in a backlog forever.
UX copy
Copy is design. With Cursor, you can tweak microcopy and validate messaging in context, not in a Figma frame. It turns intuition into measurable learning.
Design system work
Cursor is perfect for token updates, documentation tweaks or component refinements. You can work inside your real design system and see changes instantly, without waiting for an engineering cycle.
Cursor is powerful, but not a silver bullet.
Critical or complex code paths
Large architectural changes, performance-sensitive code or anything security-related should remain in the hands of experienced engineers. Cursor is for iteration, not infrastructure.
Early ideation and collaboration
Brainstorming still belongs on a whiteboard, in FigJam/Miro or with sticky notes. When ideas are ambiguous, you need messy exploration, not structured code.
Visual exploration and creative direction
When exploring art direction, typography, or high-fidelity visuals, Figma still wins. Cursor takes over once you’ve chosen a direction and are ready to bring it to life.
There’s no one tool to rule them all and that’s a good thing. Each shines at a different stage:
Think of Cursor as the bridge between design and engineering. It turns design intent into code, feedback into iteration and collaboration into real outcomes.
Whether your team is already AI-forward or still figuring things out, you can start small and build confidence fast.
If your team already uses tools like Cursor, you’re halfway there. All you need is the right mindset and a bit of setup.
Within a few weeks, designing in code will feel as natural as opening Figma.
Start small and lead with curiosity. You don’t need company-wide adoption to prove the value.
Start with one small win. That’s usually all it takes to get people interested.
Things to Remember
Be specific
Clear, incremental prompts beat vague ones every time. Small, well-defined steps lead to better results and faster learning.
Use your context
Cursor’s real power comes from knowing your codebase. It works inside your repo, so its suggestions are grounded in your actual project instead of not generic guesses.
Know the basics
You’ll need a basic grasp of what a repo, branch, PR, and terminal are. It’s part of speaking the language of modern design. Here’s a good resource to get started
You can’t break anything
That’s the best part about the branching and PR process, it keeps everything safe. Experiment freely!
The best way to learn is by doing. Begin with low-risk, high-value improvements that build confidence.
Think of Ask Mode as your technical mentor. It helps you understand the code without changing anything
💡 Try asking:
- “Explain what this component does in simple terms.”
- “Are there accessibility issues in this file?”
- “Which colors should use tokens instead of hardcoded values?”
It’s a safe way to learn structure, logic and naming conventions.
These changes are perfect first steps, visible impact, low risk.
Ask Mode helps you find the file, and Agent Mode can make the change for you.
💡 Example:
Swap a legacy icon with a new system icon from your design tokens or asset library.
- Ask Mode prompt: “Where is this icon imported from, and what’s the path to update it?”
- Open the file and locate the icon, select it and add it to Cursor’s chat
- Agent Mode prompt: “Replace this icon with the [name] icon”
Legacy buttons, inconsistent spacing, small misalignments, these are excellent entry points.
They let you explore the code structure while cleaning up the product.
💡 Example:
Ask Mode → “Where is
<ButtonOld />still being used?”Agent Mode → “Replace it with
<ButtonNew />and test one instance locally.”
Once you’re comfortable, try small features that help you see the full design–build loop.
Once you’ve gotten comfortable exploring and fixing small things, try building a tiny piece of front-end functionality. This is where Live Design truly shines. You will be thinking and acting as both a designer and an engineer, seamlessly switching roles as you shape and test the experience in real time.
Pick something lightweight but useful, something you could realistically design, implement and test in a day. The goal isn’t perfection, but it’s to understand how design decisions translate into behaviour and where things feel ambiguous or under-defined once they hit real code.
💡 Example
While working on Funnel’s Conversational Analytics feature, I wanted users to easily find their past chats. So I decided to implement a Search Chats functionality directly through Cursor.
I started in Ask Mode, discussing my plan, what files might need updating, how to structure the search logic and what edge cases to consider. Then, in Agent Mode, I gradually built and refined the feature, testing it live in my local environment.
Update a spacing variable, color token or documentation note directly in Cursor.
If you’re using Figma’s Model Context Protocol (MCP) you can align tokens across both environments automatically, turning your design system into a true single source of truth.
This is strictly front-end work that requires only UI implementation work. That redesign that you always wanted to try , tweaking the layout, changing the order, behavior or positioning of the existing ui elements on the page? You can now do it, even release it behind a feature toggle and start observing the user behavior
One of the biggest benefits of Live Design isn’t speed, it’s clarity.
By writing structured, human-readable prompts that both engineers and AI can interpret, your design intent stays intact.
Here’s how that looks in practice:
💡Instead of:
“Add a hover state to make this feel more interactive.”
Try:
“When the user hovers over the button, increase brightness by 8%, animate over 150ms (ease-in-out), and show a
shadow-sm.”💡 Instead of:
“Show an error message when invalid.”
Try:
“If the field is empty on blur, show ‘This field is required’ in
text-errorcolor. For invalid input, replace with ‘Please enter a valid email address.’”💡Instead of:
“Make this feel faster.”
Try:
“Reduce transition delay to 50ms and preload the component on hover.”
These examples show how Live Design encourages precision and shared language, making collaboration smoother and outcomes stronger.
Once you’ve seen what Live Design can do, help your team experience it too.
Run a retro.
Gather your cross-functional team and reflect: what worked, what didn’t, and where to improve the workflow.
Share the knowledge.
At Funnel, we have “Sharing is Caring” sessions where we trade articles, prompts, and experiments. It keeps curiosity alive and helps the practice spread naturally.
Empower developers.
Embed design principles directly into Cursor’s project rules or custom commands. This ensures code changes stay aligned with design intent.
Measure impact.
Track both team metrics (review time, iteration speed) and product metrics (activation, task completion). Seeing results makes Live Design a sustainable part of your process.
If you’re still on the fence, here’s a challenge:
Spend a few hours this weekend building anything for yourself, a side project, or just for fun. Design it, build it, test it live. Once you experience that loop of thinking, building, and seeing your design come alive, you’ll understand why this approach is reshaping our craft.
Happy Live Designing!