skill.extrachatgpt.com logo

implement-design by figma

Translates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.

Testing
150 Stars
12 Forks
Updated Dec 16, 2025, 09:43 PM

Why Use This

This skill provides specialized capabilities for figma's codebase.

Use Cases

  • Developing new features in the figma repository
  • Refactoring existing code to follow figma standards
  • Understanding and working with figma's codebase structure

Install Guide

2 steps
  1. 1

    Download Ananke

    Skip this step if Ananke is already installed.

  2. 2

    Install inside Ananke

    Click Install Skill, paste the link below, then press Install.

    https://github.com/figma/mcp-server-guide/tree/main/skills/implement-design

Skill Snapshot

Auto scan of skill assets. Informational only.

Valid SKILL.md

Checks against SKILL.md specification

Source & Community

Repository mcp-server-guide
Skill Version
main
Community
150 12
Updated At Dec 16, 2025, 09:43 PM

Skill Stats

SKILL.md 0 Lines
Total Files 1
Total Size 0 B
License NOASSERTION

Source

GitHub Repository ↗ Commit main ↗ skill.extrachatgpt.com ↗