What is 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.
nexu-io/open-design
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.
63CollectingNetwork access
See how to use itView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "skills/figma-implement-design"Quick start
Start using it in three steps
Install it or open the source, trigger it with a clear task, then follow the source workflow.
1
Install the Skill
npx skills add https://github.com/nexu-io/open-design --skill "skills/figma-implement-design"2
Describe the task
Use figma-implement-design to help me with: [describe your task]. Before you begin, tell me what input you need, the steps you will follow, and the expected output.
3
Follow the workflow
No structured workflow was detected; follow the original SKILL.md below.
Continue to the workflowDirect answers
Answers to review before you install
Who should use figma-implement-design?
It is relevant to workflows involving Translation, Engineering, Design.
How do you install figma-implement-design?
SkillSignal detected this source-specific command: npx skills add https://github.com/nexu-io/open-design --skill "skills/figma-implement-design". Inspect the repository and command before running it.
Which Agent platforms does it support?
The upstream source does not declare a dedicated Agent platform.
What permissions or risks should you review?
Static analysis detected network signals. Review the cited source lines before installing; these signals are not a security audit.
What are the current evidence limits?
This page combines upstream documentation with deterministic repository, quality, and static-risk signals. It is not described as a manual test or security review.
SkillSignal brief
Decide whether it fits your work first
Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.
Useful in these contexts
Not yet included in a workflow collection
Core capabilities
TranslationEngineeringDesign
Repository stars
82,073
Repository forks
9,485
Quality
63/100
Source repository last pushed
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Documentation18/30
Specificity14/25
Maintenance20/20
Trust signals11/25
Compare before choosing
Related Agent Skills and source variants
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
figma-implement-design by openai
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
brand-landingpage by wshobson
Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens —
videodb by affaan-m
See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio, v
ios-localization by dpearson2699
Implement, review, or improve localization and internationalization in iOS/macOS apps — String Catalogs (.xcstrings), generated localizable symbols, stable key naming, LocalizedStringKey, LocalizedStringResource, pluralization, FormatStyle for numbers/dates/measurements, right-to-left layout, Dynamic Type, and locale-aware formatting. Use when adding multi-language support, setting up String Catalogs, enabling generated symbols for compile-time-safe localization keys, handling plural forms, form
figma by openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 1 min
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 Open Design 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.
- Source repo
- nexu-io/open-design
- Skill path
- skills/figma-implement-design/SKILL.md
- Commit SHA
- 89d6d4ef21ba
- Repository license
- Apache-2.0
- Data collected