What is the baoyu-design skill?
The baoyu-design skill is a folder in the JimLiu/baoyu-design repository. Its SKILL.md routes a design request to a methodology file, a per-agent tool reference and a built-in recipe, then the agent builds self-contained HTML under a designs folder and previews it on localhost. It makes HTML artifacts, not WordPress pages.
The baoyu-design skill is a folder in the JimLiu/baoyu-design repository that turns a file-capable coding agent into a design tool. Its SKILL.md routes each request to a methodology file and a built-in recipe, and the output is plain HTML.
The README describes it as plain Markdown plus a few JSX and JS scaffolds, with no build step and no runtime. Everything it makes lands in a designs folder in your repo as self-contained HTML you can version or ship.
How one design request flows
- The agent reads SKILL.md, then loads system-prompt.md, the core design process and craft standards.
- It detects which agent harness it is running in and reads the matching tool reference once.
- It asks clarifying questions about design context, fidelity and how many variations to explore.
- It asks where to save, defaulting to designs/<project>/, and which design systems the project should use.
- It builds the HTML, serves it over HTTP, previews it and fixes any load errors.
What it can make
- Core design: hi-fi design, interactive prototypes, wireframes and frontend aesthetic direction.
- Slide decks with speaker notes, plus an editable PowerPoint export for decks built by the skill.
- Mobile prototypes and animated video, with a render path to MP4.
- Websites, landing pages, social content, HTML email, fliers and trifold brochures.
- Data and research: charts, maps and geography, and web research with cited sources.
- Documents, resumes, 3D objects and watercolor illustration.
Who the baoyu-design skill is for
Best for
- Designers and developers who want mockups, prototypes and decks produced inside the editor they already use.
- Iterating by pointing at an element in a live localhost preview and saying what to change.
- Projects that must follow one design system, imported as a version-pinned copy under a _ds folder and treated as a binding visual contract.
Not for
- Producing WordPress pages or theme code. The deliverable is static HTML. See also frontend-design.
- Lightweight model setups. The README calls the skill a long, demanding design brief and recommends a strong model for best output.
- Agents that cannot write files, serve a folder and open a preview.
Use it with UiChemy
This skill outputs static HTML, not a WordPress page. To carry a design into WordPress, bring the result into UiChemy: AI to WordPress takes an AI build, and Figma to WordPress takes Figma frames. Click Get Started on uichemy.com.
Before you convert, tighten the source design. See also wireframe-spec, design-token and design-system-patterns.
How to install Baoyu Design Skill: HTML Mockups, Prototypes and Decks
npx skillsRun the skills CLI
Run
npx skillswith its add command pointed at JimLiu/baoyu-design. Add -g for a global install, or --agent with claude-code, cursor or codex to target one agent. The skill is the skills/baoyu-design folder, with SKILL.md, system-prompt.md, references, built-in-skills and starter-components inside.Check where it landed
The README says the CLI installs to
.claude/skills/for Claude Code and.agents/skills/for Cursor and Codex style agents, with -g for the home folder.Pick a strong model
The README recommends Opus 4.8 for the best output and says the skill still works on other capable models. It lists Node.js as a prerequisite to run the npx skills installer and Python 3 as handy for previews.
Start a design task
Describe the work in plain language and the skill activates from its description. In Claude Code you can call it with /baoyu-design. In Codex, mention $baoyu-design when skills are available.
Preview by hand if needed
The agent normally starts the server. To run it yourself, use
python3 -m http.server 4311 --directory designsand open the project file on localhost port 4311.
Check that it loaded
Ask for three hi-fi variations of a settings screen. The agent should ask clarifying questions, ask where to save and which design system to use, build HTML under designs/ and preview it on localhost.
Key features
- A single methodology filesystem-prompt.md holds the design process and craft standards for the whole job. Per-agent files only say which tools to call, so the craft rules stay the same in every harness.
- Tool references per harnessDedicated reference docs for Cursor, Codex Agent and a third first-class harness, one file each, cover asking questions, previewing, screenshots and verifying. Other file-capable agents use a generic workflow in system-prompt.md.
- 13 project typesA routing table in project-types.json covers Slides, Mobile app design, Wireframe, Document, Animation, UI mockups, Resume, 3D object, Research, HTML email, Color and type system, Diagram and Flier.
- Built-in skills libraryA built-in-skills folder holds recipes such as wireframe, hi-fi design, interactive prototype, make a deck, animated video, data visualization and HTML email. The agent reads only the ones the task needs.
- Starter componentsDevice, browser and social-media shells, a pan-zoom design canvas, slide, animation, chart, document, file and 3D stages, a tweaks panel and a fillable image slot save the agent from hand-rolling basics.
- Design system bindingA chosen system is copied into _ds/<slug>/ and recorded in _d_meta.json. With several systems, one becomes primary and wins any token collision while the others lend components.
- Offline Figma file importA vendored decoder reads a local Figma .fig file on your machine, with no Figma account, API token or MCP server. It can pull components as React code or emit a whole design system.
- GitHub and HTML importsFor a GitHub repo as design source, the agent browses with gh api and sparse-checks out only needed paths into a scratch folder. For HTML and CSS, it reads real stylesheets and lifts exact values.
- Deck animations that exportSlide elements take data-anim attributes with click, with or after triggers, which map to PowerPoint On Click, With Previous and After Previous. Path animations use line and cubic Bezier segments.
- Live preview loopOutput is served over localhost so the agent's browser preview and element-annotation tools can point at a button and edit its source. In a deck, the F key presents full screen.
Frequently asked questions
What is the baoyu-design skill?
It is an agent skill in the JimLiu/baoyu-design repository that makes a local coding agent produce UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile screens and slide decks as self-contained HTML. The agent follows a bundled design methodology and previews the result on localhost.
How do I install baoyu-design?
Run the skills CLI add command pointed at JimLiu/baoyu-design. The README says it installs to .claude/skills/ or .agents/skills/ depending on the agent. Then describe a design task in plain language. After a later update, restart the agent session so the refreshed skill loads.
Which AI coding agents does baoyu-design work with?
The README names Cursor, Claude Code, Codex and any file-capable agent, and says it supports 70 or more agents through its installer. Cursor, Claude Code and Codex have first-class tool references inside the skill. Other agents use a generic workflow described in system-prompt.md.
Does baoyu-design export to PowerPoint?
Yes, for decks the skill itself built. The skill says to confirm the target is a deck authored with it, not arbitrary HTML, and defaults to an editable export where data-anim animations stay as native builds. A screenshot-based export exists for pixel-perfect, non-editable slides.
Can baoyu-design use my Figma file or design system?
It can read a local Figma .fig file offline with a vendored decoder, so no Figma account, token or MCP server is needed. It can also import a GitHub repo, existing HTML and CSS, or a design system, and then follow that system as a binding visual constraint.
Where does baoyu-design save its output?
It asks where to save and defaults to designs/<descriptive-project-name>/. Deliverables and copied assets stay inside that project folder as self-contained HTML. SKILL.md says never to scatter design files in the repo root, and the README says the output is yours.
How is baoyu-design different from frontend-design?
frontend-design is a separate skill with its own page. Baoyu-design covers decks, documents, wireframes, email, 3D and exports, and it previews and verifies HTML artifacts on localhost. Use the one that matches the deliverable.
What license does baoyu-design use?
The repository metadata lists the MIT license, and the README shows an MIT badge. The README also states it is Best with Opus 4.8. As with any skill folder, re-check the repository before redistributing it inside a product.