{
  "schema_version": "1.0",
  "id": "archive:https://cursor.com/blog/design-mode",
  "slug": "design-mode-03jgzd5",
  "url": "https://feed7.dev/p/design-mode-03jgzd5",
  "title": "Direct agents with visual prompts in Design Mode",
  "why_included": "Cursor's Design Mode lets you prompt agents visually in a running app: click or multi-select elements, draw annotations on a frozen frame, or narrate by voice; the agent gets each element's xpath, props, and styles.",
  "summary": "**The gist** Cursor updated **Design Mode** (**June 5, 2026**) in the Agents Window: click or **multi-select** elements in your running app, draw annotations on a frozen viewport frame, or narrate changes by voice. A selection captures the element's xpath, component, attributes, computed styles, and **fiber-tree props**, plus a screenshot for layout context.",
  "practical_implication": "**Why it matters** UI work is where text prompts leak the most precision — a vague description like the second button in the header becomes an exact **element reference** with styles and props attached. Combined with **hot reload**, it tightens the describe-fix-verify loop for frontend agent tasks.",
  "agent_context": "**The gist** Cursor updated **Design Mode** (**June 5, 2026**) in the Agents Window: click or **multi-select** elements in your running app, draw annotations on a frozen viewport frame, or narrate changes by voice. A selection captures the element's xpath, component, attributes, computed styles, and **fiber-tree props**, plus a screenshot for layout context.\n\n**Why it matters** UI work is where text prompts leak the most precision — a vague description like the second button in the header becomes an exact **element reference** with styles and props attached. Combined with **hot reload**, it tightens the describe-fix-verify loop for frontend agent tasks.\n\n**Watch out** It's tuned for **Composer 2.5** and needs the **Cursor browser** in the Agents Window, so this is a Cursor-stack feature rather than a portable pattern. Cursor gives **no metrics** on accuracy or speed gains.",
  "source": {
    "name": "Cursor",
    "url": "https://cursor.com/blog/design-mode",
    "published_at": null
  },
  "source_class": "blog_post",
  "content_type": "Engineering Post",
  "layer": "tools",
  "domains": [
    "coding"
  ],
  "topics": [
    "coding-agents",
    "dev-ux",
    "prompting"
  ],
  "verification": {
    "status": "official_source",
    "label": "Official Source",
    "method": "source_feed",
    "verified_at": null
  },
  "uncertainty": [
    "It's tuned for **Composer 2.5** and needs the **Cursor browser** in the Agents Window, so this is a Cursor-stack feature rather than a portable pattern. Cursor gives **no metrics** on accuracy or speed gains."
  ],
  "lifecycle": "Current",
  "published_at": null,
  "modified_at": null,
  "supersedes": [],
  "expires_at": null,
  "formats": {
    "html": "https://feed7.dev/p/design-mode-03jgzd5",
    "json": "https://feed7.dev/p/design-mode-03jgzd5.json",
    "markdown": "https://feed7.dev/p/design-mode-03jgzd5.md"
  }
}