MCPInstall

nothing-design-skill

by reason-machinesFrontend & Design

Generate UI components in Nothing's monochrome, typographic, industrial design language with Swiss typography and OLED aesthetics

Installs
156
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-skill
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads nothing-design-skill automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Nothing Design Skill

Skill by ara.so — Design Skills collection.

A design system skill for Claude Code that generates UI components following Nothing's visual language: monochrome, typographic, industrial. Provides reusable design tokens, component patterns, and multi-platform output (HTML/CSS, SwiftUI, React/Tailwind).

What It Does

Nothing Design Skill codifies Nothing's design principles into a reusable system:

  • Three-layer visual hierarchy: Display, body, metadata — strict information architecture
  • Monochrome palette: OLED blacks (#000000), pure whites (#FFFFFF), precise grays
  • Typography: Space Grotesk (display), Space Mono (monospace), Doto (dot-matrix accents)
  • Industrial components: Segmented progress bars, mechanical toggles, instrument-style widgets
  • Full dark/light modes: Complete token system with semantic color mapping

Installation

Clone the repository and copy the skill folder to your Claude Code skills directory:

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

Restart Claude Code to activate the skill.

Core Design Tokens

Color System

Dark Mode (Primary)

--color-background: #000000;    /* Pure black (OLED) */
--color-surface: #0A0A0A;       /* Elevated surface */
--color-border: #1A1A1A;        /* Subtle dividers */
--color-text-primary: #FFFFFF;  /* Pure white */
--color-text-secondary: #999999; /* Mid gray */
--color-text-tertiary: #666666; /* Dim gray */
--color-accent: #FF0000;        /* Nothing red (sparingly) */

Light Mode

--color-background: #FFFFFF;
--color-surface: #F5F5F5;
--color-border: #E5E5E5;
--color-text-primary: #000000;
--color-text-secondary: #666666;
--color-text-tertiary: #999999;
--color-accent: #FF0000;

Typography Scale

--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Space Grotesk', sans-serif;
--font-mono: 'Space Mono', monospace;
--font-dot: 'Doto', monospace;

--text-display-xl: 48px / 1.1;    /* Hero headlines */
--text-display-lg: 36px / 1.2;    /* Section titles */
--text-display-md: 24px / 1.3;    /* Card headers */
--text-body-lg: 16px / 1.5;       /* Primary text */
--text-body-md: 14px / 1.5;       /* Secondary text */
--text-mono-md: 14px / 1.4;       /* Code, data */
--text-label-sm: 11px / 1.3;      /* Labels, metadata */

Spacing System

--space-2xs: 4px;   /* Tight padding */
--space-xs: 8px;    /* Compact spacing */
--space-sm: 12px;   /* Small gaps */
--space-md: 16px;   /* Default spacing */
--space-lg: 24px;   /* Section spacing */
--space-xl: 32px;   /* Large gaps */
--space-2xl: 48px;  /* Major sections */

Component Patterns

Button (HTML/CSS)

<button class="nothing-btn nothing-btn-primary">
  <span class="nothing-btn-label">Continue</span>
</button>

<style>
.nothing-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  text-transform: uppercase;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.nothing-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-text-primary);
}

.nothing-btn-primary {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-background);
}

.nothing-btn-primary:hover {
  background: var(--color-text-secondary);
  border-color: var(--color-text-secondary);
}
</style>

Segmented Progress Bar

<div class="nothing-progress">
  <div class="nothing-progress-track">
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment"></div>
    <div class="nothing-progress-segment filled"></div>
    <div class="nothing-progress-segment filled"></div>
    <div class="nothing-progress-segment filled"></div>
  </div>
  <span class="nothing-progress-label">70%</span>
</div>

<style>
.nothing-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nothing-progress-track {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nothing-progress-segment {
  height: 4px;
  flex: 1;
  background: var(--color-border);
  transition: background 0.2s ease;
}

.nothing-progress-segment.filled {
  background: var(--color-text-primary);
}

.nothing-progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  min-width: 40px;
  text-align: right;
}
</style>

Card Component (React/Tailwind)

export function NothingCard({ title, metadata, children }) {
  return (
    <div className="border border-zinc-900 bg-black p-6">
      {/* Header */}
      <div className="mb-6 border-b border-zinc-900 pb-4">
        <h3 className="font-display text-2xl font-medium tracking-tight text-white">
          {title}
        </h3>
        {metadata && (
          <p className="font-mono text-xs uppercase tracking-wider text-zinc-600 mt-2">
            {metadata}
          </p>
        )}
      </div>
      
      {/* Content */}
      <div className="space-y-4 text-zinc-400">
        {children}
      </div>
    </div>
  );
}

// Usage
<NothingCard title="System Status" metadata="Updated 14:32">
  <div className="flex justify-between items-center">
    <span className="text-sm">Battery</span>
    <span className="font-mono text-white">87%</span>
  </div>
</NothingCard>

Toggle Switch (SwiftUI)

struct NothingToggle: View {
    @Binding var isOn: Bool
    
    var body: some View {
        Button(action: { isOn.toggle() }) {
            HStack(spacing: 2) {
                Rectangle()
                    .fill(isOn ? Color.white : Color(hex: "1A1A1A"))
                    .frame(width: 20, height: 32)
                
                Rectangle()
                    .fill(isOn ? Color(hex: "1A1A1A") : Color.white)
                    .frame(width: 20, height: 32)
            }
            .overlay(
                Rectangle()
                    .strokeBorder(Color(hex: "333333"), lineWidth: 1)
            )
        }
        .animation(.easeInOut(duration: 0.15), value: isOn)
    }
}

// Usage
@State private var notificationsEnabled = true

NothingToggle(isOn: $notificationsEnabled)

Data Table

<table class="nothing-table">
  <thead>
    <tr>
      <th>Device</th>
      <th>Status</th>
      <th>Updated</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Phone (2)</td>
      <td><span class="status-dot active"></span> Online</td>
      <td>2m ago</td>
    </tr>
    <tr>
      <td>Ear (stick)</td>
      <td><span class="status-dot"></span> Offline</td>
      <td>1h ago</td>
    </tr>
  </tbody>
</table>

<style>
.nothing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-display);
}

.nothing-table th {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  text-align: left;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
}

.nothing-table td {
  font-size: 14px;
  color: var(--color-text-primary);
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  margin-right: 8px;
}

.status-dot.active {
  background: #00FF00;
}
</style>

Design Principles

Visual Hierarchy (Three Layers Only)

  1. Display: Headlines, primary actions, key metrics
  2. Body: Descriptive text, secondary actions, content
  3. Metadata: Labels, timestamps, auxiliary information

Never use more than three levels in a single view.

Typography Rules

  • Space Grotesk: All UI text, headlines, buttons
  • Space Mono: Data, codes, timestamps, technical info
  • Doto: Decorative accents only (sparingly)
  • Letter spacing: 0.02em for buttons/labels, tighter for display
  • Line height: 1.1-1.3 for display, 1.5 for body text

Motion & Transitions

/* Standard easing */
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Mechanical snap */
transition: all 0.1s cubic-bezier(0.4, 0, 1, 1);

/* Smooth fade */
transition: opacity 0.2s ease;

Spacing Consistency

  • Use 4px grid system
  • Default gap: 16px
  • Section spacing: 24px or 32px
  • Never arbitrary values

Platform-Specific Output

Generating HTML/CSS

User: "Create a nothing-style settings panel with toggles"

AI generates:
- Semantic HTML structure
- Inline <style> with CSS variables
- Self-contained component

Generating SwiftUI

User: "Make a nothing design stats card in SwiftUI"

AI generates:
- SwiftUI View struct
- Color extensions for hex values
- Proper spacing/font modifiers

Generating React/Tailwind

User: "Build a nothing-inspired navigation bar with React"

AI generates:
- Functional component
- Tailwind classes matching token values
- TypeScript types if requested

Common Patterns

Status Indicators

<!-- Dot indicator -->
<div class="status-indicator">
  <span class="status-dot active"></span>
  <span class="status-label">Connected</span>
</div>

<!-- Segmented bar -->
<div class="signal-strength">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar active"></div>
  <div class="bar active"></div>
</div>

Dot-Matrix Numerals (Doto Font)

<span class="dot-display">88:88</span>

<style>
.dot-display {
  font-family: var(--font-dot);
  font-size: 48px;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
}
</style>

Loading States

<div class="nothing-loader">
  <div class="loader-segment"></div>
  <div class="loader-segment"></div>
  <div class="loader-segment"></div>
</div>

<style>
@keyframes loadPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.nothing-loader {
  display: flex;
  gap: 4px;
}

.loader-segment {
  width: 4px;
  height: 16px;
  background: var(--color-text-primary);
  animation: loadPulse 1.2s ease-in-out infinite;
}

.loader-segment:nth-child(2) { animation-delay: 0.2s; }
.loader-segment:nth-child(3) { animation-delay: 0.4s; }
</style>

Troubleshooting

Fonts Not Loading

Include Google Fonts in your HTML head or use system fallbacks:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

CSS fallback:

--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

OLED Black Not Pure Black

Ensure you're using hex #000000, not #000 or rgb values. Some design tools auto-adjust to #0A0A0A.

Components Look Too Dense

Nothing design is intentionally compact. If needed for accessibility:

  • Increase touch targets to 44px minimum
  • Add --space-md (16px) padding to interactive elements
  • Maintain visual density through borders, not spacing

Dark/Light Mode Switching

Use CSS custom properties and data attributes:

<html data-theme="dark">

:root[data-theme="dark"] {
  --color-background: #000000;
  --color-text-primary: #FFFFFF;
}

:root[data-theme="light"] {
  --color-background: #FFFFFF;
  --color-text-primary: #000000;
}

Toggle with JavaScript:

document.documentElement.dataset.theme = isDark ? 'dark' : 'light';

Advanced Techniques

Glitch Effect (Brand Element)

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.glitch-text {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Grid Overlay Pattern

.nothing-grid-bg {
  background-image: 
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 20px 20px;
}

This skill provides everything needed to generate consistent, authentic Nothing-style UI across platforms. Focus on clarity, restraint, and mechanical precision.

FAQ

What does the nothing-design-skill skill do?

Generate UI components in Nothing's monochrome, typographic, industrial design language with Swiss typography and OLED aesthetics

How do I install nothing-design-skill?

Run npx skills add https://github.com/reason-machines/design-skills --skill nothing-design-skill in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/nothing-design-skill/ (personal) or .claude/skills/nothing-design-skill/ (project).

Which AI agents can use nothing-design-skill?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is nothing-design-skill safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains nothing-design-skill?

It is published by reason-machines in reason-machines/design-skills. It has 156 recorded installs.

More from reason-machines/design-skills

View all →

awesome-claude-design

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

205 installs

design-md-format

reason-machines/design-skills

Create and validate DESIGN.md files that give AI coding agents structured understanding of design systems through machine-readable tokens and human-readable rationale.

178 installs

open-codesign-ai-design

reason-machines/design-skills

Use Open CoDesign to generate prototypes, slides, and PDFs from prompts with Claude, GPT, Gemini, or local models

AI & Agents175 installs

open-design-ai-prototyping

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

174 installs

design-md-chrome-extractor

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

166 installs

claude-design-system-hooks

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design165 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs