baoyu-design: run Claude Design as a local Agent Skill in Cursor, Claude Code or Codex

What baoyu-design is

baoyu-design packages Claude Design, which the README calls the design engine behind claude.ai/design, as a portable Agent Skill. Dropped into a local agent, it gives you most of what the website does inside your editor: polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps and slide decks, all produced as self-contained HTML.

The README's pitch is about where the work happens and who owns the result: no website, no separate subscription, no upload step. The agent already on your machine does the work, and every artifact stays in your repo. The audience is developers and designers who use Cursor, Claude Code, Claude Desktop or another file-capable agent and would rather keep design output as versionable files than produce it on a website. It is a skill, not an application, so it has no interface of its own beyond the agent you run it in.

Why run it locally

The README gives four reasons, and they double as the honest case for the tool. First, it frees you from the website: you get the vast majority of claude.ai/design's capabilities without leaving your editor, with the same methodology and output format. Second, it is best with Claude Opus 4.8, because the skill is a long, demanding design brief and a stronger model gives a better result, though it still works on other capable models.

The third reason is the most distinctive. Because the deliverable is plain HTML served on localhost, you can iterate by pointing rather than describing: use your agent's browser preview and element-annotation tools, point at a button in the live preview, say what to change, and the agent edits the underlying source. That visual second-pass loop is hard to get on a website. Fourth, everything is yours: output lands in designs/<project>/ as self-contained HTML you can version, fork, export or ship.

What it can make

The skill drives a full design process: clarifying questions, gathering design context, producing one or more HTML deliverables, then previewing and verifying. Behind that flow is a deep bench of built-in skills grouped by area. Core design covers hi-fi design, interactive prototypes, wireframes and frontend aesthetic direction. There are dedicated skills for decks with speaker notes, mobile prototypes, animated video and sound effects, websites and landing pages, social content, HTML email, fliers and brochures.

It also reaches beyond mockups into data and research, with web research, data science, data visualisation and maps, and into documents, 3D objects and watercolour illustration. Design-system skills can create, use and preview a system, and there are import sources (Figma .fig offline decode, a GitHub repo, existing HTML/CSS) and export and handoff paths (standalone HTML, PDF, editable or screenshot PPTX, MP4 video, send to Figma or Canva, handoff to Claude Code). Ready-made starter components save the agent from hand-rolling the basics: device, browser and social-media shells, a pan-zoom canvas, slide, chart, document and 3D stages, a tweaks panel and a fillable image slot.

How the skill is built

The README is clear that this is plain Markdown plus a few JSX/JS scaffolds, with no build step and no runtime. The layout is worth seeing because it explains how one skill serves several agents:

skills/baoyu-design/
├── SKILL.md              # Entry point — orchestrates the whole flow
├── system-prompt.md      # The design methodology & craft standards (source of truth)
├── references/
│   ├── claude.md         # Tool map for Claude Code
│   ├── cursor.md         # Tool map for Cursor
│   └── codex.md          # Tool map for Codex Agent
├── built-in-skills/      # Specialized prompts (decks, mobile, import, export, …)
└── starter-components/   # Device/social shells, deck, chart, document, 3D, animation, …

When you ask for a design, the agent reads SKILL.md, loads the methodology from system-prompt.md, detects whether it is running in Cursor, Claude Code, Codex Agent or a generic harness, and reads the matching reference doc. It then pulls in only the built-in skills the task needs. The design keeps the craft rules harness-independent while each environment resolves its own tools for asking questions, previewing, screenshotting and verifying, which is what lets the same skill behave well across editors.

Getting started and prerequisites

The prerequisites are a local agent and a strong model. The README names Cursor, Claude Code and Codex as having first-class tool references inside the skill, and says the installer supports more than 70 agents in all, including Cline, Roo Code and GitHub Copilot, though those without a dedicated reference doc fall back to the generic harness path. The second prerequisite is model choice: Claude Opus 4.8 selected as the model, because the skill leans on model strength.

That sets a realistic expectation. This is not a lightweight helper; it is a large design brief that asks a lot of the model, so a weaker or heavily quantised model will show its limits. If you have a capable agent and can run Opus, the payoff is claude.ai/design's craft applied to files you keep. If you are on a small local model, the README's own framing suggests you will get less from it.

Licence, releases and limits

baoyu-design is MIT licensed, so you can fork and adapt the skill freely. It is bilingual, with English and Simplified Chinese READMEs and changelogs. package.json marks it private with version 1.2.0 and a single test script over the skill's agent tests. Recent releases are v1.2.0 on 2026-07-26, and v1.1.1 and v1.1.0 in June, with the last push on 2026-07-30.

Two limits are worth keeping in view. The skill reproduces most, not all, of claude.ai/design, so a capability that depends on the hosted service may not be present locally, and the quality tracks your model. And because the output is self-contained HTML rather than a design-tool document, handoff to non-technical collaborators still relies on the export paths, PPTX, PDF, Figma or Canva, rather than the HTML itself. For a developer who lives in an editor, those are minor next to owning every artifact in the repo.

Editorial conclusion

Install baoyu-design if you already use a capable coding agent and want claude.ai/design's output as HTML you own, edited by pointing at a live preview rather than describing changes. Pair it with Claude Opus 4.8 for the best result, expect a long and demanding design brief to drive the agent, and look in designs/<project>/ for the self-contained HTML it produces.

Frequently asked questions

Official sources

1. Issues
2. JimLiu/baoyu-design on GitHub
3. License: MIT
4. README
5. Releases