figlens
Menú de la documentación · Primeros pasos
Idioma Español

Primeros pasos

¿Aún no tienes un archivo de diseño? Comprueba tu entorno con el pequeño ejemplo público: verifica el binario elegido, encuentra un frame y valida su bundle. No se necesita un modelo.

Pon design.fig en tu proyecto y elige una configuración. Cada una le da a tu agent las herramientas de figlens y la misma guía integrada para planificar, implementar y preparar imágenes.

Configuración Para La guía viene de
Plugin Claude Code, Codex, Antigravity, Cursor, Kimi Code el skill del plugin y la herramienta workflow del servidor
MCP Claude Code, Cursor, Codex, Gemini CLI y otros clientes MCP la herramienta workflow del servidor
Pi Pi 1.3.0+ el paquete, que incluye el skill
OpenCode V2 OpenCode V2 2.2.0 el skill incluido en el paquete
OMP OMP 18.13.2 el skill incluido en el paquete
CLI agents que solo ejecutan comandos de shell, scripts y CI, o tú figlens workflow <topic>, o el skill opcional

Ordinario vs. avanzado. El uso ordinario no requiere configuración: figlens search design.fig "query" lee el .fig y no crea nada. Un índice local opcional solo se crea cuando lo pides (figlens index prepare design.fig --scope 0:0) y luego se reutiliza entre reinicios y hosts. Consulta Búsqueda ordinaria e índice local opcional. Opcional y experimental: --mode semantic o hybrid ordena por significado con un modelo local que configuras tú; consulta Búsqueda semántica opcional.

Plugin

Una sola instalación añade el skill de figlens y el servidor MCP a tu agente (Node.js 18+). El servidor queda fijado a la versión del plugin (npx -y @runkids/figlens@<version> mcp); actualiza el plugin para pasar a una versión nueva.

Host Instalación
Claude Code claude plugin marketplace add runkids/figlens, claude plugin install figlens@figlens
Codex codex plugin marketplace add runkids/figlens, codex plugin add figlens@figlens
Antigravity agy plugin install https://github.com/runkids/figlens/tree/main
Cursor git clone --depth 1 https://github.com/runkids/figlens ~/.cursor/plugins/local/figlens y recarga la ventana
Kimi Code /plugins install https://github.com/runkids/figlens/tree/main en una sesión y luego /reload

skillshare instala el mismo plugin en varios hosts a la vez: skillshare plugin add https://github.com/runkids/figlens.git --target claude --target codex --target cursor -g; actualízalo después con skillshare plugin update figlens -g.

Reinicia el host o abre una sesión nueva y comprueba que aparecen las herramientas de figlens. La instalación de un plugin copia el repositorio: unos 7 MB, más el historial de Git (unos 60 MB) en Codex. Antigravity carga solo los primeros 24 KB del skill; la herramienta workflow del servidor ofrece la guía completa. Muse aún no está soportado. Tabla de hosts y qué se verificó

MCP

Claude Code (Node.js 18+, macOS/Linux):

claude mcp add --transport stdio --scope local figlens -- npx -y @runkids/figlens mcp

Codex CLI (Node.js 18+, macOS/Linux):

codex mcp add figlens -- npx -y @runkids/figlens mcp

Cualquier cliente MCP:

{
  "mcpServers": {
    "figlens": {
      "command": "npx",
      "args": ["-y", "@runkids/figlens", "mcp"]
    }
  }
}

Sin Node.js, instala el binario independiente (CLI) y usa "command": "figlens", "args": ["mcp"]. Abre una sesión nueva y comprueba que aparecen las herramientas de figlens (/mcp en Claude Code). No hace falta instalar el skill por separado. Añade --root <dir> después de mcp para limitar qué carpetas puede leer y escribir figlens.

Argumentos de inicio MCP

Añade estas opciones después de mcp en los args del cliente. Son las únicas opciones de inicio MCP; ambas son opcionales y repetibles.

Opción Significado
--root DIR Permite leer diseños y exportar dentro de DIR y sus subcarpetas. Sin ella, figlens no añade límites de ruta; siguen aplicándose los permisos del sistema. No se limita al proyecto actual ni escanea el equipo.
--storage-root DIR Permite solicitar explícitamente almacenamiento de índices personalizado dentro de DIR y sus subcarpetas. No selecciona ni cambia la ubicación predeterminada.

Usa rutas absolutas a directorios existentes. Cada opción y ruta es un elemento del array; repite la opción para varias carpetas. --root es un límite de rutas, no acceso de administrador, y solo restringe figlens MCP, no otras herramientas del agent.

Ejemplo con dos raíces de diseño/salida y dos raíces de almacenamiento permitidas:

{
  "mcpServers": {
    "figlens": {
      "command": "npx",
      "args": [
        "-y", "@runkids/figlens", "mcp",
        "--root", "/absolute/designs",
        "--root", "/absolute/project",
        "--storage-root", "/absolute/storage-a",
        "--storage-root", "/absolute/storage-b"
      ]
    }
  }
}

No existe figlens mcp --storage. Selecciona la ubicación real con el argumento storage del tool index (ruta absoluta dentro de una raíz permitida), o con CLI: figlens index prepare design.fig --storage /absolute/storage-a. Tras prepare, figlens recuerda la ubicación del workspace y la reutiliza entre reinicios y hosts sin repetir storage ni --storage-root. Sin ubicación personalizada se usan los directorios predeterminados del usuario, sin flags de almacenamiento.

Para no fijar estas rutas en una configuración versionada, o para compartir diseños entre worktrees de Git, consulta roots en una configuración versionada.

Varias raíces de almacenamiento solo amplían las ubicaciones permitidas: cada storage elige una sola. No distribuyen, sincronizan ni respaldan índices. No se puede mover una base de datos existente indicando otra raíz; figlens rechaza la ubicación en conflicto.

Pi

Un solo paquete incluye la CLI, MCP, el viewer, los comandos /figlens y el skill:

pi install npm:@runkids/figlens

Guía de la extensión de Pi

OpenCode V2

Instala el paquete en OpenCode V2:

opencode plugin add @runkids/figlens

Reinicia el cliente y ejecuta /figlens help. OpenCode V2

OMP

Instala el mismo paquete en OMP:

omp plugin install @runkids/figlens

Reinicia el cliente y ejecuta /figlens help. OMP

CLI

Ejecútalo con npm o instala el binario independiente:

npx @runkids/figlens --help                                                                # Node.js 18+, sin instalar
curl -fsSL https://raw.githubusercontent.com/runkids/figlens/main/scripts/install.sh | sh  # macOS, Linux
brew install runkids/tap/figlens                                                           # Homebrew
irm https://raw.githubusercontent.com/runkids/figlens/main/scripts/install.ps1 | iex      # Windows PowerShell

npx ejecuta el binario de la versión del paquete que resuelve. Las instalaciones por script se actualizan con figlens update; las de Homebrew, con brew upgrade figlens. Hay binarios para macOS (Apple silicon, Intel), Linux (arm64, x86_64) y Windows (x86_64).

Un agent que usa la CLI lee su guía con figlens workflow build (también audit, images, search, plan, planning-details y yolo, que solo se usa si se pide explícitamente), siempre acorde con la versión del binario, o desde el skill.

Referencia de la CLI

Skill para agents (opcional)

El skill enseña a un agent el mismo flujo que la guía integrada: encontrar el frame, leer el bundle por partes, planificar el alcance y comparar la UI en ejecución con el diseño. Solo contiene instrucciones, así que combínalo con la CLI o MCP. Las configuraciones MCP y Pi no lo necesitan.

Recomendado: skillshare. Instala el skill una vez y sincronízalo con cada agent que uses:

skillshare install github.com/runkids/figlens/skills/figlens
skillshare sync

La misma herramienta también puede configurar la conexión MCP de figlens para esos agents:

skillshare mcp add figlens --global --target claude --target codex --target cursor --no-tui -- npx -y @runkids/figlens mcp
skillshare sync mcp --global

Otras formas de instalar el skill:

npx skills add runkids/figlens --skill figlens   # Skills CLI

O copia skills/figlens/ de este repositorio o de un archivo de release al directorio de skills de tu agent (Claude Code: ~/.claude/skills/). Un skill instalado se actualiza por separado del binario; figlens workflow siempre coincide con el binario.

Luego pide una pantalla:

Build the task board from ./design.fig in this project.
Find the matching frame, use this project's components and image workflow,
then compare the running UI with the design and fix confirmed differences.
Report missing assets and any checks you could not run.

El agent encuentra el frame, reúne los datos del diseño, los recursos y una imagen de referencia, y construye la pantalla con tu stack. El flujo compartido guía la comprobación de fuentes y recursos; informa de lo que falta mientras continúa la implementación del layout con alternativas documentadas. Pídele los archivos modificados y una comparación en el navegador.

Esta página se genera a partir de README-es.md en el repositorio.