[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AE6JSJAFW2XTEH4QYT5NE1":3,"skill-same:01M6AE6JSJAFW2XTEH4QYT5NE1":115},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":16,"sourceHtmlUrl":17,"categories":18,"keywords":32,"publishedAt":56,"linkOnly":57,"markdownContent":58,"markdownBody":59,"frontMatter":60,"refName":62,"commitSha":63,"skillDirectory":64,"forksCount":65,"repositoryHtmlUrl":66,"repositoryHomepageUrl":67,"ownerHtmlUrl":68,"ownerBlogUrl":69,"ownerDescription":70,"updatedAt":71,"install":72,"resources":85},"01M6AE6JSJAFW2XTEH4QYT5NE1","figma-implement-design",null,"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.","davila7\u002Fclaude-code-templates","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHGM78PHQRD3XZTFDVKK",33481,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Ffigma-implement-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Ffigma-implement-design\u002FSKILL.md",[19,24,27],{"categoryNo":20,"categoryName":21,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":25,"categoryName":26,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":28,"categoryName":29,"taxonomyType":30,"taxonomyTypeDesc":31},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55],"design","implement","implement design","figma implement design","figma","when","figma mcp","production-ready","visual fidelity","project","translation","ready","ids","Production","server","openai","code","components","workflow","translate","mcp server","screenshots","MCP","2026-11-10 10:12:30",false,"---\nname: \"figma-implement-design\"\ndescription: \"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.\"\nmetadata:\n  author: openai\n---\n\n\n# Implement Design\n\n## Overview\n\nThis 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.\n\n## Prerequisites\n\n- Figma MCP server must be connected and accessible\n- User must provide a Figma URL in the format: `https:\u002F\u002Ffigma.com\u002Fdesign\u002F:fileKey\u002F:fileName?node-id=1-2`\n  - `:fileKey` is the file key\n  - `1-2` is the node ID (the specific component or frame to implement)\n- **OR** when using `figma-desktop` MCP: User can select a node directly in the Figma desktop app (no URL required)\n- Project should have an established design system or component library (preferred)\n\n## Required Workflow\n\n**Follow these steps in order. Do not skip steps.**\n\n### Step 0: Set up Figma MCP (if not already configured)\n\nIf any MCP call fails because Figma MCP is not connected, pause and set it up:\n\n1. Add the Figma MCP:\n   - `codex mcp add figma --url https:\u002F\u002Fmcp.figma.com\u002Fmcp`\n2. Enable remote MCP client:\n   - Set `[features].rmcp_client = true` in `config.toml` **or** run `codex --enable rmcp_client`\n3. Log in with OAuth:\n   - `codex mcp login figma`\n\nAfter successful login, the user will have to restart codex. You should finish your answer and tell them so when they try again they can continue with Step 1.\n\n### Step 1: Get Node ID\n\n#### Option A: Parse from Figma URL\n\nWhen the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.\n\n**URL format:** `https:\u002F\u002Ffigma.com\u002Fdesign\u002F:fileKey\u002F:fileName?node-id=1-2`\n\n**Extract:**\n\n- **File key:** `:fileKey` (the segment after `\u002Fdesign\u002F`)\n- **Node ID:** `1-2` (the value of the `node-id` query parameter)\n\n**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.\n\n**Example:**\n\n- URL: `https:\u002F\u002Ffigma.com\u002Fdesign\u002FkL9xQn2VwM8pYrTb4ZcHjF\u002FDesignSystem?node-id=42-15`\n- File key: `kL9xQn2VwM8pYrTb4ZcHjF`\n- Node ID: `42-15`\n\n#### Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)\n\nWhen using the `figma-desktop` MCP and the user has NOT provided a URL, the tools automatically use the currently selected node from the open Figma file in the desktop app.\n\n**Note:** Selection-based prompting only works with the `figma-desktop` MCP server. The remote server requires a link to a frame or layer to extract context. The user must have the Figma desktop app open with a node selected.\n\n### Step 2: Fetch Design Context\n\nRun `get_design_context` with the extracted file key and node ID.\n\n```\nget_design_context(fileKey=\":fileKey\", nodeId=\"1-2\")\n```\n\nThis provides the structured data including:\n\n- Layout properties (Auto Layout, constraints, sizing)\n- Typography specifications\n- Color values and design tokens\n- Component structure and variants\n- Spacing and padding values\n\n**If the response is too large or truncated:**\n\n1. Run `get_metadata(fileKey=\":fileKey\", nodeId=\"1-2\")` to get the high-level node map\n2. Identify the specific child nodes needed from the metadata\n3. Fetch individual child nodes with `get_design_context(fileKey=\":fileKey\", nodeId=\":childNodeId\")`\n\n### Step 3: Capture Visual Reference\n\nRun `get_screenshot` with the same file key and node ID for a visual reference.\n\n```\nget_screenshot(fileKey=\":fileKey\", nodeId=\"1-2\")\n```\n\nThis screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.\n\n### Step 4: Download Required Assets\n\nDownload any assets (images, icons, SVGs) returned by the Figma MCP server.\n\n**IMPORTANT:** Follow these asset rules:\n\n- If the Figma MCP server returns a `localhost` source for an image or SVG, use that source directly\n- DO NOT import or add new icon packages - all assets should come from the Figma payload\n- DO NOT use or create placeholders if a `localhost` source is provided\n- Assets are served through the Figma MCP server's built-in assets endpoint\n\n### Step 5: Translate to Project Conventions\n\nTranslate the Figma output into this project's framework, styles, and conventions.\n\n**Key principles:**\n\n- Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style\n- Replace Tailwind utility classes with the project's preferred utilities or design system tokens\n- Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality\n- Use the project's color system, typography scale, and spacing tokens consistently\n- Respect existing routing, state management, and data-fetch patterns\n\n### Step 6: Achieve 1:1 Visual Parity\n\nStrive for pixel-perfect visual parity with the Figma design.\n\n**Guidelines:**\n\n- Prioritize Figma fidelity to match designs exactly\n- Avoid hardcoded values - use design tokens from Figma where available\n- When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals\n- Follow WCAG requirements for accessibility\n- Add component documentation as needed\n\n### Step 7: Validate Against Figma\n\nBefore marking complete, validate the final UI against the Figma screenshot.\n\n**Validation checklist:**\n\n- [ ] Layout matches (spacing, alignment, sizing)\n- [ ] Typography matches (font, size, weight, line height)\n- [ ] Colors match exactly\n- [ ] Interactive states work as designed (hover, active, disabled)\n- [ ] Responsive behavior follows Figma constraints\n- [ ] Assets render correctly\n- [ ] Accessibility standards met\n\n## Implementation Rules\n\n### Component Organization\n\n- Place UI components in the project's designated design system directory\n- Follow the project's component naming conventions\n- Avoid inline styles unless truly necessary for dynamic values\n\n### Design System Integration\n\n- ALWAYS use components from the project's design system when possible\n- Map Figma design tokens to project design tokens\n- When a matching component exists, extend it rather than creating a new one\n- Document any new components added to the design system\n\n### Code Quality\n\n- Avoid hardcoded values - extract to constants or design tokens\n- Keep components composable and reusable\n- Add TypeScript types for component props\n- Include JSDoc comments for exported components\n\n## Examples\n\n### Example 1: Implementing a Button Component\n\nUser says: \"Implement this Figma button component: https:\u002F\u002Ffigma.com\u002Fdesign\u002FkL9xQn2VwM8pYrTb4ZcHjF\u002FDesignSystem?node-id=42-15\"\n\n**Actions:**\n\n1. Parse URL to extract fileKey=`kL9xQn2VwM8pYrTb4ZcHjF` and nodeId=`42-15`\n2. Run `get_design_context(fileKey=\"kL9xQn2VwM8pYrTb4ZcHjF\", nodeId=\"42-15\")`\n3. Run `get_screenshot(fileKey=\"kL9xQn2VwM8pYrTb4ZcHjF\", nodeId=\"42-15\")` for visual reference\n4. Download any button icons from the assets endpoint\n5. Check if project has existing button component\n6. If yes, extend it with new variant; if no, create new component using project conventions\n7. Map Figma colors to project design tokens (e.g., `primary-500`, `primary-hover`)\n8. Validate against screenshot for padding, border radius, typography\n\n**Result:** Button component matching Figma design, integrated with project design system.\n\n### Example 2: Building a Dashboard Layout\n\nUser says: \"Build this dashboard: https:\u002F\u002Ffigma.com\u002Fdesign\u002FpR8mNv5KqXzGwY2JtCfL4D\u002FDashboard?node-id=10-5\"\n\n**Actions:**\n\n1. Parse URL to extract fileKey=`pR8mNv5KqXzGwY2JtCfL4D` and nodeId=`10-5`\n2. Run `get_metadata(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\"10-5\")` to understand the page structure\n3. Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs\n4. Run `get_design_context(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\":childNodeId\")` for each major section\n5. Run `get_screenshot(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\"10-5\")` for the full page\n6. Download all assets (logos, icons, charts)\n7. Build layout using project's layout primitives\n8. Implement each section using existing components where possible\n9. Validate responsive behavior against Figma constraints\n\n**Result:** Complete dashboard matching Figma design with responsive layout.\n\n## Best Practices\n\n### Always Start with Context\n\nNever implement based on assumptions. Always fetch `get_design_context` and `get_screenshot` first.\n\n### Incremental Validation\n\nValidate frequently during implementation, not just at the end. This catches issues early.\n\n### Document Deviations\n\nIf you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.\n\n### Reuse Over Recreation\n\nAlways check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.\n\n### Design System First\n\nWhen in doubt, prefer the project's design system patterns over literal Figma translation.\n\n## Common Issues and Solutions\n\n### Issue: Figma output is truncated\n\n**Cause:** The design is too complex or has too many nested layers to return in a single response.\n**Solution:** Use `get_metadata` to get the node structure, then fetch specific nodes individually with `get_design_context`.\n\n### Issue: Design doesn't match after implementation\n\n**Cause:** Visual discrepancies between the implemented code and the original Figma design.\n**Solution:** Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.\n\n### Issue: Assets not loading\n\n**Cause:** The Figma MCP server's assets endpoint is not accessible or the URLs are being modified.\n**Solution:** Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at `localhost` URLs. Use these directly without modification.\n\n### Issue: Design token values differ from Figma\n\n**Cause:** The project's design system tokens have different values than those specified in the Figma design.\n**Solution:** When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing\u002Fsizing to maintain visual fidelity.\n\n## Understanding Design Implementation\n\nThe Figma implementation workflow establishes a reliable process for translating designs to code:\n\n**For designers:** Confidence that implementations will match their designs with pixel-perfect accuracy.\n**For developers:** A structured approach that eliminates guesswork and reduces back-and-forth revisions.\n**For teams:** Consistent, high-quality implementations that maintain design system integrity.\n\nBy following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.\n\n## Additional Resources\n\n- [Figma MCP Server Documentation](https:\u002F\u002Fdevelopers.figma.com\u002Fdocs\u002Ffigma-mcp-server\u002F)\n- [Figma MCP Server Tools and Prompts](https:\u002F\u002Fdevelopers.figma.com\u002Fdocs\u002Ffigma-mcp-server\u002Ftools-and-prompts\u002F)\n- [Figma Variables and Design Tokens](https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F15339657135383-Guide-to-variables-in-Figma)\n","# Implement Design\n\n## Overview\n\nThis 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.\n\n## Prerequisites\n\n- Figma MCP server must be connected and accessible\n- User must provide a Figma URL in the format: `https:\u002F\u002Ffigma.com\u002Fdesign\u002F:fileKey\u002F:fileName?node-id=1-2`\n  - `:fileKey` is the file key\n  - `1-2` is the node ID (the specific component or frame to implement)\n- **OR** when using `figma-desktop` MCP: User can select a node directly in the Figma desktop app (no URL required)\n- Project should have an established design system or component library (preferred)\n\n## Required Workflow\n\n**Follow these steps in order. Do not skip steps.**\n\n### Step 0: Set up Figma MCP (if not already configured)\n\nIf any MCP call fails because Figma MCP is not connected, pause and set it up:\n\n1. Add the Figma MCP:\n   - `codex mcp add figma --url https:\u002F\u002Fmcp.figma.com\u002Fmcp`\n2. Enable remote MCP client:\n   - Set `[features].rmcp_client = true` in `config.toml` **or** run `codex --enable rmcp_client`\n3. Log in with OAuth:\n   - `codex mcp login figma`\n\nAfter successful login, the user will have to restart codex. You should finish your answer and tell them so when they try again they can continue with Step 1.\n\n### Step 1: Get Node ID\n\n#### Option A: Parse from Figma URL\n\nWhen the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.\n\n**URL format:** `https:\u002F\u002Ffigma.com\u002Fdesign\u002F:fileKey\u002F:fileName?node-id=1-2`\n\n**Extract:**\n\n- **File key:** `:fileKey` (the segment after `\u002Fdesign\u002F`)\n- **Node ID:** `1-2` (the value of the `node-id` query parameter)\n\n**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.\n\n**Example:**\n\n- URL: `https:\u002F\u002Ffigma.com\u002Fdesign\u002FkL9xQn2VwM8pYrTb4ZcHjF\u002FDesignSystem?node-id=42-15`\n- File key: `kL9xQn2VwM8pYrTb4ZcHjF`\n- Node ID: `42-15`\n\n#### Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)\n\nWhen using the `figma-desktop` MCP and the user has NOT provided a URL, the tools automatically use the currently selected node from the open Figma file in the desktop app.\n\n**Note:** Selection-based prompting only works with the `figma-desktop` MCP server. The remote server requires a link to a frame or layer to extract context. The user must have the Figma desktop app open with a node selected.\n\n### Step 2: Fetch Design Context\n\nRun `get_design_context` with the extracted file key and node ID.\n\n```\nget_design_context(fileKey=\":fileKey\", nodeId=\"1-2\")\n```\n\nThis provides the structured data including:\n\n- Layout properties (Auto Layout, constraints, sizing)\n- Typography specifications\n- Color values and design tokens\n- Component structure and variants\n- Spacing and padding values\n\n**If the response is too large or truncated:**\n\n1. Run `get_metadata(fileKey=\":fileKey\", nodeId=\"1-2\")` to get the high-level node map\n2. Identify the specific child nodes needed from the metadata\n3. Fetch individual child nodes with `get_design_context(fileKey=\":fileKey\", nodeId=\":childNodeId\")`\n\n### Step 3: Capture Visual Reference\n\nRun `get_screenshot` with the same file key and node ID for a visual reference.\n\n```\nget_screenshot(fileKey=\":fileKey\", nodeId=\"1-2\")\n```\n\nThis screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.\n\n### Step 4: Download Required Assets\n\nDownload any assets (images, icons, SVGs) returned by the Figma MCP server.\n\n**IMPORTANT:** Follow these asset rules:\n\n- If the Figma MCP server returns a `localhost` source for an image or SVG, use that source directly\n- DO NOT import or add new icon packages - all assets should come from the Figma payload\n- DO NOT use or create placeholders if a `localhost` source is provided\n- Assets are served through the Figma MCP server's built-in assets endpoint\n\n### Step 5: Translate to Project Conventions\n\nTranslate the Figma output into this project's framework, styles, and conventions.\n\n**Key principles:**\n\n- Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style\n- Replace Tailwind utility classes with the project's preferred utilities or design system tokens\n- Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality\n- Use the project's color system, typography scale, and spacing tokens consistently\n- Respect existing routing, state management, and data-fetch patterns\n\n### Step 6: Achieve 1:1 Visual Parity\n\nStrive for pixel-perfect visual parity with the Figma design.\n\n**Guidelines:**\n\n- Prioritize Figma fidelity to match designs exactly\n- Avoid hardcoded values - use design tokens from Figma where available\n- When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals\n- Follow WCAG requirements for accessibility\n- Add component documentation as needed\n\n### Step 7: Validate Against Figma\n\nBefore marking complete, validate the final UI against the Figma screenshot.\n\n**Validation checklist:**\n\n- [ ] Layout matches (spacing, alignment, sizing)\n- [ ] Typography matches (font, size, weight, line height)\n- [ ] Colors match exactly\n- [ ] Interactive states work as designed (hover, active, disabled)\n- [ ] Responsive behavior follows Figma constraints\n- [ ] Assets render correctly\n- [ ] Accessibility standards met\n\n## Implementation Rules\n\n### Component Organization\n\n- Place UI components in the project's designated design system directory\n- Follow the project's component naming conventions\n- Avoid inline styles unless truly necessary for dynamic values\n\n### Design System Integration\n\n- ALWAYS use components from the project's design system when possible\n- Map Figma design tokens to project design tokens\n- When a matching component exists, extend it rather than creating a new one\n- Document any new components added to the design system\n\n### Code Quality\n\n- Avoid hardcoded values - extract to constants or design tokens\n- Keep components composable and reusable\n- Add TypeScript types for component props\n- Include JSDoc comments for exported components\n\n## Examples\n\n### Example 1: Implementing a Button Component\n\nUser says: \"Implement this Figma button component: https:\u002F\u002Ffigma.com\u002Fdesign\u002FkL9xQn2VwM8pYrTb4ZcHjF\u002FDesignSystem?node-id=42-15\"\n\n**Actions:**\n\n1. Parse URL to extract fileKey=`kL9xQn2VwM8pYrTb4ZcHjF` and nodeId=`42-15`\n2. Run `get_design_context(fileKey=\"kL9xQn2VwM8pYrTb4ZcHjF\", nodeId=\"42-15\")`\n3. Run `get_screenshot(fileKey=\"kL9xQn2VwM8pYrTb4ZcHjF\", nodeId=\"42-15\")` for visual reference\n4. Download any button icons from the assets endpoint\n5. Check if project has existing button component\n6. If yes, extend it with new variant; if no, create new component using project conventions\n7. Map Figma colors to project design tokens (e.g., `primary-500`, `primary-hover`)\n8. Validate against screenshot for padding, border radius, typography\n\n**Result:** Button component matching Figma design, integrated with project design system.\n\n### Example 2: Building a Dashboard Layout\n\nUser says: \"Build this dashboard: https:\u002F\u002Ffigma.com\u002Fdesign\u002FpR8mNv5KqXzGwY2JtCfL4D\u002FDashboard?node-id=10-5\"\n\n**Actions:**\n\n1. Parse URL to extract fileKey=`pR8mNv5KqXzGwY2JtCfL4D` and nodeId=`10-5`\n2. Run `get_metadata(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\"10-5\")` to understand the page structure\n3. Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs\n4. Run `get_design_context(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\":childNodeId\")` for each major section\n5. Run `get_screenshot(fileKey=\"pR8mNv5KqXzGwY2JtCfL4D\", nodeId=\"10-5\")` for the full page\n6. Download all assets (logos, icons, charts)\n7. Build layout using project's layout primitives\n8. Implement each section using existing components where possible\n9. Validate responsive behavior against Figma constraints\n\n**Result:** Complete dashboard matching Figma design with responsive layout.\n\n## Best Practices\n\n### Always Start with Context\n\nNever implement based on assumptions. Always fetch `get_design_context` and `get_screenshot` first.\n\n### Incremental Validation\n\nValidate frequently during implementation, not just at the end. This catches issues early.\n\n### Document Deviations\n\nIf you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.\n\n### Reuse Over Recreation\n\nAlways check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.\n\n### Design System First\n\nWhen in doubt, prefer the project's design system patterns over literal Figma translation.\n\n## Common Issues and Solutions\n\n### Issue: Figma output is truncated\n\n**Cause:** The design is too complex or has too many nested layers to return in a single response.\n**Solution:** Use `get_metadata` to get the node structure, then fetch specific nodes individually with `get_design_context`.\n\n### Issue: Design doesn't match after implementation\n\n**Cause:** Visual discrepancies between the implemented code and the original Figma design.\n**Solution:** Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.\n\n### Issue: Assets not loading\n\n**Cause:** The Figma MCP server's assets endpoint is not accessible or the URLs are being modified.\n**Solution:** Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at `localhost` URLs. Use these directly without modification.\n\n### Issue: Design token values differ from Figma\n\n**Cause:** The project's design system tokens have different values than those specified in the Figma design.\n**Solution:** When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing\u002Fsizing to maintain visual fidelity.\n\n## Understanding Design Implementation\n\nThe Figma implementation workflow establishes a reliable process for translating designs to code:\n\n**For designers:** Confidence that implementations will match their designs with pixel-perfect accuracy.\n**For developers:** A structured approach that eliminates guesswork and reduces back-and-forth revisions.\n**For teams:** Consistent, high-quality implementations that maintain design system integrity.\n\nBy following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.\n\n## Additional Resources\n\n- [Figma MCP Server Documentation](https:\u002F\u002Fdevelopers.figma.com\u002Fdocs\u002Ffigma-mcp-server\u002F)\n- [Figma MCP Server Tools and Prompts](https:\u002F\u002Fdevelopers.figma.com\u002Fdocs\u002Ffigma-mcp-server\u002Ftools-and-prompts\u002F)\n- [Figma Variables and Design Tokens](https:\u002F\u002Fhelp.figma.com\u002Fhc\u002Fen-us\u002Farticles\u002F15339657135383-Guide-to-variables-in-Figma)\n",{"name":5,"metadata":61,"description":7},{"author":48},"main","2b749c82b5d11fac39d9a6e021ce3f5b8a541bd1","cli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Ffigma-implement-design",3931,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates","https:\u002F\u002Faitmpl.com","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-11-14 06:14:46",{"source":8,"skillName":5,"commands":73,"prompt":83,"zipAvailable":84},[74,77,80],{"tool":75,"command":76},"npx","npx skills add davila7\u002Fclaude-code-templates --skill figma-implement-design",{"tool":78,"command":79},"bunx","bunx skills add davila7\u002Fclaude-code-templates --skill figma-implement-design",{"tool":81,"command":82},"pnpm","pnpm dlx skills add davila7\u002Fclaude-code-templates --skill figma-implement-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Ffigma-implement-design\u002FSKILL.md",true,[86,92,98,102,106,111],{"path":87,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":90,"sourceHtmlUrl":91},"agents\u002Fopenai.yaml","REFERENCE","参考文档",488,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Ffigma-implement-design\u002Fagents\u002Fopenai.yaml",{"path":93,"resourceType":94,"resourceTypeDesc":95,"sizeBytes":96,"sourceHtmlUrl":97},"assets\u002Ffigma-small.svg","ASSET","资产文件",818,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Ffigma-implement-design\u002Fassets\u002Ffigma-small.svg",{"path":99,"resourceType":94,"resourceTypeDesc":95,"sizeBytes":100,"sourceHtmlUrl":101},"assets\u002Ffigma.png",1612,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Ffigma-implement-design\u002Fassets\u002Ffigma.png",{"path":103,"resourceType":94,"resourceTypeDesc":95,"sizeBytes":104,"sourceHtmlUrl":105},"assets\u002Ficon.svg",964,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Ffigma-implement-design\u002Fassets\u002Ficon.svg",{"path":107,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":110,"sourceHtmlUrl":16},"LICENSE.txt","LICENSE","许可证",11358,{"path":112,"resourceType":88,"resourceTypeDesc":89,"sizeBytes":113,"sourceHtmlUrl":114},"README.md",465,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fperformance-optimizer\u002FREADME.md",[116,144,169,199,232,255],{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":120,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":124,"publishedAt":56},"01M70NHBTQ8BV0A2SCAZXEPHCX","wealthville-pool-scoring","Score DeFi liquidity pools before providing liquidity. Returns a 0-100 pool score and an Enter\u002FHold\u002FExit\u002FReduce\u002FAvoid verdict with calibrated confidence for ~68,800 Solana pools and 575 EVM pools, plus a public miss-inclusive track record. Use when asked whether a pool is worth LPing into, which pools look best right now, or how accurate the scores have actually been.","MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fwealthville-pool-scoring\u002FSKILL.md",[123],{"categoryNo":25,"categoryName":26,"taxonomyType":22,"taxonomyTypeDesc":23},[125,126,127,128,129,130,131,132,133,38,134,135,136,137,138,139,140,141,142,143],"scoring","pool","wealthville pool scoring","liquidity","which","for","exit","now","use","reduce","with","record","track","verdict","evm","solana","how","public","look",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":120,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":151,"publishedAt":56},"01M70MB6VR8ERJ4EM8D5KHBMEV","technical-debt-auditor","Scans a codebase and produces a quantified technical debt report with a prioritized remediation plan. Analyzes dead code, TODO\u002FFIXME\u002FHACK markers, dependency staleness, complexity hotspots, code duplication signals, test coverage gaps, unused exports, and outdated patterns. Use this skill when the user asks to audit their codebase for tech debt, wants a health check of their code quality, says things like \"where should I focus refactoring\", \"find code smells\", \"audit my codebase\", \"what technical debt do we have\", \"prioritize cleanup work\", or asks about code quality metrics. Also trigger when the user mentions \"code rot\", \"legacy cleanup\", \"refactoring priorities\", or wants to understand the overall health of a project before a major effort. Trigger even if the user doesn't say \"technical debt\" explicitly — any request to systematically assess code quality and identify improvement priorities belongs here.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Ftechnical-debt-auditor\u002FSKILL.md",[150],{"categoryNo":25,"categoryName":26,"taxonomyType":22,"taxonomyTypeDesc":23},[152,153,154,155,156,157,158,159,42,160,161,38,49,162,163,164,165,166,167,168],"technical debt","debt","technical","technical debt auditor","auditor","coverage","complexity","markers","cleanup","unused","todo","work","plan","focus","signals","audit","dependency",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":120,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":182,"publishedAt":56},"01M70KPYH9QNHCNME5GJQGE22K","readonly-sql-guard","Make an agent's database access provably read-only. Use when an agent runs caller-supplied SQL against a production\u002FERP\u002Fanalytics database (a \"query\" MCP tool, text-to-SQL, an admin console), or when reviewing DB-access code for write\u002FDDL\u002Fside-effect\u002Ftransaction-escape risks. Checks what a statement CALLS, not just its shape.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdatabase\u002Freadonly-sql-guard\u002FSKILL.md",[175,178,179],{"categoryNo":176,"categoryName":177,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":25,"categoryName":26,"taxonomyType":22,"taxonomyTypeDesc":23},{"categoryNo":180,"categoryName":181,"taxonomyType":30,"taxonomyTypeDesc":31},"01JBSEEDCAT000000000000033","数据分析师",[183,184,185,186,187,188,189,130,190,191,192,193,194,195,55,133,196,197,38,198],"readonly","guard","sql guard","sql","readonly sql guard","erp","effect","read-only","db","just","tool","calls","only","access","database","query",{"skillNo":200,"name":201,"nameZh":6,"description":202,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":203,"sourceHtmlUrl":204,"categories":205,"keywords":209,"publishedAt":56},"01M6AFY6F7CC2BBZP1QD6VTNVC","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[206],{"categoryNo":207,"categoryName":208,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000009","前端开发",[210,211,212,213,214,215,216,217,218,219,220,221,222,223,50,224,225,226,227,228,229,230,130,231],"artifacts builder","web","web artifacts builder","artifacts","builder","state","routing","state management","component","css","frontend","ui","Tools","file","shadcn","react","Tailwind","suite","jsx","html","single-file","ui components",{"skillNo":233,"name":234,"nameZh":6,"description":235,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":236,"sourceHtmlUrl":237,"categories":238,"keywords":243,"publishedAt":56},"01M6AFWF33SFV9Z3SF4PEEE4BF","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[239,242],{"categoryNo":240,"categoryName":241,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":207,"categoryName":208,"taxonomyType":22,"taxonomyTypeDesc":23},[244,245,246,247,248,211,249,220,221,250,251,252,54,130,253,135,254],"webapp testing","testing","webapp","browser","playwright","applications","debugging","toolkit","logs","local","behavior",{"skillNo":256,"name":257,"nameZh":6,"description":258,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":259,"sourceHtmlUrl":260,"categories":261,"keywords":269,"publishedAt":56},"01M6AF67Q67JJJ5V51JR2P52KA","discernment-nudge","After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FSKILL.md",[262,265,266],{"categoryNo":263,"categoryName":264,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":25,"categoryName":26,"taxonomyType":22,"taxonomyTypeDesc":23},{"categoryNo":267,"categoryName":268,"taxonomyType":30,"taxonomyTypeDesc":31},"01JBSEEDCAT000000000000036","内容创作者",[270,271,272,273,274,275,276,277,213,278,223,49,279,280,281,282,283,195,284,38,285,286,287,288,289,141,290],"discernment nudge","nudge","interpretation","help","run","reasoning","data","writing","lookup","content","review","conversation","short","up","invoke","you","analysis","claims","argument","assemble","recommendations"]