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

nothing-design-ui-skill

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you quickly produce UI components that match Nothing’s distinctive monochrome, typographic, industrial design language—without manually researching tokens, spacing, and component patterns.

Core Features & Use Cases

  • Nothing-accurate visual hierarchy: Enforces the display/body/metadata layering to keep UI clean and consistent.
  • OLED-ready monochrome theming: Applies the Nothing color system for dark and light modes with precise grays.
  • Typography-first component styling: Uses Space Grotesk/Space Mono and Doto accents for correct brand feel.
  • Multi-platform component output: Generates UI in HTML/CSS, React/Tailwind, and SwiftUI using the same design principles.
  • Use Case: When you need an instrument-like dashboard card, segmented progress indicator, and table UI for an iOS or web prototype, this Skill ensures the components share the same Nothing aesthetic and spacing rules.

Quick Start

Generate a settings-panel UI in Nothing design style with monochrome colors, Swiss-style typography hierarchy, and include a segmented progress indicator plus an industrial toggle component.

Frequently Asked Questions about nothing-design-ui-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 web prototype?▼

Generate Nothing-style UI by applying the Skill's monochrome token system and Swiss typography rules to your web prototype. It outputs HTML/CSS or React/Tailwind components like dashboards and cards while enforcing a three-layer visual hierarchy.

What is the Nothing design system and how does it handle typography?▼

The Nothing design system is a monochrome, industrial aesthetic that uses a typography-first approach. It applies Space Grotesk and Space Mono fonts with Doto accents across a strict display, body, and metadata three-layer hierarchy to maintain visual consistency.

Can I use this Skill to build SwiftUI components for iOS?▼

Yes, you can generate SwiftUI components for iOS. The Skill supports platform-specific output patterns for SwiftUI, allowing you to build Nothing-style tables, progress widgets, and toggles that match the exact monochrome aesthetic as the web versions.

Does this Skill support OLED-ready monochrome theming for dashboards?▼

Yes, it supports OLED-ready monochrome theming by applying the Nothing color system with precise grays for both dark and light modes. This ensures your dashboard UI components maintain the correct industrial aesthetic without manual color tuning.

What is the best way to create a settings panel with a segmented progress indicator?▼

The best way to create a settings panel with a segmented progress indicator is to generate it using the Skill's predefined Nothing token system. It applies the correct spacing and Swiss-style typography hierarchy to ensure the UI remains clean and consistent.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
3

nothing-design-system

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

Official
Advanced
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
AradotsoAradotso
3

nothing-design-skill

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

Official
Intermediate
AradotsoAradotso
3

nothing-design-system-skill

Generates Nothing-style UI components in HTML/CSS, SwiftUI, and React/Tailwind with monochrome typographic industrial design language.

Official
Intermediate