Not in the top 1,000 by GitHub stars

jiji262/claude-design-skill

A portable Claude Skill that turns Claude into an expert designer for HTML artifacts — decks, landing pages, prototypes, animations, posters. Adapted from Claude.ai's internal Design system prompt.

Claude Code Codex Design

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

35a20e5ada2c → 35a20e5ada2c

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 35a20e5ada2c

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit 35a20e5ada2c9e768d1bc094ce1ef3218f48684b

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/jiji262/claude-design-skill.git .hotskills/jiji262-claude-design-skill && git -C .hotskills/jiji262-claude-design-skill checkout --detach 35a20e5ada2c9e768d1bc094ce1ef3218f48684b
# Copy each selected skill directory from .hotskills/jiji262-claude-design-skill into .claude/skills/<skill-name>/

Version-pinned installation · Codex

git clone --filter=blob:none --no-checkout https://github.com/jiji262/claude-design-skill.git .hotskills/jiji262-claude-design-skill && git -C .hotskills/jiji262-claude-design-skill checkout --detach 35a20e5ada2c9e768d1bc094ce1ef3218f48684b
# Copy each selected skill directory from .hotskills/jiji262-claude-design-skill into .agents/skills/<skill-name>/

216GitHub stars

3stars in 7 days

1skill in this repository

0commits in 30 days

Heat

4.5

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

claude-design /

How it works

claude-design

When your agent uses it

Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces fact verification (WebSearch before assuming a product exists or its version), the Core Asset Protocol for branded work (logo, product shots, and UI screenshots are first-class, not just colors and fonts), a Design Direction Advisor fallback that offers 3 differentiated directions from 10 design philosophies when the brief is too vague, commits to a visual system up front, presents multiple variations, and avoids AI-design tropes (aggressive gradients, emoji bullets, generic templates).

What it loads into context

Frontmatter

229 tokens

Always available to the agent

SKILL.md

3,223 tokens

When the skill is activated

Reference documents

28,036 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Priority #0 — Verify facts before assuming
The workflow
When the brief is too vague — the Design Direction Advisor
When the brief names a specific brand — the Core Asset Protocol
Picking the output format
Non-negotiable craft rules
Technical scaffolding
Variations and tweaks
Verification
File hygiene
When to stop and ask
Boundaries
Quick reference index

Scripts executed separately

assets/animations.jsx

Files

.gitignoreasset70 bytes
AGENTS.mddoc173 bytes
CLAUDE.mddoc174 bytes
LICENSEasset1,064 bytes
README.mddoc12,264 bytes
README.zh.mddoc11,939 bytes
SKILL.mdcore14,491 bytes
assets/animations.jsxruns5,890 bytes
assets/deck-stage.htmlasset5,327 bytes
assets/design-canvas.htmlasset2,783 bytes
assets/device-frames.mddoc6,522 bytes
assets/prototype-shell.htmlasset2,153 bytes
assets/tweaks-starter.htmlasset6,223 bytes
demos/README.mddoc3,006 bytes
demos/demo-1-deck.htmlasset10,204 bytes
demos/demo-2-canvas.htmlasset9,664 bytes
demos/demo-3-prototype.htmlasset19,119 bytes
demos/style-gallery/01-swiss-editorial.htmlasset9,041 bytes
demos/style-gallery/02-bauhaus-geometric.htmlasset8,585 bytes
demos/style-gallery/03-kenya-hara.htmlasset7,329 bytes
demos/style-gallery/04-dieter-rams.htmlasset11,962 bytes
demos/style-gallery/05-magazine-editorial.htmlasset12,394 bytes
demos/style-gallery/06-zine-risograph.htmlasset12,513 bytes
demos/style-gallery/07-field-io.htmlasset13,843 bytes
demos/style-gallery/08-brutalist-web.htmlasset11,186 bytes
demos/style-gallery/09-sagmeister.htmlasset12,646 bytes
demos/style-gallery/10-y2k-futurist.htmlasset14,696 bytes
demos/style-gallery/index.htmlasset15,342 bytes
docs/images/demo-1-deck.pngasset41,788 bytes
docs/images/demo-2-canvas.pngasset182,858 bytes
docs/images/demo-3-prototype.pngasset203,122 bytes
references/brand-context.mddoc13,169 bytes
references/design-principles.mddoc9,871 bytes
references/design-styles.mddoc13,920 bytes
references/fact-verification.mddoc4,897 bytes
references/output-formats.mddoc11,182 bytes
references/react-babel.mddoc7,380 bytes
references/variations-and-tweaks.mddoc7,484 bytes
references/verification.mddoc5,351 bytes
references/workflow.mddoc6,123 bytes
test-prompts.jsonasset7,605 bytes

Read SKILL.md


# Claude Design

You are an expert designer working with the user as your manager. Your deliverable is a design artifact produced in HTML. HTML is the tool, not the genre — the *identity* you embody shifts with the task: animator, UX designer, slide designer, prototyper, poster designer, brand strategist. Default to web-design tropes only when the output actually is a web page.

Your job is to translate an ambiguous creative ask into a concrete, high-quality artifact — grounded in real design context (brands, design systems, UI kits, codebases), committed to a coherent visual system, and expressed through considered variations so the user can mix and match toward the best answer.

## Priority #0 — Verify facts before assuming

When the brief references a specific product, company, version, or recent event, your *first* action is `WebSearch` — not clarifying questions, not design exploration. A 10-second search beats 1–2 hours of rework on a wrong premise.

Triggers for this rule:
- User names a specific product you're uncertain about (*"design a launch video for Pocket 4"*, *"mock up a Stripe dashboard"*)
- Task involves 2024+ release timelines, version numbers, or specs
- You catch yourself thinking *"I think that hasn't launched yet"*, *"it's probably at version N"*, *"it might not exist"*

View the complete source on GitHub

Skills included

claude-design

Repository facts

License: MIT
Created: Apr 20, 2026
Last pushed: Jul 15, 2026
Forks: 35
Open issues: 3
Project activity: Slowing

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 5, 2026

No broad tool permissions
No dangerous shell commands
132 network referencesin 20 files: references/react-babel.md:10 assets/prototype-shell.html:23 demos/demo-3-prototype.html:15 and 17 more
No hidden or obfuscated text
No instruction overrides
1 executable scriptin 1 file: assets/animations.jsx:1
No access to secrets
No requests to vote in Hot

Show all 133 signals by file

`README.md`

Network accessline 7

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 reference

Network accessline 9

**Available on skills.sh:** [skills.sh/jiji262/claude-design-skill/claude-design](https://skills.sh/jiji262/claude-design-skill/claude-design)

Network accessline 86

This skill is published on [skills.sh](https://skills.sh/jiji262/claude-design-skill/claude-design), the open registry for Claude Code skills. One command installs it across 40+ coding agents (Claude Code, Codex, Cursor, OpenCode, Gemini CL

Network accessline 98

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

Network accessline 105

git clone https://github.com/jiji262/claude-design-skill ~/code/claude-design-skill

Network accessline 206
```
[linux.do](https://linux.do)
```

`README.zh.md`

Network accessline 7

改编自 Claude.ai 内部 *Design* 产品的系统提示词，按 [Claude Skill 规范](https://docs.claude.com/en/docs/claude-code/skills) 重新组织：`SKILL.md` 保持精简，细节拆分为按需加载的 `references/`，可复用的起手模板放在 `assets/`，真实示例产出放在 `demos/`。

Network accessline 9

**已上架 skills.sh：** [skills.sh/jiji262/claude-design-skill/claude-design](https://skills.sh/jiji262/claude-design-skill/claude-design)

Network accessline 86

本 skill 已发布到 [skills.sh](https://skills.sh/jiji262/claude-design-skill/claude-design)——Claude Code skills 的开放注册表。一条命令覆盖 40+ 种 coding agent（Claude Code、Codex、Cursor、OpenCode、Gemini CLI、Cline 等）。全局安装：

Network accessline 98

用 `-a` 指定某个 agent（如 `-a claude-code`、`-a cursor`），或用 `-y` 跑 CI 非交互安装。完整参数见 [skills CLI 文档](https://www.npmjs.com/package/skills)。

Network accessline 105

git clone https://github.com/jiji262/claude-design-skill ~/code/claude-design-skill

`assets/animations.jsx`

Executable scriptline 1
```
Executable file
```

`assets/prototype-shell.html`

Network accessline 23

<!-- Pinned React 18.3.1 + ReactDOM 18.3.1 + Babel-standalone 7.29.0 -->   <script     src="https://unpkg.com/react@18.3.1/umd/react.development.js"

Network accessline 24

<script     src="https://unpkg.com/react@18.3.1/umd/react.development.js"     integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L"

Network accessline 25

src="https://unpkg.com/react@18.3.1/umd/react.development.js"

Network accessline 28

></script>   <script     src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"

Network accessline 29

<script     src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"     integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm"

Network accessline 30

src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"

Network accessline 33

></script>   <script     src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"

Network accessline 34

<script     src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"     integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"

Network accessline 35

src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"

Network accessline 49

};   </script>   <script src="https://cdn.tailwindcss.com"></script>

Network accessline 50

</script>   <script src="https://cdn.tailwindcss.com"></script>   -->

Network accessline 51

<script src="https://cdn.tailwindcss.com"></script>

`demos/demo-1-deck.html`

Network accessline 15

<meta charset="utf-8">   <title>Demo · Ledger — a note-taking product (Swiss Editorial)</title>   <link rel="preconnect" href="https://rsms.me/">

Network accessline 16

<title>Demo · Ledger — a note-taking product (Swiss Editorial)</title>   <link rel="preconnect" href="https://rsms.me/">   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 17

<link rel="preconnect" href="https://rsms.me/">

Network accessline 18

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

`demos/demo-2-canvas.html`

Network accessline 15

<meta charset="utf-8">   <title>Demo · Page & Margin — hero variations</title>   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 16

<title>Demo · Page & Margin — hero variations</title>   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">   <link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 17

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 18

<link rel="preconnect" href="https://fonts.googleapis.com">

Network accessline 19

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

`demos/demo-3-prototype.html`

Network accessline 15

<meta charset="utf-8">   <title>Demo · Shelf iOS prototype</title>   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 16

<title>Demo · Shelf iOS prototype</title>   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap" rel="stylesh

Network accessline 17

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 18

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap" rel="stylesheet">

Network accessline 19

<script     src="https://unpkg.com/react@18.3.1/umd/react.development.js"     integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L"

Network accessline 20

src="https://unpkg.com/react@18.3.1/umd/react.development.js"

Network accessline 22

crossorigin="anonymous"></script>   <script     src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"

Network accessline 23

<script     src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"     integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm"

Network accessline 24

src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"

Network accessline 26

crossorigin="anonymous"></script>   <script     src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"

Network accessline 27

<script     src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"     integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"

Network accessline 28

src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"

`demos/style-gallery/01-swiss-editorial.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>01 · Swiss Editorial — Claude Design</title> <link rel="preconnect" href="https://rsms.me/">

Network accessline 15

<title>01 · Swiss Editorial — Claude Design</title> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 16

<link rel="preconnect" href="https://rsms.me/">

Network accessline 17

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 185

<span class="label">One line</span>       <code>npx skills add jiji262/claude-design-skill -g</code>       <span class="repo"><a href="https://github.com/jiji262/claude-design-skill">github.com / jiji262 / claude-design-skill</a></span>

Network accessline 186

<code>npx skills add jiji262/claude-design-skill -g</code>       <span class="repo"><a href="https://github.com/jiji262/claude-design-skill">github.com / jiji262 / claude-design-skill</a></span>     </div>

Network accessline 187

<span class="repo"><a href="https://github.com/jiji262/claude-design-skill">github.com / jiji262 / claude-design-skill</a></span>

`demos/style-gallery/02-bauhaus-geometric.html`

Network accessline 219

<footer>   <span>02 · Bauhaus Geometric · Müller-Brockmann lineage</span>   <a href="https://github.com/jiji262/claude-design-skill">GitHub</a>

Network accessline 220

<span>02 · Bauhaus Geometric · Müller-Brockmann lineage</span>   <a href="https://github.com/jiji262/claude-design-skill">GitHub</a>   <a href="index.html">← Index</a>

Network accessline 221

<a href="https://github.com/jiji262/claude-design-skill">GitHub</a>

`demos/style-gallery/03-kenya-hara.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>03 · Kenya Hara — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;1,400&display=swap">

Network accessline 15

<title>03 · Kenya Hara — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;1,400&display=swap"> <style>

Network accessline 16

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;1,400&display=swap">

`demos/style-gallery/04-dieter-rams.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>04 · Dieter Rams — Claude Design</title> <link rel="preconnect" href="https://rsms.me/">

Network accessline 15

<title>04 · Dieter Rams — Claude Design</title> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 16

<link rel="preconnect" href="https://rsms.me/">

Network accessline 17

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 277

<span class="label">03 / Install</span>     <code>npx skills add jiji262/claude-design-skill -g</code>     <a href="https://github.com/jiji262/claude-design-skill" class="go">GitHub →</a>

Network accessline 278

<code>npx skills add jiji262/claude-design-skill -g</code>     <a href="https://github.com/jiji262/claude-design-skill" class="go">GitHub →</a>   </section>

Network accessline 279

<a href="https://github.com/jiji262/claude-design-skill" class="go">GitHub →</a>

`demos/style-gallery/05-magazine-editorial.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>05 · Magazine Editorial — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1

Network accessline 15

<title>05 · Magazine Editorial — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600

Network accessline 16

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap">

Network accessline 314

<span class="label">Install · 1 line</span>   <code>npx skills add jiji262/claude-design-skill -g</code>   <a href="https://github.com/jiji262/claude-design-skill" class="go">Read more on GitHub</a>

Network accessline 315

<code>npx skills add jiji262/claude-design-skill -g</code>   <a href="https://github.com/jiji262/claude-design-skill" class="go">Read more on GitHub</a> </section>

Network accessline 316

<a href="https://github.com/jiji262/claude-design-skill" class="go">Read more on GitHub</a>

`demos/style-gallery/06-zine-risograph.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>06 · Zine / Risograph — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Fraunces:ital,opsz,wght@0,9

Network accessline 15

<title>06 · Zine / Risograph — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,900;1,9..144,900&family=Space+Mono:wght@400;700&di

Network accessline 16

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,900;1,9..144,900&family=Space+Mono:wght@400;700&display=swap">

Network accessline 336

<span class="label">Install &rarr;</span>     <code>npx skills add jiji262/claude-design-skill -g</code>     <a href="https://github.com/jiji262/claude-design-skill">github</a>

Network accessline 337

<code>npx skills add jiji262/claude-design-skill -g</code>     <a href="https://github.com/jiji262/claude-design-skill">github</a>   </div>

Network accessline 338

<a href="https://github.com/jiji262/claude-design-skill">github</a>

`demos/style-gallery/07-field-io.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>07 · Field.io / motion poetics — Claude Design</title> <link rel="preconnect" href="https://rsms.me/">

Network accessline 15

<title>07 · Field.io / motion poetics — Claude Design</title> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 16

<link rel="preconnect" href="https://rsms.me/">

Network accessline 17

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 350

<span class="label">03 / 04 · Install</span>     <code>npx skills add jiji262/claude-design-skill -g</code>     <a href="https://github.com/jiji262/claude-design-skill" class="go">GitHub →</a>

Network accessline 351

<code>npx skills add jiji262/claude-design-skill -g</code>     <a href="https://github.com/jiji262/claude-design-skill" class="go">GitHub →</a>   </div>

Network accessline 352

<a href="https://github.com/jiji262/claude-design-skill" class="go">GitHub →</a>

`demos/style-gallery/08-brutalist-web.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>claude-design-skill — a design skill for Claude</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=

Network accessline 15

<title>claude-design-skill — a design skill for Claude</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Serif:wght@400;700&display=swap"> <style>

Network accessline 16

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Serif:wght@400;700&display=swap">

Network accessline 137

<h1>claude-design-skill: a design skill for Claude.</h1>   <p class="sub">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

Network accessline 138

<p class="sub">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.</p>   <p class="meta"><b>&nbsp;rev 01&nbsp;</b> &nbsp; 20

Network accessline 139

<p class="meta"><b>&nbsp;rev 01&nbsp;</b> &nbsp; 2026-04-21 &nbsp; · &nbsp; MIT &nbsp; · &nbsp; <a href="https://github.com/jiji262/claude-design-skill">github.com/jiji262/claude-design-skill</a></p>

Network accessline 241

<tr><td>Does NOT</td><td>generate binary assets · recreate copyrighted UIs · replace a designer</td></tr>       <tr><td>Does</td><td>enforce discipline · remove AI-slop defaults · gather real context before design</td></tr>       <tr><td>Re

Network accessline 242

<tr><td>Does</td><td>enforce discipline · remove AI-slop defaults · gather real context before design</td></tr>       <tr><td>Repo</td><td><a href="https://github.com/jiji262/claude-design-skill">github.com/jiji262/claude-design-skill</a></

Network accessline 243

<tr><td>Repo</td><td><a href="https://github.com/jiji262/claude-design-skill">github.com/jiji262/claude-design-skill</a></td></tr>

`demos/style-gallery/09-sagmeister.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>09 · Sagmeister Expressive — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..1

Network accessline 15

<title>09 · Sagmeister Expressive — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,700;1,9..144,900&family=Inter:wght@400;6

Network accessline 16

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,700;1,9..144,900&family=Inter:wght@400;600;800&display=swap">

`demos/style-gallery/10-y2k-futurist.html`

Network accessline 14

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>10 · Y2K Futurist — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Major+Mono+Display&family=Inter:wght@40

Network accessline 15

<title>10 · Y2K Futurist — Claude Design</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Major+Mono+Display&family=Inter:wght@400;500;700&display=swap"> <style>

Network accessline 16

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Major+Mono+Display&family=Inter:wght@400;500;700&display=swap">

Network accessline 394

<h2>install.<br><em>one line.</em></h2>     <code>npx skills add jiji262/claude-design-skill -g</code>     <a href="https://github.com/jiji262/claude-design-skill" class="go">→ github.com/jiji262/claude-design-skill</a>

Network accessline 395

<code>npx skills add jiji262/claude-design-skill -g</code>     <a href="https://github.com/jiji262/claude-design-skill" class="go">→ github.com/jiji262/claude-design-skill</a>   </section>

Network accessline 396

<a href="https://github.com/jiji262/claude-design-skill" class="go">→ github.com/jiji262/claude-design-skill</a>

`demos/style-gallery/index.html`

Network accessline 9

<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Claude Design Skill · Ten design languages</title> <link rel="preconnect" href="https://rsms.me/">

Network accessline 10

<title>Claude Design Skill · Ten design languages</title> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Network accessline 11

<link rel="preconnect" href="https://rsms.me/">

Network accessline 12

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

`references/brand-context.md`

Network accessline 70

curl -o assets/<brand>-brand/logo.svg https://<brand>.com/logo.svg

Network accessline 71

curl -o assets/<brand>-brand/logo-white.svg https://<brand>.com/logo-white.svg

Network accessline 75

curl -A "Mozilla/5.0" -L https://<brand>.com -o assets/<brand>-brand/homepage.html

Network accessline 90

# Example: download the product hero from an official site curl -A "Mozilla/5.0" -L "<hero-image-url>" -o assets/<brand>-brand/product-hero.png

Network accessline 91

curl -A "Mozilla/5.0" -L "<hero-image-url>" -o assets/<brand>-brand/product-hero.png

`references/output-formats.md`

Network accessline 140

<title>Onboarding — prototype</title>   <!-- Pinned React + Babel with integrity hashes (see references/react-babel.md) -->   <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ

Network accessline 141

<!-- Pinned React + Babel with integrity hashes (see references/react-babel.md) -->   <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L"

Network accessline 142

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>

Network accessline 143

<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>

Network accessline 144

<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

`references/react-babel.md`

Network accessline 10

<script   src="https://unpkg.com/react@18.3.1/umd/react.development.js"

Network accessline 11

src="https://unpkg.com/react@18.3.1/umd/react.development.js"

Network accessline 14

></script> <script   src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"

Network accessline 15

<script   src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"   integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm"

Network accessline 16

src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"

Network accessline 19

></script> <script   src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"

Network accessline 20

<script   src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"   integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"

Network accessline 21

src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"

Network accessline 108

**Fix:** copy the integrity hashes byte-for-byte from above. If you're using a different version of React/ReactDOM/Babel for some reason, fetch the correct integrity hash from unpkg (via `https://unpkg.com/react@X.Y.Z/umd/react.development.

Network accessline 130

<!-- Tailwind via CDN, if you want utility classes inline --> <script src="https://cdn.tailwindcss.com"></script>

Network accessline 131

<script src="https://cdn.tailwindcss.com"></script>

Network accessline 133

<!-- Motion / animation --> <script src="https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js"></script>

Network accessline 134

<script src="https://unpkg.com/popmotion@11.0.5/dist/popmotion.min.js"></script>

Network accessline 136

<!-- Icons via lucide --> <script src="https://unpkg.com/lucide@latest"></script>

Network accessline 137

<script src="https://unpkg.com/lucide@latest"></script>

Network accessline 149

}; </script> <script src="https://cdn.tailwindcss.com"></script>

Network accessline 151

<script src="https://cdn.tailwindcss.com"></script>

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 39 facts

Network access in prose of documentationREADME.md:7Low confidence
Network access in prose of documentationREADME.md:9Low confidence
Network access in prose of documentationREADME.md:86Low confidence
Network access in prose of documentationREADME.md:98Low confidence
Network access in code of documentationREADME.md:105Low confidence
Network access in prose of documentationREADME.md:206Low confidence
Network access in prose of documentationREADME.zh.md:7Low confidence
Network access in prose of documentationREADME.zh.md:9Low confidence
Network access in prose of documentationREADME.zh.md:86Low confidence
Network access in prose of documentationREADME.zh.md:98Low confidence
Network access in code of documentationREADME.zh.md:105Low confidence
Executable script in a comment of a file that runsassets/animations.jsx:1Low confidence
Network access in code of documentationreferences/brand-context.md:70Low confidence
Network access in code of documentationreferences/brand-context.md:71Low confidence
Network access in code of documentationreferences/brand-context.md:75Low confidence
Network access in code of documentationreferences/brand-context.md:90Low confidence
Network access in code of documentationreferences/brand-context.md:91Low confidence
Network access in code of documentationreferences/output-formats.md:140Low confidence
Network access in code of documentationreferences/output-formats.md:141Low confidence
Network access in code of documentationreferences/output-formats.md:142Low confidence
Network access in code of documentationreferences/output-formats.md:143Low confidence
Network access in code of documentationreferences/output-formats.md:144Low confidence
Network access in code of documentationreferences/react-babel.md:10Low confidence
Network access in code of documentationreferences/react-babel.md:11Low confidence
Network access in code of documentationreferences/react-babel.md:14Low confidence
Network access in code of documentationreferences/react-babel.md:15Low confidence
Network access in code of documentationreferences/react-babel.md:16Low confidence
Network access in code of documentationreferences/react-babel.md:19Low confidence
Network access in code of documentationreferences/react-babel.md:20Low confidence
Network access in code of documentationreferences/react-babel.md:21Low confidence
Network access in prose of documentationreferences/react-babel.md:108Low confidence
Network access in code of documentationreferences/react-babel.md:130Low confidence
Network access in code of documentationreferences/react-babel.md:131Low confidence
Network access in code of documentationreferences/react-babel.md:133Low confidence
Network access in code of documentationreferences/react-babel.md:134Low confidence
Network access in code of documentationreferences/react-babel.md:136Low confidence
Network access in code of documentationreferences/react-babel.md:137Low confidence
Network access in code of documentationreferences/react-babel.md:149Low confidence
Network access in code of documentationreferences/react-babel.md:151Low confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Native	Path CLAUDE.md	`.claude/skills/<skill-name>/`
Codex	Native	Manifest AGENTS.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

jiji262/claude-design-skill

History

SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

claude-design

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

Skills included

Repository facts

Before you install

README.md

README.zh.md

assets/animations.jsx

assets/prototype-shell.html

demos/demo-1-deck.html

demos/demo-2-canvas.html

demos/demo-3-prototype.html

demos/style-gallery/01-swiss-editorial.html

demos/style-gallery/02-bauhaus-geometric.html

demos/style-gallery/03-kenya-hara.html

demos/style-gallery/04-dieter-rams.html

demos/style-gallery/05-magazine-editorial.html

demos/style-gallery/06-zine-risograph.html

demos/style-gallery/07-field-io.html

demos/style-gallery/08-brutalist-web.html

demos/style-gallery/09-sagmeister.html

demos/style-gallery/10-y2k-futurist.html

demos/style-gallery/index.html

references/brand-context.md

references/output-formats.md

references/react-babel.md

How the signals fit together

Works with

You might also use

nextlevelbuilder/ui-ux-pro-max-skill

Leonxlnx/taste-skill

nexu-io/open-design

pbakaus/impeccable

Nutlope/hallmark

CopilotKit/CopilotKit

`SKILL.md`

`README.md`

`README.zh.md`

`assets/animations.jsx`

`assets/prototype-shell.html`

`demos/demo-1-deck.html`

`demos/demo-2-canvas.html`

`demos/demo-3-prototype.html`

`demos/style-gallery/01-swiss-editorial.html`

`demos/style-gallery/02-bauhaus-geometric.html`

`demos/style-gallery/03-kenya-hara.html`

`demos/style-gallery/04-dieter-rams.html`

`demos/style-gallery/05-magazine-editorial.html`

`demos/style-gallery/06-zine-risograph.html`

`demos/style-gallery/07-field-io.html`

`demos/style-gallery/08-brutalist-web.html`

`demos/style-gallery/09-sagmeister.html`

`demos/style-gallery/10-y2k-futurist.html`

`demos/style-gallery/index.html`

`references/brand-context.md`

`references/output-formats.md`

`references/react-babel.md`