---
title: The Live Design Playbook
description: "A practical guide to Live Design: what it is, when to use it and how to make it part of your everyday workflow."
---

[Dev Blog ](https://funnel.io/devblog)

# [The Live Design Playbook](https://funnel.io/devblog/the-live-design-playbook)

 Written by [Funnel Dev](https://funnel.io/devblog/author/funnel-dev) | Oct 30, 2025 12:07:56 PM

By: [Elena Geroska,](https://www.linkedin.com/in/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](https://funnel.io/devblog/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.

## **1. Where Cursor shines (and when it doesn’t)**

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**.

### **When Cursor shines**

**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.

### **When Cursor might not be right**

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.

## **2. How Cursor fits with other tools**

There’s no one tool to rule them all and that’s a good thing. Each shines at a different stage:

- **Miro / FigJam** → Divergent thinking and exploration
- **Figma (with Dev Mode + MCP)** → Visual design and system structure
- **Cursor (and similar tools)** → Live design, iteration, and implementation

Think of Cursor as the **bridge** between design and engineering. It turns design intent into code, feedback into iteration and collaboration into real outcomes.

## **3. Getting started with Live Design**

Whether your team is already AI-forward or still figuring things out, you can start small and build confidence fast.

### **If you’re in an AI-forward company**

If your team already uses tools like Cursor, you’re halfway there. All you need is the right mindset and a bit of setup.

1. **Install Cursor** and connect it to your repo.
2. **Create a safe playground** , a local branch where you can experiment freely.
3. **Learn the workflow,** understand branching, pull requests and local testing.
4. **Pair with your engineers.** They’re your best allies. Ask questions, share context and schedule short learning sessions.

Within a few weeks, designing in code will feel as natural as opening Figma.

### **If you’re in a more traditional environment**

Start small and lead with curiosity. You don’t need company-wide adoption to prove the value.

- **Build a case.** Collect articles, podcasts and examples showing how Live Design speeds up iteration.
- **Find an engineering ally.** Pair up with someone open to experimentation.
- **Time-box your learning.** Keep it scoped so it doesn’t conflict with deliverables.
- **Use Cursor’s free tier** to test and explore.

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](https://ben.balter.com/2023/03/02/github-for-non-technical-roles/) 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!

## **4. Your first Cursor tasks**

The best way to learn is by doing. Begin with **low-risk, high-value** improvements that build confidence.

### **Explore Ask mode**

Think of [**Ask Mode**](https://cursor.com/docs/agent/modes) 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.

### **Tweak copy, icons, or illustrations**

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”

### **Address UX debt**

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.”

## **5. Hands-on recipes you can ship this week**

Once you’re comfortable, try small features that help you see the full design–build loop.

### **Build small front-end features**

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.

### **Improve design system tokens**

Update a spacing variable, color token or documentation note directly in Cursor.

If you’re using [Figma’s Model Context Protocol (MCP)](https://www.theverge.com/news/679439/figma-dev-mode-mcp-server-beta-release) you can align tokens across both environments automatically, turning your design system into a true *single source of truth*.

### **Experiment with a new layout from an existing page**

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

## **6. Communicating design intent clearly**

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-error` color. 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.

## **7. Levelling up your team**

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.

## **8. Your next step**

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!**

[View full post](https://funnel.io/devblog/the-live-design-playbook)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Funnel Dev"
  },
  "dateModified" : "2025-10-30T12:07:56.143Z",
  "datePublished" : "2025-10-30T12:07:56Z",
  "headline" : "The Live Design Playbook",
  "image" : {
    "@type" : "ImageObject",
    "height" : 1913,
    "url" : "https://funnel.io/hubfs/live%20design%20playbook%20image%201.png",
    "width" : 3000
  },
  "mainEntityOfPage" : "https://funnel.io/devblog/the-live-design-playbook",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Dev Blog"
  }
}
```