Skills
.Work. You
Rest

nothing-design-skill

Official

Generate Nothing-style UI components fast

Design & Creative#design tokens#ui components#swiftui#generate#nothing phone#monochrome ui#react tailwind
AuthorAradotso
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Nothing Design Skill eliminates inconsistent UI styling by encoding Nothing’s monochrome, typographic, industrial design language into reusable patterns and tokens so outputs match the brand feel.

Core Features & Use Cases

  • Design tokens for dark/light themes: Provide a complete semantic palette (OLED blacks, borders, text grays) plus spacing and typography rules.
  • Component patterns in multiple platforms: Generate UI building blocks like buttons, segmented progress indicators, cards, toggles, and tables in HTML/CSS, SwiftUI, and React/Tailwind-friendly React patterns.
  • Hierarchy and spacing enforcement: Apply a strict three-layer visual hierarchy (Display, Body, Metadata) and a 4px-based spacing system to keep density and information architecture consistent.
  • Motion, states, and brand details: Include mechanical transitions, loading states, dot-matrix (Doto) accents, and utility patterns like grids and status indicators.

Quick Start

Ask the AI to generate a Nothing-style settings panel with segmented progress, OLED monochrome tokens, and a SwiftUI toggle, following the three-layer hierarchy.

Dependency Matrix

Required Modules

None required

Components

Standard package

đź’» Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: nothing-design-skill
Download link: https://github.com/Aradotso/design-skills/archive/main.zip#nothing-design-skill

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.