Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, wi
Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, wi
Run Claude Design on your own local agent — Cursor, Claude Code, Claude Desktop, or any file‑capable coding agent.
baoyu-design packages Claude Design — the design engine behind claude.ai/design — as a portable Agent Skill. Drop it into a local agent and you get most of what the website does, right inside your editor: polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks — all produced as self‑contained HTML.
No website, no separate subscription, no upload step. The agent already on your machine does the work, and every artifact stays in your repo.
The same Reader Mac App prompt was used in Cursor, Codex, Claude, and Claude Design.
| Cursor | Codex | Claude | Claude Design |
|---|---|---|---|
…
claude.ai/design's capabilities without ever leaving your editor — same methodology, same craft standards, same output format.localhost, you can lean on your agent's built‑in browser preview and element‑annotation tools (Cursor Browser / DevTools, Claude Preview, or Codex Browser). Point at a button in the live preview, say what you want changed, and the agent edits the underlying source — a tight, visual second‑pass editing loop that's hard to get on a website.designs/<project>/ as self‑contained HTML you can version, fork, export, or ship.The skill drives a full design process — clarifying questions → gathering design context → producing one or more HTML deliverables → previewing and verifying. It ships a deep bench of built‑in skills and a set of ready‑made component scaffolds.
| Area | Built‑in skills |
|---|---|
| Core design | Hi‑fi design · Interactive prototype · Wireframe · Frontend aesthetic direction |
| Decks | Make a deck · Speaker notes |
| Mobile & motion | Mobile prototype · Animated video · Sound effects |
| Web & campaigns | Website & landing page · Social media content · HTML email · Flier · Trifold brochure |
| Data & research | Web research · Data science · Data visualization · Maps & geography · Experiment workflow |
| Documents, 3D & illustration | Make a doc · 3D object · Watercolor illustration |
| Design systems | Create design system · Use design system · Design system preview · Design Components (.dc.html) · Make tweakable |
| Import sources | Figma .fig (offline decode) · GitHub repo · Existing HTML/CSS |
| Export & handoff | Standalone HTML · PDF · PPTX (editable) · PPTX (screenshots) · Video (MP4) · Send to Figma · Send to Canva · Handoff to Claude Code |
| AI assets & integration | Gemini image generation · Call Claude from prototypes · Read PDF |
Starter components (in starter-components/) save the agent from hand‑rolling the basics: device, browser, and social-media shells; a pan‑zoom design canvas; slide, animation, chart, document, file, and 3D stages; a tweaks panel; and a fillable image slot.
The skill is plain Markdown plus a few JSX/JS scaffolds — no build step, no runtime.
skills/baoyu-design/
├── SKILL.md # Entry point — orchestrates the whole flow
├── system-prompt.md # The design methodology & craft standards (source of truth)
├── references/
│ ├── claude.md # Tool map for Claude Code
│ ├── cursor.md # Tool map for Cursor
│ └── codex.md # Tool map for Codex Agent
├── built-in-skills/ # Specialized prompts (decks, mobile, import, export, …)
└── starter-components/ # Device/social shells, deck, chart, document, 3D, animation, …
When you ask for a design, the agent reads SKILL.md, loads the core methodology from system-prompt.md, detects whether it's running in Cursor, Claude Code, Codex Agent, or a generic file‑capable harness, and reads the matching reference doc when one exists. It then pulls in only the built‑in skill(s) the task needs. The split keeps craft rules harness‑independent while each environment resolves its own tools for asking questions, previewing, screenshotting, and verifying.
npx installer below). Python 3 is also handy for the local preview server.Recommended — the skills CLI. npx skills (from Vercel Labs) reads this repo, finds skills/baoyu-design/, and drops it into the right folder for whatever agent it detects:
# 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
npx skills add JimLiu/baoyu-design --agent cursor
npx skills add JimLiu/baoyu-design --agent codex
# Just list what's in the repo first
npx skills add JimLiu/baoyu-design --list
It installs to .claude/skills/ for Claude Code and .agents/skills/ for Cursor/Codex-style agents (add -g for the ~/‑level user install).
If you installed baoyu-design with the skills CLI, update it from the terminal:
# Update and let the CLI prompt for the install scope
npx skills update baoyu-design
# Update the project-level install
npx skills update baoyu-design -p -y
# Update the global install
npx skills update baoyu-design -g -y
upgrade is also supported as an alias:
npx skills upgrade baoyu-design
You can also run npx skills update to update all installed skills. After updating, restart Claude Code (or start a new agent session) so the refreshed skill files are loaded.
Alternative — hand the repo URL to your agent. Don't want to install anything? Paste the URL into chat and let the agent fetch the skill itself:
Read https://github.com/JimLiu/baoyu-design and follow its
skills/baoyu-design/SKILL.mdto design a settings screen for a meditation app.
The agent clones or fetches the repo, loads SKILL.md, and proceeds — perfect for a one‑off.
Once the skill is installed (or fetched), just describe a design task in plain language — it auto‑activates from its description:
Design 3 hi‑fi variations of a settings screen for a meditation app.
In Claude Code you can also trigger it explicitly with /baoyu-design; in Codex, mention $baoyu-design when skills are available. The agent asks a few clarifying questions, builds the HTML under designs/, and previews it over localhost. Point at any element in the live preview and say what to change — the agent edits the underlying source for a fast, visual second pass.
Deliverables are previewed over HTTP (multi‑file prototypes won't load from file://). The agent normally starts this for you; to run it by hand:
python3 -m http.server 4311 --directory designs
# then open http://localhost:4311/<project>/<file>.html
Beyond one‑off mockups, the skill can hold a whole project to a design system — a versioned bundle of a brand's tokens, fonts, components, and full UI kits. Systems live next to your projects under designs/: author one with the Create design system built‑in skill, drop in a pre‑built one, or import one from a Figma .fig file (see the next section). Once a system exists, two flows let any project consume it.
When you start a design, the agent asks where to save it and which design system(s) to use — it discovers every system under designs/ and lists them, so you can pick none (free design), one, or several. Name one up front and it skips the menu:
Design a settings screen using the Fluent 2 design system.
For each system you choose, the agent syncs a self‑contained, version‑pinned copy into your project at _ds/<slug>/, wires its CSS and component bundle into the page, and records the binding in the project's _d_meta.json. That local copy is what keeps the project portable and reproducible — nothing reaches outside the folder, and re‑running the import is how you pull updates later. Choose several systems and one becomes primary — it owns the overall look and wins any token collision, while the others lend specific components.
Once a system is bound it acts as a binding visual contract, not a loose suggestion: every screen is built from the system's real tokens, type, spacing, and components, and the agent won't invent off‑system colors or styles. If the system ships starting points — ready‑made screens or components — you can seed a new design from one instead of starting blank.
The binding travels with the project. Reopen it later and the agent reads _d_meta.json, reloads the system, and keeps designing in‑style — no need to re‑pick. From there you can refresh a system to pull updates, add another, swap which one is primary, or remove one entirely.
Real context beats description. Three built‑in import skills turn material you already have into design ground truth the agent works from directly:
.fig files — decoded fully offline. Export any Figma file as .fig (or grab a community kit), point the agent at it, and a vendored decoder reads it right on your machine — no Figma account, API token, or MCP server. The agent inventories pages, components, and variables, confirms scope with you, then either cherry‑picks components as React code or emits the whole kit as a design system: components regrouped semantically, curated token CSS, real SVG/PNG assets extracted from the file (copied, never redrawn), guideline cards, and a brand‑guide README.gh api before cloning anything, sparse‑checkouts only the paths it needs into a scratch dir outside your project, and records the repo URL as provenance.Anything imported as a design system compiles into a single self‑contained, interactive preview.html. This is the community Chakra UI Figma Kit .fig after one import conversation — 28 components in semantic groups, 400+ curated tokens, guideline cards, and a self‑authored showcase, all browsable in one file:
Ask for a slide deck and the skill builds it the same way it builds everything else — as a self‑contained HTML page, using the deck-stage component and the Make a deck built‑in skill. Because the deck is just a web page, the whole
No open issues yet, or sync has not completed.