baoyu-design
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/design. Best with Opus 4.8.
baoyu-design is an agent skill that brings Claude Design's UI/UX design capabilities to local coding agents like Cursor, Claude Code, and Codex. It enables agents to generate polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, slide decks, and design systems as self-contained HTML files—without requiring access to claude.ai/design. The skill includes a comprehensive design methodology, built-in component scaffolds, Figma import (offline .fig decoding), design system management, and PowerPoint export with native animations, all optimized for Claude Opus 4.8.
Key Features
Use Cases
- 01Design multiple variations of app screens (settings, onboarding, pricing pages) with brand consistency
- 02Build interactive prototypes with real state management, transitions, and form validation for user testing
- 03Create presentation decks with animated builds and export them to editable PowerPoint for stakeholder review
- 04Import Figma design system kits and use them to generate pixel-perfect dashboards and landing pages
- 05Wireframe mobile app layouts and iterate visually by pointing at elements in live browser preview
- 06Extract design tokens and components from existing codebases to maintain visual consistency across new designs
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
baoyu-design — FAQ
What is baoyu-design and what does it do?+
baoyu-design is an agent skill that packages Claude Design's design engine for local AI coding agents. It enables agents to produce UI mockups, prototypes, wireframes, slide decks, and design systems as self-contained HTML files without needing claude.ai/design.
How do I install baoyu-design?+
Run 'npx skills add JimLiu/baoyu-design' from your project directory to auto-detect your agent and install, or add '-g' for global install. Alternatively, paste the GitHub repo URL directly into your agent chat and let it fetch the skill. Requires Node.js for the installer.
Which AI clients and agents support baoyu-design?+
baoyu-design works with Cursor, Claude Code, Codex, and any of the 70+ file-capable coding agents supported by the skills CLI (including Cline, Roo Code, and GitHub Copilot). It has first-class tool references for Cursor, Claude Code, and Codex.
What are the prerequisites and do I need API keys?+
You need a local coding agent (Cursor, Claude Code, or Codex recommended), Node.js for installation, and optionally Python 3 for the local preview server. Claude Opus 4.8 is recommended for best results. No API keys or external subscriptions are required—all processing happens locally.
Is baoyu-design free to use?+
Yes, baoyu-design is released under the MIT License and is free to use. It repackages Anthropic's Claude Design methodology for local use but is an independent community project not affiliated with Anthropic.
Can I import Figma files and export to PowerPoint?+
Yes, baoyu-design can decode Figma .fig files completely offline without API access, extracting components and design tokens. It can also export HTML slide decks to editable PowerPoint files with animations preserved as native PowerPoint effects.
How do I install baoyu-design?+
Open the source repository on GitHub and follow its README. baoyu-design is a skill — MCP Agents Market links you directly to the official repo.
Is baoyu-design free?+
baoyu-design is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.