Why You Should Ditch Figma: Generate Design Drafts Directly in Your Editor with baoyu-design

Overview

baoyu-design is an open‑source Agent Skill that repackages Anthropic's Claude Design engine into a module runnable directly inside local editor environments (Cursor, Claude Code, Codex). The generated design artifacts are saved into the project directory, making them part of version control.

Supported Design Deliverables

High‑fidelity UI designs – complete pages with visual details and interaction states.

Interactive prototypes – HTML prototypes with click hotspots, navigation and form interactions.

Coarse‑grained wireframes – quick layout explorations.

Mobile‑adapted screens – previews for iOS and Android device frames.

Presentation slides – automatically generated technical PPTs.

Design‑system documentation – UI component libraries and design guidelines.

All outputs default to HTML and can be exported to PDF or other formats.

Core Design Process

The workflow is a closed loop: clarify the request → collect design context → generate HTML output → preview in a browser → iterate.

Project Structure & Execution Flow

skills/baoyu-design/
├── SKILL.md            # entry point defining the workflow
├── system-prompt.md    # core design methodology (single source of truth)
├── references/
│   ├── claude.md      # adaptation guide for Claude Code
│   ├── cursor.md      # adaptation guide for Cursor
│   └── codex.md       # adaptation guide for Codex
├── built-in-skills/    # prompt files for specific design scenarios (slides, import, export, …)
└── starter-components/ # device frames, basic components, animation engine

When invoked, the Agent reads SKILL.md, loads system-prompt.md for design decisions, detects the editor environment, loads the corresponding adaptation guide, calls the appropriate sub‑skill, and writes the HTML design files into the project directory.

Design Philosophy

Single source of truth : system-prompt.md drives all design decisions.

Modular extensibility : each scenario is handled by an independent prompt file.

Cross‑platform compatibility : environment detection enables support for multiple editors.

Minimal dependencies : pure text prompts without special toolchains.

Quick‑Start Guide

Prerequisites

Local coding Agent (Cursor, Claude Code, Codex, or compatible agents such as Cline, Roo Code).

Claude Opus 4.8 (recommended for best design quality).

Node.js (for the install script) and Python 3 (for the preview server).

Installation Options

Option 1 – npx installer (recommended)

# Install into the current project (auto‑detect editor)
npx skills add JimLiu/baoyu-design

# Global install for all projects
npx skills add JimLiu/baoyu-design -g

# Specify the editor explicitly
npx skills add JimLiu/baoyu-design --agent claude-code
npx skills add JimLiu/baoyu-design --agent cursor
npx skills add JimLiu/baoyu-design --agent codex

Installation paths differ per editor (e.g., .claude/skills/ for Claude Code, .agents/skills/ or ~/.agents/skills/ for Cursor/Codex).

Running the Skill

Invoke the skill with natural language, for example:

Design a meditation‑app settings page with modules for sound, theme, and notifications, using a clean modern style.

The Agent generates the HTML design, saves it to the project, and you can preview it locally, e.g.:

python3 -m http.server 4311 --directory designs

Typical Use Cases

Rapid prototype validation.

Exporting design systems from existing websites.

Quick generation of presentation decks.

Multi‑page design under design‑system constraints.

Mobile UI design.

Figma‑to‑HTML conversion.

Comparison with Alternatives

vs Claude.ai/design (official web UI)

Runtime : Local editor vs Web browser.

Network dependency : Only initial download vs Required for every session.

Output location : Project directory (version‑controlled) vs Downloaded to a local folder.

Workflow integration : Deep integration vs Frequent context switching.

Customizability : Forkable prompts vs Not customizable.

vs Figma (professional design tool)

Work mode : Text‑driven (describe → generate) vs Visual drag‑and‑drop.

Learning curve : Low (write prompts) vs Medium.

Fine‑grained control : Limited by AI capabilities vs Full freedom.

Design‑system support : Supported vs Supported.

Conclusion: baoyu-design excels for fast iteration and version‑controlled prototypes, while Figma remains the tool of choice for detailed, pixel‑perfect designs. The two can complement each other, e.g., importing Figma files as references for baoyu-design.

vs Other AI Design Tools

Originates from Anthropic’s Claude Design methodology.

Broad compatibility with multiple editors.

Deep design‑system support.

Community‑maintained with rapid updates.

Offline import of Figma or other design sources for better privacy.

Prompt‑Writing Recommendations

Provide design context : reference screenshots, brand guidelines, or code repositories.

Specify target users and scenarios : e.g., "for mobile users" or "enterprise‑focused".

State constraints explicitly : e.g., "use only colors from the existing palette" or "include accessibility features".

Accept iterative feedback : "change this color", "make the button larger", "switch to this layout".

Practical Examples

Example 1 – Multiple branding concepts

I want a pricing page for a SaaS app.
Use our brand colors (deep blue and white) and font choices.
Generate three layout variants:
1. Three‑column side‑by‑side comparison
2. Stacked step‑by‑step purchase flow
3. Card‑grid layout
Each variant should include price, feature comparison, and CTA button.

Example 2 – Extract design system from a codebase

We have a React component library at https://github.com/our-company/ui-kit.
Please:
1. Scan CSS files and component definitions.
2. Extract all color, font, and spacing tokens.
3. Generate a design‑system preview showing all components.

Example 3 – Iterative optimization

First pass: "Design a user‑registration form, minimal style"
[receive design]
Second pass: "The field spacing is too large, reduce by 20%"
[receive updated design]
Third pass: "Make the button rounded and add a loading state"
[receive final design]

References

Official repository: https://github.com/JimLiu/baoyu-design
Claude Design: https://claude.ai/design

Disclaimer: Content is for learning and exchange only; use the described tools in compliance with platform terms and applicable laws.