Source profileQuality 63/100

nexu-io/open-design/skills/figma-implement-design/SKILL.md

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.

Source repository stars
82,073
Declared platforms
0
Static risk flags
1
Last source update
2026-07-28
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and where it fits

Curated from Figma's MCP server guide.

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/nexu-io/open-design --skill "skills/figma-implement-design"
    Safe inspection promptEditorial

    Inspect the Agent Skill "figma-implement-design" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/skills/figma-implement-design/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      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:

      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 y…
    2. 02

      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.

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

      Source

      Upstream: https://github.com/figma/skills

      Upstream: https://github.com/figma/skillsCategory: figma- Upstream: https://github.com/figma/skills - Category: figma

    Permission review

    Static risk signals and limitations

    Network access

    medium · line 23

    The documentation includes network, browsing, or remote request actions.

    open https://github.com/figma/skills

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score63/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars82,073SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guidecatalog recordEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    nexu-io/open-design
    Skill path
    skills/figma-implement-design/SKILL.md
    Commit
    89d6d4ef21baf80f871595abdf6f7de6e941dd44
    License
    Apache-2.0
    Collected
    2026-07-28
    Default branch
    main
    View the original SKILL.md

    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

    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.

    Alternatives

    Compare before choosing

    Computed 8524,265

    openai/skills

    figma-implement-design

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

    2026-07-140 platforms
    Computed 9438,313

    wshobson/agents

    brand-landingpage

    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 —

    2026-07-220 platforms
    Computed 91234,327

    affaan-m/ECC

    videodb

    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

    2026-07-270 platforms
    Computed 91933

    dpearson2699/swift-ios-skills

    ios-localization

    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

    2026-07-150 platforms