Skip to main content
affpapa.org
RU EN
skill CX Codex

nothing-design — Claude Code skill: what it does, how to install

This skill guides Nothing-style interface work with monochrome layouts and strict type hierarchy. It runs only after an explicit request.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add harperreed/dotfiles --skill nothing-design -a claude-code
Open on GitHub

What nothing-design does

nothing-design guides interface work inspired by Nothing’s visual language. It favors monochrome surfaces, strong type-led hierarchy, deliberate asymmetry, sparse accents, and separate treatment for light and dark modes. The skill organizes each screen into three priority levels and keeps the font, size, and weight choices tightly limited.

Before design work begins, it requires the agent to name the Google Fonts needed and explain how they should be loaded. Project access is handled through Read, Write, Edit, Glob, and Grep. The skill does not activate for a generic UI request; the user must ask for Nothing styling directly, such as /nothing-design.

What it helps with

  • shape a monochrome interface system
  • build a screen with three priority levels
  • limit typography choices across a page
  • create matching light and dark layouts
  • place one strong visual break in a restrained composition

Example prompts for the agent

  • Apply /nothing-design to this dashboard and keep its data structure intact.
  • Redesign this screen in Nothing style, starting by listing the required Google Fonts and their loading method.
  • Rework the page with three visual priority levels, a monochrome palette, and one accent.

How to install nothing-design

1Skills CLI (Vercel)

npx skills add harperreed/dotfiles --skill nothing-design -a claude-code

2Manually: put the files in place

~/.claude/skills/nothing-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nothing-design/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about nothing-design

How do I install nothing-design in Claude Code?

Run npx skills add harperreed/dotfiles --skill nothing-design -a claude-code, then check ~/.claude/skills/nothing-design/SKILL.md.

What does nothing-design do?

It guides interface design around Nothing-inspired monochrome visuals, firm typography hierarchy, restrained spacing, and a single expressive contrast. It activates after a direct request.

What does the skill need before design work starts?

You must identify the Google Fonts the design requires and describe how to load them. The skill can then use Read, Write, Edit, Glob, and Grep while working on the project.

Similar skills

Everything for Design →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set26

rodeo Connects meme-rodeo MCP utilities to search, inspect, and retrieve meme collection statistics via CLI or stdio proxy. CX Codex +1 ★ 336repo stars personal-finance-planning This skill turns personal money management into a staged plan, covering spending reviews, debt repayment, savings targets, income ideas, and beginner investing. CX Codex +1 ★ 336repo stars personal-branding Walks you through seven phases from positioning to messaging hierarchy, then compiles everything into one strategy document. CX Codex +1 ★ 336repo stars pagen Turns the agent into a personal CRM assistant to track contacts and log interaction notes. CX Codex +1 ★ 336repo stars memory A skill that keeps agent notes in SQLite with embeddings and pulls them back by meaning. Useful when project context has to survive across sessions. CX Codex +1 ★ 336repo stars marketing-audit Diagnoses product messaging, offers, funnels, and content across five sequential stages. Helps find drop-offs and builds a 30-day task list. CX Codex +1 ★ 336repo stars granola-to-obsidian Moves Granola meetings into an Obsidian vault while following the vault’s note format. Use it to add notes for a chosen date range. CX Codex +1 ★ 336repo stars fleet-manager A skill that reads every claude-code pane in tmux, labels what each agent is doing, and sends replies or new instructions back into the pane. CX Codex +1 ★ 336repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor