Install
openclaw skills install @thcjp/figma-toolkit-pro从Figma设计稿提取设计上下文、变量和资源,支持批量导出和生成React/Vue等框架的生产代码,提升开发效率。
openclaw skills install @thcjp/figma-toolkit-pro功能说明: 本技能涵盖 中文交互、提升工作效率、化流程 等核心能力。
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中声明的使用场景,均已在上述能力点中提供对应的操作支持.
从Figma URL和节点ID获取设计上下文,生成React/Vue组件代码。示例指令:`
`把这个Figma设计转为React组件
操作流程:
批量导出Figma中的图标、图片等设计资源。示例指令:`
`导出这个Figma文件的所有图标
提取Figma中的颜色、字体、间距等设计变量。示例指令:`
`提取设计系统变量
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| input | string | 是 | Figma设计工具包(专业版)处理的输入数据或指令 |
| options | object | 否 | 附加配置选项,如模式选择、格式偏好等 |
| callback_url | string | 否 | 异步处理完成后的回调通知URL |
# 确保Python环境可用
python3 --version
# ...
# 依赖说明
pip install requests
# 企业级Figma设计转码引擎(PRO)
import json
import subprocess
from typing import List, Dict, Optional
from dataclasses import dataclass, field
# ...
@dataclass
class FigmaNode:
node_id: str
name: str
node_type: str
children: List['FigmaNode'] = field(default_factory=list)
styles: Dict = field(default_factory=dict)
# ...
class FigmaDesignEngine:
def __init__(self, access_token: str):
self.access_token = access_token
self.api_base = "https://api.figma.com/v1"
# ...
def get_file_structure(self, file_key: str) -> dict:
"""获取文件完整结构(PRO 专属)"""
result = subprocess.run([
"npx", "figma-developer-协议适配层",
"--file-key", file_key,
"--action", "structure",
"--token", self.access_token
], capture_output=True, text=True)
return json.loads(result.stdout)
# ...
def batch_export_assets(self, file_key: str,
node_ids: List[str],
formats: List[str] = None) -> List[dict]:
"""批量导出资源(PRO 专属)"""
if formats is None:
formats = ["png", "svg"]
results = []
for node_id in node_ids:
for fmt in formats:
"npx", "figma-developer-协议适配层",
"--file-key", file_key,
"--node-id", node_id,
"--action", "export",
"--format", fmt,
], capture_output=True, text=True)
results.append({
"node_id": node_id,
"format": fmt,
"output": result.stdout.strip()
})
return results
# ...
def extract_design_tokens(self, file_key: str) -> dict:
"""提取设计令牌(PRO 专属)"""
"npx", "figma-developer-协议适配层",
"--file-key", file_key,
"--action", "variables",
], capture_output=True, text=True)
raw = json.loads(result.stdout)
return self._normalize_tokens(raw)
# ...
def _normalize_tokens(self, raw: dict) -> dict:
tokens = {"colors": {}, "typography": {}, "spacing": {}}
for var in raw.get("variables", []):
if var.get("type") == "COLOR":
tokens["colors"][var["name"]] = var["value"]
elif var.get("type") == "FLOAT":
tokens["spacing"][var["name"]] = var["value"]
return tokens
# ...
def generate_component_code(self, file_key: str, node_id: str,
framework: str = "react") -> str:
"""生成组件代码(PRO 专属)"""
screenshot = self._get_screenshot(file_key, node_id)
tokens = self.extract_design_tokens(file_key)
return f"""// 自动生成 {framework} 组件
// 设计令牌: {json.dumps(tokens, ensure_ascii=False)}
// 截图参考: {screenshot}
export function Component() <动态配置>"""
# ...
def _get_screenshot(self, file_key, node_id):
"npx", "figma-developer-协议适配层",
"--file-key", file_key,
"--node-id", node_id,
"--action", "screenshot",
], capture_output=True, text=True)
return result.stdout.strip()
# ...
engine = FigmaDesignEngine("YOUR_FIGMA_TOKEN")
tokens = engine.extract_design_tokens("abc123")
print(json.dumps(tokens, ensure_ascii=False, indent=2))
完成上述代码后,将根据输入参数返回结构化响应。专业版支持批量任务和并行解析,可同时解析多个文件或任务.
figma:
access_token: "YOUR_FIGMA_TOKEN"
default_format: png
output_dir: "./assets"
batch:
max_nodes: 100
parallel: true
formats: ["png", "svg", "pdf"]
code_generation:
frameworks: ["react", "vue", "angular", "svelte"]
styling: ["tailwind", "css-modules", "styled-components"]
responsive: true
accessibility: true
design_tokens:
export_format: ["json", "scss", "css", "ts"]
naming_convention: "kebab-case"
auto_sync: true
collaboration:
shared_variables: true
version_tracking: true
comment_export: true
| 配置项 | 说明 | 默认值 |
|---|---|---|
| 基础路径 | 工作目录 | ./ |
| 输出格式 | 结果输出格式 | json |
| 批量大小 | 单批处理数量 | 10 |
| 并行度 | 并行处理线程数 | 4 |
| 重试次数 | 失败重试次数 | 3 |
本专业版完全兼容免费版的数据格式与操作方式:
| 特性 | 免费版 | 专业版 |
|---|---|---|
| 基础功能 | 支持 | 支持 |
| 批量操作 | 不支持 | 支持 |
| 并行处理 | 不支持 | 支持 |
| 高级配置 | 有限 | 完整 |
| 审计报告 | 不支持 | 支持 |
| 优先支持 | 社区 | 优先通道 |
免费版创建的文件可无缝升级到专业版处理,无需任何格式转换.
# 本技能的核心实现逻辑
# 请参考上方使用说明进行配置和调用
result = "implementation_ready"
A: 专业版支持分批处理,建议减小batch_size参数,或增加并行度但减少每批文件数量.
A: 在配置文件中设置retry_attempts和retry_delay参数。专业版支持指数退避重试策略.
A: 专业版内置进度追踪功能,通过回调或轮询方式获取实时处理状态。可配置webhook通知.
A: 专业版提供完整的API接口和配置文件,支持CI/CD集成、定时任务和webhook回调.
| 依赖项 | 类型 | 是否必需 | 获取方式 |
|---|---|---|---|
| LLM API | API | 必需 | 由Agent内置LLM提供 |
| figma-developer-协议适配层 | npm包 | 必需 | npx figma-developer-协议适配层 |
| Node.js | 运行时 | 必需 | v16+ |
| 错误场景 | 原因 | 处理方式 |
|---|---|---|
| 配置错误 | 参数缺失或格式错误 | 检查依赖说明中的配置要求 |
| 运行时错误 | 运行环境不满足 | 确认运行环境符合依赖说明 |
| 网络错误 | 连接超时或不可达 | 执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令,参考国内替代方案 |
{
"success": true,
"data": {
"result": "Figma设计工具包(专业版)处理结果",
"execution_time": "0.5s",
"metadata": {
"version": "1.0",
"processor": "figmakit pro"
}
},
"execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
"error": null
}
| 风险类型 | 防范措施 |
|---|---|
| API密钥泄露 | 通过环境变量配置,禁止硬编码到代码或配置文件中 |
| 命令执行风险 | 仅执行白名单命令,避免拼接用户输入到命令行参数中 |
| 网络通信安全 | 使用HTTPS协议,验证SSL证书有效性 |
| 敏感数据暴露 | 输出结果中不包含密钥、令牌等敏感信息 |
使用前请确认已阅读依赖说明章节,确保运行环境满足安全要求。