[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CPRGPK73JWSJN7A7HP7RBX":3,"skill-same:01M6CPRGPK73JWSJN7A7HP7RBX":87},{"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":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":50,"commitSha":65,"skillDirectory":66,"forksCount":67,"repositoryHtmlUrl":68,"repositoryHomepageUrl":6,"ownerHtmlUrl":69,"ownerBlogUrl":70,"ownerDescription":71,"updatedAt":72,"install":73,"resources":86},"01M6CPRGPK73JWSJN7A7HP7RBX","openai-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. (Imported from openai upstream skills)","khalidsaidi\u002Fskillrunner","khalidsaidi","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F4368721?v=4","01M6CPK1G2TKAWA8BSNSANBNWJ","Khalid Saidi","01M6CPK1M7RGKV85142PWBEJ54",1,"MIT","https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fopenai-figma-implement-design\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"figma","openai figma implement design","design","figma implement design","openai","implement","workflow","components","code","translate","mcp server","server","ids","knowledge","node","context","ready","translation","main","MCP","2026-11-10 10:12:30",false,"---\nname: openai-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. (Imported from openai upstream skills)\"\nversion: \"1.0.0\"\ntags: [\"openai\", \"upstream\", \"imported\"]\nkind: knowledge\nrisk: low\navailability: advanced\ndocs:\n  source: \"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002F.curated\u002Ffigma-implement-design\"\n---\n\n# openai-figma-implement-design\n\nImported upstream skill.\n\n- Provider source: https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002F.curated\u002Ffigma-implement-design\n- Original skill name: figma-implement-design\n\n## Upstream Content\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","# openai-figma-implement-design\n\nImported upstream skill.\n\n- Provider source: https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002F.curated\u002Ffigma-implement-design\n- Original skill name: figma-implement-design\n\n## Upstream Content\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",{"docs":57,"kind":45,"name":5,"risk":59,"tags":60,"version":63,"description":7,"availability":64},{"source":58},"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002F.curated\u002Ffigma-implement-design","low",[36,61,62],"upstream","imported","1.0.0","advanced","c4da92076cba308457cd72bd1ab06c087e2cdf96","registry\u002Fskills\u002Fopenai-figma-implement-design",0,"https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner","https:\u002F\u002Fgithub.com\u002Fkhalidsaidi","https:\u002F\u002Fkhalidsaidi.com","Software engineer. Maintainer of SourceMint (SRCMNT), an open-source fixed-supply ERC-20 and Foundry tooling on Base.","2026-11-07 02:40:24",{"source":8,"skillName":5,"commands":74,"prompt":84,"zipAvailable":85},[75,78,81],{"tool":76,"command":77},"npx","npx skills add khalidsaidi\u002Fskillrunner --skill openai-figma-implement-design",{"tool":79,"command":80},"bunx","bunx skills add khalidsaidi\u002Fskillrunner --skill openai-figma-implement-design",{"tool":82,"command":83},"pnpm","pnpm dlx skills add khalidsaidi\u002Fskillrunner --skill openai-figma-implement-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fopenai-figma-implement-design\u002FSKILL.md",true,[],[88,107,116,135,144,162],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":52},"01M6CPY1N6W58XKWMN4356E8GF","yeet","Use only when the user explicitly asks to stage, commit, push, and open a GitHub pull request in one flow using the GitHub CLI (`gh`).","https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fopenai-yeet\u002Fupstream\u002FSKILL.md",[],[90,95,96,97,98,99,100,101,102,103,104,105,106],"only","cli","use","user","gh","open","flow","push","pull","pull request","commit","github",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":52},"01M6CPXZ5RN2ZB5A4Y65RE5Y5J","openai-yeet","Use only when the user explicitly asks to stage, commit, push, and open a GitHub pull request in one flow using the GitHub CLI (`gh`). (Imported from openai upstream skills)","https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fopenai-yeet\u002FSKILL.md",[],[90,36,114,102,103,104,105,106,96,115,62,61,50,95,97,98,99,45,100,101],"openai yeet","https",{"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":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":125,"publishedAt":52},"01M6CPXWGRW59XN1V109G172CV","vercel-deploy","Deploy applications and websites to Vercel. Use when the user requests deployment actions like \"deploy my app\", \"deploy and give me the link\", \"push this live\", or \"create a preview deployment\".","https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fopenai-vercel-deploy\u002Fupstream\u002FSKILL.md",[122],{"categoryNo":123,"categoryName":124,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",[126,127,128,102,97,129,130,131,132,98,133,134],"vercel","vercel deploy","deploy","actions","applications","me","preview deployment","deployment","create",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":142,"publishedAt":52},"01M6CPXSZSZRPQ5TY73K5QWN1B","openai-vercel-deploy","Deploy applications and websites to Vercel. Use when the user requests deployment actions like \"deploy my app\", \"deploy and give me the link\", \"push this live\", or \"create a preview deployment\". (Imported from openai upstream skills)","https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fopenai-vercel-deploy\u002FSKILL.md",[141],{"categoryNo":123,"categoryName":124,"taxonomyType":21,"taxonomyTypeDesc":22},[128,36,127,126,143,129,62,61,131,50,132,97,98,45,130,115,102,134,133,106],"openai vercel deploy",{"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":15,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":153,"publishedAt":52},"01M6CPXQ4SRTZZZ0VTD7WZP0RN","transcribe","Transcribe audio files to text with optional diarization and known-speaker hints. Use when a user asks to transcribe speech from audio\u002Fvideo, extract text from recordings, or label speakers in interviews or meetings.","https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fopenai-transcribe\u002Fupstream\u002FSKILL.md",[150],{"categoryNo":151,"categoryName":152,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[146,98,154,155,156,157,158,159,160,97,161],"text","Audio","Video","speech","extract","files","recordings","meetings",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":169,"publishedAt":52},"01M6CPXMG2SCTAA04EB3PDRRXN","openai-transcribe","Transcribe audio files to text with optional diarization and known-speaker hints. Use when a user asks to transcribe speech from audio\u002Fvideo, extract text from recordings, or label speakers in interviews or meetings. (Imported from openai upstream skills)","https:\u002F\u002Fgithub.com\u002Fkhalidsaidi\u002Fskillrunner\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fopenai-transcribe\u002FSKILL.md",[168],{"categoryNo":151,"categoryName":152,"taxonomyType":21,"taxonomyTypeDesc":22},[36,170,146,106,97,62,61,50,159,160,161,158,98,154,45,155,156,115,157],"openai transcribe"]