[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-83837":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":33,"readmeContent":34,"aiSummary":9,"trendingCount":15,"starSnapshotCount":15,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},83837,"baoyu-design","JimLiu\u002Fbaoyu-design","JimLiu","Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai\u002Fdesign. Best with Opus 4.8.",null,"JavaScript",759,58,3,1,0,87,565,436,9.31,"MIT License",false,"main",true,[25,26,27,28,29,30,31,32],"agent-skills","claude","claude-code","claude-design","cursor","design","prototyping","ui-design","2026-06-12 02:04:35","# baoyu-design\n\n**Run Claude Design on your own local agent — Cursor, Claude Code, Claude Desktop, or any file‑capable coding agent.**\n\n[English](README.md) · [简体中文](README.zh-CN.md) · [Changelog](CHANGELOG.md)\n\n![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-blue.svg) ![Best with Opus 4.8](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FBest%20with-Opus%204.8-d97757) ![Harness](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCursor%20%C2%B7%20Claude%20Code%20%C2%B7%20Codex-supported-1f6feb)\n\n`baoyu-design` packages **Claude Design** — the design engine behind [claude.ai\u002Fdesign](https:\u002F\u002Fclaude.ai\u002Fdesign) — 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.\n\nNo website, no separate subscription, no upload step. The agent already on your machine does the work, and every artifact stays in your repo.\n\n---\n\n## Screenshots\n\nThe same Reader Mac App prompt was used in Cursor, Codex, Claude, and Claude Design.\n\n| Cursor | Codex | Claude | Claude Design |\n|---|---|---|---|\n| \u003Cimg src=\"assets\u002Fscreenshots\u002Fcursor-reader-mac-app.webp\" alt=\"Cursor running baoyu-design\" width=\"240\"> | \u003Cimg src=\"assets\u002Fscreenshots\u002Fcodex-reader-mac-app.webp\" alt=\"Codex running baoyu-design\" width=\"240\"> | \u003Cimg src=\"assets\u002Fscreenshots\u002Fclaude-reader-mac-app.webp\" alt=\"Claude running baoyu-design\" width=\"240\"> | \u003Cimg src=\"assets\u002Fscreenshots\u002Fclaude-design-reader-mac-app.webp\" alt=\"Claude Design running the same Reader Mac App prompt\" width=\"240\"> |\n\n\u003Cdetails>\n\u003Csummary>Prompt used for all screenshots\u003C\u002Fsummary>\n\n```markdown\nBuild a Reader Mac app that helps me read and save articles better. All data is stored locally.\n\n## Information collection\n\n1. Manual adding\nSupport manually adding different types of information:\n- URL: enter a URL and automatically fetch content and images\n- Attachments: upload PDFs, videos, and images\n- Markdown editing: like publishing a blog post, enter the title, body, and cover image\n- Other\n\n2. Automatic subscriptions\n- RSS feeds\n- Social media accounts: X, Weibo, YouTube\n- Other\n\n## Editing and organization\n\n1. Tags\nEvery item can have tags.\n\n2. Categories and folders\nCreate tree-structured folders and place content in different categories.\n\n3. Favorites\nUsers can click to favorite an item.\n\n4. Editing\nEvery item can be edited with a built-in Markdown editor.\n\n## AI assistance\n\n1. Automatic translation\nSupport translation across different languages.\n\n2. Summaries and abstracts\nGenerate summaries for captured content.\n\n3. Derivative creation\nCreate new work based on one or more pieces of content.\n\n4. Integrated AI Chat\nUse AI Chat to call AI Agents that help process content.\n```\n\n\u003C\u002Fdetails>\n\n---\n\n## Why run it locally\n\n- **Free yourself from the website.** You get the vast majority of `claude.ai\u002Fdesign`'s capabilities without ever leaving your editor — same methodology, same craft standards, same output format.\n- **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.\n- **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 \u002F 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.\n- **Everything is yours.** Output lands in `designs\u002F\u003Cproject>\u002F` as self‑contained HTML you can version, fork, export, or ship.\n\n---\n\n## What it can make\n\nThe 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.\n\n| Area | Built‑in skills |\n|---|---|\n| **Core design** | Hi‑fi design · Interactive prototype · Wireframe · Frontend aesthetic direction |\n| **Decks** | Make a deck · Speaker notes |\n| **Mobile & motion** | Mobile prototype · Animated video · Sound effects |\n| **Design systems** | Create design system · Design Components (`.dc.html`) · Make tweakable |\n| **Export & handoff** | Standalone HTML · PDF · PPTX (editable) · PPTX (screenshots) · Send to Figma · Send to Canva · Handoff to Claude Code |\n| **AI assets & integration** | Gemini image generation · Call Claude from prototypes · Read PDF |\n\n**Starter components** (in [`starter-components\u002F`](skills\u002Fbaoyu-design\u002Fstarter-components\u002F)) save the agent from hand‑rolling the basics: iOS \u002F Android \u002F macOS \u002F browser frames, a pan‑zoom design canvas, a slide‑deck stage, a timeline animation engine, a tweaks panel, and a fillable image slot.\n\n---\n\n## How it works\n\nThe skill is plain Markdown plus a few JSX\u002FJS scaffolds — no build step, no runtime.\n\n```\nskills\u002Fbaoyu-design\u002F\n├── SKILL.md              # Entry point — orchestrates the whole flow\n├── system-prompt.md      # The design methodology & craft standards (source of truth)\n├── references\u002F\n│   ├── claude.md         # Tool map for Claude Code\n│   ├── cursor.md         # Tool map for Cursor\n│   └── codex.md          # Tool map for Codex Agent\n├── built-in-skills\u002F      # 24 specialized prompts (decks, mobile, export, …)\n└── starter-components\u002F   # Device frames, deck stage, canvas, animation engine, …\n```\n\nWhen 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*.\n\n---\n\n## Quick start\n\n### Prerequisites\n\n- A local agent — **[Cursor](https:\u002F\u002Fcursor.com)**, **[Claude Code](https:\u002F\u002Fclaude.com\u002Fclaude-code)**, **[Codex](https:\u002F\u002Fdevelopers.openai.com\u002Fcodex\u002F)**, 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.\n- **Claude Opus 4.8** selected as the model, for best results.\n- **Node.js** (to run the `npx` installer below). **Python 3** is also handy for the local preview server.\n\n### Install\n\n**Recommended — the `skills` CLI.** [`npx skills`](https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fskills) (from Vercel Labs) reads this repo, finds `skills\u002Fbaoyu-design\u002F`, and drops it into the right folder for whatever agent it detects:\n\n```bash\n# Install into the current project (auto‑detects your agent)\nnpx skills add JimLiu\u002Fbaoyu-design\n\n# …or install globally, for every project\nnpx skills add JimLiu\u002Fbaoyu-design -g\n\n# Target a specific agent explicitly\nnpx skills add JimLiu\u002Fbaoyu-design --agent claude-code\nnpx skills add JimLiu\u002Fbaoyu-design --agent cursor\nnpx skills add JimLiu\u002Fbaoyu-design --agent codex\n\n# Just list what's in the repo first\nnpx skills add JimLiu\u002Fbaoyu-design --list\n```\n\nIt installs to `.claude\u002Fskills\u002F` for Claude Code and `.agents\u002Fskills\u002F` for Cursor\u002FCodex-style agents (add `-g` for the `~\u002F`‑level user install).\n\n**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:\n\n> Read https:\u002F\u002Fgithub.com\u002FJimLiu\u002Fbaoyu-design and follow its `skills\u002Fbaoyu-design\u002FSKILL.md` to design a settings screen for a meditation app.\n\nThe agent clones or fetches the repo, loads `SKILL.md`, and proceeds — perfect for a one‑off.\n\n### Use it\n\nOnce the skill is installed (or fetched), just describe a design task in plain language — it auto‑activates from its description:\n\n> Design 3 hi‑fi variations of a settings screen for a meditation app.\n\nIn Claude Code you can also trigger it explicitly with `\u002Fbaoyu-design`; in Codex, mention `$baoyu-design` when skills are available. The agent asks a few clarifying questions, builds the HTML under `designs\u002F`, 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.\n\n### Preview server\n\nDeliverables are previewed over HTTP (multi‑file prototypes won't load from `file:\u002F\u002F`). The agent normally starts this for you; to run it by hand:\n\n```bash\npython3 -m http.server 4311 --directory designs\n# then open http:\u002F\u002Flocalhost:4311\u002F\u003Cproject>\u002F\u003Cfile>.html\n```\n\n---\n\n## Example prompts\n\n- *\"Design 3 hi‑fi variations of a pricing page using the brand in this screenshot.\"*\n- *\"Prototype a working onboarding flow — real state, transitions, form validation.\"*\n- *\"Make a 10‑slide deck from this PRD for an engineering all‑hands.\"*\n- *\"Wireframe a few layout ideas for a mobile expense‑tracker home screen.\"*\n- *\"Recreate the composer UI from this codebase, then export it as standalone HTML.\"*\n\nFor 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.\n\n---\n\n## Credits & license\n\nThis project repackages **Claude Design**, the design skill by **Anthropic** that powers [claude.ai\u002Fdesign](https:\u002F\u002Fclaude.ai\u002Fdesign), so it can run on local agents. It is an independent, community effort and is not affiliated with or endorsed by Anthropic.\n\nRepackaged and maintained by **Jim Liu 宝玉**. Released under the [MIT License](LICENSE).\n",2,"2026-06-11 04:11:36","CREATED_QUERY"]