Design Skills

Claude Code Design Skills

A collection of Claude Code skills for streamlining design-to-code workflows.

About

This repository contains custom skills for [Claude Code](https://claude.com/claude-code) that help automate and improve the process of converting designs into production-ready code.

Available Skills

Figma to Code

Generate production-ready React/Next.js code from Figma designs with systematic workflows, component reuse strategies, and variant mapping.

**Features:**

• Systematic Figma MCP tool usage workflow
• Component reuse prioritization
• Automatic Figma variant to code prop mapping
• Frontend/backend boundary enforcement
• TypeScript type safety
• Accessibility support
• Mock data patterns

[View Documentation →](./figma-to-code/README.md)

Installation

Prerequisites

• Claude Code CLI installed
• For Figma to Code skill: Figma MCP Server installed

Install Skills

**For Claude Code CLI:**

1. Clone this repository:

   git clone https://github.com/scoobynko/claude-code-design-skills.git

2. Copy skills to your Claude Code skills directory:

   # macOS/Linux
   cp -r claude-code-design-skills/figma-to-code ~/.claude-code/skills/
   
   # Windows
   xcopy claude-code-design-skills\figma-to-code %USERPROFILE%\.claude-code\skills\figma-to-code\ /E /I

3. Configure the skill according to its documentation

4. Restart Claude Code

**For Claude Desktop:**

1. Download or clone this repository

2. Configure according to its documentation

3. Create a .zip file of the configured `figma-to-code` folder

4. Open Claude Desktop app → **Settings** → **Capabilities** → **Skills** → **Upload skill**

5. Select your `figma-to-code.zip` file and the skill will be validated and activated

Usage

...