figma-implement-designlisted

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes (Plugin API), see the opt-in `figma-use` pack documented in `docs/SKILLS.md`.
ulises-jeremias/agent-toolkit · ★ 6 · Web & Frontend · score 71

Install: claude install-skill ulises-jeremias/agent-toolkit

# Implement Design ## Overview This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs. ## Skill Boundaries - Use this skill when the deliverable is code in the user's repository. - If the user asks to create/edit/delete nodes inside Figma itself, install the opt-in `figma-use` pack (see `docs/SKILLS.md`). - If the user asks to build or update a full-page screen in Figma from code or a description, install the opt-in `figma-generate-design` pack (see `docs/SKILLS.md`); it requires `figma-use`. - If the user asks only for Code Connect mappings, switch to [`figma-code-connect-components`](../figma-code-connect-components/SKILL.md). - If the user asks to author reusable agent rules (`AGENTS.md`/`CLAUDE.md`), switch to [`figma-create-design-system-rules`](../figma-create-design-system-rules/SKILL.md). ## Prerequisites - Figma MCP server must be connected and accessible - User must provide a Figma URL in the format: `https://figma.com/design/:fileKey/:fileName?node-id=1-2` - `:fileKey` is the file key - `1-2` is the node ID (the specific component or frame to implement) - **OR** when using `figma-desktop` MCP: User can select a node directly in the Figma desktop app (no URL required) - Project should have an established design system or component library (preferred)