← Back to Skills Marketplace
plume-lj

figma-design-analyzer

by plume-LJ · GitHub ↗ · v1.0.2 · MIT-0
cross-platform ⚠ suspicious
109
Downloads
0
Stars
0
Active Installs
3
Versions
Install in OpenClaw
/install figma-design-analyzer
Description
分析Figma设计文件,提取设计系统数据(颜色、字体、间距、组件),导出截图,并与实际实现进行比对验证。使用JavaScript/Node.js实现,当用户需要处理Figma设计文件、提取设计规范、导出设计资源或验证设计实现时使用此技能。
README (SKILL.md)

Figma设计分析技能 (JavaScript版)

使用Node.js分析Figma设计文件,提取设计系统,导出资源,验证实现一致性。

快速开始

  1. 设置令牌

    export FIGMA_ACCESS_TOKEN=your_figma_token
    
  2. 安装Node.js依赖

    npm install  # 或 yarn install
    
  3. 使用技能

    • 在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限制和网络错误
  • 提供明确的错误信息和解决建议

示例用例

  1. 设计系统文档生成:提取所有设计规范
  2. 开发资源准备:批量导出图标和组件截图
  3. 实现质量检查:比对CSS与设计一致性
  4. 设计评审:分析设计规范遵循情况

下一步

  1. 设置您的FIGMA_ACCESS_TOKEN
  2. 提供Figma文件URL或ID
  3. 描述您的具体需求

技能会自动处理分析并生成结果。

Usage Guidance
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.
Capability Analysis
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.
Capability Assessment
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.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install figma-design-analyzer
  3. After installation, invoke the skill by name or use /figma-design-analyzer
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
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报告、图片 - 提供详尽的错误处理和用例说明
Metadata
Slug figma-design-analyzer
Version 1.0.2
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 3
Frequently Asked Questions

What is figma-design-analyzer?

分析Figma设计文件,提取设计系统数据(颜色、字体、间距、组件),导出截图,并与实际实现进行比对验证。使用JavaScript/Node.js实现,当用户需要处理Figma设计文件、提取设计规范、导出设计资源或验证设计实现时使用此技能。 It is an AI Agent Skill for Claude Code / OpenClaw, with 109 downloads so far.

How do I install figma-design-analyzer?

Run "/install figma-design-analyzer" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is figma-design-analyzer free?

Yes, figma-design-analyzer is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does figma-design-analyzer support?

figma-design-analyzer is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created figma-design-analyzer?

It is built and maintained by plume-LJ (@plume-lj); the current version is v1.0.2.

💬 Comments