baoyu-design-promo.mp4
baoyu-design.slides.IP.URL.mp4
DeepSeek.Harness.Claude.Design.DeepSeek.Harness.DeepSee.Harness.@tianyi.https---t.c.mp4
Run Claude Design on your own local agent — Cursor, Claude Code, Claude Desktop, or any file‑capable coding agent.
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, installed from npm by name.
The original baoyu-design skill (self‑contained HTML mockups and prototypes) has been archived to 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.
| Skill | Makes | You edit it in |
|---|---|---|
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 |
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 |
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 |
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 |
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 |
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 |
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 for your brand's colors |
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.
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.
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.
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.
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.
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.
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:
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 roleA 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.
The five editor skills also come as 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 |
/claude-slides: slide decks |
 |
dsh-claude-design |
/claude-design: a canvas of artboards |
 |
dsh-claude-design-system |
/claude-design-system: design systems |
 |
dsh-claude-dashboard |
/claude-dashboard: data‑backed dashboards |
 |
dsh-claude-motion |
/claude-motion: motion films |
 |
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.
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.
- In the app, open Plugins → Add plugin.
- 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. - 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-slidesand so on).
To install into a CLI profile, such as web:
dsh plugin --profile web add dsh-claude-designFrom 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:
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).
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/.
The same skills also come as plugins for the ChatGPT desktop app and Codex: Baoyu Slides, Baoyu Canvas, Baoyu Design System, Baoyu Dashboard, Baoyu Motion (with motion-director and dataviz) and Baoyu Dataviz. Add this repository as a marketplace, then install the ones you want:
codex plugin marketplace add JimLiu/baoyu-design --sparse .agents/plugins --sparse chatgpt-pluginscodex plugin add baoyu-slides@baoyu-designThe 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.
- 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.
Using the DeepSeek Harness app? You don't need this section: install the plugins from npm.
- A local agent — Cursor, Claude Code, 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
npxinstaller below and for the artifact skills' editors (Node 20+, the dashboard and Motion Node 22+).
Recommended — the skills CLI. npx skills (from Vercel Labs) reads this repo, finds the skills under skills/, and drops them into the right folder for whatever agent it detects:
# 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-dashboardIt installs to .claude/skills/ for Claude Code and .agents/skills/ for Cursor/Codex-style agents (add -g for the ~/‑level user install).
If you installed with the skills CLI, update from the terminal:
# 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 -yupgrade 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.mdto 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.
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.
- "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.
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:
- 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.
- 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
datavizskill, the editors reconstructed from claude.ai, the Anthropicons icon fonts, and the Claude Design system prompt, built-in skills a