[English](README.md) | [中文](README.zh-CN.md)

# james-design

[](https://ko-fi.com/H2T024VDBG)

An expert UI design skill for Claude Code. Turns your AI coding assistant into a designer that creates high-fidelity HTML designs, interactive prototypes, slide decks, animations, and visual explorations.

## What it does

- **Slide decks** — Presentation-ready HTML slides with keyboard/touch navigation - **Interactive prototypes** — Clickable hi-fi mockups with React + Babel - **UI explorations** — Multiple design variations with toggleable Tweaks panel - **Animations** — CSS transitions, React state, or Popmotion-powered motion - **Visual design** — Color studies, typography, layout explorations

All output is **pure HTML** — no build step, no dependencies to install. Open in any browser.

## Install

### Option A: Using `skills` CLI (recommended)

```bash npx skills add https://github.com/iamzifei/james-design -y -g ```

### Option B: Manual install

Copy `SKILL.md` into your Claude Code skills directory:

```bash mkdir -p ~/.claude/skills/james-design cp SKILL.md ~/.claude/skills/james-design/ ```

## Usage

Once installed, trigger the skill in Claude Code:

``` /james-design make a landing page for a SaaS product

/james-design create a 10-slide pitch deck about AI trends

/james-design prototype a mobile onboarding flow

/james-design design a dark-mode dashboard UI ```

Or use natural language — the skill auto-triggers on design-related requests:

``` Design a pricing page with 3 tiers Build an interactive prototype for a chat app Make slides for my quarterly review ```

## How it works

1. **Asks clarifying questions** — audience, style, constraints, variations 2. **Explores context** — reads your design system, UI kit, brand assets if provided 3. **Builds iteratively** — shows early drafts, refines based on feedback 4. **Outputs HTML** — single-file deliverables that work in any browser

### Design principles

-