mcpField
F
figma-code-to-canvas

figma-code-to-canvas

github.com/sergekostenchukDesign & UI3250 installsUpdated 18w ago
Repository

About figma-code-to-canvas

A skill for turning local or public web pages into Figma layers and reconciling the result with the source UI. It supports privacy-aware planning for authenticated pages and provides manual rebuild guidance when conversion tools are unavailable.

Key features

  1. 01Capture local pages as Figma layers
  2. 02Capture public URLs as Figma layers
  3. 03Plan safe handling of private pages
  4. 04Compare generated layers with source UI
  5. 05Provide manual rebuild instructions

Use cases

  1. 01Bring a local development page into Figma
  2. 02Convert a public webpage into editable layers
  3. 03Plan capture of an authenticated staging page
  4. 04Document visual drift after generation

MCP support

When Figma MCP is unavailable, the skill falls back to a manual frame and component rebuild plan. It may invoke the installed `figma:figma-generate-design` skill when present.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-code-to-canvas

After installing, type/figma-code-to-canvasin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/
code-to-canvas-report.md
evals/
evals.json

Details

From the project README

Figma Code To Canvas

Use this skill for the reverse direction: code or browser UI into Figma canvas. This is tool-availability-sensitive and privacy-sensitive.

Modes

  • capture-local: convert a local dev server page into Figma layers.
  • capture-public: convert a public URL into Figma layers.
  • capture-private: plan a safe path for authenticated/staging pages.
  • reconcile: compare generated Figma layers with the source UI and list drift.
  • fallback: produce manual rebuild instructions when code-to-canvas tools are unavailable.

Workflow

  1. Confirm URL/app source, viewport, target Figma file/page, and privacy class.
  2. For local pages, start or verify the dev server and capture a screenshot before Figma generation.
  3. If code-to-canvas or generated design is requested, invoke the installed figma:figma-generate-design skill when present.
  4. Do not send private authenticated pages, cookies, customer data, or internal URLs through remote services without explicit approval.
  5. After generation, read back Figma metadata or capture a Figma screenshot when possible.
  6. Produce a reconciliation report: source URL, viewport, generated target, visible mismatches, and follow-up edits.

Output Shape

Use assets/code-to-canvas-report.md.

Fallbacks

  • If Figma MCP is unavailable: provide a manual frame/component rebuild plan.
  • If the page cannot be reached: request a screenshot/export and route to figma-canvas-editor.
  • If privacy blocks remote generation: keep the work local and describe a human-assisted import route.

Resources

  • Read $CODEX_SKILLS_DIR/senior-figma-orchestrator/references/figma-mcp-compatibility.md before promising capability.

Comments

Markdown supported