Figma Toolkit Free

从Figma设计稿提取设计上下文、截图、变量与资源，支持生成生产级React/Vue组件代码，适合个人日常使用。

Install

openclaw skills install @thcjp/figma-toolkit-free

Figma设计工具包（免费版）

概述

Figma设计工具包是针对设计转码领域的专业化AI辅助工具。免费版面向个人用户，提供核心功能与基础用法，适合快速上手和日常使用。

本工具经过深度优化，增强元数据和适用关键词，完全适配SkillHub平台规范。

核心能力

设计上下文获取、节点截图、变量提取、资源导出、设计转代码、组件映射

核心能力(补充)

执行核心能力操作,使用input_params参数进行配置,支持创建/查询/导出等操作。

执行此能力时使用input_params参数,支持创建/查询/导出操作

基础功能完整覆盖

输入: 用户提供基础功能完整覆盖所需的指令和必要参数。处理: 解析基础功能完整覆盖的输入参数,完成核心逻辑,返回结构化响应。输出: 返回基础功能完整覆盖的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

简洁易用的操作接口

输入: 用户提供简洁易用的操作接口所需的指令和必要参数。处理: 解析简洁易用的操作接口的输入参数,完成核心逻辑,返回结构化响应。输出: 返回简洁易用的操作接口的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

标准格式输入输出

输入: 用户提供标准格式输入输出所需的指令和必要参数。处理: 解析标准格式输入输出的输入参数,完成核心逻辑,返回结构化响应。输出: 返回标准格式输入输出的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

快速上手

快速上手，零配置即可使用

输入: 用户提供快速上手所需的指令和必要参数。处理: 解析快速上手的输入参数,完成核心逻辑,返回结构化响应。输出: 返回快速上手的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

适合个人日常使用场景

输入: 用户提供适合个人日常使用场景所需的指令和必要参数。处理: 解析适合个人日常使用场景的输入参数,完成核心逻辑,返回结构化响应。输出: 返回适合个人日常使用场景的响应数据,包含状态码、结果和日志。

执行此能力时使用input_params参数,支持创建/查询/导出操作

输入: 用户提供核心能力所需的指令和必要参数。处理: 解析核心能力的输入参数,完成核心逻辑,返回结构化响应。输出: 返回核心能力的响应数据,包含状态码、结果和日志。 技术实现要点：核心能力基于input_params参数与output_format配置实现,支持创建/查询/修改/删除等操作模式,通过config_options进行运行时配置。 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：Figma、设计稿获取设计上、变量与资源、并转化为生产代码、设计工具包、免费版等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持。

使用场景

场景1：设计稿转代码

从Figma URL和节点ID获取设计上下文，生成React/Vue组件代码。示例指令：`

`把这个Figma设计转为React组件

操作流程：

识别用户需求类型
加载对应处理模块
执行操作并返回结果

场景2：设计资源导出

批量导出Figma中的图标、图片等设计资源。示例指令：`

`导出这个Figma文件的所有图标

场景3：设计变量提取

提取Figma中的颜色、字体、间距等设计变量。示例指令：`

`提取设计系统变量

快速开始

阅读## 核心能力章节了解skill功能
按## 依赖说明配置环境
执行所需能力对应的命令
参考## 错误处理章节处理异常
查看## FAQ解答常见疑问

环境准备

输入格式

参数名	类型	必填	说明
input	string	是	Figma设计工具包（免费版）处理的输入数据或指令
options	object	否	附加配置选项,如模式选择、格式偏好等
callback_url	string	否	异步处理完成后的回调通知URL

bash

# 确保Python环境可用
python3 --version
# ...
# 依赖说明
pip install requests

基础用法

python

# Figma设计获取基础
import subprocess
# ...
# 获取节点截图
result = subprocess.run([
    "npx", "figma-developer-mcp",
    "--file-key", "abc123",
    "--node-id", "1:2",
    "--action", "screenshot"
], capture_output=True, text=True)
print(result.stdout)
# ...
# 获取设计变量
result = subprocess.run([
    "npx", "figma-developer-mcp",
    "--file-key", "abc123",
    "--action", "variables"
], capture_output=True, text=True)
print(f"变量: {result.stdout}")

执行结果

完成上述代码后，将根据输入参数返回结构化响应。免费版支持单次任务，适合解析单个文件或任务。

示例

yaml

figma:
  access_token: "YOUR_FIGMA_TOKEN"
  default_format: png
  output_dir: "./assets"

配置说明

配置项	说明	默认值
基础路径	工作目录	`./`
输出格式	结果输出格式	`json`

最佳实践

基础使用建议

明确需求：在使用前明确需要处理的内容和期望结果
检查输入：确保输入文件格式正确、内容完整
保存结果：处理完成后及时保存输出结果
定期清理：定期清理临时文件
错误处理：遇到错误时检查输入参数

性能优化

python

# 免费版：单文件优化
# 确保输入文件不超过建议大小
# 处理完成后释放资源

常见问题

Q1: 处理速度较慢怎么办？

A: 免费版为单线程处理，对于大文件建议分批处理或升级到专业版获得并行处理能力。

Q2: 支持的文件格式有哪些？

A: 支持标准格式输入输出，常见格式包括JSON、YAML、Markdown等。

Q3: 如何获取API Key？

A: 需要Figma个人访问令牌（Personal Access Token）。如需外部服务API，请参考对应服务的注册流程。

已知限制

A: 免费版支持单次操作，适合个人日常使用。如需批量处理或高级功能，建议升级到专业版。

依赖说明

运行环境

Agent平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI等）
操作系统: Windows / macOS / Linux
Python版本: 3.8+

第三方依赖

依赖项	类型	是否必需	获取方式
LLM API	API	必需	由Agent内置LLM提供
figma-developer-mcp	npm包	必需	npx figma-developer-mcp
Node.js	运行时	必需	v16+

API Key 配置

需要Figma个人访问令牌（Personal Access Token）

可用性分类

分类: MD+EXEC（纯Markdown指令，部分功能需要exec命令行执行能力）
说明: 基于Markdown的AI Skill，通过自然语言指令驱动Agent完成操作
版本: 免费版（v1.0.0 免费版，核心功能）
API Key通过环境变量配置: export API_KEY=your_key

错误处理

错误场景	原因	处理方式
配置错误	参数缺失或格式错误	检查依赖说明中的配置要求
运行时错误	运行环境不满足	确认运行环境符合依赖说明
网络错误	连接超时或不可达	执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

输出格式

json

{
  "success": true,
  "data": {
    "result": "Figma设计工具包（免费版）处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "figmakit"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}