Claude Design
Make and revise designs in the Design (canvas) artifact format (project/canvas.json...
Install
npx skills add JimLiu/baoyu-design --skill claude-design -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
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.
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.
