baoyu-design

Q: How to install baoyu-design?

Create the skills directory: mkdir -p .claude/skills. Then run: mkdir -p .claude/skills && curl -o .claude/skills/baoyu-design.md https://raw.githubusercontent.com/JimLiu/baoyu-design/main/SKILL.md. Finally, /baoyu-design in Claude Code.

Q: What is baoyu-design best for?

baoyu-design is categorized under General. It covers: design, agent.

New

922GitHub TrendingGeneralby JimLiu

Run Claude Design locally as an Agent Skill — Cursor, Claude Code & more. Produce polished UI mockups, prototypes, decks & wireframes as self-contained HTML, without claude.ai/design. Best with Opus 4.8.

First seen 6/7/2026

Summary

ai/design.

This skill is ideal for developers who want to rapidly iterate on visual designs directly within their coding environment, leveraging Claude's design capabilities for high-fidelity outputs.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/baoyu-design.md https://raw.githubusercontent.com/JimLiu/baoyu-design/main/SKILL.md

Invoke in Claude Code

/baoyu-design

Use Cases

Generate a responsive landing page mockup for a SaaS product with hero section, features grid, and pricing table.

Create a multi-slide presentation deck with custom layouts, charts, and brand colors for a project pitch.

Design a mobile app wireframe with navigation flow, input forms, and interactive prototype elements.

Produce a polished UI component library (buttons, cards, modals) as reusable HTML/CSS snippets.

Convert a rough sketch or description into a high-fidelity prototype with animations and hover effects.

Rapidly iterate on a dashboard layout with data visualizations, sidebars, and dark/light mode support.

Usage Examples

/baoyu-design Create a modern landing page for a fintech app with a gradient hero, testimonial carousel, and signup form.

/baoyu-design Build a 5-slide pitch deck about our new AI tool, using a clean corporate style with charts and bullet points.

/baoyu-design Design a mobile-first wireframe for a to-do app with task list, add button, and swipe-to-delete interaction.

View source on GitHub

designagent

Security Audits

LicenseUnknownSourceWarnRepositoryPass

Frequently Asked Questions

What is baoyu-design?

Run Claude Design locally as an Agent Skill to produce polished UI mockups, prototypes, decks, and wireframes as self-contained HTML files, all without relying on claude.ai/design. This skill is ideal for developers who want to rapidly iterate on visual designs directly within their coding environment, leveraging Claude's design capabilities for high-fidelity outputs.

How to install baoyu-design?

To install baoyu-design: create the skills directory (mkdir -p .claude/skills), then run: mkdir -p .claude/skills && curl -o .claude/skills/baoyu-design.md https://raw.githubusercontent.com/JimLiu/baoyu-design/main/SKILL.md. Finally, /baoyu-design in Claude Code.

What is baoyu-design best for?

baoyu-design is a skill categorized under General. It is designed for: design, agent. Created by JimLiu.

What can I use baoyu-design for?

baoyu-design is useful for: Generate a responsive landing page mockup for a SaaS product with hero section, features grid, and pricing table.; Create a multi-slide presentation deck with custom layouts, charts, and brand colors for a project pitch.; Design a mobile app wireframe with navigation flow, input forms, and interactive prototype elements.; Produce a polished UI component library (buttons, cards, modals) as reusable HTML/CSS snippets.; Convert a rough sketch or description into a high-fidelity prototype with animations and hover effects.; Rapidly iterate on a dashboard layout with data visualizations, sidebars, and dark/light mode support..