Agent Skill

Baoyu Design skill

baoyu-designJimLiu/baoyu-designskills/baoyu-design/SKILL.md

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.

4.4kMIT

always on

231 tokname + description

once used

2,321 tokSKILL.md body

bundled files

17789 scripts

repo stars

4.4kGitHub

Install the Baoyu Design skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/JimLiu/baoyu-design --skill baoyu-design

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/JimLiu/baoyu-design.git /tmp/baoyu-design
mkdir -p ~/.claude/skills
cp -R /tmp/baoyu-design/skills/baoyu-design ~/.claude/skills/baoyu-design

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

When	What loads	Cost
Every session	Name and description	231 tok
When the agent uses it	The SKILL.md instructions	2,321 tok
Only if opened	177 bundled files (2.2 MB)	varies

Until it is used, baoyu-design costs about 5.9× less than the median MCP server we measured (1,363 tokens on every turn). Installing all 2 skills from JimLiu/baoyu-design would load 318 tokens of descriptions. Skills vs MCP study

Checks

Ships scripts the agent can run. Read them before installing.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

Design
How to use this skill
Notes