generate-figma — community generate-figma, product-studio, community, ide skills

v1.0.0
GitHub

이 스킬 정보

동적인 디자인 생성 및 업데이트 için 무결점의 Figma 통합이 필요한 디자인 자동화 에이전트에 적합합니다. Generate or update a Figma design via the Figma Console MCP with target file details. Use when user says generate Figma, generate design, or /generate-figma. In Claude Code and Cursor, /skills lists all.

ryanallen ryanallen
[1]
[0]
Updated: 3/6/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 7/11

This page remains useful for operators, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution
Review Score
7/11
Quality Score
41
Canonical Locale
en
Detected Body Locale
en

동적인 디자인 생성 및 업데이트 için 무결점의 Figma 통합이 필요한 디자인 자동화 에이전트에 적합합니다. Generate or update a Figma design via the Figma Console MCP with target file details. Use when user says generate Figma, generate design, or /generate-figma. In Claude Code and Cursor, /skills lists all.

이 스킬을 사용하는 이유

에이전트가 Figma Console MCP를 사용하여 Figma 내에서 직접 디자인을 생성 또는 업데이트할 수 있도록 하여, 대상 파일 세부 정보, 파일 키 또는 Figma 파일 URL 및 구조화된 디자인 계층 구조를 위한 선택적 부모 노드 ID를 사용하여 디자인 프로세스와 협력을 간소화합니다.

최적의 용도

동적인 디자인 생성 및 업데이트 için 무결점의 Figma 통합이 필요한 디자인 자동화 에이전트에 적합합니다.

↓ 실행 가능한 사용 사례 for generate-figma

입력 매개변수에 따라 Figma의 디자인을 자동으로 업데이트하는 것
기존 Figma 파일 내에 새로운 디자인 구성 요소를 생성하는 것
디자인 워크플로의 인도 또는 보고를 위한 ID 또는 엔드포인트를 캡처하는 것

! 보안 및 제한 사항

  • Figma 파일 세부 정보 또는 Figma Console MCP에 대한 액세스가 필요
  • Figma의 API 및 MCP 기능에 의존

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.
  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

After The Review

Decide The Next Action Before You Keep Reading Repository Material

Killer-Skills should not stop at opening repository instructions. It should help you decide whether to install this skill, when to cross-check against trusted collections, and when to move into workflow rollout.

Install Path

Start With Installation And Validation

If this skill is worth continuing with, the next step is to confirm the install command, CLI write path, and environment validation.
Trusted Recheck

Cross-Check Against Trusted Picks

If you are still comparing multiple skills or vendors, go back to the trusted collection before amplifying repository noise.
Workflow

Move To Workflow Collections For Team Rollout

When the goal shifts from a single skill to team handoff, approvals, and repeatable execution, move into workflow collections.
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is generate-figma?

동적인 디자인 생성 및 업데이트 için 무결점의 Figma 통합이 필요한 디자인 자동화 에이전트에 적합합니다. Generate or update a Figma design via the Figma Console MCP with target file details. Use when user says generate Figma, generate design, or /generate-figma. In Claude Code and Cursor, /skills lists all.

How do I install generate-figma?

Run the command: npx killer-skills add ryanallen/product-studio. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for generate-figma?

Key use cases include: 입력 매개변수에 따라 Figma의 디자인을 자동으로 업데이트하는 것, 기존 Figma 파일 내에 새로운 디자인 구성 요소를 생성하는 것, 디자인 워크플로의 인도 또는 보고를 위한 ID 또는 엔드포인트를 캡처하는 것.

Which IDEs are compatible with generate-figma?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for generate-figma?

Figma 파일 세부 정보 또는 Figma Console MCP에 대한 액세스가 필요. Figma의 API 및 MCP 기능에 의존.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add ryanallen/product-studio. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use generate-figma immediately in the current project.

! Reference-Only Mode

This page remains useful for installation and reference, but Killer-Skills no longer treats it as a primary indexable landing page. Read the review above before relying on the upstream repository instructions.

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

generate-figma

Install generate-figma, an AI agent skill for AI agent workflows and automation. Review the use cases, limitations, and setup path before rollout.

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

Generate Figma

Use the Figma Console MCP with target file details to generate or update a design, or to get capture IDs or endpoints for capture flows.

Inputs

  • Figma file details (required) – Target file, file key, or Figma file URL (e.g. https://www.figma.com/file/abc123/...). Optional parent node ID if the design should go under a specific node.

Output

Design generation or update in Figma, or capture ID/endpoint to report or hand off.

Process

  1. Resolve – File key (and node id if given) from the user's Figma file URL or details.
  2. Call MCP – Figma Console MCP with those parameters.
  3. Report – Use the response (capture ID, endpoint) to report to the user or hand off to another flow.

Requirements

  • Figma Console MCP configured and authenticated.
  • Figma Desktop Bridge (for Prompt to Figma): run npm run setup:figma-bridge to extract to .claude/skills/generate-figma/scripts/figma-desktop-bridge. In Figma Desktop, Plugins → Development → Import plugin from manifest → select .claude/skills/generate-figma/scripts/figma-desktop-bridge/manifest.json. Keep the bridge running while using Prompt to Figma.

Reference

Figma Console MCP and setup are documented in the Install workflow (install-mcp-setup, install-figma-bridge).

관련 스킬

Looking for an alternative to generate-figma or another community skill for your workflow? Explore these related open-source skills.

모두 보기

openclaw-release-maintainer

Logo of openclaw
openclaw

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

★ 333.8k
⑂ 0
인공지능

widget-generator

Logo of f
f

prompts.chat 피드 시스템을 위한 사용자 지정 가능한 위젯 플러그인을 생성합니다

★ 149.6k
⑂ 0
인공지능

flags

Logo of vercel
vercel

리액트 프레임워크

★ 138.4k
⑂ 0
브라우저

pr-review

Logo of pytorch
pytorch

파이썬에서 텐서와 동적 신경망 구현 및 강력한 GPU 가속 지원

★ 98.6k
⑂ 0
개발자