Skip to content
Design
Auto-invokedWhat is this?This plugin ships a FLOW.md router the engine fires, so the matching skill runs itself. No slash command to remember.Learn how →Skill

/figma-implement-design

Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.

BOOST
Guide
@nexu-ionexu-io@nexu-io
From plugin
open-design
107k170 skills1 command1 MCP

Claude Code

$ npx -y skills add nexu-io/open-design --skill figma-implement-design --agent claude-code

SKILL.md

figma-implement-design.SKILL.md
name: figma-implement-design
description: |
  Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.
triggers:
  - "figma to code"
  - "implement figma"
  - "figma fidelity"
  - "1:1 figma"
od:
  mode: design-system
  category: figma
  upstream: "https://github.com/figma/skills"

figma-implement-design

> Curated from Figma's MCP server guide.

What it does

Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.

Source

  • Upstream: https://github.com/figma/skills
  • Category: `figma`

How to use

This catalogue entry advertises the skill in OpenDesign so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory:

# Inspect the upstream README for exact paths
open https://github.com/figma/skills

Then ask the agent to invoke this skill by name (`figma-implement-design`) or with one of the trigger phrases listed in this skill's frontmatter.

Read it on GitHub ↗
Stats
JavaScriptReactVueshadcn/uiHTMLCSSDockerGitHubAnthropicOpenAIMCPFigma
107,035
Stars
12,174
Forks
Active
Maintenance
TypeScript
Language
Apache-2.0
License
Last commit
Created

Repo: nexu-io/open-design

In this plugin
170 skills1 command1 MCP
See everything inside
@nexu-io
Ships withopen-design

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your team and AI agents. Share work, exchange feedback, and iterate together in one workspace.

107k170 skills1 MCP
Get the whole plugin, auto-invoked

Stars on GitHub

Momentum

stars in total
106.9k
Star history of nexu-io/open-design on GitHub, a chart by star-history.com
See what's trending this week

Other skills on open-design.

od-contribute
Auto-invoked

od-contribute

One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or…

open-design
@nexu-io@nexu-ioInstall Skill
ad-creative
Auto-invoked

ad-creative

Generate and iterate ad creative including headlines, descriptions, and primary text. Useful for paid social and search ad…

open-design
@nexu-io@nexu-ioInstall Skill
agent-browser
Auto-invoked

agent-browser

Browser automation CLI for AI agents. Use when the user needs to inspect, test, or automate browser behavior: navigating pages,…

open-design
@nexu-io@nexu-ioInstall Skill
ai-music-album
Auto-invoked

ai-music-album

Full-lifecycle AI music album production — concept, lyric drafting, track sequencing, and export. Useful for indie album…

open-design
@nexu-io@nexu-ioInstall Skill
See all 170 skills in open-design

More skills from other plugins.

impeccable

impeccable

Use to design, redesign, critique, audit, polish or animate a frontend: websites, landing pages, dashboards, app UI, components,…

impeccabletoday107k
@pbakaus@pbakausInstall Skill
animate

animate

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at…

skills1d56k
@emilkowalski@emilkowalskiInstall Skill

Questions about figma-implement-design.

Which coding agents can use figma-implement-design?
figma-implement-design installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.