跳到正文
cccskills
免费在 GitHub 公开

figma

Figma manager: inspect designs, export assets, extract styles/components via MCP or REST API.

中文简介正在准备中。当前显示原文说明。

SebastianLuser/claude-code-arcane星标 3(GitHub 3 + cccskills 0)
集成工具Figma

实测评分 未实测

查看安装方法

包含的文件(1)

  • SKILL.md3.0 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Figma Manager

Integra con Figma via MCP nativo o REST API.

Vía MCP

Tools: mcp__figma__authenticate, mcp__figma__complete_authentication Una vez autenticado, MCP expone operations. Revisá mcp__figma__* en contexto.

Vía REST API

curl "https://api.figma.com/v1/files/$FILE_KEY" \
  -H "X-Figma-Token: $FIGMA_TOKEN"

Obtener FILE_KEY del URL: https://www.figma.com/file/<FILE_KEY>/name?node-id=123-456 Node IDs en URL están con -, en API usar : (ej: 123:456).

Operaciones Clave

File tree completo

GET /v1/files/$FILE_KEY

Devuelve estructura completa (puede ser huge).

Nodos específicos

GET /v1/files/$FILE_KEY/nodes?ids=123:456,789:012

Mucho más eficiente que todo el file.

Exportar imágenes

GET /v1/files/$FILE_KEY/images?ids=123:456&format=svg&scale=1

Formats: png, jpg, svg, pdf Scale: 1-4 (para PNG)

Response tiene URLs temporales (expiran en ~1h). Descargar inmediatamente.

Styles globales

GET /v1/files/$FILE_KEY/styles

Colores, text styles, effects, grids publicados en el file.

Components publicados

GET /v1/files/$FILE_KEY/components
GET /v1/files/$FILE_KEY/component_sets

Variables (design tokens)

GET /v1/files/$FILE_KEY/variables/local

Figma Variables = design tokens nativos (primitives, aliases, modes).

Comandos

Inspect frame

/figma inspect <figma_url>

Flujo:

  1. Parsear URL → file_key + node_id
  2. GET nodos → estructura
  3. Extraer:
    • Dimensions (w × h)
    • Position (x, y)
    • Fills, strokes, effects
    • Text properties (font, size, weight, color, alignment)
    • Auto-layout rules
    • Children hierarchy
  4. Output estructurado

Export assets

/figma export <figma_url> [--format svg|png] [--scale 2]

Para bulk (todos los frames con prefix "icon/"):

  1. Buscar nodos matching pattern
  2. Bulk export
  3. Descargar a assets/icons/
  4. Nombrar kebab-case desde el node name

Extract tokens

/figma tokens <figma_url> [--output css|tailwind|json]

Ver /figma-tokens para detalle completo.

Component spec

/figma component <figma_url>

Genera spec completo del component:

  • Variants (property variants)
  • States (default, hover, active, disabled)
  • Tokens usados
  • Anatomy con measurements
  • Props/API sugeridos

Reglas

  • Rate limit: 2 req/s por token (strict)
  • Response size: archivos grandes pueden dar 30MB+ de JSON — usar /nodes?ids= selectivo
  • URLs exportadas expiran: descargar inmediatamente después del GET
  • Plugin API vs REST API: REST es read-only. Plugins (JavaScript en Figma) pueden modificar.
  • Tokens vs Styles: si el file usa Figma Variables, usar esos. Si no, fallback a Styles.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Plan, design, and implement A/B tests and experiments with statistical rigor. Covers hypothesis frameworks, sample sizing, metrics, and result analysis.

中文简介正在准备中。当前显示原文说明。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Web/mobile accessibility decision guide: WCAG 2.2 AA, ARIA, keyboard nav, focus management, contrast, testing. Use for: a11y, accessibility, wcag, aria, screen reader, keyboard, contrast.

中文简介正在准备中。当前显示原文说明。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Generate, iterate, and scale ad creative for paid advertising across Google, Meta, LinkedIn, and X. Covers platform specs, creative frameworks, and quality validation.

中文简介正在准备中。当前显示原文说明。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Musica interactiva para juegos: layering vertical, re-secuenciacion horizontal, stingers, reglas de transicion con sync points, y mapeo de estados de gameplay a musica. Usar para: musica adaptativa, sistema de musica dinamica, transiciones musicales, combat music.

中文简介正在准备中。当前显示原文说明。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Design multi-agent systems, create agent architectures, define communication patterns, and build autonomous agent workflows with structured evaluation frameworks.

中文简介正在准备中。当前显示原文说明。

SebastianLuser/claude-code-arcane32026年10月27日 更新

Inter-agent communication protocol for C-suite agent teams. Defines invocation syntax, loop prevention, isolation rules, response formats, and quality loops.

中文简介正在准备中。当前显示原文说明。

SebastianLuser/claude-code-arcane32026年10月27日 更新

查看 SebastianLuser 的全部技能

报告此技能的问题