A portable Claude skill that turns the model into a senior designer. Grounded in real context. Committed to a visual system. Refuses AI-slop. That is the entire pitch.
SKILL.md plus a handful of on-demand references. Claude loads the skill when your request sounds like design — "make a deck", "design a landing page", "prototype this flow", "animate this concept". Once loaded, it rewires Claude's defaults.
| Component | Purpose | Loaded |
|---|---|---|
| SKILL.md | Entry point · workflow · priority rules · routing | always |
| references/fact-verification.md | Priority Zero rule — WebSearch before assumption | on-demand |
| references/brand-context.md | Core Asset Protocol — 5-step hard flow | on-demand |
| references/design-styles.md | 10 philosophies across 5 schools | on-demand |
| references/design-principles.md | Anti-slop checklist · craft rules | on-demand |
| references/output-formats.md | Deck / canvas / prototype / animation skeletons | on-demand |
| assets/* | Starter templates: deck-stage, prototype-shell, etc. | copy-paste |
| demos/* | Three real sample artifacts | reference |
When the brief names a specific product, company, version, or recent event, the first action is not a clarifying question and not design exploration. The first action is WebSearch. A 10-second search beats 1–2 hours of rework on a wrong premise.
WebSearch → read 1-3 authoritative results → write findings to product-facts.md → only then design.
For any task that names a specific brand, follow the five-step hard flow. Logo, product shots, and UI screenshots are first-class citizens. Colors and fonts are auxiliary.
| Step | Action | Output |
|---|---|---|
| 1 | Ask | full six-asset checklist requested from user |
| 2 | Search | official channels probed — brand site, press kit, docs |
| 3 | Download | three-path fallbacks · 5-10-2-8 quality rule |
| 4 | Verify | each asset real, hi-res, current, uncontaminated |
| 5 | Freeze | brand-spec.md written with paths, colors, fonts, gaps |
When the brief is too vague to execute, do not improvise. Switch into Advisor mode: propose three directions drawn from different schools among the library of ten. Build a small preview. Ask the user to pick. Then commit fully.
Works across 40+ coding agents (Claude Code, Codex, Cursor, OpenCode, Gemini CLI, Cline, ...). Four install paths, pick one:
| Path | Command | Notes |
|---|---|---|
| A. npx | npx skills add jiji262/claude-design-skill -g |
recommended; works across all agents |
| B. clone+symlink | ln -s ~/code/claude-design-skill ~/.claude/skills/claude-design |
dev mode; git pull auto-updates |
| C. plugin | bundle inside a Claude Code plugin | standard plugin skill layout |
| D. manual | point Claude at SKILL.md directly | no install; testing only |
$ npx skills add jiji262/claude-design-skill -g > Cloning repository... > Found 1 skill > Installing → ~/.claude/skills/claude-design > Done.
| Author | see github repo |
| License | MIT |
| Requires | a Claude skill host (Claude Code, Agent SDK, etc.) |
| Output format | HTML design artifacts |
| Does NOT | generate binary assets · recreate copyrighted UIs · replace a designer |
| Does | enforce discipline · remove AI-slop defaults · gather real context before design |
| Repo | github.com/jiji262/claude-design-skill |