Skip to main content

Command Palette

Search for a command to run...

Cursor for Designers

Designers use Cursor to build functional prototypes, ship small UI fixes, and create internal tools. Describe what you want to build, see it in the integrated browser, and refine with follow-up prompts.

Building functional prototypes

Describe what you want to build. The agent builds it, you see the result live, and you iterate with follow-up prompts.

Agent example: Prototype an onboarding flow
Build a prototype of a new onboarding flow with three steps: account setup, team invitation, and first project creation. Make it interactive and use our existing component library.
Agent example: Prototype with real data
Create an interactive checkout flow that pulls real product data from our API. Include the cart summary, shipping options, and payment form.

Real prototypes can do things static mocks cannot: connect to actual APIs, respond to real user input, handle edge cases like empty states and error messages. When you test with users, they interact with something authentic.

Plan Mode helps structure more complex prototypes. Press Shift+Tab to start planning. Cursor researches your codebase, asks clarifying questions, and generates a structured plan before building.

Connecting Figma and your design system

The Figma plugin connects Cursor to your design files. Copy a Figma link, and Cursor can reference frames, extract design tokens, and generate code that matches your designs.

Agent example: Build from Figma
Reference figma.com/file/abc123/set... and build a React component that matches the design. Use our existing design system components.

The workflow works best when you combine multiple context sources: Figma for the visual reference, your design system documentation, and your component library from Storybook. Together, these give Cursor enough context to generate code that matches your visual language.

Design system rules

Use rules files to encode your design system so Cursor follows your conventions automatically. Create a .cursor/rules/design-system.mdc file:

Rules example: Design System
# Design System Rules## Components- Use components from @/components/ui for all UI elements- Never create custom buttons, inputs, or modals - use the design system- Import icons from @/components/icons## Tokens- Use CSS variables for colors: var(--color-primary), var(--color-surface)- Use spacing scale: var(--space-1) through var(--space-8)- Typography: use text-body, text-heading, text-caption classes## Patterns- Cards use 16px padding and 8px border radius- Forms use 24px vertical spacing between fields- Modals are max 480px wide on desktop## Files to reference- src/components/ui/Button.tsx (canonical button implementation)- src/styles/tokens.css (all design tokens)

With rules in place, generated code follows your design system rather than starting from scratch. Update the rules as your system evolves.

Build directly in Figma

Cursor can create Figma files, write directly to existing ones, and use your team's design system. With the Figma plugin, Cursor can inspect your published libraries and work with existing components, variables, tokens, and styles. It can also create new components from your existing codebase using the /figma-generate-library skill.

Shipping small fixes

Many designers ship code directly: spacing adjustments, color corrections, copy changes, alignment fixes. These changes are small individually but add up across a product.

Agent example: Fix spacing
The spacing between the header and the hero section is too tight. Add 24px of margin.
Agent example: Fix copy
The error message on the login form says 'Invalid credentials.' Change it to 'The email or password you entered is incorrect.'

Start small: a copy change, a color tweak, a padding adjustment. Engineers review your PR and help with anything that needs attention. Over time, you build confidence and take on more.

Building internal tools

Designers often have ideas for tools that would improve their workflow: a color palette generator, a component inventory, a design token visualizer. With Cursor, you can build these yourself.

Agent example: Build a color tool
Build a simple tool that takes a hex color and shows all the tints and shades, plus the contrast ratios against white and black backgrounds.
Agent example: Build a component inventory
Create a page that displays all our design system components with their variants and props documented.

These tools often start as personal utilities and become team resources.

Getting started

You do not need a local development environment to start. Cloud Agents connect to your repositories and run in the background. Combined with the Slack integration, you can ask questions and kick off tasks from Slack.

For designers who want more control, the full Cursor app provides the integrated browser for live previews, direct file editing, and richer context from having the codebase open.

  1. Start with Cloud Agents. Kick off tasks from Slack without opening the editor. No setup required.

  2. Build a prototype. Pick something you would normally mock in Figma and build it as a functional prototype instead.

  3. Connect Figma. Install the Figma plugin to pull designs directly into Cursor. Browse the Cursor Marketplace for more plugins. For community MCP servers, browse cursor.directory.

  4. Create design system rules. Add a .cursor/rules/design-system.mdc file that encodes your components, tokens, and patterns.

  5. Ship something small. Fix a spacing issue or update some copy. Get comfortable with the PR process.