# Claude Design System

Create and revise design systems in the Design System artifact format...

- Repository: https://github.com/JimLiu/baoyu-design (5752 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add JimLiu/baoyu-design --skill claude-design-system -g -a claude-code -y`
Codex: `npx skills add JimLiu/baoyu-design --skill claude-design-system -g -a codex -y`
Cursor: `npx skills add JimLiu/baoyu-design --skill claude-design-system -g -a cursor -y`
Gemini CLI: `npx skills add JimLiu/baoyu-design --skill claude-design-system -g -a gemini-cli -y`

## Description

Create and revise design systems in the Design System artifact format (project/design-system.json, tokens.json, a README brand book, component previews, fonts and asset groups) as local files, then open them in a local design-system page where the user can browse and edit tokens, type, components and assets. Use when the user asks for a design system or brand kit in this format, built from a code repository, a design tool or scratch, names claude-design-system or the Design System type, or wants to revise a folder that holds project/design-system.json. claude-slides and claude-design install these systems. A free-form HTML style guide, UI kit or token page is baoyu-design's.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Design System, a system kept in local files

This skill is a local build of the claude.ai Design System artifact type: the rules below are the type's own, with
the Artifact tool replaced by files on disk and this skill's `scripts/artifact.mjs` (The calls). A design system is a
folder, `<root>`, that keeps its content in ITS OWN FILES under `<root>/project/`; icons and images are uploads
(`project/_blobs/`), named by the index. The page (`scripts/editor/`, served by `artifact.mjs open`) reads those files
and saves the user's edits back into them.

**Write only under `<root>/project/`**: a file elsewhere never shows; never write inside `project/_blobs/`. (A file you
draft only to upload it sits in `<root>/src/`: Creating, step 2.)

## A system kept in files

The rest: https://github.com/JimLiu/baoyu-design/blob/HEAD/dsh-plugins/dsh-claude-design-system/skills/claude-design-system/SKILL.md