Back to Details

nothing-design-ui-skill

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Nothing Design UI Skill

Nothing Design UI Skill

Skill by ara.so — Design Skills collection.
A design system skill for generating UI components in Nothing's distinctive visual language: monochrome aesthetics, Swiss typography, industrial precision, and OLED-optimized contrast.
由ara.so开发的Skill——设计技能合集。
这是一个设计系统Skill，可生成遵循Nothing独特视觉语言的UI组件：单色美学、瑞士排版、工业级精度以及OLED优化对比度。

What This Skill Does

本Skill的功能

The Nothing Design Skill enables AI agents to generate UI components following Nothing's design principles:
  • Three-layer visual hierarchy: Display, body, metadata — no more complexity
  • Monochrome foundation: OLED blacks (#000000), pure whites (#FFFFFF), precise grays
  • Typography-first: Space Grotesk (display), Space Mono (code/data), Doto (dot-matrix accents)
  • Industrial components: Segmented progress bars, mechanical toggles, instrument-style widgets
  • Multi-platform output: HTML/CSS, SwiftUI, React/Tailwind
Nothing Design Skill支持AI Agent生成符合Nothing设计原则的UI组件：
  • 三层视觉层级：展示层、内容层、元数据层——拒绝冗余复杂度
  • 单色基础：OLED纯黑（#000000）、纯白（#FFFFFF）、精准灰度色阶
  • 排版优先：Space Grotesk（展示字体）、Space Mono（代码/数据字体）、Doto（点阵装饰字体）
  • 工业风组件：分段进度条、机械风格开关、仪表式小部件
  • 多平台输出：HTML/CSS、SwiftUI、React/Tailwind

Installation

安装步骤

  1. Clone the repository:
sh
git clone https://github.com/dominikmartn/nothing-design-skill.git
  1. Copy the skill to your Claude Code skills directory:
sh
cp -r nothing-design-skill/nothing-design ~/.claude/skills/
  1. Restart Claude Code to load the skill.
  1. 克隆仓库：
sh
git clone https://github.com/dominikmartn/nothing-design-skill.git
  1. 将Skill复制到你的Claude Code技能目录：
sh
cp -r nothing-design-skill/nothing-design ~/.claude/skills/
  1. 重启Claude Code以加载该Skill。

Design Principles

设计原则

Visual Hierarchy

视觉层级

Three layers only:
  • Display: Primary information (28-48px, Space Grotesk Bold)
  • Body: Secondary content (14-16px, Space Grotesk Regular)
  • Metadata: Tertiary data (11-12px, Space Mono)
仅设三层：
  • 展示层：核心信息（28-48px，Space Grotesk Bold）
  • 内容层：次要内容（14-16px，Space Grotesk Regular）
  • 元数据层：三级数据（11-12px，Space Mono）

Color System

色彩系统

Dark Mode (default):
css
--nothing-black: #000000;
--nothing-white: #FFFFFF;
--nothing-gray-100: #1A1A1A;
--nothing-gray-200: #2D2D2D;
--nothing-gray-300: #404040;
--nothing-gray-400: #737373;
--nothing-gray-500: #A6A6A6;
--nothing-red: #FF0000;
Light Mode:
css
--nothing-white: #FFFFFF;
--nothing-black: #000000;
--nothing-gray-100: #F5F5F5;
--nothing-gray-200: #E5E5E5;
--nothing-gray-300: #D4D4D4;
--nothing-gray-400: #A3A3A3;
--nothing-gray-500: #737373;
深色模式（默认）：
css
--nothing-black: #000000;
--nothing-white: #FFFFFF;
--nothing-gray-100: #1A1A1A;
--nothing-gray-200: #2D2D2D;
--nothing-gray-300: #404040;
--nothing-gray-400: #737373;
--nothing-gray-500: #A6A6A6;
--nothing-red: #FF0000;
浅色模式：
css
--nothing-white: #FFFFFF;
--nothing-black: #000000;
--nothing-gray-100: #F5F5F5;
--nothing-gray-200: #E5E5E5;
--nothing-gray-300: #D4D4D4;
--nothing-gray-400: #A3A3A3;
--nothing-gray-500: #737373;

Typography Stack

字体栈

css
--font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;
--font-body: 'Space Grotesk', -apple-system, system-ui, sans-serif;
--font-mono: 'Space Mono', 'SF Mono', Consolas, monospace;
--font-doto: 'Doto', monospace; /* dot-matrix style */
css
--font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;
--font-body: 'Space Grotesk', -apple-system, system-ui, sans-serif;
--font-mono: 'Space Mono', 'SF Mono', Consolas, monospace;
--font-doto: 'Doto', monospace; /* dot-matrix style */

Spacing Scale

间距尺度

css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;

Component Patterns

组件示例

Button (HTML/CSS)

按钮（HTML/CSS）

html
<button class="nothing-btn">
  <span class="nothing-btn__label">Continue</span>
  <span class="nothing-btn__meta">⌘K</span>
</button>

<style>
.nothing-btn {
  background: var(--nothing-white);
  color: var(--nothing-black);
  border: 1px solid var(--nothing-white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nothing-btn:hover {
  background: var(--nothing-gray-200);
  border-color: var(--nothing-gray-200);
}

.nothing-btn__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.6;
}
</style>
html
<button class="nothing-btn">
  <span class="nothing-btn__label">Continue</span>
  <span class="nothing-btn__meta">⌘K</span>
</button>

<style>
.nothing-btn {
  background: var(--nothing-white);
  color: var(--nothing-black);
  border: 1px solid var(--nothing-white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nothing-btn:hover {
  background: var(--nothing-gray-200);
  border-color: var(--nothing-gray-200);
}

.nothing-btn__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.6;
}
</style>

Segmented Progress Bar (HTML/CSS)

分段进度条（HTML/CSS）

html
<div class="nothing-progress" data-segments="10" data-value="7">
  <div class="nothing-progress__track">
    <div class="nothing-progress__fill"></div>
  </div>
  <div class="nothing-progress__meta">70%</div>
</div>

<style>
.nothing-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nothing-progress__track {
  flex: 1;
  height: 8px;
  background: var(--nothing-gray-200);
  position: relative;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(10% - 1px),
    var(--nothing-black) calc(10% - 1px),
    var(--nothing-black) 10%
  );
}

.nothing-progress__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  background: var(--nothing-white);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nothing-progress__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--nothing-gray-400);
  min-width: 40px;
  text-align: right;
}
</style>
html
<div class="nothing-progress" data-segments="10" data-value="7">
  <div class="nothing-progress__track">
    <div class="nothing-progress__fill"></div>
  </div>
  <div class="nothing-progress__meta">70%</div>
</div>

<style>
.nothing-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nothing-progress__track {
  flex: 1;
  height: 8px;
  background: var(--nothing-gray-200);
  position: relative;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(10% - 1px),
    var(--nothing-black) calc(10% - 1px),
    var(--nothing-black) 10%
  );
}

.nothing-progress__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  background: var(--nothing-white);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nothing-progress__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--nothing-gray-400);
  min-width: 40px;
  text-align: right;
}
</style>

Card Component (React/Tailwind)

卡片组件（React/Tailwind）

jsx
export function NothingCard({ title, value, meta, trend }) {
  return (
    <div className="bg-black border border-white/10 p-6">
      <div className="flex items-start justify-between">
        <div>
          <h3 className="font-['Space_Grotesk'] text-sm text-white/60 mb-2">
            {title}
          </h3>
          <p className="font-['Space_Grotesk'] text-4xl font-bold text-white">
            {value}
          </p>
        </div>
        {trend && (
          <span className="font-['Space_Mono'] text-xs text-white/40">
            {trend}
          </span>
        )}
      </div>
      {meta && (
        <p className="font-['Space_Mono'] text-xs text-white/40 mt-4">
          {meta}
        </p>
      )}
    </div>
  );
}

// Usage
<NothingCard
  title="Active Users"
  value="2,340"
  trend="+12%"
  meta="Updated 2 min ago"
/>
jsx
export function NothingCard({ title, value, meta, trend }) {
  return (
    <div className="bg-black border border-white/10 p-6">
      <div className="flex items-start justify-between">
        <div>
          <h3 className="font-['Space_Grotesk'] text-sm text-white/60 mb-2">
            {title}
          </h3>
          <p className="font-['Space_Grotesk'] text-4xl font-bold text-white">
            {value}
          </p>
        </div>
        {trend && (
          <span className="font-['Space_Mono'] text-xs text-white/40">
            {trend}
          </span>
        )}
      </div>
      {meta && (
        <p className="font-['Space_Mono'] text-xs text-white/40 mt-4">
          {meta}
        </p>
      )}
    </div>
  );
}

// Usage
<NothingCard
  title="Active Users"
  value="2,340"
  trend="+12%"
  meta="Updated 2 min ago"
/>

Toggle Switch (SwiftUI)

切换开关（SwiftUI）

swift
struct NothingToggle: View {
    @Binding var isOn: Bool
    let label: String
    
    var body: some View {
        HStack(spacing: 16) {
            Text(label)
                .font(.custom("SpaceGrotesk-Regular", size: 14))
                .foregroundColor(.white)
            
            Spacer()
            
            Button(action: { isOn.toggle() }) {
                ZStack {
                    RoundedRectangle(cornerRadius: 0)
                        .fill(isOn ? Color.white : Color(hex: "#2D2D2D"))
                        .frame(width: 48, height: 24)
                    
                    Rectangle()
                        .fill(Color.black)
                        .frame(width: 20, height: 20)
                        .offset(x: isOn ? 10 : -10)
                }
            }
            .animation(.easeInOut(duration: 0.2), value: isOn)
        }
        .padding(16)
        .background(Color.black)
    }
}

// Usage
@State private var notificationsEnabled = true

NothingToggle(
    isOn: $notificationsEnabled,
    label: "Notifications"
)
swift
struct NothingToggle: View {
    @Binding var isOn: Bool
    let label: String
    
    var body: some View {
        HStack(spacing: 16) {
            Text(label)
                .font(.custom("SpaceGrotesk-Regular", size: 14))
                .foregroundColor(.white)
            
            Spacer()
            
            Button(action: { isOn.toggle() }) {
                ZStack {
                    RoundedRectangle(cornerRadius: 0)
                        .fill(isOn ? Color.white : Color(hex: "#2D2D2D"))
                        .frame(width: 48, height: 24)
                    
                    Rectangle()
                        .fill(Color.black)
                        .frame(width: 20, height: 20)
                        .offset(x: isOn ? 10 : -10)
                }
            }
            .animation(.easeInOut(duration: 0.2), value: isOn)
        }
        .padding(16)
        .background(Color.black)
    }
}

// Usage
@State private var notificationsEnabled = true

NothingToggle(
    isOn: $notificationsEnabled,
    label: "Notifications"
)

Data Table (HTML/CSS)

数据表格（HTML/CSS）

html
<table class="nothing-table">
  <thead>
    <tr>
      <th>Device</th>
      <th>Status</th>
      <th>Battery</th>
      <th>Updated</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="nothing-table__primary">Phone (1)</div>
        <div class="nothing-table__meta">Serial: NK1234567</div>
      </td>
      <td><span class="nothing-badge nothing-badge--active">Active</span></td>
      <td>
        <div class="nothing-progress" data-value="87">
          <div class="nothing-progress__track">
            <div class="nothing-progress__fill" style="width: 87%"></div>
          </div>
          <div class="nothing-progress__meta">87%</div>
        </div>
      </td>
      <td class="nothing-table__mono">2 min ago</td>
    </tr>
  </tbody>
</table>

<style>
.nothing-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  color: var(--nothing-white);
}

.nothing-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nothing-gray-200);
  color: var(--nothing-gray-400);
}

.nothing-table td {
  padding: 16px;
  border-bottom: 1px solid var(--nothing-gray-100);
  font-size: 14px;
}

.nothing-table__primary {
  font-weight: 500;
  margin-bottom: 4px;
}

.nothing-table__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--nothing-gray-400);
}

.nothing-table__mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--nothing-gray-400);
}

.nothing-badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  border: 1px solid var(--nothing-gray-300);
}

.nothing-badge--active {
  border-color: var(--nothing-white);
  color: var(--nothing-white);
}
</style>
html
<table class="nothing-table">
  <thead>
    <tr>
      <th>Device</th>
      <th>Status</th>
      <th>Battery</th>
      <th>Updated</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="nothing-table__primary">Phone (1)</div>
        <div class="nothing-table__meta">Serial: NK1234567</div>
      </td>
      <td><span class="nothing-badge nothing-badge--active">Active</span></td>
      <td>
        <div class="nothing-progress" data-value="87">
          <div class="nothing-progress__track">
            <div class="nothing-progress__fill" style="width: 87%"></div>
          </div>
          <div class="nothing-progress__meta">87%</div>
        </div>
      </td>
      <td class="nothing-table__mono">2 min ago</td>
    </tr>
  </tbody>
</table>

<style>
.nothing-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  color: var(--nothing-white);
}

.nothing-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nothing-gray-200);
  color: var(--nothing-gray-400);
}

.nothing-table td {
  padding: 16px;
  border-bottom: 1px solid var(--nothing-gray-100);
  font-size: 14px;
}

.nothing-table__primary {
  font-weight: 500;
  margin-bottom: 4px;
}

.nothing-table__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--nothing-gray-400);
}

.nothing-table__mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--nothing-gray-400);
}

.nothing-badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  border: 1px solid var(--nothing-gray-300);
}

.nothing-badge--active {
  border-color: var(--nothing-white);
  color: var(--nothing-white);
}
</style>

Motion & Transitions

动效与过渡

Use cubic-bezier easing for mechanical precision:
css
/* Standard easing */
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Enter animations */
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

/* Exit animations */
transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
使用三次贝塞尔曲线缓动实现工业级精度：
css
/* Standard easing */
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

/* Enter animations */
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

/* Exit animations */
transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);

Usage Patterns

使用模式

Requesting Nothing-style Components

请求Nothing风格组件

Example prompts:
  • "Create a settings panel in Nothing design style"
  • "Design a dashboard card using nothing design language"
  • "Make this form look like Nothing Phone UI"
  • "Apply Nothing's industrial aesthetic to this table"
示例提示：
  • "生成一个Nothing设计风格的设置面板"
  • "采用Nothing设计语言设计一个仪表盘卡片"
  • "让这个表单看起来像Nothing Phone的UI"
  • "为这个表格应用Nothing的工业美学风格"

Output Formats

输出格式

Specify your preferred format:
  • HTML/CSS: Default, vanilla implementation
  • React/Tailwind: 
    "Generate this as a React component with Tailwind"
  • SwiftUI: 
    "Create this in SwiftUI for iOS"
指定你偏好的格式：
  • HTML/CSS：默认选项，原生实现
  • React/Tailwind：
    "将这个生成为使用Tailwind的React组件"
  • SwiftUI：
    "为iOS创建SwiftUI版本"

Configuration Options

配置选项

When requesting components, you can specify:
  • Color mode: "dark mode" (default) or "light mode"
  • Typography: "use dot-matrix style" for Doto font accents
  • Density: "compact" (tighter spacing) or "comfortable" (default)
  • Accent color: "use red accent" for alert states
请求组件时，你可以指定：
  • 色彩模式：“深色模式”（默认）或“浅色模式”
  • 排版风格：“使用点阵风格”以添加Doto字体装饰
  • 密度：“紧凑”（更紧凑的间距）或“舒适”（默认）
  • 强调色：“使用红色强调色”用于警示状态

Common Troubleshooting

常见问题排查

Fonts Not Loading

字体未加载

Include font imports in your HTML or CSS:
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">
For Doto (dot-matrix), you may need to self-host or use alternatives like "Courier Prime Code".
在HTML或CSS中添加字体引入：
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">
对于Doto（点阵字体），你可能需要自行托管或使用替代字体如“Courier Prime Code”。

Dark Mode Not Working

深色模式不生效

Ensure root variables are set:
css
:root {
  color-scheme: dark;
  background: #000000;
  color: #FFFFFF;
}
确保已设置根变量：
css
:root {
  color-scheme: dark;
  background: #000000;
  color: #FFFFFF;
}

Progress Bar Segments Not Aligned

进度条分段对齐异常

Adjust segment count in the gradient:
css
/* For 10 segments */
background-image: repeating-linear-gradient(
  90deg,
  transparent,
  transparent calc(10% - 1px),
  var(--nothing-black) calc(10% - 1px),
  var(--nothing-black) 10%
);
调整渐变中的分段数量：
css
/* For 10 segments */
background-image: repeating-linear-gradient(
  90deg,
  transparent,
  transparent calc(10% - 1px),
  var(--nothing-black) calc(10% - 1px),
  var(--nothing-black) 10%
);

Components Look Too Cramped

组件布局过于拥挤

Increase spacing scale usage:
css
padding: var(--space-4) var(--space-5); /* 16px 24px */
gap: var(--space-4); /* 16px */
增大间距尺度的使用：
css
padding: var(--space-4) var(--space-5); /* 16px 24px */
gap: var(--space-4); /* 16px */

Real-World Example: Dashboard

实战示例：仪表盘

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nothing Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --nothing-black: #000000;
      --nothing-white: #FFFFFF;
      --nothing-gray-100: #1A1A1A;
      --nothing-gray-200: #2D2D2D;
      --nothing-gray-400: #737373;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --font-display: 'Space Grotesk', sans-serif;
      --font-mono: 'Space Mono', monospace;
    }
    
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      background: var(--nothing-black);
      color: var(--nothing-white);
      font-family: var(--font-display);
      padding: var(--space-6);
    }
    
    .dashboard {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .dashboard__header {
      margin-bottom: var(--space-6);
    }
    
    .dashboard__title {
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .dashboard__meta {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--nothing-gray-400);
    }
    
    .dashboard__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-5);
    }
    
    .card {
      background: var(--nothing-gray-100);
      border: 1px solid var(--nothing-gray-200);
      padding: var(--space-5);
    }
    
    .card__label {
      font-size: 12px;
      color: var(--nothing-gray-400);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .card__value {
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    
    .card__footer {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--nothing-gray-400);
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <header class="dashboard__header">
      <h1 class="dashboard__title">System Overview</h1>
      <p class="dashboard__meta">Updated 12 seconds ago • 23:14:52 UTC</p>
    </header>
    
    <div class="dashboard__grid">
      <div class="card">
        <div class="card__label">Active Users</div>
        <div class="card__value">2,340</div>
        <div class="card__footer">+12% from yesterday</div>
      </div>
      
      <div class="card">
        <div class="card__label">System Load</div>
        <div class="card__value">47%</div>
        <div class="card__footer">Normal operating range</div>
      </div>
      
      <div class="card">
        <div class="card__label">Uptime</div>
        <div class="card__value">99.97%</div>
        <div class="card__footer">47 days, 12 hours</div>
      </div>
    </div>
  </div>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nothing Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --nothing-black: #000000;
      --nothing-white: #FFFFFF;
      --nothing-gray-100: #1A1A1A;
      --nothing-gray-200: #2D2D2D;
      --nothing-gray-400: #737373;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --font-display: 'Space Grotesk', sans-serif;
      --font-mono: 'Space Mono', monospace;
    }
    
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      background: var(--nothing-black);
      color: var(--nothing-white);
      font-family: var(--font-display);
      padding: var(--space-6);
    }
    
    .dashboard {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .dashboard__header {
      margin-bottom: var(--space-6);
    }
    
    .dashboard__title {
      font-size: 48px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .dashboard__meta {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--nothing-gray-400);
    }
    
    .dashboard__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-5);
    }
    
    .card {
      background: var(--nothing-gray-100);
      border: 1px solid var(--nothing-gray-200);
      padding: var(--space-5);
    }
    
    .card__label {
      font-size: 12px;
      color: var(--nothing-gray-400);
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    
    .card__value {
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    
    .card__footer {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--nothing-gray-400);
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <header class="dashboard__header">
      <h1 class="dashboard__title">System Overview</h1>
      <p class="dashboard__meta">Updated 12 seconds ago • 23:14:52 UTC</p>
    </header>
    
    <div class="dashboard__grid">
      <div class="card">
        <div class="card__label">Active Users</div>
        <div class="card__value">2,340</div>
        <div class="card__footer">+12% from yesterday</div>
      </div>
      
      <div class="card">
        <div class="card__label">System Load</div>
        <div class="card__value">47%</div>
        <div class="card__footer">Normal operating range</div>
      </div>
      
      <div class="card">
        <div class="card__label">Uptime</div>
        <div class="card__value">99.97%</div>
        <div class="card__footer">47 days, 12 hours</div>
      </div>
    </div>
  </div>
</body>
</html>

Reference Files

参考文件

The skill includes detailed reference files:
  • references/tokens.md
    : Complete design token system
  • references/components.md
    : All component specifications
  • references/platform-mapping.md
    : Platform-specific implementations
Use these references when generating complex or custom components.
本Skill包含详细的参考文件：
  • references/tokens.md
    ：完整的设计令牌系统
  • references/components.md
    ：所有组件规格说明
  • references/platform-mapping.md
    ：平台特定实现指南
生成复杂或自定义组件时可参考这些文件。",