Most developers skip wireframing because it means opening a second tool, exporting static images, and then manually translating those layouts into JSX or CSS. That context switch costs time and often introduces drift between the design and the final implementation. Baoyu-design closes that gap by running Claude Design as a local agent skill inside Claude Code and Cursor. You describe a screen in natural language, the skill generates a self-contained artifact, and you iterate on the layout without leaving your terminal or editor. The project lives at https://github.com/JimLiu/baoyu-design and is built in JavaScript, so it runs wherever you already have Node installed.
What This Agent Skill Does
Baoyu-design is not a design application with a GUI. It is a skill wrapper that gives Claude Code and Cursor the ability to generate UI mockups, wireframes, slide decks, and interactive prototypes as plain files in your project. Instead of returning only text explanations, the agent can now output HTML pages, React components, or CSS sketches that you open in a browser or preview pane.
Because the skill operates locally, it reads your existing file tree. If you have a Tailwind configuration or a theme file, the generated mockups can reference those tokens. If you use a component library, the skill can match your button and card styles. The artifacts are deliberately self-contained. A single HTML file carries its own styles. A component file imports nothing beyond standard dependencies. You can commit these files to Git, attach them to a pull request, or email them to a product manager without worrying about broken asset links or missing font files.
How It Runs Locally
The repo is pure JavaScript. It acts as a bridge between the agent's intent and your local file system. When Claude Code or Cursor decides that a design task is appropriate, it invokes the skill through a local command or protocol hook. The skill takes the prompt, optionally enriches it with context from your repo, and calls the underlying model to generate the artifact. The result is written to disk and the file path is returned to the agent.
This local execution matters for two reasons. First, your source code and prompts never leave the machine for a specialized design SaaS. Second, the skill can run offline from a design perspective once the artifact is generated, because the output is just a file. You do not need a live connection to a design server to view the mockup. The tool also avoids the subscription tiers and upload limits that come with cloud-based design platforms.
Installation and Setup
Start by cloning the repository and installing dependencies.
git clone https://github.com/JimLiu/baoyu-design.git
cd baoyu-design
npm install
After installation, review the README for the exact environment variables. You will likely need to set an API key if the skill contacts the Claude API directly, though in some configurations Claude Code handles the model layer and the skill only manages file generation. The project is designed to be transparent about its configuration. There are no hidden binaries or Docker containers required.
If the skill uses a local configuration file, place it in the project root. A simple JSON structure controls the default output directory and preferred styling framework.
cp config.example.json config.json
Edit the paths to match your repo. The defaults write artifacts to a local folder so you can inspect them before promoting them to your source tree. You can override the output path per command if you want to drop a prototype directly into your Next.js app directory.
Wiring It Into Claude Code
Claude Code supports agent skills through a manifest or directory-based registry. Baoyu-design provides the metadata needed to register itself. You typically copy or symlink the skill into Claude Code's skills directory, then restart the session.
Once registered, the skill is available as a first-class tool. You can ask:
/design a checkout flow with cart summary, payment form, and confirmation modal
Claude Code parses the intent, invokes the local skill, and waits for the artifact path. The skill generates the mockup and returns it. Claude Code can then display the file, suggest refinements, or ask if you want to convert the layout into production React components. The entire conversation keeps the same context, so the model does not forget the layout choices when it switches to implementation mode. You can chain commands: generate the wireframe, adjust the spacing, then convert the final file into a page component.
Running It Inside Cursor
Cursor's architecture differs. It does not mirror Claude Code's skill protocol exactly, but it supports agentic workflows through Composer and custom slash commands. The most reliable way to use Baoyu-design in Cursor is to treat it as a local script that you invoke from the integrated terminal or from a chat shell command.
Open the Cursor terminal and run the generate entry point.
node ./baoyu-design/bin/generate.js --prompt "Admin dashboard with sidebar navigation and data table"
The script writes an artifact to your configured output folder. You can then reference that file in Cursor chat by dragging it into the conversation or by typing the relative path. Cursor's agent reads the generated markup and can iterate on it, convert it to framework-specific code, or apply your existing design system tokens. The workflow requires one extra manual step compared to Claude Code's native routing, but the result is the same: you stay inside the editor from mockup to code. Over time, you can alias the command in your shell to reduce the typing.
From Mockup to Production Code
The generated artifact is the specification. Because it is a self-contained file, you can open it in a browser tab to review spacing, colors, and layout hierarchy. If something is off, you describe the change in the chat window instead of redrawing a rectangle. The agent adjusts the CSS or component structure and regenerates the file. That rapid loop is difficult to replicate when you are switching between a design tool and a code editor.
When you are ready to ship, the handoff is direct. You ask the agent to convert the mockup into production code. Because the file lives in your repository, the agent can compare it against your existing component library. It can replace hardcoded hex values with theme variables, split a monolithic prototype into smaller files, and add TypeScript interfaces. The mockup becomes a living reference that you can delete once the real components are tested, or keep in a documentation folder for future redesigns.
This eliminates the typical design-to-code drift. You are not interpreting an auto-layout frame and guessing at gap values. The agent generated the CSS once, and now it is responsible for turning that same logic into your application's component layer. The transition from mockup to pull request is a conversation, not a handoff meeting.
Where It Falls Short
Be honest about the limits. This tool is not a replacement for a dedicated design application when you need pixel-perfect control, complex vector illustration, or rigorous multi-device responsive testing. The model can misjudge mobile breakpoints, use inaccessible color contrast, or generate layouts that rely on absolute positioning in ways that do not scale. You should review every artifact with the same critical eye you apply to generated code.
Performance depends on model latency and prompt complexity. A ten-slide deck or a high-fidelity landing page can take noticeable time to generate. The project is also early-stage. Expect occasional breaking changes as Claude Code's skill protocol evolves. If you rely on it for client work, budget time for prompt tweaking and manual cleanup. The README at https://github.com/JimLiu/baoyu-design is the best source for current compatibility notes.
The sweet spot is early-stage prototyping, internal tools, and rapid feature ideation. It shines when you need consensus on a layout before you invest time in data fetching and state management.
Clone https://github.com/JimLiu/baoyu-design, install the dependencies, and generate a wireframe for your next feature. Open the artifact in your browser, decide what needs to change, and tell your agent to refine it. Once the layout looks right, ask the agent to convert it into a real component. The best way to evaluate the workflow is to run it against your own repository in the next ten minutes.