Leaderboard/Design/nothing-design-skill
Last commit on April 1, 2026·Created on April 1, 2026

dominikmartn/nothing-design-skill

Designs interfaces that earn every pixel.
Combined rank
#145
across all skills
In Design
#19
category rank
Stars
2.8k
+0.4% in last 7d
Forks
168
+0.6% in last 7d
Watchers
8
0.0% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

This skill applies the Nothing design system—monochrome, typographic, and Swiss-inspired—to UI/UX work. It guides product and UI designers through craft rules, spacing hierarchies, and anti-patterns that keep screens clean and deliberate. Reference files for tokens, components, and platform mapping support consistent output across HTML/CSS, SwiftUI, React/Tailwind, and paper.

WHO IT'S FOR
Product Designers
adopting a specific brand design system
Frontend Developers
implementing a monochrome UI design system
Brand Design Teams
maintaining visual consistency across products
UI Design Tool Maintainers
building design system automation for AI coding assistants
Repository contents

1 skill file

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill

Follow the documented setup, then try a first task.

Install in Claude Code

Installs: nothing-design skill · Claude Code

Before you start
  • Claude Code
  • Git, required by the documented clone command
  1. In a terminal, clone the repository and copy the nothing-design folder into the Claude Code skills directory.

    git clone https://github.com/dominikmartn/nothing-design-skill.git
    cp -r nothing-design-skill/nothing-design ~/.claude/skills/
  2. Start or restart Claude Code so the installed skill becomes available.

README.md · Checked Sep 18, 2026nothing-design/SKILL.md · Checked Sep 18, 2026

Give it something to do.

Suggested first task

Design a single Nothing-inspired screen

Uses nothing-design

  • Screen purpose
  • Starting mode: dark or light
  • Primary information
  • Supporting context
  • Metadata
Use the nothing-design skill to design one screen for [screen purpose] using [dark or light mode] and the following content: [primary information, supporting context, and metadata]. Before beginning, declare the required Google Fonts and explain how to load them. Apply the skill's three-layer hierarchy so there is one clear primary element, supporting secondary content, and tertiary metadata.
nothing-design/SKILL.md · Checked Sep 18, 2026