James Design

[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)

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

-