skills.rest
B1u3B01t
B1u3B01tCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nothing-design

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

191|14|Updated Jan 9, 2026
Search Tags:#typography#design system#ui design#tokens#dark mode#monochrome#layout hierarchy
One-click install
npx skills add https://github.com/B1u3B01t/design-playground --skill nothing-design-b1u3b01t
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nothing-design
Source: https://github.com/B1u3B01t/design-playground/tree/main/skills/nothing-design
Command: npx skills add https://github.com/B1u3B01t/design-playground --skill nothing-design-b1u3b01t

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The Nothing Design skill helps you create a cohesive, typographically driven monochrome interface without visual noise, by enforcing a strict hierarchy and spacing system.

Core Features & Use Cases

  • Three-layer hierarchy: Forces a clear Primary/Secondary/Tertiary structure so the user’s attention lands correctly on every screen.
  • Font and spacing discipline: Applies constrained font usage, type scale rules, and spacing rhythm to prevent flat, inconsistent layouts.
  • Token-aligned implementation guidance: Ensures your UI decisions map to the system’s tokens, component patterns, and platform output conventions.

Quick Start

Ask it: "Apply the Nothing style to my screen, starting in dark mode, and specify the Google Fonts needed, the three-layer hierarchy, and the exact token-based spacing and typography choices."

Frequently Asked Questions about nothing-design

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

FAQPage Schema
How do I design a monochrome UI with strict visual hierarchy?▼

Design a monochrome UI by enforcing a three-layer Primary/Secondary/Tertiary visual hierarchy, typographic constraints, and token-aligned spacing to ensure user attention lands correctly without visual noise.

What is the best way to apply Nothing-inspired design tokens to a dashboard layout?▼

Apply Nothing-inspired design tokens to dashboard layouts by mapping spacing, typography, and color roles to the system's component patterns and platform conventions, ensuring dense data visualization remains readable and uncluttered.

Can I use this monochrome design system for both dark mode and light mode interfaces?▼

Yes, you can use this monochrome design system for dark mode and light mode by selecting an initial mode during setup and applying the constrained font usage and spacing rhythm to maintain consistency across both themes.

Do I need specific Google Fonts to build a typographically driven UI layout?▼

Yes, you need specific Google Fonts to build a typographically driven UI layout. The system explicitly declares the required Google Fonts and loading approach to enforce strict type scale rules and spacing discipline.

When should I use a three-layer hierarchy for component composition?▼

Use a three-layer hierarchy for component composition in scenarios like forms, navigation, states, and tables where hierarchy and density must stay readable, preventing flat and inconsistent layout structures.

Related Skills

Explore More Design & Creative Skills→
K9i-0K9i-0
1

flutter-ui-design

Apply Material Design 3 guidelines to typography, color, spacing, and motion in Flutter apps.

Community
Intermediate
Hey-ViswaHey-Viswa

figma-design-skill

Translate design-system patterns into consistent Figma UI designs.

Community
Intermediate
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate