open-artifacts

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 · 简体中文 · Changelog

This repo brings claude.ai's Artifact types to local agents: editable slide decks, design canvases, design systems, data dashboards, motion films and whiteboards, 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 six editors also ship as DeepSeek Harness plugins, installed from npm by name.

This project was called baoyu-design until November 2026, and its old address on GitHub leads here. 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, dashboards, films and whiteboards

These six 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; on a whiteboard, the comments button comments on an item, a spot or an area. 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, and the page's own buttons that ask the agent for something (Ask the agent to fix on a slide or canvas that can't be shown, the design system's setup buttons, the dashboard's Ask the agent) send it their request the same way.

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

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. A video added by link plays in its provider's player, and the agent can upload a clip for a slide. 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); HTML for Figma saves the artboards as a page without frames, for Figma's Chrome extension to capture. Full window, an artboard lays out at a screen width you pick (phone, tablet or desktop sizes), and its Export saves the whole page at that width as a PNG. *Above: the landing hero of a coffee subscription, with its mobile si