Claude Design System
Create and revise design systems in the Design System artifact format...
Install
npx skills add JimLiu/baoyu-design --skill claude-design-system -g -a claude-code -y- Repository
- JimLiu/baoyu-design5.8k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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.)
