# baoyu-design
https://github.com/user-attachments/assets/d5b4f39b-a701-49de-87b8-64f3c6ef9c61
https://github.com/user-attachments/assets/84ddf462-5ac6-44c6-a175-05a7ccaa019e
https://github.com/user-attachments/assets/db6c5d93-dc28-4170-8356-4dbe5725a57c
**Run Claude Design on your own local agent — Cursor, Claude Code, Claude Desktop, or any file‑capable coding agent.**
[English](README.md) · [简体中文](README.zh-CN.md) · [Changelog](CHANGELOG.md)
[](NOTICE.md)  
This repo brings claude.ai's **Artifact types** to local agents: editable slide decks, design canvases, design systems, data dashboards and motion films, each opened in its own editor that runs on your machine. `motion-director` directs those films, from the point of the film to the finished cut. `dataviz` is the chart guide the agent reads before it draws any chart, in these skills or anywhere else. The five editors also ship as [DeepSeek Harness plugins](#deepseek-harness-plugins), installed from npm by name.
The original `baoyu-design` skill (self‑contained HTML mockups and prototypes) has been archived to [`archive/baoyu-design/`](archive/baoyu-design/).
No website, no separate subscription, no upload step. The agent already on your machine does the work, and every artifact stays in your repo.
---
## Skills in this repo
| Skill | Makes | You edit it in |
|---|---|---|
| [`claude-slides`](skills/claude-slides/) | Slide decks: `project/deck.json` plus one HTML file per slide | The slides editor: present, retype, drag; export PDF, HTML or PowerPoint |
| [`claude-design`](skills/claude-design/) | A canvas of artboards: `project/canvas.json` plus `.dc.html` Design Components | The canvas editor: artboards side by side, play prototypes, retype copy, adjust tweaks; export HTML, PDF or PNG |
| [`claude-design-system`](skills/claude-design-system/) | Design systems: tokens, a README brand book, component previews, fonts, asset groups | The design system editor: browse and edit colors, type, components and assets |
| [`claude-dashboard`](skills/claude-dashboard/) | Data‑backed dashboards: datasets (CSV, TSV, JSON) and a page of charts, numbers and tables over them | The dashboard page: live charts, filters, and a Sources panel that traces every number to its rows |
| [`claude-motion`](skills/claude-motion/) | Motion films: animated videos, 10–30 s unless you ask for more and 15 minutes at most, written as code scene by scene into the film's own store under `<root>/db/` | The Motion player: watch it fill in, retype lines, drag scene lengths, adjust style and tweaks; export MP4 or GIF |
| [`motion-director`](skills/motion-director/) | A finished film with something to say: it finds the point, writes the narration for the ear, has it voiced, times every scene to the words, and checks the frames as a viewer would. Needs `claude-motion` beside it | The same Motion player, open from the first minute |
| [`dataviz`](skills/dataviz/) | Better charts in any medium (HTML, SVG, d3, matplotlib, plotly…): picking the form, colors that stay readable in light and dark and for color‑blind readers, marks, legends and tooltips, with a palette validator script | Nothing to open: the agent reads it before writing chart code; swap [`palette.md`](skills/dataviz/references/palette.md) for your brand's colors |
---
## Artifact skills: editable decks, canvases, design systems, dashboards and films
These five skills write the Artifact type's own file format into a folder and open it in that type's editor page, served from your machine. The agent writes the files and the editor shows each write at once; your edits in the editor are saved back into the same files, so you and the agent can take turns.
In the slides, canvas and design-system editors and on the dashboard page, choose **Comment** (or press **C**) to comment on an element or area; in the Motion player, its **Comment** button comments on a moment of the film. Comments stay in the project's local `comments.json`; the agent reads and replies through `artifact.mjs`. While it listens with `comments <root> --wait`, the editor offers **Send to Agent** to send your comment for it to act on.
To work together, `share <root>` (or `open <root> --lan`) opens the deck, canvas, design system, dashboard or film to your local network, the same Wi‑Fi or LAN, and prints a link per role: **editor** edits and comments, **commenter** comments without editing, **viewer** only looks. Whoever opens a link types a name and is in; what they change shows on everyone's page, and their comments land in the same `comments.json`. The person at this computer is the owner: the **Share** button lists who joined and who is online, changes someone's role or removes them, and turns each link off, back on or resets it. Guests get a Share button too, with the links they may pass on: their own role's and those below it. There is no account and nothing leaves your network; it is plain http, so anyone there with a link gets in.
Every change is kept as a version, with who made it: a guest by the name they typed, the owner, or **Agent** for a change made to the files on this computer. The **History** button (the clock beside Share) lists the versions by day; open one to see which slides, artboards or documents it changed, line by line, preview the whole thing as it was, or restore it (or just one part) as a new version, so nothing is lost. When two people save the same slide at once, the later save no longer wipes out the earlier one unnoticed: the version records whose change it replaced, and both people get a notice with **Compare** and **Bring back**, which puts back only what was replaced and leaves the other person's other changes. In the slides, design and design-system editors, someone else's save updates your page in place instead of reloading it, and if they saved the slide, artboard or file you have unsaved edits on, a bar asks whether to use theirs, keep yours, or keep both (yours becomes a new slide after it, an artboard beside it, or a copy of the file). The two are first merged: on a canvas element by element, in slides and design-system files line by line (a token file token by token). When you changed different elements or lines, both changes stay and nothing asks; the bar comes up only when the merge cannot sort it out, such as both changing the same line. The history lives in the project's `history/` folder.
While others have the page open, their avatars sit beside History. In the slides and canvas editors each one's card says which slide or artboard they are on and whether they are editing, and their cursors and selections show where they work; when someone starts editing what you are looking at, you get a short note, and nothing is ever locked. While Claude changes the files, it shows up there too.
To back a project up, move it to another computer or hand it to someone, the owner's **Whole folder (.zip)** item, last in the Share panel's Export tab (the owner's: guests can pass a link on but not export), downloads the whole folder as one zip, its history and comments included; `artifact.mjs archive <root>` does the same from the command line. Unzip it anywhere and `open` it with the same skill to carry on. This computer's server state and the share links are left out, so a copy you send is not shared until its new owner shares it.
### `claude-slides`: slide decks
<img src="assets/screenshots/claude-slides-editor.webp" alt="A five-slide health class deck about sleep open in the claude-slides editor" width="880">
A deck is `project/deck.json` plus one HTML file per slide. In the editor you can present full screen, retype any text, drag elements, add text, images, tables and shapes, and export to PDF, HTML or PowerPoint. *Above: a five‑slide health class deck about sleep, built on a sample design system.*
### `claude-design`: a canvas of artboards
<img src="assets/screenshots/claude-design-canvas.webp" alt="A coffee subscription landing page and its mobile signup form side by side on the claude-design canvas" width="880">
A canvas holds artboards side by side: `project/canvas.json` plus one `.dc.html` Design Component per artboard. Play an artboard as a working prototype, on the canvas or full screen; retype copy, adjust tweaks and leave notes; export the whole design as a standalone HTML page, a PDF or PNG images (1× or 2×, several artboards in a .zip). *Above: the landing hero of a coffee subscription, with its mobile signup form beside it.*
### `claude-design-system`: design systems
<img src="assets/screenshots/claude-design-system-editor.webp" alt="The overview page of the Nimbus design system in the claude-design-system editor" width="880">
A design system is tokens, a README brand book, component previews, fonts and asset groups. In the editor you browse and edit colors, type, spacing, radii, shadows, components and assets. Import one from a component library and its previews are the real components, live and interactive. Decks and canvases can install it: their editors' Theme and color menus then offer its colors and text styles. *Above: Nimbus, a small design system for a weather app.*
### `claude-dashboard`: data‑backed dashboards
<img src="assets/screenshots/claude-dashboard.webp" alt="An X account analytics dashboard with sample data in the claude-dashboard page" width="880">
A dashboard is datasets (CSV, TSV or JSON) and a page of charts, numbers and tables computed from them. The charts are live, and the Sources panel traces every number back to its rows. Give the agent a newer export and it swaps the file in; the page recomputes every number. Numbers, dates and labels follow your language. *Above: a year of daily X account analytics, with sample data.*
### `claude-motion`: motion films
<img src="assets/screenshots/claude-motion-player.webp" alt="A 56-second film about Motion, made with Motion, open in the claude-motion player with its scenes on the timeline" width="880">
A film is a folder of documents the agent writes with the skill's script, scene by scene, while you watch it fill in the player. Everything on screen is code, a pure function of time, so a change is a rewrite of that moment, not a re-render you wait for. Retype a line, drag a scene's length, change the style in **Tweaks**, or comment on a moment and send it to the agent. A narrated film carries a voice track: one take a scene, from a speech provider of yours or recorded by you, with the motion timed to the words and captions that follow them; a recorded track can play as the music bed. Export MP4 or GIF from the player, or `export` from the command line (Chrome needed; `record`, for filming a page of your own product, also needs ffmpeg). For a film with a point to make, ask for `motion-director`, which directs and uses `claude-motion` as its crew. *Above: the film that introduces Motion, made with Motion.*
### Run the editors
Each `SKILL.md` keeps the type's original instructions nearly word for word; only the Artifact tool calls are swapped for local ones. That tool lives inside each skill as `scripts/artifact.mjs` (Node 20+, the dashboard's and Motion's Node 22+; nothing to install). The agent runs it for you; by hand:
```bash
node skills/claude-slides/scripts/artifact.mjs open designs/q3-review # start the editor, print its URL
node skills/claude-slides/scripts/artifact.mjs check designs/q3-review # validate the files
node skills/claude-slides/scripts/artifact.mjs upload designs/q3-review hero.jpg # store an image, print its /_blob/ URL
node skills/claude-slides/scripts/artifact.mjs list # find design systems on disk
node skills/claude-slides/scripts/artifact.mjs share designs/q3-review # open it to the local network, print a link per role
```
A dashboard or a film is written through the same script (`write-db`, `read-db`, `upload`, `check`, `open`) into its own store under `<root>/db/`. Each skill runs its own local server, and everything in `scripts/` ships prebuilt: plain JavaScript that runs on Node alone, with nothing to install or build.
---
## DeepSeek Harness plugins
The five editor skills also come as [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) plugins, published on npm. Each plugin carries its skill exactly as this repo publishes it, prebuilt editor included, so Claude Design and the other editors run on your DeepSeek agent.
| npm package | Adds | Version |
|---|---|---|
| [`dsh-claude-slides`](https://www.npmjs.com/package/dsh-claude-slides) | `/claude-slides`: slide decks | [](https://www.npmjs.com/package/dsh-claude-slides) |
| [`dsh-claude-design`](https://www.npmjs.com/package/dsh-claude-design) | `/claude-design`: a canvas of artboards | [](https://www.npmjs.com/package/dsh-claude-design) |
| [`dsh-claude-design-system`](https://www.npmjs.com/package/dsh-claude-design-system) | `/claude-design-system`: design systems | [](https://www.npmjs.com/package/dsh-claude-design-system) |
| [`dsh-claude-dashboard`](https://www.npmjs.com/package/dsh-claude-dashboard) | `/claude-dashboard`: data‑backed dashboards | [](https://www.npmjs.com/package/dsh-claude-dashboard) |
| [`dsh-claude-motion`](https://www.npmjs.com/package/dsh-claude-motion) | `/claude-motion`: motion films | [](https://www.npmjs.com/package/dsh-claude-motion) |
In the slides, canvas and design-system editors, on the dashboard page and in the Motion player, a comment goes straight to the agent: whenever the agent opens an editor, the plugin waits for comments. Mark up the page, tick **Send to Agent**, and the agent wakes up, reads your comment, makes the change and replies in the comment thread. The comment also shows in the chat as a card.
The plugins also add **Artifacts** to the app's left sidebar: every deck, canvas, design system, dashboard and film the agent has opened, each with a thumbnail, as a grid or a list, with search, sort and filters. Click one and the app goes back to the conversation that made it and opens the editor in the right sidebar. A tile at the top starts a new session with the input filled in for that kind of thing, so the right skill loads.
### Install from npm
All you need is the DeepSeek Harness desktop app: no repo to clone, nothing to build. The app downloads the plugin from npm (or from the npmmirror registry when npm is out of reach) and runs it on the Node.js it ships with.
1. In the app, open **Plugins** → **Add plugin**.
2. Enter a package name from the table, such as `dsh-claude-design`, in **Package name or address**, and click **Install**. If the plugin's switch is off, turn it on. Repeat for each plugin you want.
3. Quit and reopen the app, then start a new session and ask for a deck, a canvas, a design system, a dashboard or a film, or type `/claude-design` (`/claude-slides` and so on).
To install into a CLI profile, such as `web`:
```bash
dsh plugin --profile web add dsh-claude-design
```
**From the Discover tab.** The app's experimental Discover tab can list the plugins, install them with a click and show when an update is out. On the Plugins page, click **More** beside **Experimental plugins** and switch on **Custom plugin markets**; then in **Discover**, click **Add index source** and add this index:
```text
https://jimliu.github.io/baoyu-design/dsh-plugins/index.json
```
**Updating.** The app doesn't update plugins by itself; with the index added, Discover marks a plugin **Update available**. On the Plugins page, uninstall the plugin, install it again from Discover or by name, then quit and reopen the app. For a day after a release, adding by name still gets the previous version; Discover gets the new one right away, and so does entering the name with the version, such as `dsh-claude-design@2.4.0` (the versions are in the [changelog](CHANGELOG.md)).
A workspace that has its own copy of a skill (in `.agents/skills/` or `.dsh/skills/`) uses that copy instead of the plugin's. Step by step, with installing from a folder, uninstalling and what to do when something doesn't work: [`dsh-plugins/`](dsh-plugins/README.md).
---
## ChatGPT plugins
The same skills also come as plugins for the ChatGPT desktop app and Codex: [Baoyu Slides](chatgpt-plugins/baoyu-slides/), [Baoyu Canvas](chatgpt-plugins/baoyu-canvas/), [Baoyu Design System](chatgpt-plugins/baoyu-design-system/), [Baoyu Dashboard](chatgpt-plugins/baoyu-dashboard/), [Baoyu Motion](chatgpt-plugins/baoyu-motion/) (with `motion-director` and `dataviz`) and [Baoyu Dataviz](chatgpt-plugins/baoyu-dataviz/). Add this repository as a marketplace, then install the ones you want:
```bash
codex plugin marketplace add JimLiu/baoyu-design --sparse .agents/plugins --sparse chatgpt-plugins
```
```bash
codex plugin add baoyu-slides@baoyu-design
```
The editors run on your computer, so opening one needs local network, which the default sandbox blocks: approve it if the app asks, or use a permission mode that allows it. Step by step, with installing from the app's Plugins Directory and updating: [chatgpt-plugins/README.md](chatgpt-plugins/README.md).
---
## Why run it locally
- **Free yourself from the website.** You get the vast majority of `claude.ai/design`'s capabilities without ever leaving your editor — same methodology, same craft standards, same output format.
- **Best with Opus 5.5.** The skill is a long, demanding design brief; the stronger the model, the better the result. Pair it with **Claude Opus 5.5** for the best output, and it still works well on other capable models.
- **Edit side by side with the agent.** Each editor runs on `localhost`; your edits save back into the same files the agent writes, so you can take turns.
- **Work together, no cloud.** Share an editor on your local network with a link per role; others edit, comment or watch, and you decide who stays in. Version history shows who changed what and brings any version back.
- **Everything is yours.** Output lands in `designs/<slug>/` as plain files you can version, fork, export, or ship.
---
## Quick start
Using the DeepSeek Harness app? You don't need this section: [install the plugins from npm](#install-from-npm).
### Prerequisites
- A local agent — **[Cursor](https://cursor.com)**, **[Claude Code](https://claude.com/claude-code)**, **[Codex](https://developers.openai.com/codex/)**, or any of the 70+ agents the installer supports (Cline, Roo Code, GitHub Copilot…). Cursor, Claude Code, and Codex have first‑class tool references inside the skill.
- **Claude Opus 5.5** selected as the model, for best results.
- **Node.js**, for the `npx` installer below and for the artifact skills' editors (Node 20+, the dashboard and Motion Node 22+).
### Install
**Recommended — the `skills` CLI.** [`npx skills`](https://github.com/vercel-labs/skills) (from Vercel Labs) reads this repo, finds the skills under `skills/`, and drops them into the right folder for whatever agent it detects:
```bash
# Install into the current project (auto‑detects your agent)
npx skills add JimLiu/baoyu-design
# …or install globally, for every project
npx skills add JimLiu/baoyu-design -g
# Target a specific agent explicitly
npx skills add JimLiu/baoyu-design --agent claude-code
npx skills add JimLiu/baoyu-design --agent cursor
npx skills add JimLiu/baoyu-design --agent codex
# Just list what's in the repo first
npx skills add JimLiu/baoyu-design --list
# Install only some of the skills
npx skills add JimLiu/baoyu-design --skill claude-slides --skill claude-dashboard
```
It installs to `.claude/skills/` for Claude Code and `.agents/skills/` for Cursor/Codex-style agents (add `-g` for the `~/`‑level user install).
### Update
If you installed with the `skills` CLI, update from the terminal:
```bash
# Update one skill (the CLI prompts for the install scope)
npx skills update claude-slides
# Update the project-level or global install
npx skills update claude-slides -p -y
npx skills update claude-slides -g -y
```
`upgrade` is also supported as an alias.
You can also run `npx skills update` to update all installed skills. After updating, restart Claude Code (or start a new agent session) so the refreshed skill files are loaded.
**Alternative — hand the repo URL to your agent.** Don't want to install anything? Paste the URL into chat and let the agent fetch the skill itself:
> Read https://github.com/JimLiu/baoyu-design and follow its `skills/claude-slides/SKILL.md` to make a 10‑slide deck from this PRD.
The agent clones or fetches the repo, loads `SKILL.md`, and proceeds — perfect for a one‑off.
### Use it
Once a skill is installed (or fetched), ask for what you want (*"Make a 12‑slide deck from this PRD"*, *"Turn this CSV into a dashboard"*) or call one by name: `/claude-slides`, `/claude-design`, `/claude-design-system`, `/claude-dashboard`, `/claude-motion` or `/motion-director` in Claude Code, `$claude-slides` and so on in Codex. The agent writes the files under `designs/<slug>/`, starts the editor, and gives you its `http://127.0.0.1` URL.
---
## Example prompts
- *"Make a claude-slides deck for the Q3 review, then export it to PowerPoint."*
- *"Put a landing page and its phone version side by side on a claude-design canvas."*
- *"Turn the Chakra UI component library into a design system with live component previews."*
- *"Turn this analytics CSV into a dashboard that compares the last 28 days with the 28 before."*
- *"Use motion-director to turn this launch post into a 60‑second narrated film."*
For best results, **give it design context** — a screenshot, a UI kit, a design system, or a codebase. Starting from real context is the single biggest lever on quality; the skill will ask for it if you don't provide it.
---
## Credits & license
This project repackages **Anthropic**'s claude.ai Artifact types and design skills so they can run on local agents. It is an independent, community effort and is not affiliated with or endorsed by Anthropic.
Repackaged and maintained by **Jim Liu 宝玉**. The repository holds material under three sets of terms, set out in [NOTICE.md](NOTICE.md):
- **The maintainer's own work** (the local command line and editor server, the local comments, the DeepSeek Harness plugin code, the docs) is under the [MIT License](LICENSE).
- **Material from Anthropic** stays Anthropic's and is not under the MIT License; this project grants no license to it. That covers the skill instructions and reference docs adapted from the Artifact types, the `dataviz` skill, the editors reconstructed from claude.ai, the Anthropicons icon fonts, and the Claude Design system prompt, built-in skills and starter components in `archive/`. The archived `frontend-design` built-in skill is Anthropic's Apache 2.0 skill, with its license beside it.
- **Third-party open-source code** bundled in the editors keeps its own license, listed in each editor's `scripts/editor/third-party-licenses.txt`.
The DeepSeek Harness plugins on npm ship the same `LICENSE` and `NOTICE.md`.