← all repositories
JimLiu/baoyu-design

Claude Design, but you actually own the files

A community repackaging of Anthropic's design engine that runs inside Cursor, Claude Code, or Codex instead of a browser tab.

526 stars JavaScript Coding AssistantsCreative · Design
baoyu-design
Velocity · 7d
+239
★ / day
Trend
steady
collecting data…
star history

What it does

baoyu-design is a portable “Agent Skill” — basically a fat stack of Markdown prompts and HTML scaffolds — that teaches your local coding agent to act like claude.ai/design. You describe a UI, wireframe, prototype, or slide deck in plain language; the agent asks clarifying questions, then spits out self-contained HTML under designs/<project>/. No subscription, no upload dance, no vendor lock-in.

The interesting bit

The clever part isn’t the design methodology (that’s Anthropic’s work, repackaged with permission). It’s the harness abstraction: the skill detects whether it’s running in Cursor, Claude Code, Codex, or something else, then loads the right tool map for previewing, screenshotting, and element annotation. Same craft rules, but your editor’s native browser/devtools become the design surface. Point at a button in the live preview, say “rounder corners,” and the agent edits the source — a tight visual loop that’s awkward in a web app.

Key highlights

  • 24 built-in sub-skills: hi-fi mockups, interactive prototypes, wireframes, decks (with speaker notes), mobile prototypes, animated videos, design systems, and exports to PDF/PPTX/Figma/Canva
  • Starter components save the agent from reinventing basics: iOS/Android/macOS frames, pan-zoom canvas, slide-deck stage, timeline animation engine, tweakable controls panel
  • Two install paths: npx skills add JimLiu/baoyu-design (auto-detects agent) or just paste the repo URL into chat for a one-off
  • Output is plain HTML you can version, fork, or ship; previewed over localhost so multi-file prototypes actually work
  • Explicitly optimized for Claude Opus 4.8; runs on other capable models with degraded results

Caveats

  • The README admits this is “a long, demanding design brief” — weaker models will struggle
  • Multi-file prototypes need a local HTTP server; file:// won’t cut it
  • Community effort, not affiliated with Anthropic; future drift with the official Claude Design is possible

Verdict

Worth a look if you live in Cursor/Claude Code already and want design artifacts that live in your repo, not someone else’s cloud. Skip it if you prefer point-and-click tools or your agent setup is underpowered.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.