# nothing-design-skill: a Claude Code skill for Nothing-style monochrome UI > A Claude Code skill that packages Nothing's monochrome, typographic, industrial visual language into reusable rules for HTML/CSS, SwiftUI and React output. It solves one narrow problem well, and its own README is the clearest statement of its limits. **dominikmartn/nothing-design-skill** — A Claude Code skill for generating UI in the Nothing design language. Monochrome, typographic, industrial. - Repository: https://github.com/dominikmartn/nothing-design-skill - Stars: 2,795 · Forks: 166 - Language: Unknown - License: MIT - Published: 2026-09-28 · Updated: 2026-09-28 · Language: en - Canonical page: https://hysenlabs.com/projects/dominikmartn-nothing-design-skill ## What nothing-design-skill actually solves The README opens with the problem in the author's own words: "I kept describing the same design rules to Claude over and over." That is the whole scope. This is not a component library, not a CSS framework, and not a Figma file. It is a packaged set of instructions that a Claude Code session loads so the model stops inventing a new visual style on every prompt. The audience is narrow and specific: people who already use Claude Code, who already like the Nothing aesthetic (monochrome, heavy typography, OLED blacks, dot-matrix motifs), and who are tired of restating those preferences in every conversation. If you do not use Claude Code, the repository has nothing for you. The install step is a copy into ~/.claude/skills/, which is a Claude Code convention, not a general one. The framing matters because it sets expectations. The README describes triggers ("Tell Claude /nothing-design or say 'Nothing style'") rather than APIs. There is no runtime, no build step, no package to import. What you get is a folder of Markdown that shapes model output. ## How the skill is structured: SKILL.md plus three reference files The repository has four meaningful entries at the top level: LICENSE, README.md, nothing-design/, and preview.gif. Everything the skill does lives inside nothing-design/, and the README's file table names four files. SKILL.md holds the design philosophy, craft rules and workflow. That is the file Claude Code reads to decide how to behave when the skill is active. The three files under references/ are the substance: tokens.md for colors, fonts, spacing and motion tokens; components.md for buttons, cards, lists, tables and overlays; platform-mapping.md for how the same design maps onto CSS, SwiftUI and React output. That split is the interesting design decision. Instead of one long prompt, the author separated philosophy from tokens from components from platform translation. The practical consequence is that the model can pull in the token definitions without loading the component catalogue, and the platform mapping is the piece that decides whether you get CSS variables or SwiftUI modifiers. The README claims a three-layer visual hierarchy (display, body, metadata) and a font stack of Space Grotesk, Space Mono and Doto. Those are the rules the reference files are meant to encode; the README does not show their contents, so the exact token names and values are only visible after you clone the repository. ## Installing nothing-design-skill and running a first prompt The README gives a two-command install. The first clones the repository; the second copies the nothing-design folder into the Claude Code skills directory. Note that it copies the inner folder, not the repository root. ```bash git clone https://github.com/dominikmartn/nothing-design-skill.git cp -r nothing-design-skill/nothing-design ~/.claude/skills/ ``` After that, the README says the skill is available the next time you start Claude Code. There is no install script, no dependency step and no configuration file to edit. If ~/.claude/skills/ does not exist yet on your machine, the README does not say to create it first, so check that path before assuming the copy succeeded. Once Claude Code is running, the README lists two ways to activate the skill: the slash command /nothing-design, or the phrase "Nothing style" in a normal prompt. A first real use is to invoke the skill and ask for a specific component rather than a whole page, so you can judge the output quickly. The README states that output is available as HTML/CSS, SwiftUI, or React/Tailwind, so asking for one of those formats explicitly is a reasonable second test. What you should see is monochrome output using the three-layer hierarchy and the Space Grotesk / Space Mono / Doto stack the README describes. If the result comes back with colour, gradients or a fourth type level, the skill's rules did not take effect and the likely cause is that the folder landed in the wrong directory. ## Where the skill breaks down The most obvious limitation is that the README documents the existence of tokens.md, components.md and platform-mapping.md but not their contents. You cannot evaluate the design system from the README alone. Whether the spacing scale is sensible, whether the motion tokens are usable, whether the component list covers what you need: all of that requires cloning the repository and reading three Markdown files. For a design system, that is an unusual documentation posture, and it means the README functions as a pointer rather than a reference. A second constraint is the aesthetic itself. Monochrome, typographic, industrial, with a three-layer hierarchy, is a deliberate restriction. It is the wrong tool for dashboards that encode meaning in colour, for charts where series must be distinguishable, or for any interface where accessibility contrast requirements push you toward more than two surface tones. The README does not discuss accessibility, contrast ratios or focus states, and components.md is described only as covering buttons, cards, lists, tables and overlays. Treat the output as a starting point that still needs a manual pass. Third, this is prompt-shaped software. Its behaviour depends on the model reading and following Markdown instructions, so results will vary between sessions and between model versions. Nothing in the README describes a test suite, a validation step or a way to check that generated output conforms to the tokens. There is also no release history: the repository has no releases, so there is no changelog to tell you what changed between one version of the skill and the next. The last push to the default branch was on 2026-04-01, so if you adopt it, pin the commit you cloned rather than tracking main. ## How it compares with a conventional design system The natural alternative is a real design system with published tokens: a Tailwind preset, a CSS custom-property theme, or a platform component library. The difference is not quality, it is where the rules live. A Tailwind preset encodes spacing, colour and typography in a config file that a build step enforces. A generated class either exists or it does not. nothing-design-skill encodes the same kind of rules in prose that a language model interprets at generation time. That trade gives you flexibility and takes away guarantees. A preset cannot drift; a prompt can. A preset also cannot design. The skill can take a rough request ("a settings screen") and produce a plausible layout in a consistent style, which a config file will never do. If your team already has a token pipeline, the skill is complementary rather than competing: you could use it to draft a screen and then rewrite the output against your own tokens. Among Claude Code skills specifically, the related searches suggest people compare this against other design-oriented skills and against general "best Claude UI skills" lists. The README makes no comparison and names no alternatives, so any claim about how it ranks against other skills would be guesswork. What can be said is that its scope is narrower than a general UI skill: it commits to one visual language rather than offering several. ## Licence, maintenance and the cost of upgrading The README states the project is MIT licensed, and the repository root contains a LICENSE file. MIT is permissive: you can use, modify and redistribute the files, including commercially, provided the copyright notice and permission notice are retained. That matters more than usual here, because the practical way to use a skill like this is to fork it and edit the reference files to match your own tokens. Check the LICENSE file itself for the exact copyright holder, since the README does not name one. This is a description of the licence text, not legal advice. Upgrade cost is low in one sense and awkward in another. There is nothing to compile and no dependency graph to resolve; updating means copying the nothing-design folder again. But the repository has no tagged releases, so there is no version number to compare against. If you forked and edited tokens.md, re-copying overwrites your changes. The last push was on 2026-04-01, which is the only signal available about how current the skill is. Keep your edits in a separate branch or a separate folder, and diff before you copy. The font stack deserves a note before you commit. Space Grotesk, Space Mono and Doto are named in the README as the typographic foundation. The README does not say how they are loaded, and loading fonts is a licensing question of its own for each typeface. Verify the licence for each font you actually ship, separately from the MIT licence on this repository. ## Conclusion Adopt nothing-design-skill if you already work in Claude Code, want Nothing-adjacent monochrome UI, and are willing to read three reference files before trusting the output. Do not adopt it if you need a maintained, versioned design system with a changelog, or if your product depends on colour, dense data tables or a component library with accessibility guarantees. Before you rely on it, verify two things yourself: that the token names in references/tokens.md match what your own codebase expects, and that the license file in the repository root matches the MIT line in the README, since the README is the only place the license is stated in prose. ## FAQ ### What is a design skill? In this project's terms, a design skill is a folder of Markdown instructions that Claude Code loads so its UI output follows fixed rules. nothing-design-skill is one: the README describes it as a packaged set of design rules the author kept repeating to Claude, covering a three-layer hierarchy, a Space Grotesk / Space Mono / Doto font stack, and output as HTML/CSS, SwiftUI or React/Tailwind. ### What are Claude skills? Claude skills are the mechanism this project uses to extend Claude Code: a folder placed in the skills directory that Claude reads for instructions. The README says copying the nothing-design folder into ~/.claude/skills/ makes the skill available the next time you start Claude Code. ### How do I trigger nothing-design-skill in a prompt? The README lists two triggers: the slash command /nothing-design, or the phrase "Nothing style" in a normal prompt. Either one tells Claude to follow the skill's design principles for the output it generates. ### What output formats does nothing-design-skill support? The README states that output is available as HTML/CSS, SwiftUI, or React/Tailwind. The references/platform-mapping.md file is described as holding the CSS, SwiftUI and React output mappings for the same design rules. ### Is nothing-design-skill free to use and modify? The README states the project is MIT licensed and the repository root contains a LICENSE file, which permits use, modification and redistribution provided the copyright and permission notices are kept. The README does not name the copyright holder, so read the LICENSE file itself. ## Sources - [dominikmartn/nothing-design-skill on GitHub](https://github.com/dominikmartn/nothing-design-skill) - [Issues](https://github.com/dominikmartn/nothing-design-skill/issues) - [License: MIT](https://github.com/dominikmartn/nothing-design-skill/blob/main/LICENSE) - [README](https://github.com/dominikmartn/nothing-design-skill/blob/main/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/dominikmartn-nothing-design-skill