baoyu-design

What It Does

baoyu-design is a doc-only agent skill that repackages the Claude Design methodology (the design engine behind claude.ai/design) into a portable format for local coding agents including Cursor, Claude Code, and Codex Agent. When an agent loads the skill, it reads a 257-line design methodology prompt, detects which agent harness it is running in, loads the matching tool reference doc, and then follows a structured design process: clarifying questions, design-context gathering, HTML artifact production, preview over localhost, and iterative verification. The skill ships 24 specialized sub-skill prompts (hi-fi design, wireframe, deck creation, mobile prototype, PPTX export, and more) and 9 ready-made JSX/JS scaffolds (device frames, deck stage, animation engine, design canvas). All output is self-contained HTML, written to a designs/ folder in the working directory.

The Good

Extraordinary content depth for a day-one repo. The skill contains 6,502 lines across 38 files: a 257-line core methodology, 24 built-in sub-skill prompts (5 to 101 lines each), 3 harness reference docs (60 to 101 lines each), and 9 starter component scaffolds (123 to 1,762 lines). The deck-stage.js scaffold alone is 1,762 lines of production-quality JavaScript. This is not a thin wrapper around an API. It is a complete design system encoded as agent instructions.

Perfect cross-reference integrity. All 28 internal file references in SKILL.md and system-prompt.md resolve to existing files. All 24 built-in skills have valid YAML frontmatter with name and description fields. All 9 starter components exist and are non-empty. Not a single broken link or missing file.

Harness-agnostic architecture with per-platform adapters. The skill separates its core design methodology (harness-independent) from tool-specific instructions via three reference docs: references/claude.md (60 lines), references/cursor.md (101 lines), and references/codex.md (82 lines). Each maps abstract operations ("ask the user", "preview", "screenshot") to concrete tool calls in that environment, including gotchas like React onClick delegation quirks in Claude Preview MCP. This multi-platform design is rare among agent skills.

The 24 built-in skills cover the full design lifecycle. From initial exploration (wireframe, hi-fi design) through production (interactive prototype, mobile prototype, animated video) to export (PDF, PPTX editable, PPTX screenshots, standalone HTML, Figma, Canva) and handoff (developer handoff package). The standalone HTML export skill alone is 101 lines of detailed bundler instructions with code examples. This breadth means a single skill can handle most design requests without the agent reaching for external resources.

Anti-slop guardrails baked into the methodology. The system prompt includes explicit rules against AI design tropes: "avoid aggressive use of gradient backgrounds, emoji, containers with rounded corners and left-border accent color, overused font families (Inter, Roboto, Arial, Fraunces)." It also mandates no filler content, no placeholder text, and "one thousand no's for every yes." These constraints produce noticeably better output than an unguided agent.

The Bad

The recommended npx skills add installer fails. Running npx skills add JimLiu/baoyu-design --list or npx skills add JimLiu/baoyu-design -a claude-code -y with skills CLI v1.5.10 returns "No valid skills found. Skills require a SKILL.md with name and description." The SKILL.md has both fields, but the multi-line description (817 characters, spanning a single long line) may exceed the CLI's parsing expectations. Manual file copy works, but the README prominently recommends the CLI installer as the primary method. This is the first thing a new user will try, and it fails.

Single-commit repo with no tagged releases. The entire repository was pushed in one commit on June 7, 2026. There are no git tags, no npm publish history, and no CI configuration. The skill has no track record of responding to bugs, accepting contributions, or shipping updates. The content is strong today, but there is no evidence the author will maintain it. Users who build workflows around this skill have no guarantee of stability.

No version identifier. The LICENSE says "2026" and the CHANGELOG has an "Unreleased" section, but there is no version tag, no package.json with a version field, and no npm package. The Version field in this review is "unreleased (initial commit)" because there is nothing else to cite. This makes it impossible to pin or compare versions.

Oversized SKILL.md description field. The frontmatter description is a single 817-character line that covers every possible trigger phrase. This may cause parsing issues with tooling that expects shorter descriptions. The Vercel skills CLI is one confirmed casualty. Other skill installers or registries may have similar truncation or parsing limits.

Smoke Test Results

Host-based structural validation on macOS aarch64. The skill is doc-only with no executable component, so the smoke test focuses on file integrity, frontmatter validation, and cross-reference resolution.

Structural validation

$ find skills -type f -not -name ".DS_Store" | wc -l
38
✅ 38 files found (29 markdown, 9 JSX/JS code scaffolds)

$ grep -c "^name:" skills/baoyu-design/built-in-skills/*.md | grep -v ":1$"
(empty)
✅ All 24 built-in skills have frontmatter name field

$ grep -c "^description:" skills/baoyu-design/built-in-skills/*.md | grep -v ":1$"
(empty)
✅ All 24 built-in skills have frontmatter description field

$ # Cross-reference resolution
$ for f in system-prompt.md references/claude.md ... ; do
 [ -f "skills/baoyu-design/$f" ] && echo "OK: $f" || echo "MISSING: $f"
 done
OK: system-prompt.md
OK: references/claude.md
OK: references/cursor.md
OK: references/codex.md
... (28 refs total)
✅ 28/28 cross-references resolve

$ # Installer test
$ npx skills add JimLiu/baoyu-design --list
❌ "No valid skills found. Skills require a SKILL.md with name and description."

$ # Manual install
$ cp -r skills/baoyu-design ~/.claude/skills/
✅ Files copied, structure intact

$ # README claim check
README says: "24 built-in skills"
Actual count: 24
✅ Claim matches reality

Pass rate: 5 of 6. The single failure is the npx skills CLI installer, which is the documented primary install method.

What the runs tell you

The skill's file structure is pristine: every referenced file exists, every built-in skill has valid frontmatter, and the README's claim of 24 built-in skills matches the actual file count. The only structural issue is the CLI installer incompatibility, which forces users to the manual copy method. For a doc-only skill, structural integrity is the primary quality signal, and baoyu-design passes every check except the installer.

Setup Walkthrough

1. Clone the repo: git clone --depth 1 https://github.com/JimLiu/baoyu-design.git
2. Copy the skill folder to your agent's skills directory. For Claude Code: cp -r baoyu-design/skills/baoyu-design ~/.claude/skills/. For Cursor or Codex: cp -r baoyu-design/skills/baoyu-design .agents/skills/ (project-level) or ~/ for global.
3. Start a new agent session and describe a design task in plain language. The skill auto-activates from its description field.
4. Optional: start a preview server for HTML output: python3 -m http.server 4311 --directory designs.

Note: the npx skills add JimLiu/baoyu-design command documented in the README fails with skills CLI v1.5.10. Use the manual copy method above.

Alternatives

1. claude.ai/design (Anthropic, hosted) - the original that baoyu-design repackages. Full server-side design tools, asset management, and sharing. Requires a web browser and Claude subscription. Use when you want the complete experience with no setup.
2. anthropics/skills (147,354 stars, agent skill pack) - includes frontend-design and pptx skills among its collection. Lighter weight per skill, but no design-specific methodology prompt or starter components. Use when you want a general agent skill pack rather than a dedicated design tool.
3. op7418/guizang-ppt-skill (15,437 stars) - focused specifically on HTML slide/presentation generation. Narrower scope than baoyu-design (decks only, not prototypes or design systems) but mature and widely used.