skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

nothing-design-skill

Generate Nothing-style UI components with monochrome design tokens across HTML/CSS, SwiftUI, and React/Tailwind.

3|Updated May 16, 2026
Search Tags:#design tokens#ui components#swiftui#generate#nothing phone#monochrome ui#react tailwind
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill nothing-design-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nothing-design-skill
Source: https://github.com/Aradotso/design-skills/tree/main/skills/nothing-design-skill
Command: npx skills add https://github.com/Aradotso/design-skills --skill nothing-design-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about nothing-design-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Nothing-style UI components for a mobile app?▼

To generate Nothing-style UI components, apply monochrome, typographic, and industrial design principles to create reusable tokens and platform-specific patterns like SwiftUI toggles or segmented progress indicators.

What design tokens are needed for a monochrome UI theme?▼

Monochrome UI themes require semantic palette tokens for OLED blacks, borders, and text grays, alongside strict 4px-based spacing and typography rules to maintain consistent visual density across dark and light modes.

Can I use this to build a React Tailwind component library?▼

Yes, you can build a React Tailwind component library by translating Nothing's industrial design language into React-friendly patterns, generating buttons, cards, and tables with mechanical transitions and Doto dot-matrix accents.

Does this design system support both dark and light mode dashboards?▼

Dark and light mode dashboards are fully supported through a complete semantic palette of OLED blacks and text grays, applying a strict three-layer visual hierarchy of Display, Body, and Metadata for consistent information architecture.

How do I structure visual hierarchy for a Nothing-style settings panel?▼

Structure a Nothing-style settings panel using a strict three-layer visual hierarchy—Display, Body, and Metadata—combined with a 4px-based spacing system to enforce consistent density and mechanical motion states across UI components.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
3

nothing-design-ui-skill

Generate Nothing-brand UI components in monochrome Swiss typography style.

Official
Intermediate
aaltaayaaltaay

imagegen-frontend-mobile

Generate app-native mobile UI images from design concepts.

Community
Advanced
AradotsoAradotso
3

nothing-design-system

Generate monochrome UI components with token-based typography, spacing, and theming.

Official
Advanced
B1u3B01tB1u3B01t
191

nothing-design

Generate monochrome UI designs with three-layer hierarchy and token-aligned spacing.

Community
Advanced