claudeers.
// Claude Skills

claude-code-design-skills

Claude Code skills for automated design-to-code workflows.

// Claude Skills[ cli ][ api ][ desktop ][ web ][ claude ]#claude#claude-code#claude-skill#claude-skills#design#figma#product#skills◷ MIT$open-sourceupdated 21 days ago
Dormant
22/100
last commit 10 months ago
last release 10 months ago
releases 2
open issues 0
// star history+1 this week (+2.6%)
★ 39 github ↗

Install with your AI

Paste into Claude Code, Cursor, or any agent — it reads the repo and wires the tool into your project.

⚠ Unverified source (community-unclaimed, low activity) — reveal the prompt
⚠ Unverified source (community-unclaimed, low activity). Inspect the repo before letting your agent install it.

Install and set up claude-code-design-skills (release-binary project) into my current project.
Found on https://claudeers.com/claude-code-design-skills
Repo: https://github.com/scoobynko/claude-code-design-skills
Homepage/docs: —
Detected install method: release-binary → inspect the README
Category: skills. Platforms: cli, api, desktop, web.
Read the repo's README for exact setup and env vars, then install it and wire it into my project.

Claudeers Health Verdict:
dormant; community-verified: false. Confirm the source before running anything.
// or install directly (release-binary)

Grab the latest release asset from GitHub.

# download a build from https://github.com/scoobynko/claude-code-design-skills/releases
// or clone · unverified · not recently updated
git clone https://github.com/scoobynko/claude-code-design-skills

// compatibility

Platformscli, api, desktop, web
Operating systems—
AI compatibilityclaude
LicenseMIT
Pricingopen-source
Language—

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 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 →

Installation

Prerequisites

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

Each skill includes detailed documentation in its respective directory. Skills are automatically available in Claude Code once installed and can be invoked when relevant to your task.

Configuration

Each skill requires customization for your specific project. Check the individual skill's README for required configuration placeholders.

Contributing

Contributions are welcome! If you'd like to add new skills or improve existing ones:

  1. Fork this repository
  2. Create a feature branch
  3. Make your changes (for creating new skills, see Claude Skills documentation)
  4. Submit a pull request

When creating a new skill, ensure it's generalized with placeholders so others can easily customize it for their projects.

License

MIT License - See LICENSE file for details

Author

Created by @scoobynko

Support

For issues or questions:

// faq

What is claude-code-design-skills?

Claude Code skills for automated design-to-code workflows. . It is open-source on GitHub.

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

claude-code-design-skills is open-source under the MIT license, so it is free to use.

What category does claude-code-design-skills belong to?

claude-code-design-skills is listed under skills in the Claudeers registry of Claude-compatible tools.

1 views
★ 39 stars
unclaimed
updated 21 days ago

// embed badge

claude-code-design-skills on Claudeers
[![Claudeers](https://claudeers.com/api/badge/claude-code-design-skills.svg)](https://claudeers.com/claude-code-design-skills)

// retro hit counter

claude-code-design-skills hit counter
[![Hits](https://claudeers.com/api/counter/claude-code-design-skills.svg)](https://claudeers.com/claude-code-design-skills)

// reviews

// guestbook

0/500

// related in Claude Skills

🔓
superpowers

An agentic skills framework & software development methodology that works.

// skillsobra/⟨Shell⟩★ 272,506◷ MIT[ claude ]
🔓
skills

Public repository for Agent Skills

// skillsanthropics/⟨Python⟩★ 169,406[ claude ]
🔓
spec-kit

💫 Toolkit to help you get started with Spec-Driven Development

// skillsgithub/⟨Python⟩★ 129,208◷ MIT[ claude ]
🔓
graphify

AI coding assistant skill (Claude Code, Codex, OpenCode, Cursor, Gemini CLI, and more). Turn any folder of code, SQL schemas, R scripts, shell scripts, docs,…

// skillsGraphify-Labs/⟨Python⟩★ 106,387◷ MIT[ claude ]
→ see how claude-code-design-skills connects across the ecosystem