[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DBCERYKFQEHRCXW6RSB804":3,"skill-same:01M6DBCERYKFQEHRCXW6RSB804":103},{"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":57,"commitSha":58,"skillDirectory":59,"forksCount":14,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6DBCERYKFQEHRCXW6RSB804","figma-implement-design",null,"Use when the user provides Figma URLs or node IDs and needs production-ready code with pixel-perfect 1:1 fidelity to the design, translating Figma components into project-convention code via the Figma MCP ; do NOT use for generic Figma data fetching or MCP setup (use figma) ; returns implemented component code matching Figma specs.","Prekzursil\u002Fagent-skills-toolchain","Prekzursil","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F54636077?v=4","01M6DACZ1PCQHD99SCR1YXG28B","Andrei Mihai Visalon","01M6DACZ670WZF535V3WYYSS4Z",0,"MIT","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ffigma-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],"implement","figma implement design","figma","design","Production","matching","project","pixel","do","ready","use","node","returns","ids","data","code","setup","component","components","MCP","2026-11-10 10:12:30",false,"---\nname: \"figma-implement-design\"\ndescription: Use when the user provides Figma URLs or node IDs and needs production-ready code with pixel-perfect 1:1 fidelity to the design, translating Figma components into project-convention code via the Figma MCP ; do NOT use for generic Figma data fetching or MCP setup (use figma) ; returns implemented component code matching Figma specs.\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,"description":7},"main","a298c929b6cbd662e1fce54302ce520d5ceea1a5",".agents\u002Fskills\u002Ffigma-implement-design","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain","https:\u002F\u002Fgithub.com\u002FPrekzursil","2026-11-02 14:30:57",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add Prekzursil\u002Fagent-skills-toolchain --skill figma-implement-design",{"tool":69,"command":70},"bunx","bunx skills add Prekzursil\u002Fagent-skills-toolchain --skill figma-implement-design",{"tool":72,"command":73},"pnpm","pnpm dlx skills add Prekzursil\u002Fagent-skills-toolchain --skill figma-implement-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ffigma-implement-design\u002FSKILL.md",true,[77,83,89,93,97],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"agents\u002Fopenai.yaml","REFERENCE","参考文档",488,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ffigma-implement-design\u002Fagents\u002Fopenai.yaml",{"path":84,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":87,"sourceHtmlUrl":88},"assets\u002Ffigma-small.svg","ASSET","资产文件",818,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ffigma-implement-design\u002Fassets\u002Ffigma-small.svg",{"path":90,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":91,"sourceHtmlUrl":92},"assets\u002Ffigma.png",1612,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ffigma-implement-design\u002Fassets\u002Ffigma.png",{"path":94,"resourceType":85,"resourceTypeDesc":86,"sizeBytes":95,"sourceHtmlUrl":96},"assets\u002Ficon.svg",964,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ffigma-implement-design\u002Fassets\u002Ficon.svg",{"path":98,"resourceType":99,"resourceTypeDesc":100,"sizeBytes":101,"sourceHtmlUrl":102},"LICENSE.txt","LICENSE","许可证",11358,"https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ffigma-implement-design\u002FLICENSE.txt",[104,125,150,177,189,204],{"skillNo":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":52},"01M6DF7D7478R55P46REYH4QAC","clarify-requirements","Resolve genuine pre-execution ambiguity by scanning repo context, generating 1-6 grounded options, and asking 1-3 focused questions via AskUserQuestion. NOT for mid-task use (injection risk); NOT when the goal is already unambiguous; use to disambiguate vague prompts before any file edits.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fworkspace-hooks\u002Fskills\u002Fclarify-requirements\u002FSKILL.md",[],[111,112,113,114,115,116,117,118,119,42,120,121,122,123,124],"clarify requirements","clarify","requirements","risk","options","task","prompts","goal","scanning","context","repo","injection","execution","file",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":132,"publishedAt":52},"01M6DF79CA4BHJS66J8EZDBPWJ","openmm-md","Run FREE, open-source, Windows-native GPU molecular dynamics via the openmm-md MCP (OpenMM + CUDA on the local NVIDIA GPU). Use for protein \u002F protein-ligand MD when you want a free stack or are on Windows without a Schrodinger license. Covers the full workflow (prepare, solvate, minimize, equilibrate, production, analyze, mmgbsa) AND an honest decision guide vs Schrodinger Desmond, including how to run Desmond legitimately on Linux or a cloud GPU with a real license. This is a deliberately LESSER free alternative and does NOT replace the schrodinger MCP tools. Do NOT use it to pick a free tool when a validated FEP+, WaterMap, IFD-MD, or Prime MM-GBSA result is actually required.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fmcp\u002Fopenmm-md-mcp\u002Fskill\u002Fopenmm-md\u002FSKILL.md",[131],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[133,134,135,136,137,138,139,140,141,142,143,144,145,146,42,147,148,149,40,51],"openmm md","how","decision","pick","linux","analyze","tool","stack","open","NVIDIA","gpu","license","workflow","windows","free","molecular dynamics","local",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":162,"publishedAt":52},"01M6DF76C1MG85VEWP8VZCBNMN","visual-review","Take screenshots of web pages and UI using Playwright for visual review and iteration","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fvisual-review\u002FSKILL.md",[156,159],{"categoryNo":157,"categoryName":158,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":160,"categoryName":161,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[163,164,165,166,167,168,169,170,171,172,134,173,174,175,176],"review","visual","visual review","pages","web","false","iteration","take","check","slides","ui","screenshot","playwright","screenshots",{"skillNo":178,"name":179,"nameZh":6,"description":180,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":181,"categories":182,"keywords":183,"publishedAt":52},"01M6DF73AQVCBZKEN0YXEX9FXP","status","Diagnostic status report — shows metaswarm installation state, project setup, and potential issues","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstatus\u002FSKILL.md",[],[179,48,184,38,185,186,187,188],"report","installation","project setup","issues","state",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":196,"publishedAt":52},"01M6DF6X6C2XB0P6GX76P7TTYV","start","Use when starting work on any task, when the user mentions metaswarm, or when the user wants to begin tracked development work","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstart\u002FSKILL.md",[195],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[191,197,116,198,41,199,42,200,201,202,203],"start issue","issue","work on issue","user","work","work on","development",{"skillNo":205,"name":48,"nameZh":6,"description":206,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":207,"categories":208,"keywords":209,"publishedAt":52},"01M6DF6QMJ9AJKFKHHKRT005PQ","Interactive project setup — detects your project, configures metaswarm, writes project-local files","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fsetup\u002FSKILL.md",[],[48,38,149,210,186,211],"files","interactive"]