Awesome-omni-skills figma-implement-design

Implement Design workflow skill. Use this skill when the user needs 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). Use when the user provides Figma URLs or node IDs and asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection. Do NOT use for general Figma data fetching, variable exploration, or MCP troubleshooting (use figma instead) and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/figma-implement-design" ~/.claude/skills/diegosouzapw-awesome-omni-skills-figma-implement-design && rm -rf "$T"

manifest: skills/figma-implement-design/SKILL.md

Implement Design

Overview

This public intake copy packages

packages/skills-catalog/skills/(design)/figma-implement-design

from

https://github.com/tech-leads-club/agent-skills

into the native Omni Skills editorial shape without hiding its origin.

Use it when the operator needs the upstream workflow, support files, and repository context to stay intact while the public validator and private enhancer continue their normal downstream flow.

This intake keeps the copied upstream files intact and uses

metadata.json

plus

ORIGIN.md

as the provenance anchor for review.

Implement Design

Imported source sections that did not map cleanly to the public headings are still preserved below or in the support files. Notable imported sections: Prerequisites, Common Issues and Solutions, Understanding Design Implementation.

When to Use This Skill

Use this section as the trigger filter. It should make the activation boundary explicit before the operator loads files, runs commands, or opens a pull request.

Use when the request clearly matches the imported source intent: 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). Use when the user provides Figma URLs or....
Use when the operator should preserve upstream workflow detail instead of rewriting the process from scratch.
Use when provenance needs to stay visible in the answer, PR, or review packet.
Use when copied upstream references, examples, or scripts materially improve the answer.
Use when the workflow should remain reviewable in the public intake repo before the private enhancer takes over.

Operating Table

Situation	Start here	Why it matters
First-time use	`metadata.json`	Confirms repository, branch, commit, and imported path before touching the copied workflow
Provenance review	`ORIGIN.md`	Gives reviewers a plain-language audit trail for the imported source
Workflow execution	`LICENSE.txt`	Starts with the smallest copied file that materially changes execution
Supporting context	`LICENSE.txt`	Adds the next most relevant copied source file without loading the entire package
Handoff decision	`## Related Skills`	Helps the operator switch to a stronger native skill when the task drifts

Workflow

This workflow is intentionally editorial and operational at the same time. It keeps the imported source useful to the operator while still satisfying the public intake standards that feed the downstream enhancer flow.

Add the Figma MCP server to your agent's MCP configuration:
URL: https://mcp.figma.com/mcp
Enable remote MCP client if required by your agent.
Log in with OAuth following your agent's authentication flow.
File key: :fileKey (the segment after /design/)
Node ID: 1-2 (the value of the node-id query parameter)
URL: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15

Imported Workflow Notes

Imported: Required Workflow

Follow these steps in order. Do not skip steps.

Step 0: Set up Figma MCP (if not already configured)

If any MCP call fails because Figma MCP is not connected, pause and set it up:

Add the Figma MCP server to your agent's MCP configuration:
- URL:
```
https://mcp.figma.com/mcp
```
Enable remote MCP client if required by your agent.
Log in with OAuth following your agent's authentication flow.

After successful login, the user will have to restart their agent. You should finish your answer and tell them so when they try again they can continue with Step 1.

Step 1: Get Node ID

Option A: Parse from Figma URL

When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.

URL format:

https://figma.com/design/:fileKey/:fileName?node-id=1-2

Extract:

File key:
```
:fileKey
```
(the segment after
```
/design/
```
)
Node ID:
```
1-2
```
(the value of the
```
node-id
```
query parameter)

Note: When using the local desktop MCP (

figma-desktop

fileKey

is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only

nodeId

is needed.

Example:

URL:

https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15

File key:
```
kL9xQn2VwM8pYrTb4ZcHjF
```
Node ID:
```
42-15
```

Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)

When 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.

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.

Step 2: Fetch Design Context

Run

get_design_context

with the extracted file key and node ID.

get_design_context(fileKey=":fileKey", nodeId="1-2")

This provides the structured data including:

Layout properties (Auto Layout, constraints, sizing)
Typography specifications
Color values and design tokens
Component structure and variants
Spacing and padding values

If the response is too large or truncated:

Run

get_metadata(fileKey=":fileKey", nodeId="1-2")

to get the high-level node map

Identify the specific child nodes needed from the metadata

Fetch individual child nodes with

get_design_context(fileKey=":fileKey", nodeId=":childNodeId")

Step 3: Capture Visual Reference

Run

get_screenshot

with the same file key and node ID for a visual reference.

get_screenshot(fileKey=":fileKey", nodeId="1-2")

This screenshot serves as the source of truth for visual validation. Keep it accessible throughout implementation.

Step 4: Download Required Assets

Download any assets (images, icons, SVGs) returned by the Figma MCP server.

IMPORTANT: Follow these asset rules:

If the Figma MCP server returns a
```
localhost
```
source for an image or SVG, use that source directly
DO NOT import or add new icon packages - all assets should come from the Figma payload
DO NOT use or create placeholders if a
```
localhost
```
source is provided
Assets are served through the Figma MCP server's built-in assets endpoint

Step 5: Translate to Project Conventions

Translate the Figma output into this project's framework, styles, and conventions.

Key principles:

Treat the Figma MCP output (typically React + Tailwind) as a representation of design and behavior, not as final code style
Replace Tailwind utility classes with the project's preferred utilities or design system tokens
Reuse existing components (buttons, inputs, typography, icon wrappers) instead of duplicating functionality
Use the project's color system, typography scale, and spacing tokens consistently
Respect existing routing, state management, and data-fetch patterns

Step 6: Achieve 1:1 Visual Parity

Strive for pixel-perfect visual parity with the Figma design.

Guidelines:

Prioritize Figma fidelity to match designs exactly
Avoid hardcoded values - use design tokens from Figma where available
When conflicts arise between design system tokens and Figma specs, prefer design system tokens but adjust spacing or sizes minimally to match visuals
Follow WCAG requirements for accessibility
Add component documentation as needed

Step 7: Validate Against Figma

Before marking complete, validate the final UI against the Figma screenshot.

Validation checklist:

Layout matches (spacing, alignment, sizing)
Typography matches (font, size, weight, line height)
Colors match exactly
Interactive states work as designed (hover, active, disabled)
Responsive behavior follows Figma constraints
Assets render correctly
Accessibility standards met

Imported: Overview

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

Imported: Prerequisites

Figma MCP server must be connected and accessible
User must provide a Figma URL in the format:
```
https://figma.com/design/:fileKey/:fileName?node-id=1-2
```
- ```
:fileKey
```
  is the file key
- ```
1-2
```
  is the node ID (the specific component or frame to implement)
OR when using
```
figma-desktop
```
MCP: User can select a node directly in the Figma desktop app (no URL required)
Project should have an established design system or component library (preferred)

Examples

Example 1: Ask for the upstream workflow directly

Use @figma-implement-design to handle <task>. Start from the copied upstream workflow, load only the files that change the outcome, and keep provenance visible in the answer.

Explanation: This is the safest starting point when the operator needs the imported workflow, but not the entire repository.

Example 2: Ask for a provenance-grounded review

Review @figma-implement-design against metadata.json and ORIGIN.md, then explain which copied upstream files you would load first and why.

Explanation: Use this before review or troubleshooting when you need a precise, auditable explanation of origin and file selection.

Example 3: Narrow the copied support files before execution

Use @figma-implement-design for <task>. Load only the copied references, examples, or scripts that change the outcome, and name the files explicitly before proceeding.

Explanation: This keeps the skill aligned with progressive disclosure instead of loading the whole copied package by default.

Example 4: Build a reviewer packet

Review @figma-implement-design using the copied upstream files plus provenance, then summarize any gaps before merge.

Explanation: This is useful when the PR is waiting for human review and you want a repeatable audit packet.

Imported Usage Notes

Imported: Examples

Example 1: Implementing a Button Component

User says: "Implement this Figma button component: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"

Actions:

Parse URL to extract fileKey=
```
kL9xQn2VwM8pYrTb4ZcHjF
```
and nodeId=
```
42-15
```

Run

get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")

Run

get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")

for visual reference

Download any button icons from the assets endpoint
Check if project has existing button component
If yes, extend it with new variant; if no, create new component using project conventions
Map Figma colors to project design tokens (e.g.,
```
primary-500
```
,
```
primary-hover
```
)
Validate against screenshot for padding, border radius, typography

Result: Button component matching Figma design, integrated with project design system.

Example 2: Building a Dashboard Layout

User says: "Build this dashboard: https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"

Actions:

Parse URL to extract fileKey=
```
pR8mNv5KqXzGwY2JtCfL4D
```
and nodeId=
```
10-5
```

Run

get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")

to understand the page structure

Identify main sections from metadata (header, sidebar, content area, cards) and their child node IDs

Run

get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId")

for each major section

Run

get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")

for the full page

Download all assets (logos, icons, charts)
Build layout using project's layout primitives
Implement each section using existing components where possible
Validate responsive behavior against Figma constraints

Result: Complete dashboard matching Figma design with responsive layout.

Best Practices

Treat the generated public skill as a reviewable packaging layer around the upstream repository. The goal is to keep provenance explicit and load only the copied source material that materially improves execution.

Place UI components in the project's designated design system directory
Follow the project's component naming conventions
Avoid inline styles unless truly necessary for dynamic values
ALWAYS use components from the project's design system when possible
Map Figma design tokens to project design tokens
When a matching component exists, extend it rather than creating a new one
Document any new components added to the design system

Imported Operating Notes

Imported: Implementation Rules

Component Organization

Place UI components in the project's designated design system directory
Follow the project's component naming conventions
Avoid inline styles unless truly necessary for dynamic values

Design System Integration

ALWAYS use components from the project's design system when possible
Map Figma design tokens to project design tokens
When a matching component exists, extend it rather than creating a new one
Document any new components added to the design system

Code Quality

Avoid hardcoded values - extract to constants or design tokens
Keep components composable and reusable
Add TypeScript types for component props
Include JSDoc comments for exported components

Imported: Best Practices

Always Start with Context

Never implement based on assumptions. Always fetch

get_design_context

and

get_screenshot

first.

Incremental Validation

Validate frequently during implementation, not just at the end. This catches issues early.

Document Deviations

If you must deviate from the Figma design (e.g., for accessibility or technical constraints), document why in code comments.

Reuse Over Recreation

Always check for existing components before creating new ones. Consistency across the codebase is more important than exact Figma replication.

Design System First

When in doubt, prefer the project's design system patterns over literal Figma translation.

Troubleshooting

Problem: The operator skipped the imported context and answered too generically

Symptoms: The result ignores the upstream workflow in

packages/skills-catalog/skills/(design)/figma-implement-design

, fails to mention provenance, or does not use any copied source files at all. Solution: Re-open

metadata.json

ORIGIN.md

, and the most relevant copied upstream files. Load only the files that materially change the answer, then restate the provenance before continuing.

Problem: The imported workflow feels incomplete during review

Symptoms: Reviewers can see the generated

SKILL.md

, but they cannot quickly tell which references, examples, or scripts matter for the current task. Solution: Point at the exact copied references, examples, scripts, or assets that justify the path you took. If the gap is still real, record it in the PR instead of hiding it.

Problem: The task drifted into a different specialization

Symptoms: The imported skill starts in the right place, but the work turns into debugging, architecture, design, security, or release orchestration that a native skill handles better. Solution: Use the related skills section to hand off deliberately. Keep the imported provenance visible so the next skill inherits the right context instead of starting blind.

Related Skills

```
@accessibility
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@ai-cold-outreach
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@ai-pricing
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@ai-sdr
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.

Additional Resources

Use this support matrix and the linked files below as the operator packet for this imported skill. They should reflect real copied source material, not generic scaffolding.

Resource family	What it gives the reviewer	Example path
`references`	copied reference notes, guides, or background material from upstream	`references/n/a`
`examples`	worked examples or reusable prompts copied from upstream	`examples/n/a`
`scripts`	upstream helper scripts that change execution or validation	`scripts/n/a`
`agents`	routing or delegation notes that are genuinely part of the imported package	`agents/n/a`
`assets`	supporting assets or schemas copied from the source package	`assets/n/a`

LICENSE.txt

Imported Reference Notes

Imported: Additional Resources

Imported: Common Issues and Solutions

Issue: Figma output is truncated

Cause: The design is too complex or has too many nested layers to return in a single response. Solution: Use

get_metadata

to get the node structure, then fetch specific nodes individually with

get_design_context

Issue: Design doesn't match after implementation

Cause: Visual discrepancies between the implemented code and the original Figma design. Solution: Compare side-by-side with the screenshot from Step 3. Check spacing, colors, and typography values in the design context data.

Issue: Assets not loading

Cause: The Figma MCP server's assets endpoint is not accessible or the URLs are being modified. Solution: Verify the Figma MCP server's assets endpoint is accessible. The server serves assets at

localhost

URLs. Use these directly without modification.

Issue: Design token values differ from Figma

Cause: The project's design system tokens have different values than those specified in the Figma design. Solution: When project tokens differ from Figma values, prefer project tokens for consistency but adjust spacing/sizing to maintain visual fidelity.

Imported: Understanding Design Implementation

The Figma implementation workflow establishes a reliable process for translating designs to code:

For designers: Confidence that implementations will match their designs with pixel-perfect accuracy. For developers: A structured approach that eliminates guesswork and reduces back-and-forth revisions. For teams: Consistent, high-quality implementations that maintain design system integrity.

By following this workflow, you ensure that every Figma design is implemented with the same level of care and attention to detail.