figlens
Dokumentationsmenü · Erste Schritte
Sprache Deutsch

Erste Schritte

Noch keine Designdatei? Prüfe dein Setup mit dem kleinen öffentlichen Beispiel: Verifiziere das gewählte Binary, finde einen Frame und prüfe sein Bundle. Kein Modell erforderlich.

Lege design.fig in dein Projekt und wähle dann ein Setup. Jedes gibt deinem Agent die figlens-Tools und dieselbe eingebaute Anleitung für Planung, Umsetzung und Bildaufbereitung.

Setup Geeignet für Anleitung kommt von
Plugin Claude Code, Codex, Antigravity, Cursor, Kimi Code der Skill des Plugins und das workflow-Tool des Servers
MCP Claude Code, Cursor, Codex, Gemini CLI und andere MCP-Clients dem workflow-Tool des Servers
Pi Pi 1.3.0+ dem Paket, das den Skill enthält
OpenCode V2 OpenCode V2 2.2.0 dem mitgelieferten Skill
OMP OMP 18.13.2 dem mitgelieferten Skill
CLI Agents, die nur Shell-Befehle ausführen, Skripte und CI, oder dich figlens workflow <topic> oder dem optionalen Skill

Normal vs. fortgeschritten. Die normale Nutzung braucht kein Setup: figlens search design.fig "query" liest die .fig und legt nichts an. Ein optionaler lokaler Index entsteht nur auf Ihren Wunsch (figlens index prepare design.fig --scope 0:0) und wird danach über Neustarts und Hosts hinweg wiederverwendet. Siehe Normale Suche und der optionale lokale Index. Optional und experimentell: --mode semantic oder hybrid sortiert nach Bedeutung mit einem lokalen Modell, das Sie selbst einrichten; siehe Optionale semantische Suche.

Plugin

Eine Installation fügt deinem Agenten den figlens-Skill und den MCP-Server hinzu (Node.js 18+). Der Server ist auf das Release des Plugins festgelegt (npx -y @runkids/figlens@<version> mcp); für eine neue Version aktualisierst du das Plugin.

Host 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, dann das Fenster neu laden
Kimi Code /plugins install https://github.com/runkids/figlens/tree/main in einer Sitzung, dann /reload

skillshare installiert dasselbe Plugin auf mehreren Hosts zugleich: skillshare plugin add https://github.com/runkids/figlens.git --target claude --target codex --target cursor -g; später aktualisieren mit skillshare plugin update figlens -g.

Starte den Host neu oder öffne eine neue Sitzung und prüfe, ob die figlens-Tools aufgelistet sind. Eine Plugin-Installation kopiert das Repository: etwa 7 MB, in Codex zusätzlich die Git-Historie (etwa 60 MB). Antigravity lädt nur die ersten 24 KB des Skills; die vollständige Anleitung liefert das workflow-Tool des Servers. Muse wird noch nicht unterstützt. Host-Übersicht und was geprüft wurde

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

Jeder MCP-Client:

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

Ohne Node.js installierst du das eigenständige Binary (CLI) und verwendest "command": "figlens", "args": ["mcp"]. Starte eine neue Session und prüfe, ob die figlens-Tools aufgelistet sind (/mcp in Claude Code). Eine separate Skill-Installation ist nicht nötig. Mit --root <dir> nach mcp begrenzt du, welche Ordner figlens lesen und schreiben darf.

MCP-Startargumente

Füge diese Optionen in den args deines Clients nach mcp ein. Dies sind die einzigen MCP-Startoptionen; beide sind optional und wiederholbar.

Option Bedeutung
--root DIR Erlaubt Design-Lesezugriffe und Exporte in DIR und Unterordnern. Ohne diese Option setzt figlens keine Pfadgrenze; Betriebssystemrechte gelten weiterhin. Weder wird der aktuelle Projektordner vorausgesetzt noch der Rechner durchsucht.
--storage-root DIR Erlaubt ausdrücklich gewählten benutzerdefinierten Index-Speicher in DIR und Unterordnern. Ändert nicht den Standardspeicherort.

Verwende absolute Pfade zu vorhandenen Verzeichnissen. Jede Option und jeder Pfad ist ein eigener Array-Eintrag; wiederhole die Option für mehrere Ordner. --root ist eine Pfadgrenze, kein Administratorzugriff, und beschränkt nur figlens MCP, nicht andere Agent-Werkzeuge.

Beispiel mit zwei Design-/Ausgabeordnern und zwei erlaubten Speicherwurzeln:

{
  "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 gibt es nicht. Wähle den tatsächlichen Ort mit dem Argument storage des Tools index (absoluter Pfad innerhalb einer erlaubten Speicherwurzel) oder per CLI: figlens index prepare design.fig --storage /absolute/storage-a. Nach prepare merkt sich figlens den Ort dieses Workspace und verwendet ihn über Neustarts und Hosts hinweg ohne erneutes storage oder --storage-root. Ohne eigene Auswahl gelten die benutzerspezifischen Standardverzeichnisse; kein Speicher-Flag nötig.

Wie du diese Pfade aus einer eingecheckten Konfiguration heraushältst oder Designs über Git-Worktrees hinweg teilst, steht unter Roots in einer eingecheckten Konfiguration.

Mehrere Speicherwurzeln erweitern nur die erlaubten Orte: Jedes storage wählt weiterhin einen Ort. Indizes werden nicht verteilt, synchronisiert oder gesichert. Eine bestehende Workspace-Datenbank lässt sich nicht durch die Angabe einer anderen Wurzel verschieben; figlens verweigert den widersprüchlichen Ort.

Pi

Ein Paket liefert CLI, MCP, Viewer, /figlens-Befehle und Skill:

pi install npm:@runkids/figlens

Anleitung zur Pi-Erweiterung

OpenCode V2

Das Paket in OpenCode V2 installieren:

opencode plugin add @runkids/figlens

Den Host neu starten und /figlens help ausführen. OpenCode V2

OMP

Dasselbe Paket in OMP installieren:

omp plugin install @runkids/figlens

Den Host neu starten und /figlens help ausführen. OMP

CLI

Über npm ausführen oder das eigenständige Binary installieren:

npx @runkids/figlens --help                                                                # Node.js 18+, ohne 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 führt das Binary der aufgelösten Paketversion aus. Skript-Installationen aktualisierst du mit figlens update, Homebrew-Installationen mit brew upgrade figlens. Binaries gibt es für macOS (Apple silicon, Intel), Linux (arm64, x86_64) und Windows (x86_64).

Ein Agent, der die CLI nutzt, liest seine Anleitung mit figlens workflow build (außerdem audit, images, search, plan, planning-details und das nur auf ausdrücklichen Wunsch genutzte yolo), die immer zur Version des Binarys passt, oder aus dem Agent-Skill.

CLI-Referenz

Agent-Skill (optional)

Der Skill bringt einem Agent denselben Ablauf bei wie die eingebaute Anleitung: Frame finden, das Bundle in kleinen Teilen lesen, den Umfang planen und die laufende UI mit dem Design vergleichen. Er enthält nur Anweisungen, also kombiniere ihn mit der CLI oder MCP. MCP- und Pi-Setups brauchen ihn nicht.

Empfohlen: skillshare. Installiere den Skill einmal und synchronisiere ihn mit jedem Agent, den du nutzt:

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

Dasselbe Tool kann für diese Agents auch die figlens-MCP-Verbindung einrichten:

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

Weitere Wege, den Skill zu installieren:

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

Oder kopiere skills/figlens/ aus diesem Repository oder einem Release-Archiv in das Skills-Verzeichnis deines Agents (Claude Code: ~/.claude/skills/). Ein installierter Skill wird getrennt vom Binary aktualisiert; figlens workflow passt immer zum Binary.

Bitte dann um einen Bildschirm:

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.

Der Agent findet den Frame, bündelt Designdaten, Assets und Referenzbild und setzt den Bildschirm mit deinem Stack um. Der gemeinsame Workflow leitet die Prüfung von Schriften und Assets an; fehlende Ressourcen werden gemeldet, während die Layout-Implementierung mit dokumentierten Alternativen weitergeht. Lass dir die geänderten Dateien und einen Browservergleich zeigen.

Diese Seite wird aus README-de.md im Repository erzeugt.