implement-design_skill

This skill translates Figma designs into production-ready code with pixel-perfect fidelity and design-system integration using MCP server context for accurate

166

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill figma/mcp-server-guide --skill implement-design

SKILL.md10.7 KB

Overview

This skill translates Figma designs into production-ready UI code with 1:1 visual fidelity and consistent integration with a Figma MCP server. It provides a step-by-step workflow to extract design context, capture visual references, download assets, and map Figma tokens to your project conventions. Use it to implement components or full pages while preserving accessibility and design system integrity.

How this skill works

The skill inspects a specified Figma node (via URL or desktop selection) and uses the Figma MCP server to fetch structured design context and a screenshot. It downloads assets served by the MCP server, then guides translation of the Figma output into the project’s components, tokens, and styling conventions. Finally, it validates the implemented UI against the screenshot to achieve pixel parity and accessibility compliance.

When to use it

When a user asks to “implement design”, “generate code”, or “implement component” from Figma
When a Figma URL with node-id is provided or a node is selected in the Figma desktop app
When you must produce pixel-perfect UI that matches Figma visuals
When integrating a new variant into an existing design system
When you need a reproducible validation checklist for UI parity and accessibility

Best practices

Always fetch get_design_context and get_screenshot before coding
Parse fileKey and nodeId from the URL or rely on figma-desktop selection as applicable
Reuse existing design system components instead of creating duplicates
Map Figma tokens to project tokens and avoid hardcoded values
Validate frequently against the screenshot and document any deviations for accessibility or technical reasons

Example use cases

Implement a Figma button component: extract fileKey/nodeId, fetch context and screenshot, map tokens, extend project button, validate visuals
Build a dashboard page: use get_metadata to enumerate sections, fetch contexts for each child node, download assets, and assemble with layout primitives
Create responsive card components: fetch context for card variants, map spacing/typography to tokens, and test responsive constraints against Figma specs

FAQ

Provide a Figma URL with fileKey and node-id or use the figma-desktop MCP with a node selected in the Figma desktop app.

What if get_design_context response is truncated?

Run get_metadata to get a high-level node map, identify child node IDs, then fetch those child nodes individually with get_design_context.