figma-implement-design
Implement Design
Overview
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
Prerequisites
- Figma MCP server must be connected and accessible
- User must provide a Figma URL in the format:
https://figma.com/design/:fileKey/:fileName?node-id=1-2:fileKeyis the file key1-2is the node ID (the specific component or frame to implement)
- OR when using
figma-desktopMCP: User can select a node directly in the Figma desktop app (no URL required) - Project should have an established design system or component library (preferred)
Required Workflow
Follow these steps in order. Do not skip steps.
More from skillcreatorai/ai-agent-skills
code-review
Automated code review for pull requests using specialized review patterns. Analyzes code for quality, security, performance, and best practices. Use when reviewing code changes, PRs, or doing code audits.
963code-refactoring
Code refactoring patterns and techniques for improving code quality without changing behavior. Use for cleaning up legacy code, reducing complexity, or improving maintainability.
584backend-development
Backend API design, database architecture, microservices patterns, and test-driven development. Use for designing APIs, database schemas, or backend system architecture.
484expo-app-design
Build beautiful cross-platform mobile apps with Expo Router, NativeWind, and React Native.
361code-documentation
Writing effective code documentation - API docs, README files, inline comments, and technical guides. Use for documenting codebases, APIs, or writing developer guides.
333database-design
Database schema design, optimization, and migration patterns for PostgreSQL, MySQL, and NoSQL databases. Use for designing schemas, writing migrations, or optimizing queries.
323