Run Claude Design Locally in Your Coding Agent

claude.ai/design produces some of the best agent-drawn UI mockups around, but the work lives on a website, away from your repo. baoyu-design repackages that design engine as a portable Agent Skill, so your local agent produces the same kind of output — and every artifact stays in your project as self-contained HTML.

Why This Skill Matters

The skill is a community repackaging, maintained by Jim Liu (宝玉), of Claude Design — the design engine behind claude.ai/design — and the README states it is not affiliated with or endorsed by Anthropic. What you get locally covers most of the website's ground: polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks. Because the deliverable is plain HTML served on localhost, you iterate by pointing: click an element in your agent's live preview, say what to change, and the agent edits the underlying source — a tight visual second pass that is hard to get on a website. The README recommends pairing it with Claude Opus 4.8 for the best output.

Installation

The README's recommended path is the skills CLI from Vercel Labs, which detects your agent and drops the skill into the right folder:

# Install into the current project (auto-detects your agent)
npx skills add JimLiu/baoyu-design

# …or install globally, for every project
npx skills add JimLiu/baoyu-design -g

# Target a specific agent explicitly
npx skills add JimLiu/baoyu-design --agent claude-code

It installs to .claude/skills/ for Claude Code and .agents/skills/ for Cursor/Codex-style agents. You need Node.js for the installer; Python 3 is handy for the preview server. Updates go through the same CLI:

npx skills update baoyu-design -g -y

After updating, restart Claude Code or start a new agent session so the refreshed files load. A one-off alternative needs no install at all: paste the repo URL into chat and ask the agent to follow skills/baoyu-design/SKILL.md.

Real Workflow: Design a Settings Screen

1. Describe the task in plain language — the skill auto-activates from its description. In Claude Code you can also trigger it explicitly with /baoyu-design; in Codex, mention $baoyu-design.

为冥想 App 设计一个设置页的 3 个高保真方案。

2. The agent asks a few clarifying questions, loads its design methodology, and builds the HTML under designs/<project>/, then previews it over localhost.
3. Open the preview in your agent's browser tools (Cursor Browser / DevTools, Claude Preview, or Codex Browser), point at any element, and say what to change — the agent edits the source for a fast second pass. The agent normally starts the preview server for you; to run it by hand:

python3 -m http.server 4311 --directory designs

Decks deserve their own run: ask for a 10-slide deck from a PRD and the skill builds it as a self-contained HTML page with a deck stage. Slide elements can carry data-anim build animations, and asking to "export this to PPTX" produces an editable PowerPoint — the animations arrive as native PowerPoint animations, not baked pixels. That export runs a local CLI driving headless Chromium, which needs a one-time build in Claude Code before first use.

Tips

• Give it design context — a screenshot, a UI kit, a Figma .fig export, or a codebase. The README calls starting from real context the single biggest lever on quality, and the skill will ask for it if you don't provide it.
• Figma imports decode .fig files fully offline: no Figma account, API token, or MCP server involved.
• Design systems work as a binding contract: once a project binds one, the agent builds from the system's real tokens and components and won't invent off-system colors.
• Starter components save hand-rolling the basics — device and browser shells, a design canvas, deck and chart stages, a tweaks panel.
• Export routes cover standalone HTML, PDF, editable or screenshot PPTX, MP4 video, and handoff targets like Figma and Canva.

When Not to Use This

This is a community repackaging, not Anthropic's product — if you want the official hosted experience with its built-in tools, claude.ai/design is the source it repackages. Weak models will struggle: the README describes the skill as a long, demanding design brief and recommends Opus 4.8. And multi-file prototypes preview over HTTP, not file://, so plan on the preview server even for quick looks.

See the leaderboard for more skills.