102.3K+Download
Skip to the usage guide
Baoyu Designby JimLiu

Baoyu Design Skill.

Use a file-based design workflow for prototypes, presentation concepts, and reusable visual systems.

  • Prototyping
  • Design Systems
  • Presentations
Download OpenDesignView Usage Guide
Source Review · Baoyu DesignSKILL.md
Task Prototyping Produces • Self-contained HTML design artifacts with copied assets • A project with recorded design-system bindings and asset metadata • Supported deck or animation exports when their dedicated workflows apply Before You Start A file-capable agent and the repository's methodology, built-in guides, reference documents, and scripts. Export and import paths have their own prerequisites.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Baoyu Design: Self-Contained HTML Artifacts

An HTML design orchestrator with artifact-specific recipes, design-system import and authoring paths, local preview, and carefully scoped export workflows.

Source-based workflowNot an execution benchmark

The Working Approach

Baoyu Design is a broad orchestration skill for producing HTML design artifacts. Its entry routes different deliverables—such as wireframes, app screens, diagrams, documents, and slides—to specialized built-in guides, while a shared methodology supplies the design process.

The distinguishing feature is explicit design context. It can route local Figma files, repository references, and existing HTML/CSS into import workflows, or bind a project to a copied design system. Deliverables remain grouped with their assets and project metadata instead of becoming disconnected HTML files. Export scope is specific: PowerPoint export applies to decks authored in its supported slide structure, not arbitrary HTML.

Expected Deliverables

  • Self-contained HTML design artifacts with copied assets
  • A project with recorded design-system bindings and asset metadata
  • Supported deck or animation exports when their dedicated workflows apply
See the Example Brief

From Brief to Review

  1. 01
    Establish the Context

    Identify the artifact type, fidelity, brand references, and any existing design system before choosing a recipe.

  2. 02
    Load the Right Path

    Follow the appropriate built-in guide and the tool reference for the agent environment, rather than assuming every environment has identical preview tools.

  3. 03
    Bind the Design System

    When using an existing system, import a project-local copy and record its binding. When authoring one, use the compile, check, and preview workflow.

  4. 04
    Build and Preview

    Keep HTML and referenced assets together, serve the result locally, and verify it in a real preview before calling it delivered.

02 When to Use It

When to Use It

A file-capable agent and the repository's methodology, built-in guides, reference documents, and scripts. Export and import paths have their own prerequisites.

A Good Fit

  • Explorable Design ConceptsSuitable for a file-based prototype or visual artifact that stakeholders can open and inspect.
  • Reusable System WorkThe entry has explicit routes for creating, importing, validating, and previewing design-system material.

Limits to Check

  • Export Is ScopedIts PowerPoint route is for supported decks authored with this skill, not a promise to convert any webpage into an editable presentation.
  • Entry Is an OrchestratorThe craft process and environment-specific tools live in additional files. A copied SKILL.md alone omits essential instructions.

Bring These Inputs

  • Artifact TypeSpecify whether the result is a wireframe, high-fidelity screen, deck, document, diagram, or another supported form.
  • Design ReferencesSupply the relevant brand, UI kit, local Figma file, HTML/CSS, or narrowly scoped repository reference.
  • Output ConstraintsState where the project belongs and whether a browser preview or a particular supported export is required.

03 Decisions That Matter

Decisions That Matter

  1. Design Context Travels

    Project-local system copies and metadata make the visual constraint explicit when work resumes.

  2. Artifact-Specific Rules

    Email, print-like documents, slides, and interactive screens follow distinct recipes rather than one generic webpage formula.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Obtain the complete baoyu-design directory rather than the entry file alone; preserve built-in-skills, agents, references, and starter components.

Upstream Source File
https://github.com/JimLiu/baoyu-design/blob/6530033592bf7fa58bc1a5a2a2ad278da45213a9/skills/baoyu-design/SKILL.md

A file-capable agent and the repository's methodology, built-in guides, reference documents, and scripts. Export and import paths have their own prerequisites.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use Baoyu Design to create a self-contained HTML prototype of an editorial reading app from the supplied HTML/CSS reference. Preserve its typography and color tokens, record the design-system binding, and make two realistic reading states. Keep assets local, preview over HTTP, and do not attempt a PowerPoint export.

Inspect the Result

Check the actual output against these observable criteria.

  • The artifact follows the supplied design context.
  • Referenced assets are inside the deliverable project.
  • The preview loads and the selected export scope is truthful.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
JimLiu
Repository
JimLiu/baoyu-design
Skill File
skills/baoyu-design/SKILL.md
License
MIT
Reviewed Snapshot
2026-10-07 · 6530033592bf
Editorial Source Summary
An HTML design orchestrator with artifact-specific recipes, design-system import and authoring paths, local preview, and carefully scoped export workflows.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it depend on a single coding agent?

It is not tied to one coding agent. The source describes a file-based workflow with separate tool references for supported environments.

Can it read a local Figma file?

The entry includes an offline .fig import route. Its detailed import guide and scripts are required for that workflow.

Can it export any HTML to PowerPoint?

No. The source explicitly limits deck export to its supported slide-structured HTML.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/JimLiu/baoyu-design/blob/6530033592bf7fa58bc1a5a2a2ad278da45213a9/skills/baoyu-design/SKILL.md