What is the Nothing Design Skill?
Nothing Design Skill is an MIT licensed SKILL.md package that makes an AI coding agent generate UI in the Nothing visual language. It sets a three-layer hierarchy, a Space Grotesk, Space Mono and Doto font stack, dark and light tokens, and HTML/CSS, SwiftUI or React/Tailwind output.
The Nothing Design Skill is a reusable design system packaged as a skill for Claude Code. It captures the Nothing look: Swiss typography, OLED blacks, segmented progress bars and dot-matrix motifs, so you stop re-explaining those rules.
The skill triggers only on request. Say "Nothing style" or run /nothing-design, and the agent applies the rules. The SKILL.md description tells it never to fire for generic UI work.
What changes in your agent's output
- Every screen follows a three-layer hierarchy of display, body and metadata, so one element clearly leads.
- Type uses Space Grotesk and Space Mono, with Doto reserved for hero moments, and a budget of three sizes and two weights per screen.
- Color stays monochrome, and red marks an urgent interrupt instead of decoration.
- Components look mechanical: segmented progress bars, toggles that read as switches and instrument-style widgets.
- Output arrives as HTML/CSS, SwiftUI or React/Tailwind, with dark and light token sets.
What is inside the repository
| File | What it holds |
|---|---|
| SKILL.md | Design philosophy, craft rules, anti-patterns and the build workflow |
| references/tokens.md | Colors, fonts, spacing and motion tokens |
| references/components.md | Buttons, cards, lists, tables and overlays |
| references/platform-mapping.md | CSS, SwiftUI and React output mappings |
Who the Nothing Design Skill is for
Best for
- Developers building dashboards, widgets or app screens with a strict monochrome and typographic look.
- Designers who want an agent to follow one opinionated style instead of generic defaults.
- Teams comparing this style with broader systems such as UI/UX Design System or Frontend Design.
Not for
- Brands that need color-rich or playful interfaces. The anti-patterns rule out gradients, shadows and bounce easing.
- Work where the style is not requested. The skill is built to stay silent unless you name it.
Use it with UiChemy
Once a Nothing-style screen is designed in Figma, UiChemy's Figma to WordPress product can turn it into an editable page. For a broader skill that suggests palettes, see UI/UX Pro Max. Click Get Started on uichemy.com.
How to install Nothing Design Skill: Monochrome Industrial UI for AI Agents
git clone https://github.com/dominikmartn/nothing-design-skill.git && cp -r nothing-design-skill/nothing-design ~/.claude/skills/Clone the repository
Run
git clone https://github.com/dominikmartn/nothing-design-skill.gitin any working folder.Copy the skill folder
Copy the
nothing-designfolder into~/.claude/skills/, the Claude Code skills directory named in the README.Restart your agent
Start Claude Code again. The README says the skill is available the next time it starts.
Check that it loaded
Type /nothing-design in Claude Code. If the skill loaded, the agent declares the Google Fonts it needs and asks whether to start in dark or light mode.
Key features
- Explicit trigger onlyThe skill activates on "Nothing style", "Nothing design" or
/nothing-design. Its description says never to trigger on generic UI tasks, so other work is untouched. - Three-layer hierarchyEach screen gets exactly three layers: primary, secondary and tertiary. The skill tells the agent to squint at the result and shrink or move anything that competes for first place.
- Font disciplineA screen uses at most two font families, three sizes and two weights. Needing a new size is treated as a spacing problem, so the agent adds distance first.
- Spacing as meaningGaps carry relationships: 4 to 8px for items that belong together, 16px within a group, 32 to 48px for a new group and 64 to 96px for a new context.
- Container ladderThe agent prefers spacing alone, then a single divider, then a border, then a surface card. The most important element is never boxed.
- Monochrome color hierarchyGray levels carry importance at 100, 90, 60 and 40 percent. Red #D71921 is kept for urgent interrupts, and data status colors apply to the value itself.
- Anti-pattern listThe rules ban gradients, shadows, blur, skeleton loaders, toast popups, zebra striping, emoji icons and spring easing, with inline text like
[SAVED]used instead. - Varied data formsWhen a screen shows three or more data sections, the skill asks for different forms: hero number, segmented bar, rings, inline bar or sparkline.
- Three output targetsThe platform-mapping reference translates the style into HTML/CSS, SwiftUI and React/Tailwind, so the same design carries across web and native.
Frequently asked questions
What is the Nothing Design Skill?
It is a SKILL.md package by dominikmartn that makes an AI coding agent build interfaces in the Nothing visual language. The style is monochrome, typographic and industrial, with Swiss typography, OLED blacks, segmented progress bars and dot-matrix motifs.
How do I install the Nothing Design Skill?
Clone github.com/dominikmartn/nothing-design-skill, then copy the nothing-design folder into your Claude Code skills directory at ~/.claude/skills/. The README says the skill is available the next time Claude Code starts. No package manager command is given.
How do I trigger the Nothing Design Skill?
Say "Nothing style" or "Nothing design" in your prompt, or run /nothing-design. The skill description says it should not trigger automatically for generic UI or design tasks, so you must name it each time.
Which fonts does the Nothing Design Skill use?
It uses a Space Grotesk, Space Mono and Doto stack. Space Grotesk and Space Mono carry most text, while Doto is kept for hero moments. The skill tells the agent to declare which Google Fonts to load before it designs.
What code does the Nothing Design Skill output?
The README lists three targets: HTML/CSS, SwiftUI and React/Tailwind. The references/platform-mapping.md file holds the mappings for each, so the same design rules apply on the web and on Apple platforms without rewriting the style.
Does the Nothing Design Skill support dark and light mode?
Yes. The README describes a full dark and light token system, and SKILL.md treats both modes as first-class. Dark mode uses OLED black, light mode uses a warm off-white, and the agent asks which mode to start with.
Is the Nothing Design Skill free to use?
Yes. The repository is MIT licensed, so you can use, copy and modify it. It ships Markdown rules and reference files rather than a hosted service, so there is no paid plan, account or subscription involved in using it.
What are alternatives to the Nothing Design Skill?
For a broader design system, try UI/UX Pro Max or Frontend Design. For another opinionated platform style, see Apple Design. Choose Nothing only when you want its monochrome, typographic look.