UI Implementation from Designs with Cursor

The designer just handed you a Figma file with 15 screens for a SaaS dashboard. There is a sidebar navigation, a data table with sorting and filtering, a chart component, a settings page with nested tabs, and a modal flow for creating new resources. The designs look polished — 8px spacing grid, consistent color tokens, responsive breakpoints for mobile and tablet. Your job is to turn these pixels into production React components that match the designs exactly, handle loading states, manage form validation, and work on a 320px-wide phone screen.

Cursor can see images. This changes the frontend development workflow fundamentally — instead of manually measuring padding values and guessing hex colors, you paste a screenshot into the Agent chat and the AI generates components that closely match the design. The technique below shows you how to get from Figma export to production component in a fraction of the time.

What You’ll Walk Away With

• A workflow for using screenshots as context in Cursor Agent to generate pixel-accurate components
• A design system prompt that establishes consistent tokens (colors, spacing, typography) across all generated components
• A responsive implementation technique using Tailwind breakpoints that Agent maintains automatically
• A form handling prompt that generates Zod validation, error states, and loading indicators in one pass
• An iterative refinement process for closing the gap between AI-generated UI and the final design

The Workflow

Step 1: Establish a design system in your rules

Before generating any components, encode your design tokens so every prompt produces consistent output. This is the single most impactful step for frontend AI-assisted development.

Tip

Copy-paste prompt — Design system rules:

Create .cursor/rules/design-system.mdc with:

---

description: Design system tokens and UI conventions globs: [“src/components/”, “src/app/“]

Design System

Colors

• Primary: #2563EB (blue-600), hover: #1D4ED8 (blue-700)
• Secondary: #6B7280 (gray-500)
• Background: #FFFFFF (light), #111827 (dark)
• Surface: #F9FAFB (gray-50), dark: #1F2937 (gray-800)
• Border: #E5E7EB (gray-200), dark: #374151 (gray-700)
• Error: #DC2626 (red-600)
• Success: #059669 (emerald-600)

Spacing

• Use Tailwind spacing scale. Base unit: 4px.
• Component padding: p-4 (16px) for cards, p-6 (24px) for page sections
• Stack spacing: space-y-4 between form fields, space-y-6 between sections

Typography

• Headings: font-semibold. Page title: text-2xl. Section: text-lg. Label: text-sm.
• Body: text-sm text-gray-600 dark:text-gray-400
• Use Inter font family

Components

• Buttons: rounded-lg, focus:ring-2, disabled:opacity-50
• Cards: rounded-xl border shadow-sm
• Inputs: rounded-md border border-gray-300 focus:border-blue-500 focus:ring-1
• All interactive elements need focus-visible states for accessibility
• All components must support dark mode via Tailwind dark: prefix

This rule file will be automatically included whenever Agent edits files in src/components/ or src/app/, ensuring every generated component uses the same tokens.

Step 2: Generate components from screenshots

Cursor supports image input in Agent chat. Take a screenshot of a specific section of your Figma design (not the entire page — one component at a time) and paste it directly into the chat.

[paste screenshot of the data table from Figma]

Implement this data table component at src/components/data-table.tsx:

1. Match the design exactly -- column headers, row styling, hover states, the zebra striping
2. Props: columns (configurable), data (generic type), onSort, onRowClick
3. Add sortable column headers with ascending/descending indicators
4. Loading state: skeleton rows matching the column widths
5. Empty state: centered message with icon
6. Responsive: horizontally scrollable on mobile with the first column sticky
7. Use our design system tokens from .cursor/rules

This is a React Server Component by default. If interactivity is needed
(sorting, row clicks), extract only the interactive parts into a client component.

Note

For best results, screenshot individual components rather than entire pages. A screenshot of just the data table gives the AI better visual detail than a screenshot of the entire dashboard at a smaller size. You can always compose components later.

Step 3: Handle forms with validation

Forms are where AI-generated code saves the most time — the boilerplate of validation schemas, error messages, loading states, and field types is tedious but mechanical.

Tip

Copy-paste prompt — Form generation:

@src/db/schema.ts

[paste screenshot of the “Create Resource” form from Figma]

Build this form at src/components/create-resource-form.tsx:

1. Match the design: field layout, labels, helper text, error message positioning
2. Create a Zod validation schema that matches the database constraints:
   • Name: required, 3-100 characters
   • Description: optional, max 500 characters
   • Type: required, one of [“api”, “database”, “storage”]
   • Region: required, populated from a static list
3. Use react-hook-form with the Zod resolver
4. Show inline validation errors below each field on blur, not on submit
5. Disable the submit button while submitting, show a spinner inside it
6. On success: close the modal, show a toast, invalidate the resource list cache
7. On error: show the server error message above the form, keep field values

Use server actions for the form submission. TypeScript only — type the form values from the Zod schema.

Step 4: Build responsive layouts with Tailwind

For full page layouts, provide the screenshot and specify the responsive behavior explicitly, because the AI cannot infer your mobile design from a desktop screenshot.

[paste screenshot of the dashboard layout from Figma]

Build the dashboard layout at src/app/dashboard/layout.tsx:

1. Desktop (lg+): fixed sidebar (w-64) on the left, main content area on the right
2. Tablet (md): collapsible sidebar that overlays content as a sheet from the left
3. Mobile (sm): no sidebar, bottom navigation bar with 5 icon buttons
4. The sidebar has: logo area, navigation links with icons, user avatar + name at the bottom
5. Main content area has a top bar with: breadcrumbs, search input, notification bell, user menu
6. Content area scrolls independently from the sidebar
7. The sidebar active link has a left border indicator and background highlight

Use Tailwind responsive prefixes consistently. Test that the layout does not
break at 768px and 1024px breakpoints specifically.

Step 5: Refine with inline edits

Once the initial component is generated, use Cmd+K (inline edit) for visual refinements. This is faster than Agent mode for small CSS changes because the feedback loop is immediate.

Select the specific JSX you want to adjust, hit Cmd+K, and describe the change:

The gap between the table header and the first row is too large. Reduce it from
py-4 to py-2 on the thead cells, and change the header background from gray-100
to gray-50 to make it more subtle.

For visual discrepancies that are hard to describe in words, take a side-by-side screenshot of the Figma design and your implementation, paste it into Agent chat, and ask:

[paste side-by-side comparison image]

The left side is the Figma design. The right side is my current implementation.
Fix the differences -- the spacing between cards is too large, the shadow is
too strong, and the border radius should be larger.

Step 6: Add interaction states and animations

The final polish layer often gets skipped under deadline pressure, but it makes a huge difference in perceived quality.

Tip

Copy-paste prompt — Interaction polish:

@src/components/data-table.tsx @src/components/create-resource-form.tsx

Add these interaction states to the dashboard components:

1. Data table rows: highlight on hover (bg-gray-50), subtle scale on click, smooth row reorder animation
2. Sidebar navigation: active link transition (150ms ease), hover state on inactive links
3. Form fields: smooth focus ring transition, shake animation on validation error
4. Modals: fade-in backdrop + slide-up content animation (200ms)
5. Buttons: subtle press effect (scale-95 on active), loading spinner transition
6. Toast notifications: slide in from top-right, auto-dismiss with progress bar
7. Skeleton loading: pulse animation with proper widths matching the content they replace

Use Tailwind’s transition and animate utilities. No external animation libraries. Respect prefers-reduced-motion for accessibility.

Using the Figma MCP Server

If your team uses Figma heavily, the Figma MCP server lets Cursor read design files directly instead of relying on screenshots. Configure it in .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp"],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key"
      }
    }
  }
}

With the MCP server, you can reference Figma frames by URL:

Using the Figma MCP, read the component at this URL:
https://www.figma.com/file/abc123/Dashboard?node-id=456

Implement it as a React component following our design system rules.
Extract exact color values, spacing, and font sizes from the design file.

This eliminates the screenshot step and gives Agent access to exact pixel values, color tokens, and spacing that screenshots approximate.

When This Breaks

Generated components look close but not exact. Screenshots lose fine detail at lower resolutions. Crop tightly around the specific component, use Retina/2x screenshots if possible, and explicitly state any values the screenshot does not convey clearly: “The border radius is 12px, the shadow is shadow-md, the font weight is 500.”

Agent uses CSS-in-JS instead of Tailwind. If the generated code includes inline styles or styled-components, your design system rule is not being picked up. Verify the globs field in your .cursor/rules/design-system.mdc matches the file path. Add an explicit instruction: “Use Tailwind CSS classes exclusively. No inline styles.”

Dark mode is broken. The AI sometimes generates dark mode styles that conflict with light mode. Use Tailwind’s dark: prefix strategy consistently. Add a rule: “Every color class must have a corresponding dark: variant.” Test both modes by toggling your system theme.

Responsive layout breaks at specific breakpoints. The AI picks standard Tailwind breakpoints (sm, md, lg) but your design might have custom breakpoints. Specify exact pixel values: “Sidebar collapses at 1024px, not at Tailwind’s default lg (1024px is the same, but state the requirement explicitly).” For unusual breakpoints, add custom values to tailwind.config.ts.

Components are too big and do too much. Agent sometimes generates 300-line components with all logic inline. Push back: “This component is too large. Extract the table header into a separate component, the row into another, and the sort logic into a custom hook.”

What’s Next

Test-Driven Development Add component tests and visual regression tests to your new UI.

Performance Optimization Profile rendering performance and eliminate unnecessary re-renders.

Documentation Generation Auto-generate a component library with usage examples and props documentation.