design-dev-bridge

Claude Code skills for working across the Figma ⇄ code boundary.

Target users:

• Designers who manage a design system in Figma and also touch frontend implementation
• Engineers implementing from Figma
• Teams bringing Figma and Claude Code into their design workflow

Built by the author for daily use in real work — performance is not guaranteed, and large breaking changes are possible.

日本語 → README.ja

Skills

figma-to-code

A skill that keeps implementation from Figma (via the Figma MCP) mapped as faithfully as possible onto the existing design tokens and components. Prevents one-off, localized implementations. Use case: when you want to reflect a design change or a newly added screen from Figma into the code with AI.

code-to-figma

The reverse of figma-to-code. When exporting a design implemented in code into Figma, it maps onto the existing design tokens and components as faithfully as possible. It also makes design-system changes such as adding component variants, and prompts the user through flows like re-publishing the library. Use case: when you want to reflect a screen you implemented in code first back into Figma.

handoff-to-code

A skill that improves the accuracy of reflecting a Claude Design handoff file into code. It reconciles against the project's AI-agent documentation and design system so the prototype is implemented faithfully.

Use case: when you register a Figma design system into Claude Design, design a batch of screens for new features, and then reflect them into code.

write-design-system-doc

A skill that analyzes the design system already implemented in a project's codebase and writes it out as a DESIGN.md for AI agents. Runs standalone without using any other MCP/SaaS. Has an audit mode that checks for drift between an existing DESIGN.md and the code. Based on stitch-skills.

Use case: when introducing an AI-first workflow into an existing project.

Requirements

• figma-to-code and code-to-figma require the Figma MCP. Code Connect is not required.

Install

/plugin marketplace add hirokimu/design-dev-bridge
/plugin install design-dev-bridge@hirokimu

Copying a skill folder into ~/.claude/skills/ also works.

License

Apache-2.0 - see LICENSE, NOTICE