Community-curated tutorials, tweets, videos and templates for designing and building UI with Cursor.https://cursordesign.ai/enhttps://cursordesign.ai/tutorials/cursor-2-0-agents-browser/https://cursordesign.ai/tutorials/cursor-2-0-agents-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.Wed, 29 Oct 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-2-2-changelog/https://cursordesign.ai/tutorials/cursor-2-2-changelog/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.Wed, 10 Dec 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-branding-assets-generation/https://cursordesign.ai/tutorials/cursor-branding-assets-generation/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.Tue, 20 May 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-dashboard-prototype-prompts/https://cursordesign.ai/tutorials/cursor-dashboard-prototype-prompts/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.Wed, 08 Oct 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-design-engineer-workflow/https://cursordesign.ai/tutorials/cursor-design-engineer-workflow/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.Tue, 02 Sep 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-design-handoff-stork/https://cursordesign.ai/tutorials/cursor-design-handoff-stork/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.Tue, 16 Dec 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-design-mode-builderio/https://cursordesign.ai/tutorials/cursor-design-mode-builderio/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.Mon, 15 Dec 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-design-mode-screenshots/https://cursordesign.ai/tutorials/cursor-design-mode-screenshots/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.Fri, 22 Aug 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-figma-mcp-design-to-code/https://cursordesign.ai/tutorials/cursor-figma-mcp-design-to-code/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.Thu, 18 Sep 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-figma-mcp-official/https://cursordesign.ai/tutorials/cursor-figma-mcp-official/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.Thu, 18 Sep 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-rules-design-system/https://cursordesign.ai/tutorials/cursor-rules-design-system/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.Wed, 30 Jul 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-rules-mdc-design-docs/https://cursordesign.ai/tutorials/cursor-rules-mdc-design-docs/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.Wed, 30 Jul 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-shadcn-tailwind-landing/https://cursordesign.ai/tutorials/cursor-shadcn-tailwind-landing/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.Sun, 15 Jun 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-visual-editor-design-mode/https://cursordesign.ai/tutorials/cursor-visual-editor-design-mode/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.Wed, 12 Nov 2025 00:00:00 GMThttps://cursordesign.ai/tutorials/cursor-visual-editor-official/https://cursordesign.ai/tutorials/cursor-visual-editor-official/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.Wed, 10 Dec 2025 00:00:00 GMT