claude-design

Q: How to install claude-design?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/claude-design.md https://raw.githubusercontent.com/hellboy-1101/claude-design/main/SKILL.md. Finally, /claude-design in Claude Code.

Q: What is claude-design best for?

claude-design is categorized under General. It covers: design.

New

GitHub TrendingGeneralby hellboy-1101

AI-native design system with DESIGN.md harness (3-layer: contracts + harness + skill)

Summary

md harness with three layers: contracts, harness, and skill.

It helps developers maintain consistent design decisions and automate design-to-code workflows directly within Claude Code.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/claude-design.md https://raw.githubusercontent.com/hellboy-1101/claude-design/main/SKILL.md

Invoke in Claude Code

/claude-design

Use Cases

Generate a new component following the design system's contract specifications.

Validate existing UI code against the DESIGN.md harness rules.

Update the design system contracts when a new design token is introduced.

Create a skill layer to automate repetitive design tasks like color palette generation.

Refactor a component to align with the latest harness layer constraints.

Document design decisions and propagate changes across all three layers.

Usage Examples

/claude-design generate component Button --contract button-contract

Validate my current component library against the DESIGN.md harness.

Add a new spacing token to the design system and update all layers.

View source on GitHub

design

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is claude-design?

This skill provides an AI-native design system that uses a DESIGN.md harness with three layers: contracts, harness, and skill. It helps developers maintain consistent design decisions and automate design-to-code workflows directly within Claude Code.

How to install claude-design?

To install claude-design: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/claude-design.md https://raw.githubusercontent.com/hellboy-1101/claude-design/main/SKILL.md. Finally, /claude-design in Claude Code.

What is claude-design best for?

claude-design is a skill categorized under General. It is designed for: design. Created by hellboy-1101.

What can I use claude-design for?

claude-design is useful for: Generate a new component following the design system's contract specifications.; Validate existing UI code against the DESIGN.md harness rules.; Update the design system contracts when a new design token is introduced.; Create a skill layer to automate repetitive design tasks like color palette generation.; Refactor a component to align with the latest harness layer constraints.; Document design decisions and propagate changes across all three layers..