baoyu-design: A Claude Code UI Mockup Generator That Skips the Website
baoyu-design packages Anthropic's Claude Design methodology as a portable Agent Skill, so Cursor, Claude Code, and similar tools can produce real HTML mockups and prototypes locally instead of text descriptions of one.
Most AI design tools hand back a paragraph describing a layout, or a static image that someone still has to rebuild by hand. A claude code UI mockup generator called baoyu-design skips that step entirely. It runs as an Agent Skill inside Cursor, Claude Code, and about 70 other file-capable agents, and it produces working HTML you can open in a browser, click through, and hand to a developer as-is.
The repo is built by developer JimLiu and sits at github.com/JimLiu/baoyu-design. As of today it has 3,402 stars and 245 forks, MIT licensed, actively updated (last commit within the past day).
What "Claude Design" actually is here
The name is easy to misread, so it's worth being precise. Claude Design is a real Anthropic Labs product: an interactive visual generator built into the Design tab at claude.ai, powered by Claude Opus, available in research preview to Pro, Max, Team, and Enterprise subscribers. It reads a codebase or Figma file, extracts a design system, and produces live, editable HTML.
baoyu-design is not that product. It is an independent, community project that repackages the same design methodology and craft standards as a Markdown-based Agent Skill you install locally. The README states plainly that it is "not affiliated with or endorsed by Anthropic." What it gives you is the underlying approach, not the hosted claude.ai/design service, and it works through whatever agent and model you already have running, most effective with Opus-class models.
What it produces
Output is self-contained HTML, served over localhost rather than opened directly as a file (multi-file prototypes need a real HTTP server, which the skill spins up for you). Beyond flat mockups, the built-in skill library covers hi-fi UI screens, interactive prototypes, wireframes, landing pages, dashboards, mobile app screens, slide decks with speaker notes, data visualizations, simple 3D objects, and watercolor-style illustration.
There is no Figma output in the strict sense, no native React components, and no design-file format you'd hand to a design team expecting .fig or .sketch. Export paths include PDF, editable and screenshot PPTX, MP4 video, and a "send to Figma" or "send to Canva" step, plus a direct handoff into Claude Code for a developer to take over. The core deliverable, though, is HTML, and the workflow assumes you'll keep iterating on that HTML rather than exporting away from it.
How the editing loop works
The interesting part is not generation, it's revision. Because the output is plain HTML running on localhost, you can point at a specific element in the live preview inside your agent's browser tools and describe the change, rather than typing a paragraph of instructions and hoping the model finds the right div. The agent edits the underlying source directly. That point-and-describe loop is the main thing this buys over asking a model to just write you some HTML in chat.
Installing it
Setup runs through the skills CLI from Vercel Labs:
npx skills add JimLiu/baoyu-design
This detects your agent and drops the skill into .claude/skills/ for Claude Code, or .agents/skills/ for Cursor and Codex-style tools. A -g flag installs it globally instead of per-project. From there, describing a design task in plain language triggers it automatically, or it can be called explicitly with /baoyu-design in Claude Code. Output lands under designs/<project>/ in your own repo, so nothing lives on a third-party server.
Where this earns its place
The realistic use case is early-stage iteration: a campaign landing page that needs three visual directions before a stakeholder call, a settings screen mockup to argue over before a developer touches real code, a quick dashboard layout to test an information hierarchy. For that kind of throwaway or fast-follow work, having a clickable HTML prototype in minutes beats waiting on a designer's queue or hand-coding a rough draft yourself.
It is not a replacement for a real designer on production work. The output leans on generic component patterns and whatever visual sense the underlying model has, not a brand's actual design system unless you feed it one explicitly through the "use design system" built-in skill. Consistency across a large multi-screen product, accessibility auditing, motion polish, and the judgment calls a senior designer makes about what to leave out are still outside what this tool does well. Treat it as a fast first draft generator, not a finishing tool. The line is roughly: use it to get from nothing to something you can react to, then bring in a designer once the direction is worth polishing.
Not the same thing as scroll-world
AIOS Guide has previously covered scroll-world, which generates AI-driven 3D scroll landing pages, a more elaborate and animation-heavy medium. baoyu-design is the opposite end of that spectrum: standard 2D UI mockups and prototypes, closer to what a product designer would sketch in Figma than to a cinematic scroll experience. If the goal is a flat screen or a simple clickable flow, this is the simpler, faster tool. If the goal is an immersive scroll-driven site, scroll-world is the better fit.
The bottom line
baoyu-design is a legitimate, actively maintained open-source project with real traction, and it is honest in its own documentation about not being an official Anthropic release. For anyone running campaign pages or product screens through Claude Code or Cursor already, it turns a text-only design conversation into something you can actually click through, at the cost of the polish a dedicated designer still brings to anything shipping in front of customers.
Join the newsletter
AI workflows and systems, straight to your inbox.
No spam. Unsubscribe anytime.