baoyu-design runs Claude Design locally as a skill for coding agents: Reveneau

Why it mattersA designer or founder can keep every design file in the repo. Claude.ai/design works, but only from the website. baoyu-design puts the same job inside the editor the agent already runs in.

Claude.ai/design makes polished UI mockups and interactive prototypes, but it only runs on Anthropic's website. baoyu-design packages the same design engine as a local skill. It works in Claude Code, Cursor, Codex and any other coding agent that can read files. The repository has 5,062 stars and sits 18th on Trendshift's daily list.

JimLiu is the single author. The project is MIT-licensed and runs on Node and Python 3. There is no new model. The skill is prompts, templates and small scripts the agent on your machine uses to produce HTML.

Five skills in one repository

The main skill, baoyu-design, writes self-contained HTML into designs/<project>/. It makes UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks. The agent asks a few clarifying questions, then serves the result on localhost. The reader points at an element in the live preview and says what to change. The agent edits the underlying source.

Four more skills bring claude.ai's Artifact types to the same agents. claude-slides makes slide decks with its own editor, which exports to PDF, HTML or PowerPoint. claude-design makes a canvas of artboards you can play as prototypes. claude-design-system makes design systems with tokens, a brand book and component previews. claude-dashboard makes data-backed dashboards from CSV, TSV or JSON. Each editor is prebuilt in the repository.

The install path uses Vercel Labs' npx skills tool. The command auto-detects the agent and drops the skill into the right folder. Claude Code uses .claude/skills/. Cursor and Codex use .agents/skills/. The -g flag installs for every project at the user level.

How it compares to the website

The README is honest about scope. It covers "the vast majority" of claude.ai/design's capabilities, in the author's words, with some features from the website missing. The author says the skill is a long, demanding design brief. The stronger the model, the better the result. The pairing he names is Claude Opus 5.5.

Everything stays in the user's own repository. Deliverables land as self-contained HTML the team can version, fork, export or re-use. No upload step, no second subscription, no new login. The dashboard writes to its own db/ folder on the user's disk. The chart data traces back to the row that produced each number.

The one practical catch

Multi-file prototypes do not load from file://. The agent runs a Python HTTP server on localhost:4311 to preview them. That is one background process the reader has to close when they are done with it. A designer who already runs a code editor pays a smaller cost than opening a website every time. The design files also stay on disk when the session ends.

A designer or a founder who uses Claude Code or Cursor every day can install this today. The agent produces HTML. The reader opens the preview, points at a button, says what to change, and watches the agent edit. The design file sits beside the rest of the project's code.

Source

JimLiu/baoyu-design, on GitHub.

This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.