generate-figma — community generate-figma, product-studio, community, ide skills, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

关于此技能

非常适合需要无缝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]
更新于: 3/6/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 6/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
6/11
Quality Score
41
Canonical Locale
en
Detected Body Locale
en

非常适合需要无缝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中使用Figma Console MCP生成或更新设计的能力，通过使用目标文件详情、文件密钥或Figma文件URL，以及可选的父节点ID实现结构化的设计层次，促进设计过程和协作的流程化。

适用 Agent 类型

非常适合需要无缝Figma集成的动态设计生成和更新的设计自动化代理。

↓ 赋予的主要能力 · 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 supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

实验室 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

generate-figma 是什么？

非常适合需要无缝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.

如何安装 generate-figma？

运行命令：npx killer-skills add ryanallen/product-studio。支持 Cursor、Windsurf、VS Code、Claude Code 等 19+ IDE/Agent。

generate-figma 适用于哪些场景？

典型场景包括：基于输入参数自动更新Figma中的设计、在现有的Figma文件中生成新的设计组件、捕获ID或端点用于设计工作流中的交接或报告。

generate-figma 支持哪些 IDE 或 Agent？

该技能兼容 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。可使用 Killer-Skills CLI 一条命令通用安装。

generate-figma 有哪些限制？

需要Figma文件详情或访问Figma Console MCP；依赖于Figma的API和MCP能力。

↓ 安装步骤

  1. 1. 打开终端

    在你的项目目录中打开终端或命令行。

  2. 2. 执行安装命令

    运行：npx killer-skills add ryanallen/product-studio。CLI 会自动识别 IDE 或 AI Agent 并完成配置。

  3. 3. 开始使用技能

    generate-figma 已启用，可立即在当前项目中调用。

! 参考页模式

此页面仍可作为安装与查阅参考，但 Killer-Skills 不再把它视为主要可索引落地页。请优先阅读上方评审结论，再决定是否继续查看上游仓库说明。

Imported Repository Instructions

The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.

Supporting Evidence

generate-figma

安装 generate-figma，这是一款面向AI agent workflows and automation的 AI Agent Skill。支持 Claude Code、Cursor、Windsurf，一键安装。

SKILL.md
Readonly
Imported Repository Instructions
The section below is supporting source material from the upstream repository. Use the Killer-Skills review above as the primary decision layer.
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).

相关技能

寻找 generate-figma 的替代方案 (Alternative) 或可搭配使用的同类 community Skill？探索以下相关开源技能。

查看全部

openclaw-release-maintainer

Logo of openclaw
openclaw

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

★ 333.8k
⑂ 0
AI

widget-generator

Logo of f
f

为prompts.chat的信息反馈系统生成可定制的插件小部件

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

React 框架

★ 138.4k
⑂ 0
浏览器

pr-review

Logo of pytorch
pytorch

Python中具有强大GPU加速的张量和动态神经网络

★ 98.6k
⑂ 0
开发者工具