How do I install the Code To Figma skill?

Run npx skillmds@latest add mesteriis/code-to-figma in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Code To Figma safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Code To Figma?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Code To Figma free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Code To Figma?

Mesteriis (@mesteriis) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Code To Figma

Name: Code To Figma
Rating: 4.2 (5 reviews)
Author: Mesteriis

Syncs implemented UI to Figma as editable layers, Code Connect mappings, components, tokens, and handoff.

Mesteriis Updated Aug 19, 2026 0 repo stars

Design & Media

Install

Press C to copy

$ npx skillmds@latest add mesteriis/code-to-figma

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download .zip

＋ Add to plugin

README badge

[![SkillMD](https://skillmd.com/badge/mesteriis/code-to-figma.svg)](https://skillmd.com/skills/mesteriis/code-to-figma)

Trust & safety

3 of 3 audits passed

Last audited Sep 30, 2026 · commit 9a3182b

Permissions this skill uses

Reads secrets
The instructions read tokens, keys, or other credentials.

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

Code To Figma

Bridge implemented UI back into Figma.

Workflow

Read ui-figma.
Use figma-code-connect for component mappings when available.
Use figma-generate-design or Figma API workflow for editable screen output.
Preserve component names, variants, tokens, and source file references.
Return changed node IDs, mapping files, and validation gaps.

Rules

Do not create disconnected Figma art when Code Connect is the requested outcome.
Do not inspect secret-bearing app state to generate design artifacts.

Mesteriis/Engineering-Bible-AI/tree/main/skills/code-to-figma commit 9a3182b939

Frequently asked questions

npx skillmds@latest add mesteriis/code-to-figma

Code To Figma

File contents

Code To Figma

Workflow

Rules

Related skills

Frequently asked questions

How do I install the Code To Figma skill?

What does the Code To Figma skill do?

Is Code To Figma safe to use?

Which AI agents work with Code To Figma?

Is Code To Figma free to use?

Who published Code To Figma?