whatisgithub

What is baoyu-design?

jimliu/baoyu-design — explained in plain English

Analysis updated 2026-05-18

90JavaScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

In one sentence

An Agent Skill that brings claude.ai/design's UI mockup and prototype generation into local coding tools like Cursor and Claude Code, producing self-contained HTML output.

Mindmap

mindmap
  root((baoyu-design))
    What it does
      Local design skill
      Mirrors claude.ai/design
      Outputs self-contained HTML
    Tech stack
      JavaScript scaffolds
      Markdown skill files
      Node.js installer
    Use cases
      UI mockups and wireframes
      Interactive prototypes
      Slide decks and exports
    Audience
      Vibe coders
      Cursor and Claude Code users
      Designers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Generate a UI mockup or landing page as HTML without leaving your coding agent.

USE CASE 2

Build an interactive prototype or slide deck for a client pitch from a plain language description.

USE CASE 3

Iterate on a design by pointing at elements in a local browser preview and asking the agent to edit them.

USE CASE 4

Export a finished design as PDF, PPTX, or hand it off to Figma or Claude Code for implementation.

What is it built with?

JavaScriptMarkdownNode.jsHTML

How does it compare?

jimliu/baoyu-designvinayaklatthe/microsoft-security-skillscocktailpeanut/image-to-prompt
Stars908893
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasymoderate
Complexity2/52/53/5
Audiencevibe coderops devopsvibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Requires Node.js for the npx installer and works best with Claude Opus 4.8 selected as the model.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

baoyu-design is an agent skill that packages the design capabilities of claude.ai/design so you can use them inside local AI coding tools like Cursor, Claude Code, and Codex, without visiting the website. It produces UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile app screens, and slide decks, all as self-contained HTML files that live in your project folder. The skill works by giving the AI agent a detailed design methodology document and a set of specialized sub-skills covering 24 different output types. These include high-fidelity designs, interactive prototypes, wireframes, mobile prototypes, animated videos, speaker note documents, design system components, PDF export, PPTX export, and handoff files for tools like Figma. The agent reads these instruction files, asks clarifying questions, and then produces the requested output. Starter component files are included for common UI frames like iOS, Android, macOS windows, and browser shells, so the agent does not need to build those from scratch each time. Because the output is plain HTML served locally, you can open a browser preview inside your editor, point at elements you want changed, and ask the agent to edit them directly. This makes revisions faster than working on a website where you describe changes in text alone. Installation uses a command-line tool called npx skills that detects which AI coding agent you are using and places the skill files in the correct folder automatically. It can be installed per-project or globally. An alternative is to paste the GitHub URL directly into a chat with your agent and let it fetch the skill itself for one-off use. The README recommends pairing the skill with Claude Opus 4.8 for the best results, noting that the design methodology document is long and detailed and benefits from a capable model. It is described as working on other capable models as well. All output lands in a designs folder in your repository as files you own and can version or modify freely.

Copy-paste prompts

Prompt 1
Install baoyu-design into my current project using npx skills and detect my agent automatically.
Prompt 2
Build a settings screen for a meditation app using the baoyu-design skill.
Prompt 3
Use baoyu-design to create a wireframe and then an interactive prototype for a dashboard.
Prompt 4
Generate a slide deck with speaker notes for a product pitch using baoyu-design.
Prompt 5
Export my current baoyu-design HTML output to PPTX for editing in PowerPoint.

Frequently asked questions

What is baoyu-design?

An Agent Skill that brings claude.ai/design's UI mockup and prototype generation into local coding tools like Cursor and Claude Code, producing self-contained HTML output.

What language is baoyu-design written in?

Mainly JavaScript. The stack also includes JavaScript, Markdown, Node.js.

What license does baoyu-design use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is baoyu-design to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is baoyu-design for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.