# Claude Design

Make and revise designs in the Design (canvas) artifact format (project/canvas.json...

- 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 -g -a claude-code -y`
Codex: `npx skills add JimLiu/baoyu-design --skill claude-design -g -a codex -y`
Cursor: `npx skills add JimLiu/baoyu-design --skill claude-design -g -a cursor -y`
Gemini CLI: `npx skills add JimLiu/baoyu-design --skill claude-design -g -a gemini-cli -y`

## Description

Make and revise designs in the Design (canvas) artifact format (project/canvas.json plus one .dc.html Design Component file per artboard) as local files, then open them in a local canvas editor where the user can view the artboards side by side, retype copy and adjust tweaks. Use when the user asks for an editable canvas of artboards in this format, names claude-design or the Design (canvas) type, or wants to revise a folder that holds project/canvas.json. A one-off HTML prototype or design exploration outside this format is baoyu-design's.

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

# Design

This skill is a local build of the claude.ai Design (canvas) 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 canvas is a
folder, `<root>`; its content is ITS OWN files under `<root>/project/`. The editor 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.

## The canvas exists

Work on THAT canvas, its `<root>` in every command: never
create another. If no canvas exists yet: `<root>` = a new folder `designs/<slug>/` named for the canvas
(`designs/spring-menu/`) in the working directory, or where the user says; the canvas's name
(REQUIRED; as the user says it; not "Design" or "Untitled") goes in `title`.
Read `<root>/project/canvas.json`: none, or `boards` empty: if just made, see Creating; else list its files; no `.dc.html`: see
Creating. Else see Revising.

Tell the user what happens on the canvas, never the mechanism.
Asked to send it to apps like Canva: there is no Send to here; point the user to the editor's Export, if shown, to save a file they can import there. Give an app's import tool no other link, never the editor's local address.

## The canvas's files: exact shapes

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