Skills
.Work. You
Rest

implement-designs

Official

Figma to Code: Design Implementation

Design & Creative#react#css#figma#mcp#design tokens#web components#design-to-code
Authorlushly-dev
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of translating Figma designs into production-ready code, bridging the gap between design and development by automating the extraction and conversion of design specifications.

Core Features & Use Cases

  • Figma MCP Integration: Connects with Figma's MCP server for direct design data retrieval.
  • Token Extraction & Translation: Extracts design tokens (colors, typography, spacing) and converts them from Figma/Tailwind formats to CSS custom properties.
  • Component Mapping: Translates React Code Connect component names to your project's web component equivalents.
  • Asset Management: Handles the extraction and local storage of image assets from Figma, preventing broken links due to expiring URLs.
  • Use Case: When a designer provides a Figma link for a new feature, use this Skill to automatically extract all design tokens, map the components, and download necessary assets, providing a solid foundation for developers to build upon.

Quick Start

Use the implement-designs skill to process the Figma link: https://www.figma.com/design/filekey/node-id=12345

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: implement-designs
Download link: https://github.com/lushly-dev/afd/archive/main.zip#implement-designs

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.