nothing-design-system-skill

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

3|Updated May 16, 2026

Search Tags:#design system #ui components #swiftui #generate #html css #react tailwind #nothing style

Ready to run

npx skills add https://github.com/Aradotso/design-skills --skill nothing-design-system-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nothing-design-system-skill
Source: https://github.com/Aradotso/design-skills/tree/main/skills/nothing-design-system-skill
Command: npx skills add https://github.com/Aradotso/design-skills --skill nothing-design-system-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of producing UI that visually matches Nothing’s distinctive monochrome, typographic, mechanical design language without manually hunting for tokens, spacing rules, and component patterns.

Core Features & Use Cases

Nothing design tokens: Provides a monochrome palette, spacing system, typography stack, and interaction timing rules for consistent styling.
Reusable component patterns: Generates key UI pieces like buttons, segmented progress bars, cards, tables, and toggles in Nothing’s style.
Multi-platform output: Supports HTML/CSS, SwiftUI, and React/Tailwind so you can implement the same design system across targets.

Quick Start

Ask the AI to generate a Nothing-style monochrome dashboard button, segmented progress bar, and status card using HTML/CSS that follows the Nothing three-layer hierarchy.

Frequently Asked Questions about nothing-design-system-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 dashboard?▼

To generate Nothing-style UI components, you specify the needed dashboard pieces like buttons and status cards. The output uses OLED black, controlled grays, Swiss-style typography, and zero border-radius across HTML/CSS or React/Tailwind.

Can I use this to build a Nothing design system in SwiftUI?▼

Yes, you can build a Nothing design system in SwiftUI. It generates native components like segmented progress bars and toggles, applying monochrome palettes, mechanical interaction patterns, and industrial borders to your iOS targets.

What are the Nothing design tokens for HTML and CSS?▼

The Nothing design tokens for HTML and CSS include a monochrome palette, a structured spacing system, Swiss-style typography stacks, and interaction timing rules. These tokens ensure consistent typographic hierarchy and OLED black styling.

Does this approach support generating React and Tailwind components with industrial borders?▼

Yes, this approach supports generating React and Tailwind components with industrial borders. It outputs reusable UI pieces like tables and cards using zero border-radius, controlled grays, and mechanical segmented patterns.

What is the best way to create a monochrome status UI with consistent spacing rules?▼

The best way to create a monochrome status UI is by applying predefined design tokens. This generates status cards and segmented progress bars using a structured spacing system, Swiss-style typography, and OLED black backgrounds.

When should I not use a monochrome typographic design language for my UI components?▼

You should not use a monochrome typographic design language when your project requires multi-color branding, rounded corners, or soft visual elements. This industrial approach specifically enforces zero border-radius and controlled grays.