baoyu-design

https://github.com/user-attachments/assets/d5b4f39b-a701-49de-87b8-64f3c6ef9c61

Run Claude Design on your own local agent — Cursor, Claude Code, Claude Desktop, or any file‑capable coding agent.

English · 简体中文 · Changelog

This repo brings claude.ai’s Artifact types to local agents: editable slide decks, design canvases, design systems and data dashboards, each opened in its own editor that runs on your machine. A fifth skill, dataviz, is the chart guide the agent reads before it draws any chart, in these skills or anywhere else. The four 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.

---

Skills in this repo

---

Artifact skills: editable decks, canvases, design systems and dashboards

These four 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. Comments stay in the project’s local comments.json; the agent reads and replies through artifact.mjs. While it listens with comments --wait, the editor offers Send to Agent to send your comment for it to act on.

To work together, share (or open --lan) opens the deck, canvas, design system or dashboard 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.

claude-slides: slide decks

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

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

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

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.

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 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 role

A dashboard is written through the same script (write-db, read-db, upload, check, open) into its own store under /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 four 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.

In the slides, canvas and design-system editors and on the dashboard page, 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.

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 or a dashboard, or type /claude-design (/claude-slides and so on).

To install into a CLI profile, such as web:

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:

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 [email protected] (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/.

---

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// 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.

Prerequisites

• 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 npx installer below and for the artifact skills’ editors (Node 20+, the dashboard Node 22+).

Install

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-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:

# 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 or /claude-dashboard in Claude Code, $claude-slides and so on in Codex. The agent writes the files under designs//, 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.”

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:

• 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 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.