baoyu-design

Overview

baoyu-design packages Claude Design as a portable Agent Skill for local file-capable coding agents. It runs in Cursor, Claude Code, Codex, and other supported agents, producing polished design artifacts as self-contained HTML while keeping the work in the repository.

Key Features

• Portable Agent Skill that runs Claude Design in local coding agents such as Cursor, Claude Code, Claude Desktop, and Codex.
• Produces polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks as self-contained HTML.
• Includes built-in skills for core design, decks, mobile and motion, web and campaigns, data and research, documents, 3D, illustration, design systems, import and export, and AI assets.
• Ships starter components for device, browser, and social shells; design canvases; slide, animation, chart, document, file, and 3D stages; and a watercolor runtime.
• Supports design-system import and use from Figma .fig files decoded offline, GitHub repositories, and existing HTML or CSS.
• Exports standalone HTML, PDF, editable or screenshot PPTX, MP4 video, and handoff to Figma, Canva, or Claude Code.

Use Cases

• Creating hi-fi UI variations, interactive prototypes, and wireframes for product screens.
• Building slide decks with speaker notes and per-element animations, then exporting to PowerPoint.
• Turning a Figma .fig kit, GitHub repository, or existing HTML or CSS into a reusable design system.
• Building data-backed dashboards or mobile app prototypes from local artifacts.

Getting Started

• Install with npx skills add JimLiu/baoyu-design, optionally targeting Claude Code, Cursor, or Codex.
• Describe a design task in plain language; the skill auto-activates and asks clarifying questions.
• Preview deliverables over localhost using the agent's browser preview or a local HTTP server such as python3 -m http.server 4311 --directory designs.

Deployment & Requirements

• A local file-capable coding agent such as Cursor, Claude Code, Codex, or another supported agent.
• Claude Opus 4.8 selected as the model for best results.
• Node.js for the npx installer; Python 3 is handy for the local preview server.
• Deliverables are previewed over HTTP because multi-file prototypes will not load from file paths.

Before You Adopt

• License: MIT. Review its terms before using, modifying, or distributing the project.
• The skill is tuned for strong models, with Claude Opus 4.8 recommended for best output.
• The project is an independent community repackaging and is not affiliated with or endorsed by Anthropic.