JimLiu/baoyu-design

baoyu‑design – Claude Design as a local agent skill

What it is

• A portable skill that brings the Claude Design engine (the same backend that powers https://claude.ai/design) into any file‑capable coding agent you run locally – e.g. Cursor, Claude Code, Codex, or any of the 70‑plus agents supported by the skills CLI.
• The skill is just a collection of Markdown, a few JSX/JS helper files and a set of built‑in prompts (called “skills”) that drive a full UI‑design workflow.
• All output is self‑contained HTML (with optional PDF, PPTX, video, etc.) stored under designs/<project>/ so it can be version‑controlled, exported, or shipped directly from your repo.

Why you might want it

• No web service or subscription – the design work stays on your machine; you keep the artefacts and the data never leaves your repo.
• Works best with Claude Opus 4.8 (the strongest Claude model), but will run on any capable LLM.
• Visual “point‑and‑edit” loop – because the result is served on localhost, you can use the agent’s built‑in preview/browser to click an element and ask the model to modify it, getting instant source‑code updates.
• Design‑system aware – you can import existing design systems (including offline Figma .fig files) and bind them to new projects, ensuring consistent branding.

Key capabilities

Area	What the skill can generate
Core design	Hi‑fi mockups, wireframes, interactive prototypes, aesthetic direction
Decks	Slide decks with speaker notes, full‑screen presentation mode, export to editable PPTX or PNG screenshots
Mobile & motion	Mobile‑app prototypes, animated videos, sound effects
Web & campaigns	Websites, landing pages, HTML emails, flyers, trifold brochures
Data & research	Web research, data‑science notebooks, visualisations, maps
Docs, 3D & illustration	Documents, 3D objects, watercolor‑style illustrations
Design systems	Create, import, bind, version‑pin, and preview design systems; component scaffolding (.dc.html)
Imports	Offline Figma .fig decoding, GitHub repo partial checkout, existing HTML/CSS as source material
Exports	Stand‑alone HTML, PDF, PPTX (editable or screenshot), MP4 video, direct hand‑off to Claude Code, Figma, Canva
AI assets	Gemini image generation, calling Claude from prototypes, PDF reading

How it works

• The entry point is SKILL.md. When you ask the agent for a design, it reads this file, loads the methodology from system-prompt.md, detects which agent you are using (Cursor, Claude Code, Codex, etc.) via the reference docs in references/, and pulls in only the built‑in skill files needed for the task.
• The skill orchestrates a conversational loop: clarifying questions → design generation → HTML output → live preview → visual second‑pass edits.
• No build step or runtime is required; the files are plain Markdown/JSX that the agent interprets directly.

Installation (requires Node.js; Python is optional for the preview server)

# Recommended: use the Vercel‑Labs `skills` CLI
npx skills add JimLiu/baoyu-design          # auto‑detects your local agent
# Global install (available to every project)
npx skills add JimLiu/baoyu-design -g
# Target a specific agent
npx skills add JimLiu/baoyu-design --agent claude-code

• The CLI copies the skill into the appropriate folder (.claude/skills/ for Claude Code, .agents/skills/ for Cursor/Codex, etc.).
• Updating is similarly simple: npx skills update baoyu-design (or upgrade).

Basic usage

1. Describe a design in natural language to your agent, e.g.:

   "Design three hi‑fi variations of a settings screen for a meditation app."

2. The skill activates automatically (or via /baoyu-design in Claude Code, $baoyu-design in Codex). It asks any needed clarification, then writes the HTML under designs/<project>/.
3. Open the preview (the agent usually starts a local HTTP server for you). Point at any element in the live preview and tell the model what to change – the source HTML is edited on‑the‑fly.
4. When satisfied, ask the agent to export (e.g., export to PPTX, download PDF, save as MP4).

Design‑system workflow

• Create a system with the built‑in Create design system skill or import one from a Figma .fig file.
• When starting a new design, the agent lists available systems; you can pick none, one, or several. The chosen system(s) are copied into _ds/<slug>/ inside the project and referenced via _d_meta.json.
• The system becomes the authoritative source of tokens, fonts, and components – the model will not invent out‑of‑system colours or typography.
• Later you can refresh, swap, or remove systems, and the binding persists across sessions.

Importing existing assets

• Figma .fig – decoded entirely offline; no API key needed. The skill extracts pages, components, tokens, SVG/PNG assets and can emit a full design system or React code.
• GitHub repo – the skill performs a sparse checkout of only the paths you need, records the repo URL for provenance.
• HTML/CSS – the skill reads real stylesheets, copies exact values (colours, spacing, shadows, etc.) and assets into the new project.

Decks & PPTX export

• Decks are built as self‑contained HTML using the deck‑stage component.
• You can add per‑element animations via data-anim attributes (e.g., fade-in, fly-in, path).
• The skill ships a local CLI (agents/gen-pptx/) that runs headless Chromium via Playwright, captures the live DOM, and writes a PowerPoint file with native animations using PptxGenJS. No external service is required.

Preview server (if you need to run it manually)

python3 -m http.server 4311 --directory designs
# then open http://localhost:4311/<project>/<file>.html

License & badges

• MIT License
• Optimised for Claude Opus 4.8 (badge “Best with Opus 4.8”)
• Supports Cursor · Claude Code · Codex (badge “Harness”)

---

Bottom line: baoyu‑design lets you run the powerful Claude Design engine inside any local coding agent, giving you a full‑featured UI/UX design workflow—mockups, prototypes, design‑system management, and export to HTML/PDF/PPTX—without leaving your editor or paying for a hosted service.