scoobynko

Design Skills — Design skill for Claude Code

Design community Intermediate

UI/UX design skills collection.

How to install Design Skills

This entry records only its repository, not the path inside it, so there is no exact command to give. Open scoobynko/claude-code-design-skills and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Design Skills does

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

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★

README

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:**

Clone this repository:

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

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

Configure the skill according to its documentation
Restart Claude Code

**For Claude Desktop:**

Download or clone this repository
Configure according to its documentation
Create a .zip file of the configured `figma-to-code` folder
Open Claude Desktop app → **Settings** → **Capabilities** → **Skills** → **Upload skill**
Select your `figma-to-code.zip` file and the skill will be validated and activated