English | 中文

james-design

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)

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

Option B: Manual install

Copy SKILL.md into your Claude Code skills directory:

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 →

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:

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

Credits

Inspired by the Claude Design System Prompt by Pliny, adapted and packaged as a distributable Claude Code skill.

License

MIT