implement-designlisted

# 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. ## 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) ## Required Workflow **Follow these steps in order. Do not skip steps.** ### Step 1: Get Node ID #### Option A: Parse from Figma URL When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools. **URL format:** `https://figma.com/design/:fileKey/:fileName?node-id=1-2` **Extract:** - **File key:** `:fileKey` (the segment after `/design/`) - **Node ID:** `1-2` (the value of the `node-id` query parameter) **Note:** When using the local desktop MCP (`figma-desktop`), `fileKey` is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only `nodeId` is needed. **Example:** - URL: `https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignS