nothing-design-skill
Generate UI components in Nothing's monochrome, typographic, industrial design language with Swiss typography and OLED aesthetics
معلومات المصدر
- المستودع
- reason-machines/design-skills
- آخر نشاط في المصدر
- ١٦ مايو ٢٠٢٦ في ٢٢:١٦
- لغة SKILL.md المكتشفة
- الإنجليزية
- النجوم
- ٤
- التفرعات
- ٠
خيارات التثبيت
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
مراجعة ملفات المصدر
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
عرض SKILL.md
SKILL.md
تعليمات المصدر · معاينة للقراءة فقط- name
- nothing-design-skill
- description
- Generate UI components in Nothing's monochrome, typographic, industrial design language with Swiss typography and OLED aesthetics
- triggers
- ["use nothing design style","create a nothing style component","design this with nothing aesthetics","apply nothing design language","make this look like nothing phone UI","generate UI in nothing style","use monochrome industrial design","create nothing-inspired interface"]
# Nothing Design Skill
> Skill by [ara.so](https://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:
```sh
git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/
```
Restart Claude Code to activate the skill.
## Core Design Tokens
### Color System
**Dark Mode (Primary)**
```css
--color-background: #000000; /* Pure black (OLED) */
--color-surface: #0A0A0A; /* Elevated surface */
--color-border: #1A1A1A; /* Subtle dividers */
--color-text-primary: #FFFFFF; /* Pure white */
--color-text-secondary: #999999; /* Mid gray */
--color-text-tertiary: #666666; /* Dim gray */
--color-accent: #FF0000; /* Nothing red (sparingly) */
```
**Light Mode**
```css
--color-background: #FFFFFF;
--color-surface: #F5F5F5;
--color-border: #E5E5E5;
--color-text-primary: #000000;
--color-text-secondary: #666666;
--color-text-tertiary: #999999;
--color-accent: #FF0000;
```
### Typography Scale
```css
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Space Grotesk', sans-serif;
--font-mono: 'Space Mono', monospace;
--font-dot: 'Doto', monospace;
--text-display-xl: 48px / 1.1; /* Hero headlines */
--text-display-lg: 36px / 1.2; /* Section titles */
--text-display-md: 24px / 1.3; /* Card headers */
--text-body-lg: 16px / 1.5; /* Primary text */
--text-body-md: 14px / 1.5; /* Secondary text */
--text-mono-md: 14px / 1.4; /* Code, data */
--text-label-sm: 11px / 1.3; /* Labels, metadata */
```
### Spacing System
```css
--space-2xs: 4px; /* Tight padding */
--space-xs: 8px; /* Compact spacing */
--space-sm: 12px; /* Small gaps */
--space-md: 16px; /* Default spacing */
--space-lg: 24px; /* Section spacing */
--space-xl: 32px; /* Large gaps */
--space-2xl: 48px; /* Major sections */
```
## Component Patterns
### Button (HTML/CSS)
```html
<button class="nothing-btn nothing-btn-primary">
<span class="nothing-btn-label">Continue</span>
</button>
<style>
.nothing-btn {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text-primary);
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
padding: 12px 24px;
text-transform: uppercase;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.nothing-btn:hover {
background: var(--color-surface);
border-color: var(--color-text-primary);
}
.nothing-btn-primary {
background: var(--color-text-primary);
border-color: var(--color-text-primary);
color: var(--color-background);
}
.nothing-btn-primary:hover {
background: var(--color-text-secondary);
border-color: var(--color-text-secondary);
}
</style>
```
### Segmented Progress Bar
```html
<div class="nothing-progress">
<div class="nothing-progress-track">
<div class="nothing-progress-segment"></div>
<div class="nothing-progress-segment"></div>
<div class="nothing-progress-segment"></div>
<div class="nothing-progress-segment"></div>
<div class="nothing-progress-segment filled"></div>
<div class="nothing-progress-segment filled"></div>
<div class="nothing-progress-segment filled"></div>
</div>
<span class="nothing-progress-label">70%</span>
</div>
<style>
.nothing-progress {
display: flex;
align-items: center;
gap: 12px;
}
.nothing-progress-track {
display: flex;
gap: 4px;
flex: 1;
}
.nothing-progress-segment {
height: 4px;
flex: 1;
background: var(--color-border);
transition: background 0.2s ease;
}
.nothing-progress-segment.filled {
background: var(--color-text-primary);
}
.nothing-progress-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-secondary);
min-width: 40px;
text-align: right;
}
</style>
```
### Card Component (React/Tailwind)
```jsx
export function NothingCard({ title, metadata, children }) {
return (
<div className="border border-zinc-900 bg-black p-6">
{/* Header */}
<div className="mb-6 border-b border-zinc-900 pb-4">
<h3 className="font-display text-2xl font-medium tracking-tight text-white">
{title}
</h3>
{metadata && (
<p className="font-mono text-xs uppercase tracking-wider text-zinc-600 mt-2">
{metadata}
</p>
)}
</div>
{/* Content */}
<div className="space-y-4 text-zinc-400">
{children}
</div>
</div>
);
}
// Usage
<NothingCard title="System Status" metadata="Updated 14:32">
<div className="flex justify-between items-center">
<span className="text-sm">Battery</span>
<span className="font-mono text-white">87%</span>
</div>
</NothingCard>
```
### Toggle Switch (SwiftUI)
```swift
struct NothingToggle: View {
@Binding var isOn: Bool
var body: some View {
Button(action: { isOn.toggle() }) {
HStack(spacing: 2) {
Rectangle()
.fill(isOn ? Color.white : Color(hex: "1A1A1A"))
.frame(width: 20, height: 32)
Rectangle()
.fill(isOn ? Color(hex: "1A1A1A") : Color.white)
.frame(width: 20, height: 32)
}
.overlay(
Rectangle()
.strokeBorder(Color(hex: "333333"), lineWidth: 1)
)
}
.animation(.easeInOut(duration: 0.15), value: isOn)
}
}
// Usage
@State private var notificationsEnabled = true
NothingToggle(isOn: $notificationsEnabled)
```
### Data Table
```html
<table class="nothing-table">
<thead>
<tr>
<th>Device</th>
<th>Status</th>
<th>Updated</th>
</tr>
</thead>
<tbody>
<tr>
<td>Phone (2)</td>
<td><span class="status-dot active"></span> Online</td>
<td>2m ago</td>
</tr>
<tr>
<td>Ear (stick)</td>
<td><span class="status-dot"></span> Offline</td>
<td>1h ago</td>
</tr>
</tbody>
</table>
<style>
.nothing-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: var(--font-display);
}
.nothing-table th {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-tertiary);
text-align: left;
padding: 8px 16px;
border-bottom: 1px solid var(--color-border);
}
.nothing-table td {
font-size: 14px;
color: var(--color-text-primary);
padding: 16px;
border-bottom: 1px solid var(--color-border);
}
.status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-text-tertiary);
margin-right: 8px;
}
.status-dot.active {
background: #00FF00;
}
</style>
```
## Design Principles
### Visual Hierarchy (Three Layers Only)
1. **Display**: Headlines, primary actions, key metrics
2. **Body**: Descriptive text, secondary actions, content
3. **Metadata**: Labels, timestamps, auxiliary information
**Never use more than three levels in a single view.**
### Typography Rules
- **Space Grotesk**: All UI text, headlines, buttons
- **Space Mono**: Data, codes, timestamps, technical info
- **Doto**: Decorative accents only (sparingly)
- **Letter spacing**: 0.02em for buttons/labels, tighter for display
- **Line height**: 1.1-1.3 for display, 1.5 for body text
### Motion & Transitions
```css
/* Standard easing */
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
/* Mechanical snap */
transition: all 0.1s cubic-bezier(0.4, 0, 1, 1);
/* Smooth fade */
transition: opacity 0.2s ease;
```
### Spacing Consistency
- Use 4px grid system
- Default gap: 16px
- Section spacing: 24px or 32px
- Never arbitrary values
## Platform-Specific Output
### Generating HTML/CSS
```
User: "Create a nothing-style settings panel with toggles"
AI generates:
- Semantic HTML structure
- Inline <style> with CSS variables
- Self-contained component
```
### Generating SwiftUI
```
User: "Make a nothing design stats card in SwiftUI"
AI generates:
- SwiftUI View struct
- Color extensions for hex values
- Proper spacing/font modifiers
```
### Generating React/Tailwind
```
User: "Build a nothing-inspired navigation bar with React"
AI generates:
- Functional component
- Tailwind classes matching token values
- TypeScript types if requested
```
## Common Patterns
### Status Indicators
```html
<!-- Dot indicator -->
<div class="status-indicator">
<span class="status-dot active"></span>
<span class="status-label">Connected</span>
</div>
<!-- Segmented bar -->
<div class="signal-strength">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar active"></div>
عرض على GitHubملف SKILL.md هذا كبير جدا، لذلك يعرض SkillsMP القسم الاول فقط هنا. عرض على GitHub
