🌐 English Β· δΈ­ζ–‡ # Claude Design Skill A portable Claude skill that turns Claude into an expert designer for HTML-based artifacts β€” landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Adapted from Claude.ai's internal *Design* product system prompt, restructured to follow the [Claude Skill specification](https://docs.claude.com/en/docs/claude-code/skills) with progressive disclosure (lean `SKILL.md` + on-demand references + copy-paste starter assets + real sample outputs). --- ## Contents - [What it does](#what-it-does) - [Skill architecture](#skill-architecture) - [Installation](#installation) - [Usage](#usage) - [When it triggers](#when-it-triggers) - [Demos](#demos) - [Test prompts](#test-prompts) - [Customization](#customization) - [License](#license) - [δΈ­ζ–‡ README](README.zh.md) --- ## What it does When you ask Claude to design something β€” a deck, a landing page, a prototype, an animation β€” this skill activates and gives Claude: - **Fact Verification (Priority #0).** Before assuming anything about a named product, the skill enforces a `WebSearch`. A 10-second search beats 1–2 hours of rework on wrong premises. - **The Core Asset Protocol.** For branded work, a 5-step hard flow for gathering assets β€” with **logo / product shots / UI screenshots treated as first-class citizens**, not colors-and-fonts-only. Writes findings to `brand-spec.md`. - **Design Direction Advisor.** When the brief is too vague ("design me something nice"), the skill switches into advisor mode, proposes 3 differentiated directions from a library of **10 design philosophies** spanning 5 schools, and waits for the user to pick before committing. - **Output-format playbooks** β€” design canvas, slide deck, interactive prototype, timeline animation, wireframe. Each with a skeleton and gotchas. - **Variation strategy** β€” when to ship N side-by-side options vs. a single prototype with Tweaks (live in-design controls for colors, typography, variants). - **Anti-slop discipline** β€” explicit rules against aggressive gradients, emoji bullets, rounded-cards-with-left-border, CSS-silhouettes-as-product-shots, gradient-orbs-representing-AI, and other machine-generated tells. - **React + Babel traps** that silently break inline-JSX prototypes (style-object scope collisions, Babel scope isolation, integrity hashes). - **Starter templates** you can copy-paste: a self-scaling deck stage, a design canvas, a prototype shell, a Tweaks-enabled page, a timeline animation engine, and device frames for iOS / Android / macOS / browser. - **3 real demo artifacts** you can open right now to see what the skill produces. The skill is **environment-agnostic** β€” it does not depend on Claude.ai's internal artifact tools. It works in Claude Code, the Claude Agent SDK, or any environment where skills load. ## Skill architecture ``` claude-design-skill/ # repo root β€” the skill itself β”œβ”€β”€ SKILL.md # entry point β€” workflow + priority rules + routing β”œβ”€β”€ README.md / README.zh.md # bilingual READMEs (skill-agnostic, not read by agents) β”œβ”€β”€ LICENSE β”œβ”€β”€ references/ β”‚ β”œβ”€β”€ fact-verification.md # Priority #0 β€” WebSearch before assumptions β”‚ β”œβ”€β”€ workflow.md # questions, context-gathering, iteration pattern β”‚ β”œβ”€β”€ brand-context.md # Core Asset Protocol β€” 5-step hard flow β”‚ β”œβ”€β”€ design-styles.md # 10 design philosophies Γ— 5 schools, for Advisor mode β”‚ β”œβ”€β”€ design-principles.md # anti-slop, craft rules, content discipline β”‚ β”œβ”€β”€ output-formats.md # deck / canvas / prototype / animation / wireframe skeletons β”‚ β”œβ”€β”€ variations-and-tweaks.md # variation mix, Tweaks protocol (host + standalone) β”‚ β”œβ”€β”€ react-babel.md # pinned versions, scope rules, integrity hashes β”‚ └── verification.md # what to check in a real browser before "done" β”œβ”€β”€ assets/ β”‚ β”œβ”€β”€ deck-stage.html # slide deck with scaling, nav, localStorage, print-to-PDF β”‚ β”œβ”€β”€ design-canvas.html # labeled variant grid β”‚ β”œβ”€β”€ prototype-shell.html # React + Babel loader (pinned + SRI) β”‚ β”œβ”€β”€ tweaks-starter.html # live-editable design with Tweaks panel β”‚ β”œβ”€β”€ animations.jsx # Stage / Sprite / useTime / interpolate / Easing β”‚ └── device-frames.md # iOS / Android / macOS / browser frame CSS β”œβ”€β”€ demos/ β”‚ β”œβ”€β”€ demo-1-deck.html # Swiss Editorial 5-slide pitch β”‚ β”œβ”€β”€ demo-2-canvas.html # 4 hero variants across design schools β”‚ └── demo-3-prototype.html # Interactive 3-screen iOS reading tracker β”œβ”€β”€ test-prompts.json # 6 scenario test cases covering the main branches └── docs/images/ # README screenshots ``` The whole repo IS the skill. `SKILL.md` sits at the root, so `npx skills add` and any Agent-Skills-spec-compliant CLI find it immediately. ## Installation ### Option A β€” `npx skills` (recommended) Works across 40+ coding agents (Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Cline, …). Install globally: ```bash npx skills add jiji262/claude-design-skill -g ``` Or into a specific project: ```bash npx skills add jiji262/claude-design-skill ``` Target a specific agent with `-a` (e.g., `-a claude-code`, `-a cursor`), or use `-y` for non-interactive CI installs. See the full flag list in [the skills CLI docs](https://www.npmjs.com/package/skills). ### Option B β€” clone + symlink into Claude Code If you want to track the repo yourself (for customization, contributing, etc.), clone it and symlink into `~/.claude/skills/`: ```bash git clone https://github.com/jiji262/claude-design-skill ~/code/claude-design-skill ln -s ~/code/claude-design-skill ~/.claude/skills/claude-design ``` Symlinking (vs. copying) means `git pull` updates the installed skill automatically. Start a new Claude Code session and the skill will auto-register. ### Option C β€” reference from a plugin Include this repo (or a subfolder) as a skill inside a Claude Code plugin. See the plugin authoring docs for the expected plugin layout. ### Option D β€” manual invocation Without installation, point Claude at [SKILL.md](SKILL.md) directly and ask it to follow the instructions. ## Usage Just ask Claude to design something. The skill triggers on phrases like: - "Make a pitch deck for …" - "Design a landing page for …" - "Prototype this onboarding flow" - "Animate this concept" - "Turn this screenshot into a clickable mockup" - "Show me 3 options for the hero" - "Create a poster for …" - "Build a wireframe storyboard for …" - "Design something nice β€” I don't know what style I want" *(triggers Advisor mode)* - "Make a launch video for " *(triggers Fact Verification + Asset Protocol)* Claude will: 1. **Verify facts** if the brief names a specific product/version/event β€” `WebSearch` first. 2. **Gather design context** β€” push for a codebase, design system, UI kit, or reference brand rather than designing from thin air. 3. **Hunt brand assets** if the task is branded β€” logo, product shots, UI screenshots, then colors/fonts. 4. **Enter Advisor mode** if the brief is too vague β€” propose 3 differentiated directions from different schools. 5. **Declare the visual system** before placing pixels. 6. **Build an initial artifact with placeholders**, show it to you early, then iterate. 7. **Ship multiple variations** spanning conservative β†’ novel. 8. **Verify** the artifact loads cleanly in a real browser before calling it done. ## When it triggers The skill is designed to be "a little pushy" β€” it activates on common design phrasings even when the user doesn't say the word "design." See the `description` field in [SKILL.md](SKILL.md) for the full trigger list. It does **not** trigger on general frontend coding tasks (fixing a bug, refactoring a component) β€” those are handled by regular coding flows, not the design skill. ## Demos Open these directly in a browser β€” no build step. Each is a real sample of what the skill produces: ### 1 Β· Slide deck (Swiss Editorial)

5-slide pitch deck in Swiss Editorial style

**[demos/demo-1-deck.html](demos/demo-1-deck.html)** β€” 5-slide pitch deck, Swiss Editorial style (Pentagram / Vignelli lineage). Oversized folios, hairline rules, one accent color. Keyboard navigation, 1-indexed slide labels, localStorage persistence. ### 2 Β· Design canvas (4 hero variations across schools)

Four hero variations across design schools

**[demos/demo-2-canvas.html](demos/demo-2-canvas.html)** β€” 4 hero variations for the same fictional product, drawn from 4 different design schools (Swiss Editorial / Kenya Hara minimalism / Brutalist web / Editorial magazine). Shows the Advisor mode pattern in action. ### 3 Β· Interactive iOS prototype (live state)

Three-screen iOS reading tracker prototype with live state

**[demos/demo-3-prototype.html](demos/demo-3-prototype.html)** β€” Interactive 3-screen iOS reading tracker. Click the "+5p / +20p / Finish" buttons on the detail screen and watch state propagate across all three phones live. See [demos/README.md](demos/README.md) for a walkthrough of what to notice in each demo. ## Test prompts [test-prompts.json](test-prompts.json) contains 6 realistic scenario tests, each tagged with the guardrails it exercises: 1. Vague landing-page brief β†’ Advisor mode kicks in 2. Named-brand task β†’ Fact Verification + Core Asset Protocol 3. Pitch-deck β†’ system discipline + scale floors 4. Motion design β†’ time discipline + no gradient-orb-for-AI 5. iOS prototype β†’ real image sources + information density + React pinning 6. Tweaks vs. N separate files β†’ variation strategy Use these to self-check the skill or seed your own eval harness. ## Customization - **Add your brand/system as a bundled reference.** Drop your brand guide, design tokens, or UI kit as Markdown/HTML in `references/` or `assets/`, and update `SKILL.md` to point Claude at them. - **Tighten the trigger surface.** Edit the `description` frontmatter in `SKILL.md` to narrow or broaden when it fires. - **Swap starter templates.** The files in `assets/` are explicit starting points β€” rewrite them to match your house style and Claude will use your versions. - **Extend the style library.** Add entries to `references/design-styles.md` with the same (pitch / flagship / keywords / signature-moves / when-to-use) structure. - **Add new output formats.** Add a new file under `references/` (e.g., `references/email-designs.md`) and reference it from `SKILL.md`. ## Design philosophy This skill stays intentionally lean: markdown + small HTML starters + a few sample outputs, nothing binary. The core conviction is that good hi-fi design grows from existing context (brand, codebase, UI kit) rather than from scratch β€” so the skill's primary job is to make Claude gather real context, commit to a visual system, and avoid the pre-trained path of least resistance that leads to AI-slop. Every rule, reference, and asset here serves that goal. ## License MIT. See [LICENSE](LICENSE). The original Claude Design system prompt content is Anthropic's; this repository contains an adapted, restructured rendition intended for use with the Claude Skill specification. ## Special Thanks [linux.do](https://linux.do)