baoyu-design skill
A design engine skill for local agents: mockups, prototypes, landing pages, dashboards and slides as self-contained HTML right in your editor
- 6,407 ★ on the repository
- Last commit
Extended access
Why this level
- Writes files into the project and starts a local preview server
- Runs the installer and helper scripts on Node.js
Install
- Works in
Manual install
npx skills add JimLiu/baoyu-designInstalls the skill into the current project and auto-detects the agent. Add -g to install for every project, or --agent claude-code or --agent cursor to target one explicitly.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Writes files into the project and starts a local preview server
- Runs the installer and helper scripts on Node.js
This is third-party code. Review the repository files before installing.
What it does
The skill brings the Claude Design methodology to a local agent so it produces design artifacts without visiting a website. The agent reads SKILL.md, loads the methodology from system-prompt.md, detects its harness (Claude Code, Cursor, Codex or another) and pulls only the built-in sub-skills it needs: hi-fi mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile screens, slides, documents and illustrations. Output is saved to a designs folder as self-contained HTML you can preview over localhost and edit by pointing at an element in the preview. It can import context from Figma files, GitHub repos and existing HTML or CSS, work against design systems, and export to PDF, PPTX and video.
Who it is for. For designers, product teams and developers who want mockups and prototypes right in the editor with a local agent.
Good fit when
- You need screen or landing layout variants without a separate service
- You need a working interactive prototype with state and transitions
- You need to build slides and export them to PowerPoint
- You need to bring a design from a Figma file or existing HTML into the project
Not a fit when
- You need production framework code rather than an HTML mockup
- You do not have a local file-capable agent at hand
Example request
Design three hi-fi variations of a settings screen for a meditation appLimitations
The skill is a long design brief, so the result depends heavily on the model; the author recommends Opus. It needs a local file-capable agent, Node.js for the installer and Python 3 for the local preview. PPTX export works after a one-time build of a local CLI with Playwright and Chromium. It is an independent project that repackages Claude Design and is not affiliated with Anthropic.
How to disable. Remove the baoyu-design folder from the agent's skills directory: .claude/skills/ for Claude Code or .agents/skills/ for Cursor and Codex, or the same folders under your home directory for a global install.
FAQ
Do I need a claude.ai/design subscription?
No. The skill runs on your local agent and model; no separate website subscription is required.
How do I edit the result?
The finished HTML opens over localhost. Point at an element in the agent's preview and say what to change, and the agent edits the source.
Discussion
No questions or reviews yet.
Related
SkillsA UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
An interface design skill for the agent: diagnosis, four directions to choose, implementation and QA without an AI-template look
A web-design skill for Claude Code: a DESIGN.md spec first, then code that follows it
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A Claude skill that turns sites, images and Figma files into a design system: Markdown, DTCG tokens and element rebuild prompts
README in short
The README presents baoyu-design as a port of the Claude Design engine into a portable Agent Skill for Cursor, Claude Code, Codex and other file-capable agents. The skill is built from Markdown plus a few JSX and JS scaffolds with no build step: SKILL.md drives the flow, system-prompt.md holds the methodology, and the built-in-skills and starter-components folders provide specialized sub-skills and ready-made screen and shell scaffolds. It covers install via npx skills, working against design systems, importing from Figma, GitHub and HTML, and export to PDF, PPTX and MP4. A separate section explains the local gen-pptx pipeline, which renders HTML in Chromium via Playwright and translates it into native PowerPoint. MIT license; the project is independent and not affiliated with Anthropic.
README badge
Original SKILL.md
--- name: baoyu-design description: >- Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks (a.k.a. PPT / PowerPoint presentations), documents and résumés, animations, 3D objects, research reports, HTML email, diagrams, fliers, and visual explorations. Use whenever the user asks to design, mock up, prototype, wireframe, visualize, explore, or make a PPT/deck for an interface, product screen, user flow, content layout, visual artifact, or pitch/deck concept, even if they do not say "design". Also use to export a deck built with this skill to PowerPoint (PPT/PPTX) — but only decks authored here (deck-stage / this skill's slide-structured HTML), NOT arbitrary HTML, so confirm the target is such a deck first. Also use for setting up, importing, or authoring reusable design systems, UI kits, brand tokens, or component libraries. Harness-agnostic for Claude Code, Cursor, Codex Agent, and similar file-capable agents. --- # Design You are an expert designer producing design artifacts as HTML on the user's behalf. This skill wraps a full design methodology — follow it whenever you're asked to design, mock up, prototype, wireframe, or visualize an interface. It is **harness-agnostic**: it runs on Claude Code, Cursor, Codex Agent, or any comparable file-capable agent, resolving each environment's unique tools from a per-harness reference doc. ## How to use this skill **1. Load the methodology.** Read [`system-prompt.md`](system-prompt.md) (in this skill's directory) — the core design process and craft standards. Follow it for the whole job. **2. Identify your harness and load its tool reference.** Generic tools (shell, file read/write/edit/search, `gh`) work the same everywhere and need no special doc. The harness-unique tools — **asking the user a question, previewing/showing a page, taking screenshots, and debugging/verifying** — differ per environment.