← All Skills
🎨
baoyu-design (Claude Design Skill)
Packages Claude Design — the design engine behind claude.ai/design — as a portable Agent Skill. Drop it into Claude Code, Cursor or Codex and produce polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards and slide decks right in your editor, all as self-contained HTML that stays in your repo — no website, subscription or upload.
Key Features
- Run Claude Design locally
- Self-contained HTML output
- Prototypes, wireframes, decks
- Point-and-edit live preview
Installation
npx skills add JimLiu/baoyu-design
Add -g for a global install; lands in .claude/skills (Claude Code) or .agents/skills. Or just paste the repo URL and have the agent follow its SKILL.md.
How to Use
After install, describe your design task in plain language, e.g. "Design 3 hi-fi variations of a settings screen for a meditation app." In Claude Code trigger it explicitly with /baoyu-design. The agent asks clarifying questions, builds HTML under designs/ and previews over localhost; point at elements in the live preview to request changes for a visual editing loop. Best with Claude Opus 4.8.
Requirements
A local agent (Cursor / Claude Code / Codex, etc.) + Node.js for the installer; Python 3 for the preview server; Claude Opus 4.8 recommended.
Related Skills