Tutorials
Step-by-step guides on designing and prototyping with Cursor, hand-picked from across the web.
Generating Brand Assets and Icon Sets with Cursor
Using Cursor to produce SVG icon systems, favicons and a cohesive visual identity in code — defining a palette and stroke rules once, then generating matching marks and exporting build-ready assets.
Building a Landing Page with Cursor, shadcn/ui and Tailwind
From empty Next.js app to a shipped landing page: scaffolding with shadcn/ui, prompting Cursor for section-by-section layout, and using design tokens to keep the hero, pricing and footer visually consistent.
Enforcing a Design System with .cursor/rules
Write a design-system.mdc rule file that pins spacing scale, color tokens, radius and typography so every component Cursor generates stays on-brand — with examples of scoped rules and glob targeting.
Project Rules for Design Consistency (.cursor/rules)
Cursor's official Rules system lets you pin reusable, scoped instructions — including a design-system rule that encodes tokens, spacing and component conventions — so every generation stays on-brand. Covers MDC format, globs, and auto-attached vs. always-on rules.
Designing UI in Cursor from Screenshots — No Figma Required
A practical Design Mode workflow: paste references from Dribbble, Mobbin or Pinterest straight into Agent chat, pin a design-system rule file, and iterate to a polished component without ever opening Figma.
A Design Engineer's Daily Workflow in Cursor
How designers who code structure their Cursor setup — rules for tokens and accessibility, Playwright MCP for visual checks, and a tight loop of prompt, review the diff, and refine the pixels.
Figma to Code in Cursor with the Dev Mode MCP Server
How to wire Figma's Dev Mode MCP server into Cursor so the agent reads frames, variables and Auto Layout directly — turning selected designs into clean, token-aware React and Tailwind components.
Set Up the Figma MCP Server in Cursor
The official setup for connecting Figma's Dev Mode MCP server to Cursor so the agent reads selected frames, variables and Auto Layout directly — then generates code that respects your design tokens. Includes the Cursor MCP install flow and prompting tips.
Prompting Cursor for Data Dashboards That Don't Look Generic
Patterns for prompting dashboard layouts in Cursor — describing information hierarchy, chart density and empty states up front, then refining with reference images so the result feels designed rather than templated.
Cursor 2.0 — Multi-Agent Interface and the Native Browser
Cursor 2.0 reorganizes the IDE around agents instead of files and ships a native browser tool the agent can drive to test and iterate on UI. The foundation the Visual Editor design workflow is built on, plus Composer, Cursor's in-house low-latency coding model.
Cursor's Visual Editor: Point, Prompt, and Apply
A walkthrough of Cursor's in-browser Visual Editor — drag-and-drop layout edits, a Figma-style inspector for spacing and typography, and the Apply step that turns visual tweaks into real JSX and Tailwind.
Cursor 2.2 — Visual Editor, Debug Mode and Multi-Agent Judging
The official Cursor 2.2 changelog. Headlining the browser Visual Editor (Design Mode), plus Debug Mode, Multi-Agent Judging, Plan Mode Mermaid diagrams and Pinned Chats — the release that put visual design into the agent loop.
Cursor Browser Visual Editor — Design Mode for Your Live App
Cursor's official Visual Editor turns the in-browser preview into a design surface: drag-and-drop layout edits across the DOM, a Figma-style inspector for spacing, color, typography and design tokens, React state toggles, and a point-and-prompt flow that an agent commits back to real code.
Cursor's Design Mode (Visual Editing) Explained
Builder.io's deep dive on Cursor's Design Mode — what the Figma-style sidebar does well for editing your live React app, and the honest limitations (no multi-select, no easy undo, LLM-gated edits) versus a true design tool.
Cursor Just Killed the Design Handoff
An in-depth breakdown of how Cursor's Visual Editor collapses the designer-to-developer handoff — editing the live app visually and persisting real, reviewable code so there is no separate spec to translate.