Claude Skill
JimLiu/baoyu-design
Baoyu Design runs Claude Design locally as an Agent Skill for Cursor, Claude Code, and more. Generate self-contained HTML mockups, prototypes, decks, and wireframes without claude.ai/design.
Overview
Repository
Install this Skill
npx skills add JimLiu/baoyu-designRegistry
npx skills add JimLiu/baoyu-designnpx skills add JimLiu/baoyu-design -gnpx skills add JimLiu/baoyu-design --agent claude-codenpx skills add JimLiu/baoyu-design --agent cursornpx skills add JimLiu/baoyu-design --agent codex
Summary
Baoyu Design lets you run Claude Design locally as an Agent Skill, compatible with Cursor, Claude Code, and more. It produces polished UI mockups, prototypes, decks, and wireframes as self-contained HTML files without relying on claude.ai/design. Best results with Opus 4.8.
将Claude Design作为Agent Skill在本地运行——支持Cursor、Claude Code等工具。无需依赖claude.ai/design，即可生成自包含HTML格式的精美UI模型、原型、演示文稿和线框图。推荐搭配Opus 4.8使用。
Key features
- Run Claude Design locally as an Agent Skill
- Compatible with Cursor, Claude Code, and more
- Generate self-contained HTML mockups and prototypes
- Produce polished UI designs, decks, and wireframes
- No dependency on claude.ai/design
- Optimized for Opus 4.8
Use cases
- Local UI prototyping without cloud dependency
- Rapid wireframing for web and mobile apps
- Creating presentation decks with self-contained HTML
- Integrating Claude Design into Cursor or Claude Code workflows
README excerpt
# baoyu-design **Run Claude Design on your own local agent — Cursor, Claude Code, Claude Desktop, or any file‑capable coding agent.** [English](README.md) · [简体中文](README.zh-CN.md) · [Changelog](CHANGELOG.md)    `baoyu-design` packages **Claude Design** — the design engine behind [claude.ai/design](https://claude.ai/design) — as a portable **Agent Skill**. Drop it into a local agent and you get most of what the website does, right inside your editor: polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks — all produced as self‑contained HTML. No website, no separate subscription, no upload step. The agent already on your machine does the work, and every artifact stays in your repo. --- ## Screenshots The same Reader Mac App prompt was used in Cursor, Codex, Claude, and Claude Design. | Cursor | Codex | Claude | Claude Design | |---|---|---|---| | <img src="assets/screenshots/cursor-reader-mac-app.webp" alt="Cursor running baoyu-design" width="240"> | <img src="assets/screenshots/codex-reader-mac-app.webp" alt="Codex running baoyu-design" width="240"> | <img src="assets/screenshots/claude-reader-mac-app.webp" alt="Claude running baoyu-design" width="240"> | <img src="assets/screenshots/claude-design-reader-mac-app.webp" alt="Claude Design running the same Reader Mac App prompt" width="240"> | <details> <summary>Prompt used for all screenshots</summary> ```markdown Build a Reader Mac app that helps me read and save articles better. All data is stored local