baoyu-design-integration

name	baoyu-design-integration
description	Run Claude Design locally as an Agent Skill to produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML
triggers	["create a design using baoyu-design","make a prototype with claude design locally","design a UI mockup as HTML","build an interactive prototype","create a slide deck design","wireframe a mobile app interface","generate a landing page design","design a dashboard UI"]

baoyu-design Integration

Skill by ara.so — Design Skills collection.

baoyu-design packages Claude Design — the design engine behind claude.ai/design — as a portable Agent Skill. It enables local agents to produce polished UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, and slide decks as self-contained HTML files.

What It Does

• Full design process: Clarifying questions → design context gathering → HTML deliverables → preview & verification
• 24 built-in skills: Hi-fi design, interactive prototypes, wireframes, slide decks, mobile prototypes, design systems, export formats (PDF, PPTX, Figma)
• Visual iteration loop: Point at elements in browser preview, describe changes, agent edits source
• Self-contained output: All designs saved as standalone HTML in designs/<project>/
• Best with Claude Opus 4.8: Optimized for strong models but works with other capable LLMs

Installation

Via npx skills CLI (Recommended)

# Install into current project (auto-detects agent)
npx skills add JimLiu/baoyu-design

# Install globally for all projects
npx skills add JimLiu/baoyu-design -g

# Target specific agent
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

Installs to:

• .claude/skills/ for Claude Code
• .agents/skills/ for Cursor/Codex
• Add -g for user-level install (~/.claude/skills/ or ~/.agents/skills/)

Manual Installation

# Clone the repository
git clone https://github.com/JimLiu/baoyu-design.git

# Copy skill directory to your agent's skills folder
# For Claude Code:
cp -r baoyu-design/skills/baoyu-design ~/.claude/skills/

# For Cursor/Codex:
cp -r baoyu-design/skills/baoyu-design ~/.agents/skills/

# For project-specific install:
cp -r baoyu-design/skills/baoyu-design ./.claude/skills/

Alternative: Direct URL

Paste the repository URL into your agent chat:

Read https://github.com/JimLiu/baoyu-design and follow its skills/baoyu-design/SKILL.md to design a settings screen for a meditation app.

Skill Structure

skills/baoyu-design/
├── SKILL.md              # Entry point — orchestrates the design flow
├── system-prompt.md      # Design methodology & craft standards
├── references/
│   ├── claude.md         # Tool map for Claude Code
│   ├── cursor.md         # Tool map for Cursor
│   └── codex.md          # Tool map for Codex Agent
├── built-in-skills/      # 24 specialized design prompts
│   ├── hi-fi-design.md
│   ├── interactive-prototype.md
│   ├── wireframe.md
│   ├── make-deck.md
│   ├── mobile-prototype.md
│   └── ...
└── starter-components/   # Reusable scaffolds
    ├── device-frames/
    ├── deck-stage/
    ├── canvas/
    └── animation-engine/

Usage Patterns

Basic Design Request

The skill auto-activates from natural language:

Design 3 hi-fi variations of a settings screen for a meditation app.

In Claude Code, explicitly trigger with:

/baoyu-design design a pricing page

In Codex, mention when skills are available:

$baoyu-design create a dashboard UI

With Design Context (Recommended)

Provide screenshots, design files, or codebase references for better results:

Design a pricing page based on this screenshot [attach image]. 
Use the brand colors and typography from the image.

Recreate the composer UI from src/components/Composer.jsx, 
then make it interactive with working state management.

Make a 10-slide deck from this PRD.md for an engineering all-hands. 
Use our brand guidelines from brand-kit.pdf.

Interactive Prototype

Prototype a working onboarding flow with:
- Real state management
- Smooth transitions between steps
- Form validation
- Progress indicator

Mobile Design

Wireframe a few layout ideas for a mobile expense-tracker home screen.
Show iOS and Android variations with native UI patterns.

Slide Deck

Create a pitch deck with 12 slides covering:
1. Problem statement
2. Our solution
3. Market opportunity
4. Product demo
5. Business model
6. Team
7. Roadmap
8. Ask

Use clean, modern aesthetic with data visualizations.

Design System Creation

Build a design system component library for our SaaS dashboard including:
- Button variants (primary, secondary, ghost, danger)
- Form inputs (text, select, checkbox, radio)
- Card layouts
- Navigation patterns
- Color palette and typography scale

Preview Server

Designs are previewed over HTTP. The agent typically starts this automatically:

# Manual preview server (Python 3)
python3 -m http.server 4311 --directory designs

# Then open in browser:
# http://localhost:4311/<project>/<file>.html

# Alternative with Node.js
npx http-server designs -p 4311

Output Structure

All deliverables are saved as self-contained HTML:

designs/
└── <project-name>/
    ├── index.html           # Main deliverable
    ├── variant-1.html       # Design variations
    ├── variant-2.html
    ├── variant-3.html
    ├── prototype.html       # Interactive prototype
    ├── wireframe.html       # Wireframe version
    └── deck.html            # Slide deck

Each HTML file is standalone — no external dependencies, all CSS/JS inline.

Built-in Skills Reference

Core Design

• hi-fi-design — High-fidelity UI mockups
• interactive-prototype — Working prototypes with state
• wireframe — Low-fidelity wireframes
• frontend-aesthetic-direction — Visual design exploration

Decks & Presentations

• make-deck — Slide presentations
• speaker-notes — Add presenter notes

Mobile & Motion

• mobile-prototype — iOS/Android app designs
• animated-video — Motion graphics and animations
• sound-effects — Audio integration

Design Systems

• create-design-system — Component libraries
• design-components — Individual components (.dc.html)
• make-tweakable — Add live editing panel

Export & Handoff

• standalone-html — Self-contained export
• export-pdf — PDF generation
• export-pptx-editable — Editable PowerPoint
• export-pptx-screenshots — Screenshot-based PPTX
• send-to-figma — Figma integration
• send-to-canva — Canva integration
• handoff-to-claude-code — Developer handoff

AI Integration

• gemini-image-generation — AI-generated images
• call-claude-from-prototypes — Embedded AI features
• read-pdf — PDF content parsing

Common Workflows

Workflow 1: Brand-Consistent Landing Page

1. "Design a landing page for our SaaS product"
   → Agent asks for brand context
   
2. Provide: screenshot of existing site, logo, brand-kit.pdf
   
3. Agent produces 3 variations in designs/landing-page/
   
4. Preview at http://localhost:4311/landing-page/variant-1.html
   
5. "Make the hero section taller and add a video background"
   → Agent edits variant-1.html
   
6. "Export this as standalone HTML for deployment"
   → Agent uses standalone-html skill

Workflow 2: Mobile App Prototype

1. "Prototype an iOS habit-tracking app with working navigation"
   
2. Agent asks about:
   - Target iOS version
   - Color scheme
   - Key features
   
3. Respond with feature list and design references
   
4. Agent produces interactive prototype with:
   - iOS device frame
   - Tab navigation
   - Modal interactions
   - State persistence
   
5. Test in browser, request refinements by pointing at elements

Workflow 3: Pitch Deck Creation

1. "Create a 15-slide investor pitch deck from this outline.md"
   
2. Agent reads outline, asks for:
   - Company logo
   - Brand colors
   - Data for charts
   
3. Provide assets and data
   
4. Agent generates deck.html with:
   - Slide navigation
   - Presenter mode
   - Speaker notes
   
5. "Export as editable PPTX"
   → Uses export-pptx-editable skill

Iteration & Refinement

The key advantage of local execution is visual iteration:

# Point at elements in browser preview
"Make that button larger"
"Change the header background to gradient"
"Add more padding around the cards"
"Use a darker shade of blue"
"Align those icons vertically"

# Agent uses browser DevTools or element annotation to identify
# the exact element, then edits the HTML source

This creates a tight feedback loop — you don't describe element locations, you point at them.

Configuration

Model Selection

For best results, configure your agent to use Claude Opus 4.8:

Claude Code:

# Set in ~/.claude/config.json
{
  "model": "claude-opus-4.8"
}

Cursor:

// Settings → Features → AI Model
// Select: Claude Opus 4.8

Environment Variable:

export ANTHROPIC_MODEL="claude-opus-4.8"

Custom Component Library

Add your own starter components:

# Create custom components directory
mkdir -p skills/baoyu-design/starter-components/custom/

# Add your component
cat > skills/baoyu-design/starter-components/custom/my-nav.html << 'EOF'
<!-- Your custom navigation component -->
<nav class="custom-nav">
  <!-- ... -->
</nav>
EOF

Reference in prompts:

Use the custom navigation from starter-components/custom/my-nav.html

Brand Context Files

Store brand assets for reuse:

mkdir -p designs/_brand/
cp logo.svg designs/_brand/
cp brand-colors.json designs/_brand/
cp typography.css designs/_brand/

Reference in prompts:

Use brand assets from designs/_brand/

Code Examples

Example 1: Interactive Dashboard (Generated Output)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics Dashboard</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #f5f5f7;
      padding: 2rem;
    }
    .dashboard { 
      display: grid; 
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
      max-width: 1400px;
      margin: 0 auto;
    }
    .card {
      background: white;
      border-radius: 12px;
      padding: 1.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    .metric { font-size: 2rem; font-weight: 600; color: #1d1d1f; }
    .label { color: #86868b; font-size: 0.875rem; margin-top: 0.5rem; }
    .chart { height: 200px; margin-top: 1rem; }
  </style>
</head>
<body>
  <div class="dashboard">
    <div class="card">
      <div class="metric">$47,329</div>
      <div class="label">Revenue (MTD)</div>
      <canvas class="chart" id="revenueChart"></canvas>
    </div>
    <div class="card">
      <div class="metric">1,234</div>
      <div class="label">Active Users</div>
      <canvas class="chart" id="usersChart"></canvas>
    </div>
    <div class="card">
      <div class="metric">94.2%</div>
      <div class="label">Uptime</div>
      <canvas class="chart" id="uptimeChart"></canvas>
    </div>
  </div>
  
  <script>
    // Simple chart rendering (production would use Chart.js or similar)
    function drawLineChart(canvasId, data) {
      const canvas = document.getElementById(canvasId);
      const ctx = canvas.getContext('2d');
      const width = canvas.width = canvas.offsetWidth * 2;
      const height = canvas.height = canvas.offsetHeight * 2;
      ctx.scale(2, 2);
      
      ctx.strokeStyle = '#007AFF';
      ctx.lineWidth = 2;
      ctx.beginPath();
      data.forEach((value, i) => {
        const x = (i / (data.length - 1)) * (width / 2);
        const y = (height / 2) - (value * height / 2);
        i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
      });
      ctx.stroke();
    }
    
    drawLineChart('revenueChart', [0.3, 0.5, 0.4, 0.7, 0.6, 0.8, 0.75]);
    drawLineChart('usersChart', [0.4, 0.45, 0.5, 0.48, 0.6, 0.65, 0.7]);
    drawLineChart('uptimeChart', [0.9, 0.92, 0.95, 0.94, 0.96, 0.95, 0.97]);
  </script>
</body>
</html>

Example 2: Mobile Prototype with iOS Frame

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meditation App — Prototype</title>
  <style>
    body { 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      min-height: 100vh; 
      background: #1a1a1a;
      margin: 0;
    }
    .device-frame {
      width: 390px;
      height: 844px;
      background: #000;
      border-radius: 55px;
      padding: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      position: relative;
    }
    .device-frame::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 150px;
      height: 30px;
      background: #000;
      border-radius: 0 0 20px 20px;
      z-index: 10;
    }
    .screen {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 47px;
      overflow: hidden;
      position: relative;
    }
    .app-content {
      padding: 60px 24px 24px;
      color: white;
      height: 100%;
      overflow-y: auto;
    }
    .greeting { font-size: 2rem; font-weight: 300; margin-bottom: 2rem; }
    .session-card {
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 1.5rem;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .session-card:active { transform: scale(0.98); }
    .tab-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80px;
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(20px);
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-bottom: 20px;
    }
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: rgba(255,255,255,0.6);
      font-size: 0.75rem;
      cursor: pointer;
    }
    .tab-item.active { color: white; }
  </style>
</head>
<body>
  <div class="device-frame">
    <div class="screen">
      <div class="app-content">
        <div class="greeting">Good evening, Sarah</div>
        <div class="session-card">
          <div style="font-size: 1.25rem; font-weight: 500;">Sleep Meditation</div>
          <div style="opacity: 0.8; margin-top: 0.5rem;">15 min · Relaxation</div>
        </div>
        <div class="session-card">
          <div style="font-size: 1.25rem; font-weight: 500;">Anxiety Relief</div>
          <div style="opacity: 0.8; margin-top: 0.5rem;">10 min · Breathing</div>
        </div>
        <div class="session-card">
          <div style="font-size: 1.25rem; font-weight: 500;">Morning Focus</div>
          <div style="opacity: 0.8; margin-top: 0.5rem;">8 min · Energy</div>
        </div>
      </div>
      <div class="tab-bar">
        <div class="tab-item active">
          <svg width="24" height="24" fill="currentColor"><circle cx="12" cy="12" r="8"/></svg>
          <span>Home</span>
        </div>
        <div class="tab-item">
          <svg width="24" height="24" fill="currentColor"><path d="M12 2L2 7v10c0 5.5 3.8 10.7 10 12 6.2-1.3 10-6.5 10-12V7l-10-5z"/></svg>
          <span>Library</span>
        </div>
        <div class="tab-item">
          <svg width="24" height="24" fill="currentColor"><circle cx="12" cy="8" r="4"/><path d="M12 14c-4.4 0-8 1.8-8 4v2h16v-2c0-2.2-3.6-4-8-4z"/></svg>
          <span>Profile</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Example 3: Invoking Specific Built-in Skills

When you need a specific output type, reference the built-in skill:

Create a wireframe using the wireframe skill for a checkout flow with:
- Cart review
- Shipping address
- Payment method
- Order confirmation

Keep it low-fidelity, grayscale, with placeholder content.

Use the make-deck skill to create a product roadmap presentation:
- Q1 2024: Core features
- Q2 2024: Mobile apps
- Q3 2024: Enterprise features
- Q4 2024: AI integration

Include speaker notes for each slide.

Apply the mobile-prototype skill to design an Android expense tracker with:
- Bottom navigation
- FAB for adding expenses
- Material Design 3 styling
- Working category filters

Troubleshooting

Skill Not Activating

Problem: Agent doesn't recognize design requests.

Solutions:

# Verify installation
ls -la ~/.claude/skills/baoyu-design/
ls -la ~/.agents/skills/baoyu-design/

# Reinstall
npx skills add JimLiu/baoyu-design -g --force

# Explicitly trigger (Claude Code)
/baoyu-design create a dashboard

# Explicitly trigger (Codex)
$baoyu-design design a landing page

Preview Server Not Starting

Problem: localhost:4311 not accessible.

Solutions:

# Check if port is in use
lsof -i :4311

# Use different port
python3 -m http.server 8080 --directory designs
# Then update references to http://localhost:8080/

# Ensure designs/ directory exists
mkdir -p designs

Output Quality Issues

Problem: Generated designs are low-quality or inconsistent.

Solutions:

1. Use Claude Opus 4.8 — The skill is optimized for strong models
2. Provide design context — Screenshots, brand kits, or references dramatically improve output
3. Be specific — "Modern SaaS dashboard with dark mode, Tailwind aesthetic" vs "make a dashboard"
4. Iterate visually — Use browser preview to point at specific elements

Missing Starter Components

Problem: Agent can't find device frames or templates.

Solutions:

# Verify starter components
ls skills/baoyu-design/starter-components/

# Re-download if missing
cd skills/baoyu-design
git pull origin main

# Or reinstall completely
npx skills add JimLiu/baoyu-design -g --force

Multi-file Prototypes Not Loading

Problem: Prototype with external assets won't load.

Solution: All assets must be inline or served over HTTP:

# Don't open directly in browser (file:// protocol)
# ❌ file:///path/to/designs/project/index.html

# Do use preview server (http:// protocol)
# ✅ http://localhost:4311/project/index.html
python3 -m http.server 4311 --directory designs

Agent Not Using Design Context

Problem: You provided screenshots/files but agent ignores them.

Solutions:

# Explicitly reference context in prompt
"Design a settings page using the colors and typography from screenshot.png"

# Attach files inline if supported
[Attach: brand-kit.pdf, logo.svg]
"Use these brand assets for a landing page design"

# Point to codebase patterns
"Match the component style from src/components/Button.tsx"

Best Practices

1. Start with context — Provide screenshots, brand guidelines, or existing code before requesting designs
2. Use Claude Opus 4.8 — Quality scales dramatically with model capability
3. Iterate visually — Point at browser preview elements instead of describing locations
4. Export when final — Use standalone-html or export-pdf skills for production-ready outputs
5. Version control designs — Commit designs/ directory to track design iterations
6. Organize by project — Use descriptive folder names: designs/landing-page/, designs/mobile-app/
7. Leverage built-in skills — Reference specific skills (make-deck, mobile-prototype) for consistent output types

Environment Variables

No API keys required — the skill runs within your agent's existing authentication context.

Optional configuration:

# Preferred model (if agent supports override)
export ANTHROPIC_MODEL="claude-opus-4.8"

# Custom preview port
export BAOYU_PREVIEW_PORT="4311"

# Custom designs output directory
export BAOYU_DESIGNS_DIR="./designs"

Integration with Development Workflow

Version Control

# Add designs to git
git add designs/
git commit -m "Add dashboard design variations"

# .gitignore (if you want to exclude)
echo "designs/" >> .gitignore

Export for Production

# Generate production-ready HTML
"Export the final dashboard design as standalone HTML with minified CSS/JS"

# The agent will:
# 1. Inline all assets
# 2. Minify CSS and JavaScript
# 3. Remove comments and debug code
# 4. Output to designs/<project>/production.html

Handoff to Developers

# Use handoff skill
"Use handoff-to-claude-code skill to prepare this prototype for development"

# Generates:
# - Annotated HTML with component boundaries
# - CSS variables for theming
# - JavaScript state structure
# - Implementation notes

Resources

• Repository: https://github.com/JimLiu/baoyu-design
• Documentation: README.md in repository
• Changelog: CHANGELOG.md for version history
• License: MIT

---

The skill auto-activates when you describe design tasks. Just ask for what you need — the agent handles the rest.