Design System Engineer – Figma to Production Code + MCP / AI Integration (Cursor / Claude)

Project Overview

We’ve built a comprehensive design system in Figma (tokens, variables, components, and variants). We’re looking for a senior-level engineer to translate this system into a production-grade coded design system and connect it to AI coding tools (Cursor + Claude via MCP) so our application development automatically follows our design and component standards.

The goal is to create a single source of truth between design and code, where AI-assisted development consistently references our real components, tokens, and layout patterns instead of generating custom or inconsistent UI.

Scope of Work

1. Code-Based Design System

You will convert our Figma design system into a maintainable, scalable code system, including:

Design tokens (colors, spacing, typography, shadows, radius, breakpoints)

Core UI components (Button, Input, Select, Card, Modal, Tabs, Typography, Layout, etc.)

Variant handling (size, state, theme, disabled, error, loading, etc.)

Documentation / usage examples for developers

We prefer a modern stack such as

React + TypeScript (preferred)

Tailwind or CSS Variables / CSS-in-JS

(Open to alternatives if well-justified)

2. Figma → Code Mapping (AI-Ready Setup)

You will

Set up Figma Code Connect or equivalent mapping between Figma components and real code components

Ensure AI-generated code reuses our existing component library instead of inventing new UI

Align token names and variants between Figma and code

3. MCP Integration (Cursor + Claude)

You will

Set up and configure Figma MCP server

Connect MCP to

Cursor IDE

Claude Code (Anthropic)

Configure rules/prompts so AI tools

Reference our design tokens

Use our component library

Match selected Figma frames/layouts when generating UI

4. AI Development Rules & Automation

Deliver

A “system prompt / rules file” for Cursor and Claude that enforces:

No raw HTML elements for UI

Only approved components and tokens

Design consistency enforcement

Optional: CLI or scripts to validate token/component usage

Deliverables

Fully coded design system repository

Token system synced with Figma

Figma Code Connect mappings

MCP server configured and documented

Cursor + Claude working integration

Developer documentation (README + onboarding guide)

Example demo app showing Figma → AI → Code workflow

Required Skills

Figma (Advanced design systems, variables, components, Code Connect)

Frontend Architecture (React/TS or equivalent)

Design Tokens & Theming Systems

MCP (Model Context Protocol) setup and configuration

AI Developer Tools (Cursor, Claude, or similar)

Git, CI/CD, Documentation Best Practices

Nice to Have

Experience building internal design systems at scale

AI-assisted dev workflows

Open-source design system contributions

Storybook / Ladle / Docs tooling experience

What We Will Provide

Full access to Figma design system

Codebase / preferred tech stack

Example UI flows and screens

Test environment for MCP & AI tools

How to Apply

Please include

Examples of design systems you’ve coded

Experience with Figma variables and Code Connect

Any experience integrating AI into developer workflows

Your proposed architecture & stack recommendation

Budget & Timeline

Open to fixed-price or hourly

Expected timeline: 2-3 weeks for full system setup