baoyu-design-integration

# baoyu-design Integration > Skill by [ara.so](https://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) ```bash # 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 ```bash # 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: ```bash # Manual preview server (Python 3) python3 -m http.server 4311 --directory designs # Then open in browser: # http://localhost:4311/<project>/<file>.html ``` ```bash # 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:** ```bash # Set in ~/.claude/config.json { "model": "claude-opus-4.8" } ``` **Cursor:** ```javascript // Settings → Features → AI Model // Select: Claude Opus 4.8 ``` **Environment Variable:** ```bash export ANTHROPIC_MODEL="claude-opus-4.8" ``` ### Custom Component Library Add your own starter components: ```bash # 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: ```bash 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) ```html <!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 ```html <!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;