Figma Design Migration into Cursor Frontend
Budget: $30 – $250 USD
Scope of Work: Figma to Cursor Frontend Migration (No Backend)
Project Goal
Migrate an existing Figma design into a fully functional, frontend-only web application using Cursor, based on a modern React stack. The result must be clean, maintainable, and ready for further optimization by me.
No backend, database, or authentication logic is required.
Tech Stack (Mandatory):
Next.js (App Router preferred)
React
Tailwind CSS (utility-first, no custom CSS files unless strictly necessary)
TypeScript
Chart library (Recharts, Chart.js, or equivalent)
MCP Server for Figma → code migration
Core Responsibilities
1. Figma → Code Migration
Use MCP server to migrate Figma frames into a working codebase
Preserve layout structure, spacing, and visual hierarchy
Ensure all ~15 pages render correctly
Follow component-based architecture (no monolithic pages)
2. Project & Code Structure
Set up a clean and logical folder structure
Reusable components for:
Navigation / Header
Footer
Cards
Stat blocks
Buttons
No duplicated layout logic across pages
3. Styling & Design System
Implement Tailwind CSS with:
Consistent spacing scale
Typography scale
Color tokens (via Tailwind config)
No inline styles
No random or ad-hoc class usage
Design must closely match Figma, but pixel-perfect precision is not required
4. Charts & Statistics
Implement charts based on the Figma designs
Use dummy / mock data only
Charts must be:
Responsive
Styled to match the design (colors, fonts, spacing)
KPI cards / statistic blocks must be reusable components
5. Assets & Icons
Use Lucide React for UI icons
Raster images can initially use Figma asset references
No custom icon exports unless explicitly required
Ensure assets are easy to refactor post-handover
6. Responsiveness
Desktop, tablet, and mobile layouts must work
No broken layouts at common breakpoints
Mobile navigation must be functional (menu open/close)
7. Code Quality
Clean, readable, and well-structured code
Meaningful component and file naming
No commented-out legacy code
No unused dependencies
Explicitly Out of Scope (not need to be done)
Backend logic
Database integration
Authentication
API connections
SEO optimization
Performance tuning
Animations beyond basic hover states
Definition of Done
Project builds without errors
All pages are accessible and functional
Charts render correctly with mock data
Codebase is easy to extend and refactor
Client can continue optimizing design and content independently
Handover Requirements
Git repository with full source code
Short README explaining:
how to run the project locally
project structure overview
Clear confirmation that MCP migration was used
Project Goal
Migrate an existing Figma design into a fully functional, frontend-only web application using Cursor, based on a modern React stack. The result must be clean, maintainable, and ready for further optimization by me.
No backend, database, or authentication logic is required.
Tech Stack (Mandatory):
Next.js (App Router preferred)
React
Tailwind CSS (utility-first, no custom CSS files unless strictly necessary)
TypeScript
Chart library (Recharts, Chart.js, or equivalent)
MCP Server for Figma → code migration
Core Responsibilities
1. Figma → Code Migration
Use MCP server to migrate Figma frames into a working codebase
Preserve layout structure, spacing, and visual hierarchy
Ensure all ~15 pages render correctly
Follow component-based architecture (no monolithic pages)
2. Project & Code Structure
Set up a clean and logical folder structure
Reusable components for:
Navigation / Header
Footer
Cards
Stat blocks
Buttons
No duplicated layout logic across pages
3. Styling & Design System
Implement Tailwind CSS with:
Consistent spacing scale
Typography scale
Color tokens (via Tailwind config)
No inline styles
No random or ad-hoc class usage
Design must closely match Figma, but pixel-perfect precision is not required
4. Charts & Statistics
Implement charts based on the Figma designs
Use dummy / mock data only
Charts must be:
Responsive
Styled to match the design (colors, fonts, spacing)
KPI cards / statistic blocks must be reusable components
5. Assets & Icons
Use Lucide React for UI icons
Raster images can initially use Figma asset references
No custom icon exports unless explicitly required
Ensure assets are easy to refactor post-handover
6. Responsiveness
Desktop, tablet, and mobile layouts must work
No broken layouts at common breakpoints
Mobile navigation must be functional (menu open/close)
7. Code Quality
Clean, readable, and well-structured code
Meaningful component and file naming
No commented-out legacy code
No unused dependencies
Explicitly Out of Scope (not need to be done)
Backend logic
Database integration
Authentication
API connections
SEO optimization
Performance tuning
Animations beyond basic hover states
Definition of Done
Project builds without errors
All pages are accessible and functional
Charts render correctly with mock data
Codebase is easy to extend and refactor
Client can continue optimizing design and content independently
Handover Requirements
Git repository with full source code
Short README explaining:
how to run the project locally
project structure overview
Clear confirmation that MCP migration was used