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.
Install
npx skills add davila7/claude-code-templates --skill figma-implement-designnpx skills add davila7/claude-code-templates --skill figma-implement-design -a claude-code -gnpx skills add davila7/claude-code-templates --skill figma-implement-design -a codex -ggemini skills install https://github.com/davila7/claude-code-templates.git --path cli-tool/components/skills/creative-design/figma-implement-designgh skill install davila7/claude-code-templates figma-implement-designgit clone --depth 1 https://github.com/davila7/claude-code-templates /tmp/davila7__claude-code-templates
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/davila7__claude-code-templates/cli-tool/components/skills/creative-design/figma-implement-design ~/.claude/skills/figma-implement-design # Claude Code
cp -R /tmp/davila7__claude-code-templates/cli-tool/components/skills/creative-design/figma-implement-design ~/.agents/skills/figma-implement-design # Codex, Cursor, Gemini CLI, Copilot, OpenCode