Repolode
Submit
JimLiu

JimLiu/baoyu-design

An Agent Skill that runs Claude Design locally in Cursor, Claude Code or similar agents to produce self-contained HTML mockups, prototypes and decks.

Open-source alternative to:Claude DesignFigma

View on GitHub
Stars
6,207
Forks
482
Open issues
0
Last commit
yesterday

What is it?

baoyu-design packages the Claude Design workflow from claude.ai/design as a portable Agent Skill that runs on a local coding agent such as Cursor, Claude Code or Codex. The agent asks clarifying questions, builds UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile screens and slide decks as self-contained HTML under a designs/ folder, and previews them on localhost.

The repo also includes four companion skills for editable artifacts: claude-slides for slide decks, claude-design for canvases of artboards, claude-design-system for design systems, and claude-dashboard for data-backed dashboards. Each opens in a local editor. Decks can be exported to PowerPoint, PDF or HTML, and design systems can be imported from Figma .fig files or component libraries.

The skill is plain Markdown and JSX/JS scaffolds with no build step, and it is installable through the npx skills CLI. The author notes that results are best with Claude Opus 5.5, and the project is not affiliated with Anthropic.

Key features

  • 01Generates UI mockups, prototypes, wireframes and landing pages as self-contained HTML.
  • 02Previews designs on localhost and lets you point at an element to request edits.
  • 03Exports decks to editable PowerPoint with native animations, or as screenshots.
  • 04Provides editors for slide decks, design canvases, design systems and dashboards.
  • 05Imports design sources from Figma .fig files, GitHub repos and existing HTML/CSS.
  • 06Installs via the npx skills CLI into Claude Code, Cursor and Codex.

Use cases

  • Mocking up a settings screen or onboarding flow inside your editor.
  • Turning a PRD or analytics CSV into a slide deck or dashboard.
  • Importing a Figma .fig kit and turning it into a reusable design system.
  • Creating landing pages and then exporting them as standalone HTML.

Quick start

  1. 1

    Install the skills into your project with the skills CLI

    npx skills add JimLiu/baoyu-design
  2. 2

    Describe a design task to your agent, e.g. a settings screen for a meditation app

  3. 3

    Start a local preview server for the generated designs

    python3 -m http.server 4311 --directory designs

Things to know

  • Best results need Claude Opus 5.5 as the model, which may require a paid subscription.
  • The artifact editors require Node.js 20+ (Node 22+ for the dashboard skill).

In collections

UI design skills for AI coding agentsClaude Code tools, skills & pluginsAI coding assistants & agentsAI agent skill libraries

Topics

#agent-skills#claude-code#cursor#ui-design#prototyping#html#design-system#slides#claude#claude-design

FAQ

What is baoyu-design?
An Agent Skill that runs Claude Design locally in Cursor, Claude Code or similar agents to produce self-contained HTML mockups, prototypes and decks. baoyu-design packages the Claude Design workflow from claude.ai/design as a portable Agent Skill that runs on a local coding agent such as Cursor, Claude Code or Codex. The agent asks clarifying questions, builds UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile screens and slide decks as self-contained HTML under a designs/ folder, and previews them on localhost.
Is baoyu-design free to use? What license does it have?
baoyu-design is open source under the MIT license. Check the license terms before using it in commercial products.
Is baoyu-design still maintained?
Actively maintained. The last commit to baoyu-design was on Nov 6, 2026.
What can I use baoyu-design for?
Mocking up a settings screen or onboarding flow inside your editor. Turning a PRD or analytics CSV into a slide deck or dashboard. Importing a Figma .fig kit and turning it into a reusable design system. Creating landing pages and then exporting them as standalone HTML.
How do I install baoyu-design?
Install the skills into your project with the skills CLI: npx skills add JimLiu/baoyu-design Describe a design task to your agent, e.g. a settings screen for a meditation app Start a local preview server for the generated designs: python3 -m http.server 4311 --directory designs
Where can I get baoyu-design?
The source code and installation instructions are on GitHub: https://github.com/JimLiu/baoyu-design

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects