skills.rest
harperreed
harperreedCOMMUNITY
Explore all skills by this author →
Website𝕏@harperGitHub

nothing-design

Generate Nothing-style UI/UX design guidance for screens with hierarchy, typography, spacing, and monochrome colors.

330|47|Updated Aug 30, 2020
Search Tags:#typography#design system#ui design#component specs#ux hierarchy#data-dense layouts#monochrome system
One-click install
npx skills add https://github.com/harperreed/dotfiles --skill nothing-design-harperreed
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nothing-design
Source: https://github.com/harperreed/dotfiles/tree/main/.claude/skills-archive/nothing-design
Command: npx skills add https://github.com/harperreed/dotfiles --skill nothing-design-harperreed

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you rapidly produce UI/UX designs that feel “Nothing”-inspired—typographically disciplined, monochrome-first, and data-dense—without the usual clutter and inconsistency.

Core Features & Use Cases

  • Design system guidance: Enforces the Nothing-inspired hierarchy (exactly three layers of importance) and composition rules so screens don’t become visually flat or noisy.
  • Type, spacing, and tokens: Directs font usage (Doto/Space Grotesk/Space Mono), spacing rhythm, and color roles (gray-scale hierarchy with accent reserved for real signals).
  • Component and workflow alignment: Guides implementation decisions for common UI parts (cards, buttons, inputs, tables, nav, toggles, overlays) and a repeatable workflow that starts with declaring Google Fonts.

Quick Start

Use the nothing-design skill when the user explicitly requests “Nothing style” and tell it which UI mode (dark or light) you want to start with.

Frequently Asked Questions about nothing-design

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

FAQPage Schema
How do I apply a Nothing-style design system to data-dense UI layouts?▼

To apply a Nothing-style design system, enforce a three-layer importance hierarchy, monochrome color usage, and typographic discipline using Doto, Space Grotesk, and Space Mono fonts to compose data-dense interfaces without visual clutter.

What typography and spacing rules define the Nothing-inspired UI hierarchy?▼

The Nothing-inspired UI hierarchy uses exactly three layers of importance, directing font usage with Doto, Space Grotesk, and Space Mono, spacing rhythm, and gray-scale color roles with accents reserved only for real signals.

How do I build common UI components like cards and tables for a monochrome design system?▼

Build monochrome UI components by following token and component references for cards, buttons, inputs, tables, navigation, toggles, and overlays, ensuring deterministic output across dark and light modes.

Can I use this approach for both dark and light mode interfaces?▼

Yes, the Nothing-style UI approach applies to both dark and light modes, guiding state patterns and component specs while maintaining the monochrome system and three-layer importance rule across both themes.

What anti-patterns should I avoid when designing data-dense monochrome interfaces?▼

Avoid anti-patterns in data-dense monochrome interfaces by adhering to the three-layer importance rule, preventing visual flatness or noise, and reserving accent colors exclusively for real signals rather than decoration.

Related Skills

Explore More Design & Creative Skills→
B1u3B01tB1u3B01t
191

nothing-design

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

Community
Advanced
pch007pch007
1

image

Render SVG and PNG images from JSON render specs using Satori.

Community
Advanced
ShubhamX-AIShubhamX-AI

ui-ux-premium

Apply premium UI/UX guidelines to existing components and pages.

Community
Intermediate
AlejandroFiginiAlejandroFigini

industrial-brutalist-ui

Generate grid-based brutalist UI layouts with modular typography and ASCII framing.

Community
Advanced