← 返回 Skills 市场
109
总下载
0
收藏
0
当前安装
3
版本数
在 OpenClaw 中安装
/install figma-design-analyzer
功能描述
分析Figma设计文件,提取设计系统数据(颜色、字体、间距、组件),导出截图,并与实际实现进行比对验证。使用JavaScript/Node.js实现,当用户需要处理Figma设计文件、提取设计规范、导出设计资源或验证设计实现时使用此技能。
使用说明 (SKILL.md)
Figma设计分析技能 (JavaScript版)
使用Node.js分析Figma设计文件,提取设计系统,导出资源,验证实现一致性。
快速开始
-
设置令牌:
export FIGMA_ACCESS_TOKEN=your_figma_token -
安装Node.js依赖:
npm install # 或 yarn install -
使用技能:
- 在Claude中:直接描述您的Figma分析需求
- 命令行:
node scripts/figma-cli.js --help
核心功能
1. 文件信息获取
获取Figma文件的完整结构和元数据:
node scripts/figma-cli.js info "文件ID或URL"
2. 设计属性提取
提取颜色、字体、间距、组件等设计系统数据:
node scripts/figma-cli.js extract "文件ID" --output design-system.json
3. 截图导出
导出设计节点的PNG/JPG截图:
node scripts/figma-cli.js export "文件ID" --node-id "节点ID" --format png
4. 比对验证
将实际实现(CSS/代码)与设计进行比对:
node scripts/figma-cli.js compare "文件ID" implementation.css --output report.json
输出格式
- JSON:机器可读的结构化数据(默认)
- HTML:可视化比对报告
- PNG/JPG:设计截图
错误处理
- 验证FIGMA_ACCESS_TOKEN环境变量
- 检查文件访问权限
- 处理API限制和网络错误
- 提供明确的错误信息和解决建议
示例用例
- 设计系统文档生成:提取所有设计规范
- 开发资源准备:批量导出图标和组件截图
- 实现质量检查:比对CSS与设计一致性
- 设计评审:分析设计规范遵循情况
下一步
- 设置您的FIGMA_ACCESS_TOKEN
- 提供Figma文件URL或ID
- 描述您的具体需求
技能会自动处理分析并生成结果。
安全使用建议
What to check before installing/use:
- Required token: SKILL.md and the code require FIGMA_ACCESS_TOKEN but the registry metadata did not declare this. Expect to provide a Figma personal access token.
- Token safety: Treat that token like a secret — create a token with minimal access, run the tool in an isolated environment, and revoke it if you are unsure. The token lets the skill read files accessible to your Figma account.
- Local file reads/writes: The compare command reads arbitrary local file paths you supply; do not pass sensitive system files. The skill writes exports/reports into figma-exports/ under the process CWD.
- Network behavior: All network calls go to api.figma.com (expected). If you see any other network endpoints in a future version, investigate before use.
- Code review & dependency audit: The source is present — review the modules for any unexpected behavior and run npm audit on dependencies before installing. Running in a disposable container or VM is recommended for first use.
- Metadata mismatch: Because the registry metadata omitted the required env var, consider asking the publisher to correct the skill manifest or only use the repository after verifying the code.
If you are comfortable with these points and grant only the FIGMA token you intend to use, the implementation otherwise appears consistent with its stated purpose.
功能分析
Type: OpenClaw Skill
Name: figma-design-analyzer
Version: 1.0.2
The bundle is a legitimate utility for analyzing Figma design files, extracting design tokens (colors, fonts, spacing), and comparing them against CSS implementations. It uses the official Figma REST API (api.figma.com) and requires a user-provided FIGMA_ACCESS_TOKEN. The code logic in scripts/modules/ is consistent with the stated purpose, and there is no evidence of data exfiltration to third-party domains, obfuscation, or malicious command execution. While there are minor security risks typical of CLI tools (such as potential path traversal if a user provides a malicious output path in figma-cli.js or XSS in the generated HTML report in design-comparator.js), these appear to be unintentional vulnerabilities rather than intentional malice.
能力评估
Purpose & Capability
The skill name/description match the included code: it calls Figma APIs, extracts colors/fonts/spacing, exports screenshots, and compares CSS files. Declared dependencies (axios, sharp, commander, etc.) are appropriate for these tasks. The main mismatch is that the registry metadata lists no required env vars or primary credential, while both SKILL.md and the code require a FIGMA_ACCESS_TOKEN.
Instruction Scope
SKILL.md and the CLI instruct the user/agent to set FIGMA_ACCESS_TOKEN, run npm install, and then call CLI commands. The runtime instructions and code read user-provided implementation files (CSS or other file paths), fetch many endpoints under api.figma.com, and write exported images/reports to disk (figma-exports/...). These actions are within the described purpose, but the skill will read local files you point it to (potentially arbitrary paths) and will load a .env file via dotenv if present.
Install Mechanism
There is no scripted install spec in the registry (instruction-only), but package.json and README instruct an npm install. Dependencies are standard public packages from npm — no obscure download URLs or archive extraction. Installing will fetch packages from the public npm registry (normal but has typical npm risks).
Credentials
The skill requires a Figma personal access token (FIGMA_ACCESS_TOKEN) in SKILL.md and uses it throughout the code (axios X-Figma-Token). However registry metadata declared no required env vars and no primary credential — an inconsistency. The skill also loads .env via dotenv, and will access any local implementation file path you pass for comparison. Requesting a single Figma token is proportionate to the purpose, but the metadata should explicitly list that credential and the user should be aware the token grants API access to files visible to that account.
Persistence & Privilege
The skill is not always-enabled and allows autonomous invocation (default). It writes export files and reports to the current working directory (creates figma-exports/*). It does not attempt to modify other skills or system-wide agent config. Writing files to disk is expected for an exporter but you should be aware of the output locations.
如何使用
- 确保已安装 OpenClaw(本地或 Docker 部署)
- 在对话框中输入安装命令:
/install figma-design-analyzer - 安装完成后,直接呼叫该 Skill 的名称或使用
/figma-design-analyzer触发 - 根据 Skill 的参数说明提供必要输入,即可获得结构化输出
版本历史
v1.0.2
- Removed 4 files: evals/evals.json, references/development.md, scripts/test-data/test-styles.css, scripts/test-runner.js
- Cleaned up repository by deleting sample, test, and reference files
- No user-facing feature or documentation changes
v1.0.1
- Removed .env and package-lock.json files for cleaner repository management.
- No changes to functionality or user workflow.
v1.0.0
Figma设计分析技能首次发布,让用户可自动化分析Figma设计文件,提取设计系统数据,并验证实现一致性。
- 支持分析Figma文件,获取完整结构及元数据
- 自动提取颜色、字体、间距和组件等设计规范
- 支持导出节点截图(PNG/JPG格式)
- 可比对实际实现(如CSS)与设计,实现一致性验证
- 输出多种格式:JSON、HTML报告、图片
- 提供详尽的错误处理和用例说明
元数据
常见问题
figma-design-analyzer 是什么?
分析Figma设计文件,提取设计系统数据(颜色、字体、间距、组件),导出截图,并与实际实现进行比对验证。使用JavaScript/Node.js实现,当用户需要处理Figma设计文件、提取设计规范、导出设计资源或验证设计实现时使用此技能。 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件,目前累计下载 109 次。
如何安装 figma-design-analyzer?
在 OpenClaw 或 Claude Code 对话框中运行命令「/install figma-design-analyzer」即可一键安装,无需额外配置。
figma-design-analyzer 是免费的吗?
是的,figma-design-analyzer 完全免费,采用 MIT-0 许可证,可自由下载、安装和使用。
figma-design-analyzer 支持哪些平台?
figma-design-analyzer 跨平台运行,可在任意部署了 OpenClaw / Claude Code 的环境中使用(cross-platform)。
谁开发了 figma-design-analyzer?
由 plume-LJ(@plume-lj)开发并维护,当前版本 v1.0.2。
推荐 Skills