GitHub

Related Skills

🛠 agent-toolclaude-codecodex

163K

skills

Skills for Real Engineers. Straight from my .claude directory.

Mmattpocockabout 2 months ago

npx skills@latest add mattpocock/skills

🛠 agent-toolmcp

151.5K

langflow

Langflow is a powerful tool for building and deploying AI-powered agents and workflows.

Llangflow-aiabout 2 months ago

View on GitHub

🛠 agent-toolclaude-code

137.1K

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

Aanthropicsabout 2 months ago

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows -- all through natural language commands. Use it in your terminal, IDE, or tag @claude on Github.

**Learn more in the [official documentation](https://code.claude.com/docs/en/overview)**.

<img src="./demo.gif" />

## Get started
> [!NOTE]
> Installation via npm is deprecated. Use one of the recommended methods below.

For more installation options, uninstall steps, and troubleshooting, see the [setup documentation](https://code.claude.com/docs/en/setup).

1. Install Claude Code:

    **MacOS/Linux (Recommended):**

The skill drives a full design process — clarifying questions → gathering design context → producing one or more HTML deliverables → previewing and verifying. It ships a deep bench of built‑in skills and a set of ready‑made component scaffolds.

Area	Built‑in skills
Core design	Hi‑fi design · Interactive prototype · Wireframe · Frontend aesthetic direction
Decks	Make a deck · Speaker notes
Mobile & motion	Mobile prototype · Animated video · Sound effects
Design systems	Create design system · Use design system · Design system preview · Design Components (`.dc.html`) · Make tweakable
Import sources	Figma `.fig` (offline decode) · GitHub repo · Existing HTML/CSS
Export & handoff	Standalone HTML · PDF · PPTX (editable) · PPTX (screenshots) · Video (MP4) · Send to Figma · Send to Canva · Handoff to Claude Code
AI assets & integration	Gemini image generation · Call Claude from prototypes · Read PDF

Starter components (in starter-components/) save the agent from hand‑rolling the basics: iOS / Android / macOS / browser frames, a pan‑zoom design canvas, a slide‑deck stage, a timeline animation engine, a tweaks panel, and a fillable image slot.

Beyond one‑off mockups, the skill can hold a whole project to a design system — a versioned bundle of a brand's tokens, fonts, components, and full UI kits. Systems live next to your projects under designs/: author one with the Create design system built‑in skill, drop in a pre‑built one, or import one from a Figma .fig file (see the next section). Once a system exists, two flows let any project consume it.

Import an existing design system

When you start a design, the agent asks where to save it and which design system(s) to use — it discovers every system under designs/ and lists them, so you can pick none (free design), one, or several. Name one up front and it skips the menu:

Design a settings screen using the Fluent 2 design system.

For each system you choose, the agent syncs a self‑contained, version‑pinned copy into your project at _ds/<slug>/, wires its CSS and component bundle into the page, and records the binding in the project's _d_meta.json. That local copy is what keeps the project portable and reproducible — nothing reaches outside the folder, and re‑running the import is how you pull updates later. Choose several systems and one becomes primary — it owns the overall look and wins any token collision, while the others lend specific components.

Use an imported design system

Once a system is bound it acts as a binding visual contract, not a loose suggestion: every screen is built from the system's real tokens, type, spacing, and components, and the agent won't invent off‑system colors or styles. If the system ships starting points — ready‑made screens or components — you can seed a new design from one instead of starting blank.

The binding travels with the project. Reopen it later and the agent reads _d_meta.json, reloads the system, and keeps designing in‑style — no need to re‑pick. From there you can refresh a system to pull updates, add another, swap which one is primary, or remove one entirely.

# Install into the current project (auto‑detects your agent) npx skills add JimLiu/baoyu-design # …or install globally, for every project npx skills add JimLiu/baoyu-design -g # Target a specific agent explicitly npx skills add JimLiu/baoyu-design --agent claude-code npx skills add JimLiu/baoyu-design --agent cursor npx skills add JimLiu/baoyu-design --agent codex # Just list what's in the repo first npx skills add JimLiu/baoyu-design --list

# Update and let the CLI prompt for the install scope npx skills update baoyu-design # Update the project-level install npx skills update baoyu-design -p -y # Update the global install npx skills update baoyu-design -g -y

baoyu-design

What the docs cover

Keep exploring from this skill

Related Skills

skills

langflow

claude-code

Import an existing design system

Use an imported design system

Prerequisites

Install

Update

Use it

Preview server