The reason I started studying Claude Design is that I’ve recently figured out a pretty good development workflow:

1. Use Claude Design to design the App’s UI and UX first, keeping the first version as simple as possible. Claude Design delivers results as HTML + CSS + React + data.js. With the CSS you can clearly see the design system’s color palette and spacing specs; with React you can inspect the component structure; and with data you can see what the data model looks like. This combination is far more AI-friendly than Figma — especially data.jsx, which typical design tools don’t include but is crucial for development. Another advantage is that the deliverables are all text-based, so you can commit them to git for version control and use git diff to clearly show the AI what changed in the design.

2. Hand the design generated by Claude Design to Claude Opus 4.8 to implement an MVP. For the first version, only implement the UI, tell it the tech stack (e.g. AppKit instead of SwiftUI), and iterate through a few minor versions to gradually refine it. For example, the first version might just be the main screen.
   The reason I don’t use GPT is that Opus is far better at implementing UI — given the same design, GPT makes all sorts of detail mistakes and doesn’t follow the design well.
   The reason I don’t implement too many features at once is that fewer features make it easier for the Agent to focus, producing better results. So how to split versions is also a skill in using Coding Agents effectively.
   For non-UI features, the model choice doesn’t matter as much, so I also use Codex for non-UI tasks.

3. Every time you generate a version, make sure it can run. Both the Agent and the human need immediate feedback — only with feedback can you know whether you’re heading in the right direction and what to do next.
   While testing, a human can spot all sorts of issues. Code issues go to the Agent to fix; UI design issues aren’t fixed immediately in code — go back to Claude Design, modify the design, download the updated design files, and replace the local design files.
   After replacing the design, have the Agent analyze the changes via git diff, give it a screenshot, and it will know how to make the changes without much explanation.

4. After the version is stable, start a new iteration. When the designed features are done, it’s not necessarily time to design new features — you can review the implemented code and refactor/optimize it.
   For example, after the first version was implemented, I had Opus 4.8 do a performance analysis, identify bottlenecks, and it told me that the current NSScrollView causes memory to balloon with a lot of content, and suggested NSTableView.
   I thought, shouldn’t this have been considered from the start? Well, better late than never.
   After performance optimization, continue adding features, update the design, and have the Agent reference the new design to optimize.

Now back to researching Claude Design: because I kept modifying the design in Claude Design, syncing it locally, and that step started to annoy me — switching between the local editor and the Claude Design web page, exporting, downloading, unzipping, replacing.

So I wondered if I could run Claude Design locally and integrate it directly into a local Agent. So I studied Claude Design and found that it’s entirely possible to run it locally — the only differences are that local Agents handle tool calls a bit differently, and it’s not as convenient to annotate and edit directly on the design.

Last week, Codex released its direct iOS debugging feature with annotation/editing capabilities, and it hit me: this could replace Claude Design’s annotation feature! (Figure 2)
The problem is that GPT 5.5’s design ability isn’t strong enough, so the design results in Codex wouldn’t be good.

Then Cursor released its web annotation feature — perfect! Cursor can use Opus 4.8, and by packaging it as a Skill, I can run it locally, and even directly annotate and comment on changes in Cursor’s built-in browser.

Fortunately, the core logic of Claude Code is all in the browser frontend — they built a Harness on the web page, which made it easy for me to analyze. With some patience, I could extract all the Prompts, built-in Skills, and initial components, then adapt them to Cursor’s tools and get it running. (Figure 3)
I tested it and the results are about the same as running in Claude Design. (Figure 4)

Ultimately, it’s because Claude Desktop is too weak — Claude Design should have been integrated into Claude Desktop, otherwise I wouldn’t have had to go through all this trouble.
Of course, without the trouble, I wouldn’t have had the chance to learn Claude Design’s excellent design. It’s really great, and I’ll be sharing my learning notes in a series going forward.
I recommend trying the final Skill so you can run Claude Design locally: https://github.com/jimliu/baoyu-design…

jimliu/baoyu-design

Source: https://github.com/jimliu/baoyu-design

baoyu-design

Run Claude Design on your own local agent — Cursor, Claude Code, Claude Desktop, or any file‑capable coding agent.

English · 简体中文 · Changelog

License: MIT

Best with Opus 4.8

Harness

baoyu-design packages Claude Design — the design engine behind claude.ai/design (https://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.

Screenshots

The same Reader Mac App prompt was used in Cursor, Codex, Claude, and Claude Design.

Prompt used for all screenshots

Build a Reader Mac app that helps me read and save articles better. All data is stored locally.  

## Information collection  
1. Manual adding  
   Support manually adding different types of information:  
   - URL: enter a URL and automatically fetch content and images  
   - Attachments: upload PDFs, videos, and images  
   - Markdown editing: like publishing a blog post, enter the title, body, and cover image  
   - Other  
2. Automatic subscriptions  
   - RSS feeds  
   - Social media accounts: X, Weibo, YouTube  
   - Other  

## Editing and organization  
1. Tags  
   Every item can have tags.  
2. Categories and folders  
   Create tree-structured folders and place content in different categories.  
3. Favorites  
   Users can click to favorite an item.  
4. Editing  
   Every item can be edited with a built-in Markdown editor.  

## AI assistance  
1. Automatic translation  
   Support translation across different languages.  
2. Summaries and abstracts  
   Generate summaries for captured content.  
3. Derivative creation  
   Create new work based on one or more pieces of content.  
4. Integrated AI Chat  
   Use AI Chat to call AI Agents that help process content.  

Why run it locally

• Free yourself from the website. You get the vast majority of claude.ai/design’s capabilities without ever leaving your editor — same methodology, same craft standards, same output format.
• Best with Opus 4.8. The skill is a long, demanding design brief; the stronger the model, the better the result. Pair it with Claude Opus 4.8 for the best output, and it still works well on other capable models.
• Iterate by pointing, not describing. Because the deliverable is plain HTML served on 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.
• Everything is yours. Output lands in designs// as self‑contained HTML you can version, fork, export, or ship.

What it can make

The skill drives a full design process — clarifying questions → gathering design context → producing one or more HTML deliverables → previewing and verifying. It ships 24 built‑in skills and a set of ready‑made component scaffolds.

Starter components (in starter-components/) save the agent from hand‑rolling the basics: iOS / Android / macOS / browser frames, a pan‑zoom design canvas, a slide‑deck stage, a timeline animation engine, a tweaks panel, and a fillable image slot.

How it works

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/         # 24 specialized prompts (decks, mobile, export, ...)  
└── starter-components/      # Device frames, deck stage, canvas, animation engine, ...  

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.

Quick start

Prerequisites

• A local agent — Cursor (https://cursor.com), Claude Code (https://claude.com/claude-code), Codex (https://developers.openai.com/codex/), or any of the 70+ agents the installer supports (Cline, Roo Code, GitHub Copilot…). Cursor, Claude Code, and Codex have first‑class tool references inside the skill.
• Claude Opus 4.8 selected as the model, for best results.
• Node.js (to run the npx installer below). Python 3 is also handy for the local preview server.

Install

Recommended — the skills CLI.

npx skills (https://github.com/vercel-labs/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).

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.md to 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.

Use it

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.

Preview server

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//.html  

Example prompts

• “Design 3 hi‑fi variations of a pricing page using the brand in this screenshot.”
• “Prototype a working onboarding flow — real state, transitions, form validation.”
• “Make a 10‑slide deck from this PRD for an engineering all‑hands.”
• “Wireframe a few layout ideas for a mobile expense‑tracker home screen.”
• “Recreate the composer UI from this codebase, then export it as standalone HTML.”

For best results, give it design context — a screenshot, a UI kit, a Figma link, or a codebase. Starting from real context is the single biggest lever on quality; the skill will ask for it if you don’t provide it.

Credits & license

This project repackages Claude Design, the design skill by Anthropic that powers claude.ai/design (https://claude.ai/design), so it can run on local agents. It is an independent, community effort and is not affiliated with or endorsed by Anthropic.

Repackaged and maintained by Jim Liu 宝玉.

Released under the MIT License.

宝玉 (@dotey):
Recently, in order to study Claude Design, I wrote a tool that can parse HAR files and decrypt the binary content transmitted by Claude Design, making it easy to see the Prompt requests.