james-design

KO | EN

gitlite — search

#php #python #java #javascript #c-plus-plus #cli #c #hacktoberfest #objective-c #analytics #algorithm #scrapy

★ 37 Open GitHub ↗

Expert UI design skill for Claude Code — create hi-fi HTML designs, prototypes, slide decks, and animations

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

# james-design

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](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

- Starts from existing design context (UI kits, screenshots, brand assets) — not from scratch
- Provides 3+ variations across different dimensions (layout, color, interactions)
- Uses React + Babel for interactive prototypes
- Persists state (slide position, tweaks) in localStorage
- Files are self-contained — no external build tools needed

## Examples

### Slide deck

```
/james-design make a 10-minute presentation about AI psychology,
warm humanistic style, dark red color scheme, in Chinese
```

Output: A 9-slide HTML presentation with keyboard navigation, progress bar, touch swipe support, and localStorage position persistence.

[View sample →](samples/slide-deck-example.html)

### Interactive prototype

```
/james-design prototype a task management app with drag-and-drop columns
```

Output: A React-based Kanban board with working drag interactions, animations, and a Tweaks panel for toggling dark mode, card density, and color themes.

### UI exploration

```
/james-design explore button styles for my design system —
primary color #4F46E5, show variations in size, radius, and hover states
```

Output: A canvas layout showing 20+ button variations organized by dimension, with live CSS customization.

## Tech stack

The skill produces HTML that can optionally use:

| Tech | Purpose | CDN |
|------|---------|-----|
| React 18.3.1 | Interactive prototypes | unpkg (pinned + integrity hash) |
| Babel 7.29.0 | Inline JSX transpilation | unpkg (pinned + integrity hash) |
| Popmotion 11.0.5 | Complex animations | unpkg |
| CSS/SVG | Everything else | Native |

All dependencies are loaded via CDN with pinned versions and integrity hashes. No `npm install` needed.

## Credits

Inspired by the [Claude Design System Prompt](https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt) by Pliny, adapted and packaged as a distributable Claude Code skill.

## License

MIT

james-design

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README