Figma Implement Design

This is the workflow you want when someone hands you a Figma URL and expects pixel-perfect implementation. It walks through the full cycle: parse the node ID from the URL, fetch design context and screenshots via Figma MCP, download assets, then translate everything into your project's conventions while maintaining 1:1 visual fidelity. The key insight here is treating Figma's React/Tailwind output as a design reference, not final code. You map to your existing design tokens, reuse components from your system, and validate against the screenshot before calling it done. Works with both the remote Figma MCP server and the desktop variant that reads your current selection. Best for teams that need design/dev handoff discipline, not one-off prototypes.

skills.sh installs: 234
GitHub stars: 7.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add tech-leads-club/agent-skills --skill figma-implement-design --agent claude-code

Installs into .claude/skills of the current project.

Files

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
- :fileKey is the file key
- 1-2 is the node ID (the specific component or frame to implement)
OR when using figma-desktop MCP: 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)