figlens
Menu de la documentation · Bien démarrer
Langue Français

Bien démarrer

Pas encore de fichier de design ? Vérifiez votre installation avec le petit exemple public : vérifiez le binaire choisi, trouvez un frame et validez son bundle. Aucun modèle nécessaire.

Placez design.fig dans votre projet, puis choisissez une configuration. Chacune donne à votre agent les outils figlens et le même guide intégré pour la planification, l'implémentation et la préparation des images.

Configuration Pour Le guide vient de
Plugin Claude Code, Codex, Antigravity, Cursor, Kimi Code le skill du plugin et l'outil workflow du serveur
MCP Claude Code, Cursor, Codex, Gemini CLI et les autres clients MCP l'outil workflow du serveur
Pi Pi 1.3.0+ le paquet, qui inclut le skill
OpenCode V2 OpenCode V2 2.2.0 le skill fourni dans le paquet
OMP OMP 18.13.2 le skill fourni dans le paquet
CLI les agents qui n'exécutent que des commandes shell, les scripts et la CI, ou vous figlens workflow <topic>, ou le skill facultatif

Ordinaire vs avancé. L'usage ordinaire ne demande aucune configuration : figlens search design.fig "query" lit le .fig et ne crée rien. Un index local optionnel n'est créé que sur votre demande (figlens index prepare design.fig --scope 0:0), puis réutilisé entre redémarrages et hôtes. Voir Recherche ordinaire et index local optionnel. Optionnel et expérimental : --mode semantic ou hybrid classe par le sens avec un modèle local que vous installez vous-même ; voir Recherche sémantique optionnelle.

Plugin

Une seule installation ajoute le skill figlens et le serveur MCP à votre agent (Node.js 18+). Le serveur est figé sur la version du plugin (npx -y @runkids/figlens@<version> mcp). Mettez le plugin à jour pour passer à une nouvelle version.

Hôte Installation
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, puis rechargez la fenêtre
Kimi Code /plugins install https://github.com/runkids/figlens/tree/main dans une session, puis /reload

skillshare installe le même plugin sur plusieurs hôtes à la fois : skillshare plugin add https://github.com/runkids/figlens.git --target claude --target codex --target cursor -g ; mettez-le à jour ensuite avec skillshare plugin update figlens -g.

Redémarrez l'hôte ou ouvrez une nouvelle session, puis vérifiez que les outils figlens sont listés. L'installation d'un plugin copie le dépôt : environ 7 Mo, plus l'historique Git (environ 60 Mo) dans Codex. Antigravity ne charge que les 24 premiers Ko du skill ; l'outil workflow du serveur fournit le guide complet. Muse n'est pas encore pris en charge. Tableau des hôtes et ce qui a été vérifié

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

Tout client MCP :

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

Sans Node.js, installez le binaire autonome (CLI) et utilisez "command": "figlens", "args": ["mcp"]. Ouvrez une nouvelle session et vérifiez que les outils figlens apparaissent (/mcp dans Claude Code). Aucune installation séparée du skill n'est nécessaire. Ajoutez --root <dir> après mcp pour limiter les dossiers que figlens peut lire et écrire.

Arguments de démarrage MCP

Ajoutez ces options après mcp dans les args du client. Ce sont les seules options de démarrage MCP ; les deux sont facultatives et répétables.

Option Rôle
--root DIR Autorise la lecture des designs et les exports dans DIR et ses sous-dossiers. Sans cette option, figlens n’ajoute aucune restriction de chemin ; les permissions système restent applicables. Il ne se limite pas au projet courant et ne parcourt pas l’ordinateur.
--storage-root DIR Autorise un stockage d’index personnalisé explicitement demandé dans DIR et ses sous-dossiers. Ne sélectionne ni ne modifie le stockage par défaut.

Utilisez des chemins absolus vers des répertoires existants. Chaque option et chemin est un élément distinct du tableau ; répétez l’option pour plusieurs dossiers. --root est une limite de chemin, pas un accès administrateur, et ne restreint que figlens MCP, pas les autres outils de l’agent.

Exemple avec deux racines de design/sortie et deux racines de stockage autorisées :

{
  "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"
      ]
    }
  }
}

figlens mcp --storage n’existe pas. Choisissez l’emplacement réel avec l’argument storage de l’outil index (chemin absolu sous une racine autorisée), ou via CLI : figlens index prepare design.fig --storage /absolute/storage-a. Après prepare, figlens mémorise l’emplacement du workspace et le réutilise entre redémarrages et hôtes sans répéter storage ni --storage-root. Sans emplacement personnalisé, les répertoires par défaut de l’utilisateur s’appliquent, sans option de stockage.

Pour ne pas figer ces chemins dans une configuration versionnée, ou pour partager les designs entre worktrees Git, consultez roots dans une configuration versionnée.

Plusieurs racines de stockage élargissent seulement les emplacements autorisés : chaque storage en choisit un seul. Elles ne distribuent, ne synchronisent et ne sauvegardent pas les index. Indiquer une autre racine ne déplace pas une base existante ; figlens refuse l’emplacement en conflit.

Pi

Un seul paquet fournit la CLI, MCP, le viewer, les commandes /figlens et le skill :

pi install npm:@runkids/figlens

Guide de l'extension Pi

OpenCode V2

Installez le paquet dans OpenCode V2 :

opencode plugin add @runkids/figlens

Redémarrez le client, puis exécutez /figlens help. OpenCode V2

OMP

Installez le même paquet dans OMP :

omp plugin install @runkids/figlens

Redémarrez le client, puis exécutez /figlens help. OMP

CLI

Lancez-le via npm, ou installez le binaire autonome :

npx @runkids/figlens --help                                                                # Node.js 18+, sans installation
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 exécute le binaire de la version du paquet qu'il résout. Les installations par script se mettent à jour avec figlens update, celles de Homebrew avec brew upgrade figlens. Les binaires couvrent macOS (Apple silicon, Intel), Linux (arm64, x86_64) et Windows (x86_64).

Un agent qui utilise la CLI lit son guide avec figlens workflow build (ainsi que audit, images, search, plan, planning-details et yolo, réservé à une demande explicite), toujours aligné sur la version du binaire, ou via le skill.

Référence de la CLI

Skill pour agents (facultatif)

Le skill enseigne à un agent le même déroulé que le guide intégré : trouver le frame, lire le bundle par petits morceaux, planifier le périmètre et comparer l'UI en cours d'exécution avec le design. Il ne contient que des instructions : associez-le à la CLI ou à MCP. Les configurations MCP et Pi n'en ont pas besoin.

Recommandé : skillshare. Installez le skill une fois et synchronisez-le avec chaque agent que vous utilisez :

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

Le même outil peut aussi configurer la connexion MCP de figlens pour ces agents :

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

Autres façons d'installer le skill :

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

Ou copiez skills/figlens/ depuis ce dépôt ou une archive de release dans le répertoire de skills de votre agent (Claude Code : ~/.claude/skills/). Un skill installé se met à jour séparément du binaire ; figlens workflow correspond toujours au binaire.

Demandez ensuite un écran :

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.

L’agent trouve la frame, regroupe les données de design, les assets et une image de référence, puis construit l’écran avec votre stack. Le workflow partagé guide les vérifications des polices et des ressources ; les éléments manquants sont signalés pendant que l’implémentation de la mise en page continue avec des alternatives documentées. Demandez les fichiers modifiés et une comparaison dans le navigateur.

Cette page est générée à partir de README-fr.md dans le dépôt.