baoyu-design runs Claude Design locally as an Agent Skill, producing self-contained HTML artifacts for design outputs. It includes installation via the skills CLI, multiple releases, and local preview capabilities.
Collecting history — the radar snapshots this repo daily. The trend line appears after 3 days of data (1 so far).
What it is
baoyu-design packages Claude Design as an Agent Skill that can run locally with Cursor, Claude Code, Codex, or other file-capable agents. It outputs UI mockups, prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks as self-contained HTML artifacts. It is designed to work without an external website or subscription, with artifacts stored in the project repository.
How it works
The skill uses plain Markdown plus JSX/JS scaffolds to orchestrate design tasks. It detects the running environment (Cursor, Claude Code, Codex, or generic harness) and loads built-in skills as needed. It pulls in core methodology from system prompts and references for each tool. It can read SKILL.md, system-prompt.md, and references to determine tool mappings and actions. Deliverables are generated under designs/ and previewed via a local HTTP server when required.
Getting started
Prerequisites include a local agent (Cursor, Claude Code, Codex) and Node.js. The recommended installation method is the skills CLI. The README provides commands to install and update the skill:
# 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
Update commands are also provided:
# Update and let the CLI prompt for the install scope
npx skills update baoyu-design
# Update the project-level install
npx skills update baoyu-design -p -y
# Update the global install
npx skills update baoyu-design -g -y
You can also run npx skills update to update all installed skills. After updating, restart Claude Code (or start a new agent session).
Alternative usage allows pasting the repo URL into an agent to fetch the skill directly.
Previewing use a local HTTP server is described as:
python3 -m http.server 4311 --directory designs
# then open http://localhost:4311/<project>/<file>.html
Release history
Latest releases include:
- v1.2.0 (2026-07-25) Features: Synchronize 13 project-type routes and the July 25 Claude Design system-prompt snapshot, covering slides, mobile apps, wireframes, documents, animation, UI mockup.
- v1.1.1 (2026-06-22) Changes:
make-a-deckclarification about HTML/CSS default for slide content. - v1.1.0 (2026-06-22) Changes:
generate-imagesraster image guidance updates for modern image backends; route text-heavy infographics to HTML/CSS when needed. - v1.0.0 (2026-06-22) Features: Ship the portable
baoyu-designAgent Skill with core design methodology and built-in workflows.
Traction
Stars: 3027, Forks: 221, Open issues: 0
Design and usage notes
- Basic prerequisites include Node.js and Python for preview server usage.
- The skill is designed to produce self-contained HTML outputs saved under
designs/. - It supports integration with Cursor, Claude Code, Codex, and other agents via the
skillsinstaller.