baoyu-design
A design engine skill for local agents: mockups, prototypes, landing pages, dashboards and slides as self-contained HTML right in your editor
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
Why this level
- Writes files into the project and starts a local preview server
- Runs the installer and helper scripts on Node.js
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/baoyu-designDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add jimliu/baoyu-design --skill baoyu-design -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 6530033
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .claude/skills
cp -R "$tmp/skills/baoyu-design" .claude/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jimliu/baoyu-design --skill baoyu-design -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 6530033
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jimliu/baoyu-design --skill baoyu-design -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 6530033
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .github/skills
cp -R "$tmp/skills/baoyu-design" .github/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jimliu/baoyu-design --skill baoyu-design -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 6530033
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jimliu/baoyu-design --skill baoyu-design -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 6530033
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .devin/skills
cp -R "$tmp/skills/baoyu-design" .devin/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add jimliu/baoyu-design --skill baoyu-design -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 6530033
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .cline/skills
cp -R "$tmp/skills/baoyu-design" .cline/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jimliu/baoyu-design --skill baoyu-design -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 6530033
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .roo/skills
cp -R "$tmp/skills/baoyu-design" .roo/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add jimliu/baoyu-design --skill baoyu-design -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 6530033
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jimliu/baoyu-design.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/baoyu-design/
git -C "$tmp" checkout 6530033592bf7fa58bc1a5a2a2ad278da45213a9
mkdir -p .agents/skills
cp -R "$tmp/skills/baoyu-design" .agents/skills/baoyu-designCommands for macOS and Linux, on Windows run them in Git Bash.
Install the skill: npx skills add JimLiu/baoyu-design, add the -g flag to install it for every project. Then describe the task in plain words and the skill activates itself.
Other ways from the author
npx skills add JimLiu/baoyu-designInstalls the skill into the current project and auto-detects the agent. Add -g to install for every project, or --agent claude-code or --agent cursor to target one explicitly.
Security check
How we reviewMedium riskWe rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
- Writes files into the project and starts a local preview server
- Runs the installer and helper scripts on Node.js
This is third-party code. Review the repository files before installing.
What it does
The skill brings the Claude Design methodology to a local agent so it produces design artifacts without visiting a website. The agent reads SKILL.md, loads the methodology from system-prompt.md, detects its harness (Claude Code, Cursor, Codex or another) and pulls only the built-in sub-skills it needs: hi-fi mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile screens, slides, documents and illustrations. Output is saved to a designs folder as self-contained HTML you can preview over localhost and edit by pointing at an element in the preview. It can import context from Figma files, GitHub repos and existing HTML or CSS, work against design systems, and export to PDF, PPTX and video.
Who it is for. For designers, product teams and developers who want mockups and prototypes right in the editor with a local agent.
Good fit when
- You need screen or landing layout variants without a separate service
- You need a working interactive prototype with state and transitions
- You need to build slides and export them to PowerPoint
- You need to bring a design from a Figma file or existing HTML into the project
Not a fit when
- You need production framework code rather than an HTML mockup
- You do not have a local file-capable agent at hand
Example request
Design three hi-fi variations of a settings screen for a meditation appLimitations
The skill is a long design brief, so the result depends heavily on the model; the author recommends Opus. It needs a local file-capable agent, Node.js for the installer and Python 3 for the local preview. PPTX export works after a one-time build of a local CLI with Playwright and Chromium. It is an independent project that repackages Claude Design and is not affiliated with Anthropic.
How to disable. Remove the baoyu-design folder from the agent's skills directory: .claude/skills/ for Claude Code or .agents/skills/ for Cursor and Codex, or the same folders under your home directory for a global install.
FAQ
Do I need a claude.ai/design subscription?
No. The skill runs on your local agent and model; no separate website subscription is required.
How do I edit the result?
The finished HTML opens over localhost. Point at an element in the agent's preview and say what to change, and the agent edits the source.
Related
SkillsOfficial Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys
README in short
The README presents baoyu-design as a port of the Claude Design engine into a portable Agent Skill for Cursor, Claude Code, Codex and other file-capable agents. The skill is built from Markdown plus a few JSX and JS scaffolds with no build step: SKILL.md drives the flow, system-prompt.md holds the methodology, and the built-in-skills and starter-components folders provide specialized sub-skills and ready-made screen and shell scaffolds. It covers install via npx skills, working against design systems, importing from Figma, GitHub and HTML, and export to PDF, PPTX and MP4. A separate section explains the local gen-pptx pipeline, which renders HTML in Chromium via Playwright and translates it into native PowerPoint. MIT license; the project is independent and not affiliated with Anthropic.
SKILL.md
--- name: baoyu-design description: >- Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks (a.k.a. PPT / PowerPoint presentations), documents and résumés, animations, 3D objects, research reports, HTML email, diagrams, fliers, and visual explorations. Use whenever the user asks to design, mock up, prototype, wireframe, visualize, explore, or make a PPT/deck for an interface, product screen, user flow, content layout, visual artifact, or pitch/deck concept, even if they do not say "design". Also use to export a deck built with this skill to PowerPoint (PPT/PPTX) — but only decks authored here (deck-stage / this skill's slide-structured HTML), NOT arbitrary HTML, so confirm the target is such a deck first. Also use for setting up, importing, or authoring reusable design systems, UI kits, brand tokens, or component libraries. Harness-agnostic for Claude Code, Cursor, Codex Agent, and similar file-capable agents. --- # Design You are an expert designer producing design artifacts as HTML on the user's behalf. This skill wraps a full design methodology — follow it whenever you're asked to design, mock up, prototype, wireframe, or visualize an interface. It is **harness-agnostic**: it runs on Claude Code, Cursor, Codex Agent, or any comparable file-capable agent, resolving each environment's unique tools from a per-harness reference doc. ## How to use this skill **1. Load the methodology.** Read [`system-prompt.md`](system-prompt.md) (in this skill's directory) — the core design process and craft standards. Follow it for the whole job. **2. Identify your harness and load its tool reference.** Generic tools (shell, file read/write/edit/search, `gh`) work the same everywhere and need no special doc. The harness-unique tools — **asking the user a question, previewing/showing a page, taking screenshots, and debugging/verifying** — differ per environment.