Claude Codeのデザインシステムスキルで、Nothingのビジュアル言語に触発されたものです。モノクロ、タイポグラフィ、インダストリアル。

同じデザインルールを何度もクロードに説明しました — スイスのタイポグラフィ、OLEDの黒、セグメント化された進行バー、ドットマトリックスのモチーフ。そこで私はそれを再利用可能なスキルにまとめました。

何が手に入るか

Claudeに/nothing-designと言うか「Nothing style」と言うと、以下の原則に従ってUIが生成されます:

• 三層の視覚階層(表示、本文、メタデータ—それだけです)
• スペース・グロテスク + スペース・モノ + ドトフォントスタック
• 完全な暗モードおよび明暗モードのトークンシステム
• セグメント化された進行バー、機械式トグル、計器スタイルのウィジェット
• HTML/CSS、SwiftUI、またはReact/Tailwindとして出力

インストール

nothing-designフォルダをClaude Codeスキルディレクトリにコピーしてください:

それだけです。次にクロード・コードを始めるときは、そのスキルが利用可能です。

中身は何だ

ライセンス

MITです

Nothing Design Skill

A design system skill for Claude Code inspired by Nothing’s visual language. Monochrome, typographic, industrial.

I kept describing the same design rules to Claude over and over — Swiss typography, OLED blacks, segmented progress bars, dot-matrix motifs. So I packaged it into a reusable skill.

What you get

Tell Claude /nothing-design or say “Nothing style” and it generates UI following these principles:

• Three-layer visual hierarchy (display, body, metadata — that’s it)
• Space Grotesk + Space Mono + Doto font stack
• Full dark and light mode token system
• Segmented progress bars, mechanical toggles, instrument-style widgets
• Output as HTML/CSS, SwiftUI, or React/Tailwind

Install

Copy the nothing-design folder into your Claude Code skills directory:

git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/

That’s it. Next time you start Claude Code, the skill is available.

What’s inside

License

MIT