figlens
Menu da documentação · Primeiros passos
Idioma Português (Brasil)

Primeiros passos

Ainda não tem um arquivo de design? Confira seu ambiente com o pequeno exemplo público: verifique o binário escolhido, encontre um frame e valide seu bundle. Não é necessário um modelo.

Coloque design.fig no seu projeto e escolha uma configuração. Cada uma dá ao seu agent as ferramentas do figlens e o mesmo guia integrado para planejamento, implementação e preparo de imagens.

Configuração Para O guia vem de
Plugin Claude Code, Codex, Antigravity, Cursor, Kimi Code o skill do plugin e a ferramenta workflow do servidor
MCP Claude Code, Cursor, Codex, Gemini CLI e outros clientes MCP a ferramenta workflow do servidor
Pi Pi 1.3.0+ o pacote, que inclui o skill
OpenCode V2 OpenCode V2 2.2.0 o skill incluído no pacote
OMP OMP 18.13.2 o skill incluído no pacote
CLI agents que só executam comandos de shell, scripts e CI, ou você figlens workflow <topic>, ou o skill opcional

Comum vs avançado. O uso comum não exige configuração: figlens search design.fig "query" lê o .fig e não cria nada. Um índice local opcional só é criado quando você pede (figlens index prepare design.fig --scope 0:0) e depois é reutilizado entre reinícios e hosts. Veja Busca comum e o índice local opcional. Opcional e experimental: --mode semantic ou hybrid ordena por significado com um modelo local que você mesmo configura; veja Busca semântica opcional.

Plugin

Uma única instalação adiciona o skill do figlens e o servidor MCP ao seu agente (Node.js 18+). O servidor fica fixado na versão do plugin (npx -y @runkids/figlens@<version> mcp); atualize o plugin para mudar de versão.

Host Instalação
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 e recarregue a janela
Kimi Code /plugins install https://github.com/runkids/figlens/tree/main em uma sessão e depois /reload

skillshare instala o mesmo plugin em vários hosts de uma vez: skillshare plugin add https://github.com/runkids/figlens.git --target claude --target codex --target cursor -g; atualize depois com skillshare plugin update figlens -g.

Reinicie o host ou abra uma nova sessão e confira se as ferramentas do figlens aparecem. A instalação de um plugin copia o repositório: cerca de 7 MB, mais o histórico do Git (cerca de 60 MB) no Codex. O Antigravity carrega só os primeiros 24 KB do skill; a ferramenta workflow do servidor fornece o guia completo. O Muse ainda não é suportado. Tabela de hosts e o que foi verificado

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

Qualquer cliente MCP:

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

Sem Node.js, instale o binário independente (CLI) e use "command": "figlens", "args": ["mcp"]. Abra uma nova sessão e confira se as ferramentas do figlens aparecem (/mcp no Claude Code). Não é preciso instalar o skill separadamente. Adicione --root <dir> depois de mcp para limitar quais pastas o figlens pode ler e gravar.

Argumentos de inicialização MCP

Adicione estas opções após mcp nos args do cliente. São as únicas opções de inicialização MCP; ambas são opcionais e repetíveis.

Opção Significado
--root DIR Permite ler designs e exportar dentro de DIR e suas subpastas. Sem ela, figlens não adiciona restrições de caminho; as permissões do sistema continuam valendo. Não se limita ao projeto atual nem varre o computador.
--storage-root DIR Permite armazenamento de índices personalizado solicitado explicitamente dentro de DIR e suas subpastas. Não seleciona nem altera o local padrão.

Use caminhos absolutos para diretórios existentes. Cada opção e caminho é um item separado do array; repita a opção para várias pastas. --root é um limite de caminho, não acesso de administrador, e restringe apenas figlens MCP, não outras ferramentas do agent.

Exemplo com duas raízes de design/saída e duas raízes de armazenamento 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"
      ]
    }
  }
}

Não existe figlens mcp --storage. Escolha o local real com o argumento storage do tool index (caminho absoluto dentro de uma raiz permitida), ou pela CLI: figlens index prepare design.fig --storage /absolute/storage-a. Após prepare, figlens lembra o local do workspace e o reutiliza entre reinicializações e hosts sem repetir storage ou --storage-root. Sem local personalizado, usa os diretórios padrão do usuário, sem flags de armazenamento.

Para não fixar esses caminhos em uma configuração versionada, ou para compartilhar designs entre worktrees do Git, veja roots em uma configuração versionada.

Várias raízes de armazenamento apenas ampliam os locais permitidos: cada storage ainda escolhe um só. Não distribuem, sincronizam nem fazem backup dos índices. Indicar outra raiz não move um banco de dados existente; figlens recusa o local em conflito.

Pi

Um único pacote inclui CLI, MCP, viewer, comandos /figlens e skill:

pi install npm:@runkids/figlens

Guia da extensão Pi

OpenCode V2

Instale o pacote no OpenCode V2:

opencode plugin add @runkids/figlens

Reinicie o cliente e execute /figlens help. OpenCode V2

OMP

Instale o mesmo pacote no OMP:

omp plugin install @runkids/figlens

Reinicie o cliente e execute /figlens help. OMP

CLI

Execute pelo npm ou instale o binário independente:

npx @runkids/figlens --help                                                                # Node.js 18+, sem 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

O npx executa o binário da versão do pacote que ele resolve. Instalações por script são atualizadas com figlens update; as do Homebrew, com brew upgrade figlens. Há binários para macOS (Apple silicon, Intel), Linux (arm64, x86_64) e Windows (x86_64).

Um agent que usa a CLI lê o guia com figlens workflow build (também audit, images, search, plan, planning-details e yolo, usado só quando pedido explicitamente), sempre na mesma versão do binário, ou pelo skill.

Referência da CLI

Skill para agents (opcional)

O skill ensina ao agent o mesmo fluxo do guia integrado: encontrar o frame, ler o bundle em partes pequenas, planejar o escopo e comparar a UI em execução com o design. Ele contém só instruções, então use-o com a CLI ou com MCP. As configurações MCP e Pi não precisam dele.

Recomendado: skillshare. Instale o skill uma vez e sincronize-o com cada agent que você usa:

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

A mesma ferramenta também pode configurar a conexão MCP do figlens para esses agents:

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

Outras formas de instalar o skill:

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

Ou copie skills/figlens/ deste repositório ou de um arquivo de release para o diretório de skills do seu agent (Claude Code: ~/.claude/skills/). Um skill instalado é atualizado separadamente do binário; o figlens workflow sempre corresponde ao binário.

Depois peça uma tela:

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.

O agent encontra o frame, reúne os dados do design, os assets e uma imagem de referência, e constrói a tela com a sua stack. O fluxo compartilhado orienta a conferência de fontes e recursos; o que falta é informado enquanto a implementação do layout continua com alternativas documentadas. Peça os arquivos alterados e uma comparação no navegador.

Esta página é gerada a partir de README-pt-BR.md no repositório.