nothing-design-ui-skill
OfficialGenerate Nothing-style UI with Swiss typography.
Design & Creative#design tokens#ui components#swiftui#generate#html css#typography system#monochrome theme
AuthorAradotso
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: nothing-design-ui-skill Download link: https://github.com/Aradotso/design-skills/archive/main.zip#nothing-design-ui-skill Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.