nexu-io/open-design

figma-generate-design

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

63CollectingNetwork access

See how to use it View GitHub source

npx skills add https://github.com/nexu-io/open-design --skill "skills/figma-generate-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.

Install the Skill

npx skills add https://github.com/nexu-io/open-design --skill "skills/figma-generate-design"

Describe the task

Use figma-generate-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.

Follow the workflow

No structured workflow was detected; follow the original SKILL.md below.

Continue to the workflow

Direct answers

Answers to review before you install

What is figma-generate-design?

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

Who should use figma-generate-design?

It is most relevant to product / startup workflows. Confirm the original prerequisites before using it in production.

How do you install figma-generate-design?

SkillSignal detected this source-specific command: npx skills add https://github.com/nexu-io/open-design --skill "skills/figma-generate-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

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

Useful in these contexts

Product / startup

Core capabilities

TranslationEngineeringDesign

Repository stars

82,073

Repository forks

9,485

Quality

63/100

Source repository last pushed

2026-07-28

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

63/100

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-generate-design by openai

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Disco

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

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 1 min

figma-generate-design

Curated from Figma's MCP server guide.

What it does

Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.

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-generate-design) or with one of the trigger phrases listed in this skill's frontmatter.

Source repo: nexu-io/open-design
Skill path: skills/figma-generate-design/SKILL.md
Commit SHA: 89d6d4ef21ba
Repository license: Apache-2.0
Data collected: Jul 28, 2026