Brings the Claude Design way of working into Claude Code, Codex or Cursor: your agent produces UI mockups, clickable prototypes, landing pages, slide decks and dashboards as plain HTML in your repo, then opens them in local editors you can tweak by hand.
In short: Brings the Claude Design way of working into Claude Code, Codex or Cursor: your agent produces UI mockups, clickable prototypes, landing pages, slide decks and dashboards as plain HTML in your repo, then opens them in local editors you can tweak by hand. It is a free skill for people who use Claude Code, Codex or Cursor and want help with coding agent skills.
Checked on · Added
| Agent / tool | Access / cost | Link |
|---|---|---|
| Claude Code | Paid Claude plan or API | claude.com/claude-code |
| Codex | ChatGPT plan or API | openai.com/codex |
| Cursor | Free tier + paid | cursor.com |
| GitHub repo | Open source · ★ 5.3k | JimLiu/baoyu-design |
Image: from the GitHub README, shown with credit.
Images from the project README on GitHub.
Real videos made with this skill, credited to their creators. Hover to preview.
APP DEMO0:48The author's 48-second demo of the v2.1 comments feature: you click anywhere on a design or slide to leave a note, the agent reads the thread in the terminal, answers and edits the page, and you resolve it, all stored in the project folder.
npx skills add JimLiu/baoyu-design npx skills add JimLiu/baoyu-design -g npx skills add JimLiu/baoyu-design --agent claude-code
Install command copied from the project README. Check the README for the latest version.
Brings the Claude Design way of working into Claude Code, Codex or Cursor: your agent produces UI mockups, clickable prototypes, landing pages, slide decks and dashboards as plain HTML in your repo, then opens them in local editors you can tweak by hand.
baoyu-design packs six skills into one install. The main one turns a request into a self-contained HTML mockup, prototype, landing page or animation inside a designs/ folder, so you can preview it in your agent's…
Short excerpt from the README of JimLiu/baoyu-design. Read the full README on GitHub.
From the original post, credited below.
An unofficial community port by Baoyu (JimLiu), not an Anthropic product: the skill files keep the original design instructions close to word for word. The brief is long and the author says results are best with the strongest Claude model, so expect weaker output and more tokens on small models. Each editor runs a small local server on your machine.
Brings the Claude Design way of working into Claude Code, Codex or Cursor: your agent produces UI mockups, clickable prototypes, landing pages, slide decks and dashboards as plain HTML in your repo, then opens them in local editors you can tweak by hand.
It works with Claude Code, Codex and Cursor. The code is on GitHub at JimLiu/baoyu-design.
Free & open source (MIT). Runs on your own machine with the agent and model you already pay for; needs Node 20+ (22+ for dashboards). No extra subscription.
Run the install command from the README: “npx skills add JimLiu/baoyu-design”. Check the README on GitHub for the latest version, then follow the steps on this page.
We read 249 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine.
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
SKILLYour coding agent connects to an Android or Google TV over Wi-Fi, switches off the ad and tracking apps, and puts in a clean, Apple TV-style home screen. Nothing is uninstalled.
Claude Code +2★ 14.8k
SKILLA Claude skill that reviews a vibecoded screen like a designer: it lists the tell-tale AI touches, proposes a direction from your own product, then fixes spacing, colour, icons, copy, type and layout pass by pass. Works on dashboards, apps, landing pages, or a live site from a link.
Claude Code★ 540
SKILLOne install gives your agent a plan, test, build, review and remember routine, with 71 helper agents, about 300 skills, memory between sessions and a built-in scanner for risky agent settings.
Claude Code +3★ 285.3k
SKILLA skills framework that makes agents brainstorm, plan, test and debug systematically.
Claude Code +1★ 299.2k
SKILLReal engineering skills from a well-known TypeScript educator's own .agents folder.
Claude Code +1★ 291.4k
SKILLA skill that pushes coding agents to act like a lazy senior: fewer lines, more tests, lower cost — without skipping the hard checks.
Claude Code +2★ 164.8kFree newsletter
New AI tools you can use right away, in plain words. Every Friday.