Skills
.Work. You
Rest

@tank/figma-to-code

Official

Pixel-perfect UI from Figma designs.

Design & Creative#css#figma#design tokens#design to code#pixel perfect#ui implementation
Authortankpkg
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill bridges the gap between design mockups and functional code, ensuring UI implementations match Figma designs with exact pixel fidelity.

Core Features & Use Cases

  • Design Extraction: Leverages Figma's MCP tools to extract design specifications, including layout, colors, typography, and assets.
  • CSS Translation: Converts extracted design properties into precise CSS, mapping Auto Layout to Flexbox/Grid and translating visual styles.
  • Design Token Integration: Builds and applies design token systems for consistent theming and maintainability.
  • Visual Validation: Implements a rigorous screenshot comparison workflow to guarantee pixel-perfect parity between Figma and the browser.
  • Use Case: Implement a complex dashboard component from a Figma design, ensuring all spacing, colors, and responsive behaviors precisely match the original mockup.

Quick Start

Use the figma-to-code skill to implement the Figma design located at the provided URL.

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: @tank/figma-to-code
Download link: https://github.com/tankpkg/skills/archive/main.zip#tank-figma-to-code

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 223,000+ vetted skills library on demand.