nexlabz

Code To Figma — Design skill for Claude Code

Design community

Push a page, screen, or component from this codebase into Figma.

How to install Code To Figma

Installs to ~/.claude/skills/nexlabz-figma-forge-code-to-figma/SKILL.md

Terminal

mkdir -p ~/.claude/skills/nexlabz-figma-forge-code-to-figma && curl -fsSL https://raw.githubusercontent.com/nexlabz/figma-forge/HEAD/commands/code-to-figma.md -o ~/.claude/skills/nexlabz-figma-forge-code-to-figma/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Code To Figma does

description: Push a page, screen, or component from this codebase into Figma argument-hint: [--figma ]

Push this into Figma: **$ARGUMENTS**

Load the `code-to-figma` skill. Run the `figma-connect` preflight first.

Decide the route and say which you picked:

A page or screen → render route: start the dev server, get the real URL, then follow url-to-figma from its extraction step.
A component library → design-system route: `figma-gene

Alternatives in Design

Mockup — Create a visual UX mockup for a requested feature or screen 1.6k ★
Brand Kit — Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, compone 309 ★
Anydesign — Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token s 200 ★