Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
jimliu avatar

Baoyu Design

  • 3.5k installs
  • 2.9k repo stars
  • Updated July 26, 2026
  • jimliu/baoyu-design

baoyu-design is an agent skill that authors, compiles, checks, and previews portable design systems with token CSS, components, and self-contained HTML exports.

About

baoyu-design is a portable design system authoring skill built around generated artifacts rather than hand-edited bundles. Authors maintain token CSS such as styles.css, PascalCase component .d.ts and .jsx pairs, and @dsCard-tagged HTML cards, then regenerate _ds_bundle.js, _ds_manifest.json, _adherence.oxlintrc.json, and preview.html through node agents/compile-design-system.mjs. The read-only check-design-system.mjs reports namespace, components, cards, starting points, tokens, fonts, and issues without writing files. build-preview.mjs compiles a design system directory into one self-contained interactive preview.html using Shadow DOM card isolation, scaled card frames, and optional offline vendor assets. Built-in sub-skills cover create-design-system, design-system-preview, mobile prototypes, animated video, PPTX export, and fork verification workflows. Starting points and @dsCard groups control what consuming projects see in pickers. Developers invoke it when creating UI kits, compiling component libraries, validating token coverage, or exporting standalone previews from a design system repo.

  • Compiles portable design systems via compile-design-system.mjs into _ds_bundle.js and _ds_manifest.json artifacts.
  • Uses @dsCard HTML comments and optional @startingPoint tags to expose cards and picker entry points.
  • Provides read-only check-design-system.mjs validation that reports tokens, fonts, components, and issues.
  • build-preview.mjs emits one self-contained preview.html with Shadow DOM isolated cards and scaled layouts.
  • Treats _ds_bundle.js, _ds_manifest.json, and preview.html as generated outputs that must not be hand-edited.

Baoyu Design by the numbers

  • 3,466 all-time installs (skills.sh)
  • +311 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #101 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

baoyu-design capabilities & compatibility

Capabilities
design system compile pipeline · read only design system validation · self contained preview.html generation
Use cases
ui design · frontend · documentation
From the docs

What baoyu-design says it does

_ds_bundle.js`, `_ds_manifest.json`, `_adherence.oxlintrc.json`, and `preview.html` are **generated artifacts** — never hand-edit them.
create-design-system.md
put `<!-- @dsCard group="<Group>" viewport="<WxH>" name="<Label>" subtitle="…" -->` as the **first line** of any `.html`.
create-design-system.md
npx skills add https://github.com/jimliu/baoyu-design --skill baoyu-design

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs3.5k
repo stars2.9k
Last updatedJuly 26, 2026
Repositoryjimliu/baoyu-design

How do I build and validate a portable design system with compiled bundles, token coverage, and an interactive preview consumers can browse?

Author portable design systems with token CSS, React components, @dsCard previews, compile/check scripts, and self-contained preview.html exports.

Who is it for?

Design system authors maintaining token CSS, React components, and generated bundle or preview artifacts for consuming projects.

Skip if: Skip when you only need a one-off landing page mock without a reusable component library or compile/check workflow.

When should I use this skill?

User asks to create a design system, compile components, run the design-system checker, or export an interactive preview.html.

What you get

Regenerated bundle and manifest files, a validation report, and optionally a self-contained preview.html showcasing grouped @dsCard components.

  • Compiled _ds_bundle.js and manifest
  • Validation report
  • Self-contained preview.html

Files

SKILL.mdMarkdownGitHub ↗

Bud1�ter-costarter-componentsvSrnlong  @� @� @� @

Related skills

How it compares

Portable design system compile and preview pipeline, not a single static mockup generator.

FAQ

Which files are generated and should not be hand-edited?

_ds_bundle.js, _ds_manifest.json, _adherence.oxlintrc.json, and preview.html are generated artifacts.

How are design system cards exposed?

Add <!-- @dsCard group="..." viewport="WxH" name="..." --> as the first line of an HTML file; optional @startingPoint tags opt components into pickers.

How do I validate a design system without writing files?

Run node agents/check-design-system.mjs on the project directory; it reports components, tokens, fonts, and issues read-only.

Design & UI/UXuibranding

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.