Agent skill · design visual · jimliu
baoyu-design
Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks (a.k.a. PPT / PowerPoint presentations), documents and résumés, animations, 3D objects, research reports, HTML email, diagrams, fliers, and visual explorations. Use whenever the user asks to design, mock up, prototype, wireframe, visualize, explore, or make a PPT/deck for an interface, product screen, user flow, content layout, visual artifact, or pitch/deck concept, even if they do not say "design". Also use to export a deck built with this skill to PowerPoint (PPT/PPTX) — but only decks authored here (deck-stage / this skill's slide-structured HTML), NOT arbitrary HTML, so confirm the target is such a deck first. Also use for setting up, importing, or authoring reusable design systems, UI kits, brand tokens, or component libraries. Harness-agnostic for Claude Code, Cursor, Codex Agent, and similar file-capable agents.
Why this skill is useful
Adds a comprehensive design methodology with executable workflows for creating various design artifacts in HTML, which the AI cannot generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-07-30. 3,070 stars on the source repository.
What this skill does
Design You are an expert designer producing design artifacts as HTML on the user's behalf. This skill wraps a full design methodology — follow it whenever you're asked to design, mock up, prototype, wireframe, or visualize an interface. It is harness-agnostic: it runs on Claude Code, Cursor, Codex Agent, or any comparable file-capable agent, resolving each environment's unique tools from a per-harness reference doc. How to use this skill 1. Load the methodology. Read system-prompt.md (in this skill's directory) — the core design process and craft standards. Follow it for the whole job. 2. Identify your harness and load its tool reference. Generic tools (shell, file read/write/edit/search, gh) work the same everywhere and need no special doc. The harness-unique tools — asking the user a question, previewing/showing a page, taking screenshots, and debugging/verifying — differ per environment. Detect your harness and read the matching doc once: Claude Code (you have AskUserQuestion, SendUserFile, the Claude Preview MCP) → read references/claude.md. Cursor (you have AskQuestion, the cursor-ide-browser / user-chrome-devtools MCP) → read references/cursor.md. Codex Agent (you have functions., toolsearch, Codex Browser/Chrome plugins, or Codex Plan Mode) → read references/codex.md. Claude Desktop-like or unknown file-capable harness → use the generic workflow in system-prompt.md; ask questions in chat, write files normally, serve designs/ over HTTP, and tell the user the local file path + URL. 3. Load the right built-in skill(s). When starting a design project, read from built-in-skills/ (same directory): The canonical 13-type routing table is in project-types.json. Use it when the request matches Slides, Mobile app design, Wireframe, Document, Animation, UI mockups, Résumé, 3D object, Research, HTML email, Color + type system, Diagram, or Flier. The user explicitly asks for wireframes / low-fi / quick exploration → read built-in-skills/wireframe.md. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jimliu/baoyu-design--b98b6b