Summary

This project packages Anthropic's Claude Design engine as a portable Agent Skill, allowing users to generate UI mockups, interactive prototypes, wireframes, and slide decks as self-contained HTML directly within their local development environment. Targeting engineers and power users leveraging file-capable coding agents like Cursor, Claude Code, or Codex, it offers a streamlined workflow that keeps all artifacts local, eliminates reliance on claude.ai/design, and enables iterative design refinement through direct manipulation of live previews.

How It Works

The skill is implemented as plain Markdown with JSX/JS scaffolds, requiring no build step. It orchestrates the design process by reading SKILL.md, adhering to the methodology in system-prompt.md, and dynamically integrating with the host agent's tools (e.g., previewing, code editing) via environment-specific reference documents. This approach allows the core design logic to remain harness-independent while leveraging the unique capabilities of agents like Cursor or Claude Code for a tight, visual editing loop.

Quick Start & Requirements

• Install: Use the npx skills CLI: npx skills add JimLiu/baoyu-design (globally with -g, or specify agent). Alternatively, paste the GitHub repo URL directly into a compatible agent.
• Prerequisites: A local agent (Cursor, Claude Code, Codex, etc.), Node.js, Python 3 for the preview server. Claude Opus 4.8 is recommended for optimal results.
• Links: GitHub Repository

Highlighted Details

• Generates a wide array of design artifacts including hi-fi mockups, interactive prototypes, wireframes, decks, and mobile app designs, all as standalone HTML.
• Facilitates rapid iteration by allowing users to point at elements in a localhost preview and describe desired changes, which the agent then applies to the source code.
• Supports integration with design systems, enabling projects to be built using versioned component bundles and design tokens, ensuring consistency and portability.
• Offers multiple export options, including PDF, PPTX, and direct handoff to tools like Figma or Claude Code.

Maintenance & Community

This project is an independent, community-driven effort by Jim Liu, focused on repackaging and enhancing the usability of Anthropic's Claude Design engine for local agent integration. It is not officially affiliated with or endorsed by Anthropic. No specific community channels like Discord or Slack were detailed in the README.

Licensing & Compatibility

The project is released under the permissive MIT License, allowing for broad adoption, modification, and integration into both open-source and commercial projects without significant restrictions.

Limitations & Caveats

Optimal performance and output quality are contingent on using Claude Opus 4.8; results may vary with less capable models. The effectiveness of interactive features and previews relies heavily on the specific tool integrations provided by the host agent. Multi-file prototypes require a local HTTP server for proper rendering, as file:// URLs are not supported.