What is the nothing-design skill?
The nothing-design skill by dominikmartn is a Nothing inspired design system for AI coding agents. It enforces three layers of importance, a budget of 2 fonts, 3 sizes and 2 weights per screen, and bans shadows, gradients and toasts. It triggers only on an explicit Nothing style request.
The nothing-design skill allows every screen exactly three layers of importance: one primary element, supporting context, and quiet metadata. It packages a Nothing inspired design language that is monochrome, typographic and industrial, with dark and light modes given equal rigor.
It is opt-in by design. The SKILL.md says to use it only when you say Nothing style, Nothing design or /nothing-design, and never to trigger automatically for generic UI work. Before any design work it declares which Google Fonts to load.
Craft rules in the SKILL.md
- Font budget: at most 2 families, 3 sizes and 2 weights per screen. Space Grotesk and Space Mono do the work, and Doto appears only for hero moments.
- Spacing as meaning: tight 4 to 8px, medium 16px, wide 32 to 48px and vast 64 to 96px.
- Container order: spacing alone first, then a single divider line, a subtle border outline, and a surface card last.
- Gray scale hierarchy: at most 4 levels per screen, at 100%, 90%, 60% and 40%.
- Red as an interrupt: the accent red #D71921 is reserved for urgent states.
- One break per screen: break the pattern in exactly one place, such as an oversized number.
Anti-patterns it forbids
- Gradients in UI chrome, shadows and blur.
- Skeleton loading screens. It asks for
[LOADING...]text or a segmented spinner. - Toast popups. It asks for inline status text such as
[SAVED]. - Zebra striping, filled icons, multi-color icons and emoji as UI.
- Parallax, scroll-jacking, spring or bounce easing, and card radii above 16px.
Workflow and related skills
- Declare the fonts to load.
- Ask whether to start in dark or light mode.
- Sketch the three hierarchy layers before any code.
- Compose with the craft rules, then check tokens.
- Build components from the component patterns.
- Adapt the output to the platform.
Related: industrial-brutalist-ui, minimalist-skill, tailwind-design-system and typeset.
Who the nothing-design skill is for
Best for
- Dashboards and data-dense screens that suit a monochrome, typographic look.
- People who explicitly want the Nothing style, in HTML and CSS, SwiftUI or React and Tailwind.
- Teams who want a strict font and spacing budget the agent cannot drift from.
Not for
- Generic UI tasks. The skill says never to trigger automatically.
- Brands that rely on shadows, gradients, skeleton screens or toast notifications, since the skill bans all four.
Use it with UiChemy
A Nothing style page from your agent can be HTML, CSS or React. For WordPress, route the build through Figma, Composer, or an AI build plus MCP, then convert. Check fonts and colors on the converted page. Click Get Started on uichemy.com.
How to install Nothing Design Skill: Monochrome, Typographic, Industrial UI
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.git. The README gives this as the first of two install commands.Copy the skill folder
Run
cp -r nothing-design-skill/nothing-design ~/.claude/skills/to place the nothing-design folder in your Claude Code skills directory.Restart your agent
The README says the skill is available the next time you start Claude Code.
Trigger it explicitly
Type
/nothing-designor say Nothing style. The SKILL.md says it should never trigger on generic UI requests.
Check that it loaded
Ask for a settings screen in Nothing style. The agent should first state the Google Fonts to load, ask dark or light mode, and then build with three hierarchy layers.
Key features
- Three layer hierarchyEvery screen gets exactly three layers: primary, secondary and tertiary, each with its own font, size and placement.
- Strict font disciplineLimits each screen to 2 families, 3 sizes and 2 weights, and suggests spacing before adding a new size.
- Defined font stackPairs Space Grotesk with Space Mono and reserves the Doto dot-matrix face for hero moments.
- Spacing scale with meaningUses tight, medium, wide and vast gaps to show how elements relate, instead of dividers.
- Container strategyRanks containers from spacing alone up to surface cards and says never to box the most important element.
- Dark and light tokensTreats both modes as first class, with OLED black for dark and warm off-white for light.
- Data visual varietyLists seven forms, including hero number, segmented progress bar, concentric rings, sparkline and stat row.
- Anti-pattern listNames what never to do, from gradients and shadows to toast popups, skeleton screens and bounce easing.
- Multi-platform outputMaps its rules to HTML and CSS, SwiftUI, React and Tailwind, and Paper through a platform mapping reference.
- Three reference filesSplits tokens, components and platform mapping into separate files so the main SKILL.md stays focused.
Frequently asked questions
What is the nothing-design skill?
It is a design system skill by dominikmartn that generates UI in a Nothing inspired language. The repository describes it as monochrome, typographic and industrial, with a three layer hierarchy, a Space Grotesk, Space Mono and Doto font stack, and a full dark and light token system.
How do I install the nothing-design skill?
Clone dominikmartn/nothing-design-skill, then copy its nothing-design folder into your skills directory with cp -r, for example to ~/.claude/skills/. The README says the skill is available the next time you start Claude Code.
How do I trigger the skill?
Say Nothing style or Nothing design, or type /nothing-design. The SKILL.md states it should be used only when you explicitly ask for the Nothing design system and never trigger automatically for generic UI or design tasks.
Which fonts does it need?
Space Grotesk, Space Mono and Doto. The SKILL.md tells the agent to declare which Google Fonts are required and how to load them before starting design work, and never to assume fonts are already available. Doto is for hero moments only.
What does the skill ban?
Gradients in UI chrome, shadows, blur, skeleton loading screens, toast popups, zebra striping, filled or multi-color icons, emoji as UI, parallax, scroll-jacking, spring or bounce easing, and card border radii above 16px. It suggests text states such as [SAVED] instead.
What output formats does it support?
The README lists HTML and CSS, SwiftUI, or React and Tailwind. The SKILL.md also names Paper in its platform mapping reference. Each output follows the same tokens and craft rules, with exact values kept in the references folder.
Is the nothing-design skill only for Claude Code?
The repository describes it as a Claude Code skill, and the README install path is the Claude Code skills directory. It does not state support for other agents. Other tools that read SKILL.md folders might load it, but that is unconfirmed here.
What license does the repository use?
GitHub lists dominikmartn/nothing-design-skill under the MIT license, and the README ends with a single MIT line. Check the license file in the repository again before reusing skill text in a product.