Nothing Design Skill — Install & Live Demo

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

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "nothing-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "nothing-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/nothing-design-skill",
          "~/.claude/skills/nothing-design"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add nothing-design-skill -- git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

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.

Prerequisites

Skill installed — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
Tailwind project — Existing Next.js or Vite + Tailwind setup

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

Nothing Design Skill vs others

Alternative	When to use it instead	Tradeoff
shadcn/ui defaults	You want a more conventional look	Generic; no brand voice
Tailwind UI	You want polished but generic	Looks like every other Tailwind UI site
Custom design system	You have a brand designer	Slow; expensive

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills