figma-from-code

Plugin figma-from-code from marketplace bitovi-ai-enablement in bitovi/ai-enablement-prompts. Commands read from the repo's manifest — 1 month ago.

Skills (11)

• figma-from-code-discovery-components

  Subagent for figma-from-code Phase 0a. Discovers the complete component architecture of a web application via browser crawling and static code scanning. Produces a topologically-sorted build order and inspects the target Figma file for existing pages and components.

• figma-from-code-validator

  Standalone validator for a completed figma-from-code rebuild. Navigates the live app, screenshots each component in its natural context, and compares against the matching Figma variant. Also used by the Phase 5 orchestrator agent as a reference for the Component App Map and comparison scripts.

• figma-from-code-discovery-assets

  Subagent for figma-from-code Phase 0b. Discovers all Lucide icons and SVG file assets imported across the codebase via static analysis. Extracts SVG markup and maps which components use which icons. No dev server or Figma access needed.

• figma-from-code-setup-tokens

  Subagent for figma-from-code Phase 1. Creates Figma variable collections from the project's CSS and Tailwind tokens, extracts the CSS-variable-to-Figma-variable-ID map, and pre-computes all CSS colors as sRGB values.

• figma-from-code-setup-structure

  Subagent for figma-from-code Phase 2. Creates the Figma file page skeleton, foundations documentation frames, and container frames needed by later phases. Requires variable collections to already exist.

• figma-from-code-precapture

  Subagent for figma-from-code Phase 2.5. Captures app screenshots and structured text content for every UI component before Figma building begins. Produces a unified batch manifest to minimize browser navigations.

• 6-icon-preamble
• figma-from-code-build-component

  Unified skill for figma-from-code Phase 3 per-component pipeline. Executes the full analyze→build→review→fix process (steps 1–7) inline within a single agent. One agent per component, dispatched by the orchestrator in tier order.

• figma-from-code-build-screens

  Subagent for figma-from-code Phase 4. Builds full-page screen frames in Figma by composing built component instances into 1440×900 layouts. Validates each screen against app screenshots and iterates up to 3 fix passes.

• figma-from-code-validate

  Subagent for figma-from-code Phase 5. Validates the completed Figma rebuild by comparing assembled screen frames against app screenshots. Runs fix loops on mismatched screens and produces a structured report.

• figma-from-code

  Orchestrates the full code-to-Figma rebuild workflow for a web application. Thin dispatcher that delegates all substantial work to subagents and reads only small summary files. Runs eight tracked phases (phase0a, phase0b, phase1, phase2, phase2_5, phase3, phase4, phase5). Never calls use_figma or ge

Hooks (2)

• PreToolUse

  node "${CLAUDE_PLUGIN_ROOT}"/hooks/figma-prereqs-gate.js

• PreToolUse

  node "${CLAUDE_PLUGIN_ROOT}"/hooks/figma-instances-gate.js