AcademySkillsDesign and media

claude-code-design-skills

Designers and front-end teams that hand off Figma screens to developers.

  • Recommendedour rating
  • 40gitHub stars
  • MITlicence
  • 4 days agolast update
git clone https://github.com/scoobynko/claude-code-design-skills.git
README.md

Loading the file...

What it does

A set of Claude Code skills that turn design work into front-end code. The Figma to Code skill generates React or Next.js components from Figma designs, reuses existing components, maps Figma variants to code props and uses TypeScript. It relies on the Figma MCP server to read the design file.

Use cases

  1. 01Turn a Figma frame into a React component
  2. 02Map Figma variants to component props
  3. 03Reuse existing components in a new screen

Questions about
claude-code-design-skills.

What is claude-code-design-skills used for?

Designers and front-end teams that hand off Figma screens to developers. A set of Claude Code skills that turn design work into front-end code. The Figma to Code skill generates React or Next.js components from Figma designs, reuses existing components, maps Figma variants to code props and uses TypeScript. It relies on the Figma MCP server to read the design file.

How do I install claude-code-design-skills?

Run this in your terminal: git clone https://github.com/scoobynko/claude-code-design-skills.git

Is claude-code-design-skills open source?

Yes. The code is on GitHub (scoobynko/claude-code-design-skills) under the MIT licence.

Is claude-code-design-skills safe to use?

It passed our automatic scan for credential theft, hidden instructions and risky install commands. Third party open source software. Sabemos AI does not maintain it. Check the code and permissions before you connect it to company data.