nothing-design-skill
Nothing Design Skill
Skill by ara.so — Design Skills collection.
A design system skill for Claude Code that generates UI components following Nothing's visual language: monochrome, typographic, industrial. Provides reusable design tokens, component patterns, and multi-platform output (HTML/CSS, SwiftUI, React/Tailwind).
What It Does
Nothing Design Skill codifies Nothing's design principles into a reusable system:
- Three-layer visual hierarchy: Display, body, metadata — strict information architecture
- Monochrome palette: OLED blacks (#000000), pure whites (#FFFFFF), precise grays
- Typography: Space Grotesk (display), Space Mono (monospace), Doto (dot-matrix accents)
- Industrial components: Segmented progress bars, mechanical toggles, instrument-style widgets
- Full dark/light modes: Complete token system with semantic color mapping
Installation
Clone the repository and copy the skill folder to your Claude Code skills directory:
More from aradotso/design-skills
open-design-ai-prototyping
Local-first AI design tool that turns coding agents into design engines with 31 skills, 129 design systems, and multi-format export
69design-md-format
Create and validate DESIGN.md files that give AI coding agents structured understanding of design systems through machine-readable tokens and human-readable rationale.
67open-codesign-ai-design
Use Open CoDesign to generate prototypes, slides, and PDFs from prompts with Claude, GPT, Gemini, or local models
66claude-design-system-hooks
AI-powered design-to-code engine that generates production-ready UI components from natural language using Claude API
63claude-design-ui-framework
AI UI/UX framework for building Claude-powered apps with React, Tailwind, screenshot-to-code, and Artifacts-style components
62keychron-hardware-design
Access and work with Keychron keyboard and mouse industrial design files (STEP, DXF, DWG, PDF) for 135+ models to create compatible accessories, remixes, and modifications.
60