Figma Implement Design

by lidge-jun · development · typescript, react, node, documentation, skill

Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.

Source: https://github.com/lidge-jun/cli-jaw-skills

Install

git clone https://github.com/lidge-jun/cli-jaw-skills

Tags: typescript, react, node, documentation, skill

⭐ 4 GitHub stars · Source: skillsdirectory

About development MCP servers and Claude skills

development MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.

Figma Implement Design is one of hundreds of development entries indexed on Skiln. Browse the full development category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.

Related development MCPs and skills

  • Ai Transparency Labels by ThomasMoreAI

    Generate standardized transparency labels for AI systems.

  • Dora by ThomasMoreAI

    Expert DORA (Regulation (EU) 2022/2554 — Digital Operational Resilience Act) compliance advisor for EU financial entities. Use this skill whenever a user asks about DORA compliance, ICT risk management frameworks, ICT incident classification or reporting, threat-led penetration testing (TLPT), ICT third-party risk management, Register of Information, contractual provisions with ICT providers, ICT concentration risk, oversight of critical ICT third-party service providers (CTPPs), or any DORA ...

  • Mdr 745 Specialist Ovachiever by ThomasMoreAI

    EU MDR 2017/745 regulation specialist and consultant for medical device requirement management. Provides comprehensive MDR compliance expertise, gap analysis, technical documentation guidance, clinical evidence requirements, and post-market surveillance implementation. Use for MDR compliance assessment, classification decisions, technical file preparation, and regulatory requirement interpretation.

  • Slo Equity by ThomasMoreAI

    Use this skill when a UK seed-stage founder needs first-cut equity artifacts (cofounder split rationale, vesting schedule with 4-year/1-year-cliff, cap-table snapshot), needs a vesting agreement / option grant translated to plain English, needs to triage whether a lawyer + accountant are required for an equity matter, or needs to prepare for an equity-related professional call. Same four-mode advisor pattern as `/slo-legal` and `/slo-accounting`: `draft`, `translate`, `triage`, `prepare`. Har...

  • Uk Parliament Erskine May by ThomasMoreAI

    Search and retrieve Erskine May — *A Treatise on the Law, Privileges, Proceedings and Usage of Parliament*, the authoritative reference work on UK parliamentary procedure. Browse by Part, Chapter, Section, paragraph reference (e.g. "20.5") or index term, or full-text search across the whole work. Use when the question is about parliamentary procedure, precedent, the rules governing debate, motions, divisions, privilege, or anything else covered in Erskine May.

  • Escalation Flagger by ThomasMoreAI

    Route a contract issue to the right approver per the escalation matrix in `config/local/codex-for-legal/commercial-legal/CLAUDE.md`, and draft the ask. Use when the user says "who needs to approve this", "escalate this", "does this need GC sign-off", "route this for approval", or when another skill finds an issue that exceeds the reviewer's authority.

  • Claude Review by ThomasMoreAI

    Agentic contract review using superdoc-redlines. Spawns parallel sub-agents for comprehensive document review with tracked changes.

  • Convert Contract To Markdown by ThomasMoreAI

    Convert a contract PDF to clean markdown for clause extraction or LLM analysis.

Frequently asked questions

How do I install Figma Implement Design?

Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.

Which clients support Figma Implement Design?

Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.

Is Figma Implement Design free?

The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.