Back to Details

nothing-design-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Nothing Design Skill

Nothing设计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).
由ara.so开发的Skill —— 设计技能合集。
这是一款面向Claude Code的设计系统Skill，可遵循Nothing品牌的视觉语言（单色、排版化、工业风）生成UI组件。提供可复用的设计令牌、组件模式，以及多平台输出（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
Nothing设计Skill将Nothing的设计原则编码为可复用的系统：
  • 三层视觉层级：展示层、正文层、元数据层 —— 严格的信息架构
  • 单色调色板：OLED纯黑（#000000）、纯白（#FFFFFF）、精准灰度色
  • 排版体系：Space Grotesk（展示字体）、Space Mono等宽字体、Doto（点阵装饰字体）
  • 工业风组件：分段进度条、机械风格开关、仪表式小组件
  • 完整明暗模式：具备语义色彩映射的全套令牌系统

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.
克隆仓库并将skill文件夹复制到你的Claude Code技能目录：
sh
git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/
重启Claude Code以激活该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;
深色模式（主模式）
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) */
浅色模式
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 */
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 */
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/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>
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>
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)

卡片组件（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>
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)

开关组件（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)
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>
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.
  1. 展示层：标题、主要操作、关键指标
  2. 正文层：描述性文本、次要操作、内容主体
  3. 元数据层：标签、时间戳、辅助信息
单个视图中绝不能使用超过三个层级。

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
  • Space Grotesk：所有UI文本、标题、按钮
  • Space Mono：数据、代码、时间戳、技术信息
  • Doto：仅用于装饰性元素（少量使用）
  • 字间距：按钮/标签为0.02em，展示文本更紧凑
  • 行高：展示文本为1.1-1.3，正文文本为1.5

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;
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
  • 使用4px网格系统
  • 默认间距：16px
  • 区块间距：24px或32px
  • 禁止使用任意数值

Platform-Specific Output

平台专属输出

Generating HTML/CSS

生成HTML/CSS

User: "Create a nothing-style settings panel with toggles"

AI generates:
- Semantic HTML structure
- Inline <style> with CSS variables
- Self-contained component
用户："创建一个Nothing风格的设置面板，包含开关"

AI生成内容：
- 语义化HTML结构
- 内嵌<style>标签及CSS变量
- 独立完整的组件

Generating SwiftUI

生成SwiftUI

User: "Make a nothing design stats card in SwiftUI"

AI generates:
- SwiftUI View struct
- Color extensions for hex values
- Proper spacing/font modifiers
用户："用SwiftUI制作一个Nothing设计风格的统计卡片"

AI生成内容：
- SwiftUI View结构体
- 十六进制颜色扩展
- 合适的间距/字体修饰符

Generating React/Tailwind

生成React/Tailwind

User: "Build a nothing-inspired navigation bar with React"

AI generates:
- Functional component
- Tailwind classes matching token values
- TypeScript types if requested
用户："用React构建一个Nothing风格的导航栏"

AI生成内容：
- 函数式组件
- 匹配令牌值的Tailwind类
- 若有需求则包含TypeScript类型定义

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>
  <div class="bar active"></div>
</div>
html
<!-- 点状指示器 -->
<div class="status-indicator">
  <span class="status-dot active"></span>
  <span class="status-label">Connected</span>
</div>

<!-- 分段式信号条 -->
<div class="signal-strength">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar active"></div>
  <div class="bar active"></div>
</div>

Dot-Matrix Numerals (Doto Font)

点阵数字（Doto字体）

html
<span class="dot-display">88:88</span>

<style>
.dot-display {
  font-family: var(--font-dot);
  font-size: 48px;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
}
</style>
html
<span class="dot-display">88:88</span>

<style>
.dot-display {
  font-family: var(--font-dot);
  font-size: 48px;
  letter-spacing: 0.1em;
  color: var(--color-text-primary);
}
</style>

Loading States

加载状态

html
<div class="nothing-loader">
  <div class="loader-segment"></div>
  <div class="loader-segment"></div>
  <div class="loader-segment"></div>
</div>

<style>
@keyframes loadPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.nothing-loader {
  display: flex;
  gap: 4px;
}

.loader-segment {
  width: 4px;
  height: 16px;
  background: var(--color-text-primary);
  animation: loadPulse 1.2s ease-in-out infinite;
}

.loader-segment:nth-child(2) { animation-delay: 0.2s; }
.loader-segment:nth-child(3) { animation-delay: 0.4s; }
</style>
html
<div class="nothing-loader">
  <div class="loader-segment"></div>
  <div class="loader-segment"></div>
  <div class="loader-segment"></div>
</div>

<style>
@keyframes loadPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.nothing-loader {
  display: flex;
  gap: 4px;
}

.loader-segment {
  width: 4px;
  height: 16px;
  background: var(--color-text-primary);
  animation: loadPulse 1.2s ease-in-out infinite;
}

.loader-segment:nth-child(2) { animation-delay: 0.2s; }
.loader-segment:nth-child(3) { animation-delay: 0.4s; }
</style>

Troubleshooting

故障排查

Fonts Not Loading

字体未加载

Include Google Fonts in your HTML head or use system fallbacks:
html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
CSS fallback:
css
--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
在HTML头部引入Google Fonts或使用系统 fallback：
html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
CSS fallback：
css
--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

OLED Black Not Pure Black

OLED黑色并非纯黑

Ensure you're using hex 
#000000
, not 
#000
or rgb values. Some design tools auto-adjust to 
#0A0A0A
.
确保使用十六进制值
#000000
，而非
#000
或RGB值。部分设计工具会自动调整为
#0A0A0A
。

Components Look Too Dense

组件过于紧凑

Nothing design is intentionally compact. If needed for accessibility:
  • Increase touch targets to 44px minimum
  • Add 
    --space-md
    (16px) padding to interactive elements
  • Maintain visual density through borders, not spacing
Nothing设计风格本身就是紧凑的。若出于无障碍需求需要调整：
  • 将触摸目标最小尺寸增加至44px
  • 为交互元素添加
    --space-md
    （16px）内边距
  • 通过边框而非间距维持视觉密度

Dark/Light Mode Switching

明暗模式切换

Use CSS custom properties and data attributes:
html
<html data-theme="dark">
css
:root[data-theme="dark"] {
  --color-background: #000000;
  --color-text-primary: #FFFFFF;
}

:root[data-theme="light"] {
  --color-background: #FFFFFF;
  --color-text-primary: #000000;
}
Toggle with JavaScript:
javascript
document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
使用CSS自定义属性和数据属性：
html
<html data-theme="dark">
css
:root[data-theme="dark"] {
  --color-background: #000000;
  --color-text-primary: #FFFFFF;
}

:root[data-theme="light"] {
  --color-background: #FFFFFF;
  --color-text-primary: #000000;
}
用JavaScript切换：
javascript
document.documentElement.dataset.theme = isDark ? 'dark' : 'light';

Advanced Techniques

进阶技巧

Glitch Effect (Brand Element)

故障艺术效果（品牌元素）

css
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.glitch-text {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
css
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.glitch-text {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Grid Overlay Pattern

网格背景图案

css
.nothing-grid-bg {
  background-image: 
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 20px 20px;
}
This skill provides everything needed to generate consistent, authentic Nothing-style UI across platforms. Focus on clarity, restraint, and mechanical precision.
css
.nothing-grid-bg {
  background-image: 
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 20px 20px;
}
本Skill提供了跨平台生成一致、正宗Nothing风格UI所需的全部内容。重点关注清晰度、克制性和机械精度。