What does this skill do, and when should you use it?
baoyu-design repackages Anthropic's Claude Design (the engine powering claude.ai/design) as a portable Agent Skill. Drop it into a local agent to get most of the website's capabilities right in your editor: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks, all emitted as self-contained HTML — no website, no extra subscription, no upload step. It drives a full design process: clarifying questions → gathering design context → producing one or more HTML deliverables → previewing and verifying over localhost, with a point-and-edit loop using the agent's built-in browser tools. The skill is harness-agnostic, shipping per-platform reference docs for Cursor, Claude Code, and Codex Agent, and includes a local CLI for exporting decks to editable or screenshot PPTX by rendering in a real browser rather than parsing HTML.
Reads SKILL.md and system-prompt.md to load the core design methodology. Detects the current harness (Cursor / Claude Code / Codex / generic) and reads the matching references/<harness>.md to resolve environment-specific tools for asking questions, previewing, screenshotting, and verifying. Loads relevant built-in skills (e.g. hi-fi-design, interactive-prototype, make-a-deck, design-system-authoring, etc.) based on the 13-type routing table or specific requests. Asks clarifying questions and sets up a project folder under designs/<project>/ (default), offering to bind one or more design systems. Generates self-contained HTML deliverables, copies referenced assets into the project folder, and serves them over HTTP for preview. Uses helper scripts: agents/import-design-system.mjs to import a design system copy, agents/record-asset.mjs to log deliverables, agents/compile-design-system.mjs and agents/build-preview.mjs to build/validate design systems. Exports decks to PPTX via agents/gen-pptx CLI (Playwright + headless Chromium) in editable mode (native shapes/text/images and data-anim animations) or screenshot mode (flat PNG per slide). Imports design sources: Figma .fig offline decode, GitHub repos via gh api, and existing HTML/CSS to extract tokens/states.
- A UI/UX designer using Cursor wants three hi-fi variations of a mobile app settings screen, then tunes each by pointing at elements in the live preview.
- A product manager in Claude Code asks for a 10-slide deck from a PRD, with click-triggered animations, and exports it to editable PPTX preserving those animations.
- A developer reconstructs a composer UI from an existing codebase and hands it off as standalone HTML.
- A design-system lead imports a Figma .fig file offline to turn a UI kit into a full design system with tokens, components, and a preview.html, then reuses it across projects.
- A frontend engineer wants to mimic an existing website's colors, type, and spacing by pointing the agent at saved HTML/CSS files, using them as design ground truth.
How do you install this skill?
- This skill heavily relies on external services (e.g., Claude models, unpkg CDN) and network downloads, which may be inaccessible to users in mainland China, making core functionality unavailable; assess network reachability before use.
- Execution involves local file writing and code execution; users should ensure a trusted environment and pay attention to permission controls.
- Static review cannot verify actual output quality; it is recommended to test on small projects first.
- Shell / CLI
- Network access
- Local filesystem
Node.jsPython 3
Prerequisites: a local agent (Cursor, Claude Code, Codex, or one of 70+ supported via the installer), recommended model Claude Opus 4.8, Node.js (for the npx installer), Python 3 (optional, for the preview server). Recommended: use the skills CLI from Vercel Labs. From your project root, run npx skills add JimLiu/baoyu-design to auto-detect your agent, add -g for a global install, or use --agent claude-code / --agent cursor / --agent codex to target a specific agent. It installs to .claude/skills/ for Claude Code and .agents/skills/ for Cursor/Codex (add -g for user-level). Alternative: paste the repo URL into your agent's chat and let it fetch skills/baoyu-design/SKILL.md itself — good for one-off use.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/JimLiu/baoyu-design.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/baoyu-design" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Design a settings screen using the Fluent 2 design system.
- export this to PPTX
Once installed, describe a design task in plain language, e.g. "Design a settings screen using the Fluent 2 design system." The agent reads SKILL.md, asks a few clarifying questions, generates HTML under designs/<project>/, and previews it over HTTP (start manually with python3 -m http.server 4311 --directory designs). Point at any element in the live preview and tell it what to change; the agent edits the underlying source. To export a deck to PPTX, say "export this to PPTX" in the same conversation; the agent invokes the local gen_pptx CLI (requires one-time build: cd skills/baoyu-design/agents/gen-pptx && npm install && npx playwright install chromium && npm run build).
What are this skill's strengths and limitations?
- Works without claude.ai/design: all artifacts land in your repo as self-contained HTML, easy to version, fork, or ship.
- Comprehensive design methodology with 13+ built-in skill types (mockups, prototypes, wireframes, decks, documents, animations, 3D, etc.) and craft standards.
- Harness-agnostic with first-class tool references for Claude Code, Cursor, and Codex Agent; generic file-capable harnesses can also run it.
- PPTX export keeps data-anim builds as native PowerPoint animations, and editable mode outputs real text/shapes/images — not just screenshots.
- Rich import pipeline: Figma .fig decoded fully offline, GitHub repos, and existing HTML/CSS, all feeding design-system authoring and binding.
- Requires local Node.js for the gen_pptx CLI, and the first PPTX build installs Playwright + Chromium (~large download).
- Not suited for truly non-file-capable harnesses (e.g. plain Claude Desktop): you must serve designs/ manually and lack dedicated tool maps.
- No test suite mentioned anywhere in the docs; output quality depends heavily on model strength (Opus 4.8 recommended, weaker models may degrade).
- The npx installer depends on the `skills` CLI; if your agent isn't supported, you need the manual URL approach.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| baoyu-design: Run Claude Design Locally as an Agent Skill this page | 53 · Use with care | ★ 4.3k | 18d ago | MIT |
| Huashu Design | 42 · Not recommended | ★ 25k | 19d ago | MIT |
| Slides Grab Design Skill | 51 · Use with care | ★ 1.2k | 1mo ago | MIT |
| Web Design Engineer | 50 · Use with care | ★ 13k | 3mo ago | MIT |
| Slides Grab HTML Skill | 60 · Recommended | ★ 1.2k | 1mo ago | MIT |
How did FollowSkills review this skill?
Evidence shows the skill primarily generates self-contained HTML files, operating locally with no obvious excessive permissions or sensitive data collection. However, the behavior relies heavily on AI model instruction following, and while it requests user confirmation for output location and design systems, permission controls, execution isolation, and rollback mechanisms are not clearly defined. External resource usage (e.g., playwright, unpkg) introduces network risks. Deductions are therefore mainly for unclear permission/isolation mechanisms, not reaching full marks.
The instruction file provides a detailed step-by-step process and several helper scripts, such as build-preview.mjs and compile-design-system.mjs, but key paths have not been verified through actual execution, and reliance on external services (e.g., unpkg) may affect reliability. No clear evidence of automated tests covering the skill's key paths is provided. Deductions are therefore mainly for lack of execution testing and insufficient edge case handling, only rating below full marks.
The skill has a wide application scope, covering various design tasks (UI mockups, prototypes, slides, etc.) with clear trigger conditions, but non-trigger scenarios are not clearly described, potentially causing mismatches between user expectations and actual capabilities. Environment fit: while it supports multiple harnesses, reachability from mainland-China networks is not specifically addressed, and core functions may depend on overseas services like Claude. Deductions are therefore mainly for insufficient signals on boundaries and environment fit.
Documentation is well-structured, providing layered information (SKILL.md, system-prompt.md, etc.), and includes license (MIT) and versioning (package.json), but lacks a clear changelog and update path, and maintenance responsibility is not fully clarified. Known limitation disclosure is insufficient, e.g., dependency on specific browser versions is not mentioned. Deductions are therefore mainly for incomplete version management, update path, and known limitation disclosure.
The skill claims to produce high-quality design deliverables, but static review cannot verify actual output quality, and the generation process depends on AI model creativity, potentially leading to inconsistent quality. Comparative benefit over alternatives and marginal value are not supported by clear evidence. Deductions are therefore mainly for unverified direct usability of outputs.
Evidence mainly comes from code and documentation, lacking independent verification by third-party execution. While source code for helper scripts is provided, no actual test results or CI workflows are demonstrated. Deductions are therefore mainly for the lack of reproducible evidence.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →