Nothing Design Skill

Why use it

Key features

Strict monochrome palette (white/black/red accent only)
Dot-matrix grid backgrounds and decorative numerals
Industrial type pairing (mono + sans grotesk)
Transparent / glass layered components
Component recipes: hero, feature grid, CTA, data table
Tailwind-ready output

Live Demo

What it looks like in practice

ready

Install

Author repository · Claude Skills documentation

Use Cases

Real-world ways to use Nothing Design Skill

Build a landing page in Nothing style

👤 Frontend devs / designer-developers ⏱ ~45 min intermediate

When to use: Brand brief says 'industrial / minimal'; you want a Nothing-flavored landing without inventing a system from scratch.

Flow

Establish tokens

Nothing-design: emit the design tokens (colors, type scale, spacing) for my Tailwind config.✓ Copied

→ Tailwind extension snippet with monochrome palette + mono/grotesk fonts
Compose hero

Generate a hero section: oversized numeral '01.', headline, subhead, dot-matrix grid background. Tailwind only, no images.✓ Copied

→ Hero JSX matching the language
Refine

The headline should be more confident — Nothing uses high contrast and grotesk. Adjust.✓ Copied

→ Type weight and tracking change to match the brand

Outcome: Landing page that looks like it belongs to a Nothing-adjacent product.

Pitfalls

Adding warm colors breaks the language — Skill rejects out-of-palette suggestions if asked; lean on it

Combine with: filesystem · shadcn-ui-mcp

Restyle an existing dashboard in Nothing style

👤 Devs maintaining internal tools ⏱ ~60 min advanced

When to use: Internal admin looks like Bootstrap 4; you want it to feel intentional.

Flow

Inventory

Nothing-design: scan src/components/. List components and propose a Nothing-language counterpart for each.✓ Copied

→ Per-component proposal
Refactor one

Refactor DataTable.tsx to the Nothing style. Mono font for numerics, dot-matrix dividers, accent only on row hover.✓ Copied

→ Updated component matches the language

Outcome: Cohesive monochrome dashboard.

Pitfalls

Hard to read at glance — Increase contrast; Nothing is high-contrast, not low-contrast

Generate a marketing deck in Nothing aesthetic

👤 Marketing devs ⏱ ~30 min intermediate

When to use: You want a slide deck that doesn't look like a generic template.

Flow

Compose

Nothing-design: generate a 12-slide HTML deck for product launch. Use oversized numerals as section markers.✓ Copied

→ Single HTML deck matching language

Outcome: Deck that reinforces brand without effort.

Pitfalls

Too dark for a bright projector room — Skill ships a 'light' inversion — request it

Combine with: guizang-ppt-skill

Combinations

Pair with other MCPs for X10 leverage

nothing-design-skill + shadcn-ui-mcp

Use shadcn components, themed to Nothing

shadcn: get Form. Nothing-design: restyle it to the brand language.✓ Copied

nothing-design-skill + filesystem

Apply across a project

Nothing-design: scan components/, propose restyles, then apply one by one.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call
emit_tokens	(none)	Project setup
generate_component	kind: hero\|cta\|table\|card, content	Adding a section
restyle_existing	path, target_kind	Bringing legacy components in line

Cost & Limits

What this costs to run

API quota: N/A
Tokens per call: 500–3000
Monetary: Free
Tip: Generate tokens once, then style components incrementally — don't re-emit tokens every call

Security

Permissions, secrets, blast radius

Minimum scopes: filesystem-read filesystem-write

Credential storage: None

Data egress: None

This is a fan-made interpretation; not affiliated with Nothing the company

Troubleshooting

Common errors and fixes

Output uses other colors

Re-prompt: 'monochrome only, accent-red allowed at <10% surface'

Type pairing feels off

Specify the exact mono + grotesk fonts in the prompt; default is JetBrains Mono + Inter

Dot-matrix background looks like noise

Reduce dot density; the skill defaults too dense for some screens

Alternatives