nothing-design-system

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Nothing Design System Skill

Skill by ara.so — Design Skills collection.

A reusable design system for generating UI components inspired by Nothing's visual language: monochrome, typographic, industrial, and mechanical. This skill provides a complete token system, component library, and platform-specific output formats.

由 ara.so 开发的Skill——设计技能合集。

这是一个可复用的设计系统，灵感源自Nothing品牌的视觉语言：单色、排版化、工业风与机械感。该Skill提供完整的令牌系统、组件库以及针对不同平台的输出格式。

What This Skill Does

该Skill的功能

The Nothing Design Skill encodes a complete design system with:

Three-layer visual hierarchy: Display, body, and metadata typography
Monochrome palette: Pure blacks (#000000), whites (#FFFFFF), and precise grays
Industrial components: Segmented progress bars, mechanical toggles, dot-matrix patterns
Complete theming: Full dark and light mode token systems
Multi-platform output: HTML/CSS, SwiftUI, React/Tailwind

Nothing设计Skill内置了一套完整的设计系统，包含：

三层视觉层级：展示层、正文层和元数据排版
单色调色板：纯黑（#000000）、纯白（#FFFFFF）及精准灰度色
工业风组件：分段进度条、机械开关、点阵图案
完整主题支持：全量深色/浅色模式令牌系统
跨平台输出：HTML/CSS、SwiftUI、React/Tailwind

Installation

安装方法

Install the skill into your Claude Code skills directory:

git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/

Or manually create

~/.claude/skills/nothing-design/

and copy the skill files.

将该Skill安装到你的Claude Code技能目录：

git clone https://github.com/dominikmartn/nothing-design-skill.git
cp -r nothing-design-skill/nothing-design ~/.claude/skills/

或者手动创建

~/.claude/skills/nothing-design/

目录并复制Skill文件。

Core Design Principles

核心设计原则

Typography Hierarchy

排版层级

The Nothing design system uses exactly three typographic layers:

Display (Space Grotesk): Headlines, primary actions, hero content
Body (Space Grotesk): Readable text, descriptions, interface labels
Metadata (Space Mono): Technical data, timestamps, system info, code

css

/* Display */
font-family: 'Space Grotesk', -apple-system, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;

/* Body */
font-family: 'Space Grotesk', -apple-system, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;

/* Metadata */
font-family: 'Space Mono', 'SF Mono', monospace;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;

Nothing设计系统严格采用三层排版结构：

展示层（Space Grotesk字体）：标题、主要操作按钮、核心内容
正文层（Space Grotesk字体）：可读文本、描述内容、界面标签
元数据层（Space Mono字体）：技术数据、时间戳、系统信息、代码

css

/* Display */
font-family: 'Space Grotesk', -apple-system, sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;

/* Body */
font-family: 'Space Grotesk', -apple-system, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;

/* Metadata */
font-family: 'Space Mono', 'SF Mono', monospace;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;

Color Tokens

颜色令牌

Dark Mode (Primary):

```
--bg-primary
```
: #000000 (pure black for OLED)
```
--bg-secondary
```
: #0A0A0A (raised surfaces)
```
--fg-primary
```
: #FFFFFF (high contrast text)
```
--fg-secondary
```
: #8C8C8C (subdued text)
```
--border
```
: #1F1F1F (subtle dividers)
```
--accent
```
: #FF0000 (Nothing red for critical actions)

Light Mode:

```
--bg-primary
```
: #FFFFFF
```
--bg-secondary
```
: #F5F5F5
```
--fg-primary
```
: #000000
```
--fg-secondary
```
: #737373
```
--border
```
: #E0E0E0
```
--accent
```
: #FF0000

深色模式（主色调）:

```
--bg-primary
```
: #000000 (OLED纯黑色)
```
--bg-secondary
```
: #0A0A0A (凸起表面)
```
--fg-primary
```
: #FFFFFF (高对比度文本)
```
--fg-secondary
```
: #8C8C8C (弱化文本)
```
--border
```
: #1F1F1F (细微分隔线)
```
--accent
```
: #FF0000 (Nothing品牌红色，用于关键操作)

浅色模式:

```
--bg-primary
```
: #FFFFFF
```
--bg-secondary
```
: #F5F5F5
```
--fg-primary
```
: #000000
```
--fg-secondary
```
: #737373
```
--border
```
: #E0E0E0
```
--accent
```
: #FF0000

Spacing System

间距系统

Uses an 8px base unit with a strict scale:

css

--space-1: 4px;   /* 0.5 unit */
--space-2: 8px;   /* 1 unit */
--space-3: 16px;  /* 2 units */
--space-4: 24px;  /* 3 units */
--space-5: 32px;  /* 4 units */
--space-6: 48px;  /* 6 units */
--space-7: 64px;  /* 8 units */

采用8px为基础单位的严格间距尺度：

css

--space-1: 4px;   /* 0.5单位 */
--space-2: 8px;   /* 1单位 */
--space-3: 16px;  /* 2单位 */
--space-4: 24px;  /* 3单位 */
--space-5: 32px;  /* 4单位 */
--space-6: 48px;  /* 6单位 */
--space-7: 64px;  /* 8单位 */

Component Patterns

组件模式

Segmented Progress Bar

分段进度条

The signature Nothing component — progress shown as discrete segments:

HTML/CSS:

html

<div class="segmented-progress">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment active"></div>
  <div class="segment active"></div>
  <div class="segment active"></div>
</div>

<style>
.segmented-progress {
  display: flex;
  gap: 4px;
  height: 4px;
}

.segment {
  flex: 1;
  background: var(--border);
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.segment.active {
  background: var(--fg-primary);
}
</style>

SwiftUI:

swift

struct SegmentedProgress: View {
    let segments: Int
    let filled: Int
    
    var body: some View {
        HStack(spacing: 4) {
            ForEach(0..<segments, id: \.self) { index in
                Rectangle()
                    .fill(index < filled ? Color.primary : Color.gray.opacity(0.2))
                    .frame(height: 4)
            }
        }
    }
}

React/Tailwind:

jsx

export function SegmentedProgress({ segments = 5, filled = 3 }) {
  return (
    <div className="flex gap-1 h-1">
      {Array.from({ length: segments }).map((_, i) => (
        <div
          key={i}
          className={`flex-1 transition-colors duration-200 ${
            i < filled ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-gray-800'
          }`}
        />
      ))}
    </div>
  );
}

Nothing品牌标志性组件——以离散分段展示进度：

HTML/CSS:

html

<div class="segmented-progress">
  <div class="segment"></div>
  <div class="segment"></div>
  <div class="segment active"></div>
  <div class="segment active"></div>
  <div class="segment active"></div>
</div>

<style>
.segmented-progress {
  display: flex;
  gap: 4px;
  height: 4px;
}

.segment {
  flex: 1;
  background: var(--border);
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.segment.active {
  background: var(--fg-primary);
}
</style>

SwiftUI:

swift

struct SegmentedProgress: View {
    let segments: Int
    let filled: Int
    
    var body: some View {
        HStack(spacing: 4) {
            ForEach(0..<segments, id: \.self) { index in
                Rectangle()
                    .fill(index < filled ? Color.primary : Color.gray.opacity(0.2))
                    .frame(height: 4)
            }
        }
    }
}

React/Tailwind:

jsx

export function SegmentedProgress({ segments = 5, filled = 3 }) {
  return (
    <div className="flex gap-1 h-1">
      {Array.from({ length: segments }).map((_, i) => (
        <div
          key={i}
          className={`flex-1 transition-colors duration-200 ${
            i < filled ? 'bg-black dark:bg-white' : 'bg-gray-200 dark:bg-gray-800'
          }`}
        />
      ))}
    </div>
  );
}

Mechanical Toggle

机械开关

Industrial-style toggle with precise state indication:

HTML/CSS:

html

<button class="mechanical-toggle" data-state="off">
  <span class="toggle-track">
    <span class="toggle-indicator"></span>
  </span>
  <span class="toggle-label">OFF</span>
</button>

<style>
.mechanical-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.toggle-track {
  position: relative;
  width: 48px;
  height: 24px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 2px;
}

.toggle-indicator {
  width: 18px;
  height: 18px;
  background: var(--fg-primary);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mechanical-toggle[data-state="on"] .toggle-indicator {
  transform: translateX(24px);
}

.toggle-label {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
}
</style>

具有精准状态指示的工业风格开关：

HTML/CSS:

html

<button class="mechanical-toggle" data-state="off">
  <span class="toggle-track">
    <span class="toggle-indicator"></span>
  </span>
  <span class="toggle-label">OFF</span>
</button>

<style>
.mechanical-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.toggle-track {
  position: relative;
  width: 48px;
  height: 24px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 2px;
}

.toggle-indicator {
  width: 18px;
  height: 18px;
  background: var(--fg-primary);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mechanical-toggle[data-state="on"] .toggle-indicator {
  transform: translateX(24px);
}

.toggle-label {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
}
</style>

Dot Matrix Display

点阵显示屏

Retro digital display aesthetic:

HTML/CSS:

html

<div class="dot-matrix">
  <span class="matrix-text">23:45</span>
</div>

<style>
.dot-matrix {
  background: var(--bg-secondary);
  padding: 16px 24px;
  border: 1px solid var(--border);
}

.matrix-text {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--fg-primary);
  text-shadow: 0 0 8px currentColor;
}
</style>

复古数字显示屏风格：

HTML/CSS:

html

<div class="dot-matrix">
  <span class="matrix-text">23:45</span>
</div>

<style>
.dot-matrix {
  background: var(--bg-secondary);
  padding: 16px 24px;
  border: 1px solid var(--border);
}

.matrix-text {
  font-family: 'Doto', 'Space Mono', monospace;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--fg-primary);
  text-shadow: 0 0 8px currentColor;
}
</style>

Information Card

信息卡片

Clean, hierarchical card layout:

HTML/CSS:

html

<div class="nothing-card">
  <div class="card-metadata">SYSTEM STATUS</div>
  <h3 class="card-title">All Systems Operational</h3>
  <p class="card-body">Last checked 2 minutes ago. No issues detected.</p>
  <div class="card-footer">
    <span class="footer-label">UPTIME</span>
    <span class="footer-value">99.97%</span>
  </div>
</div>

<style>
.nothing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-metadata {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-secondary);
  text-transform: uppercase;
}

.card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg-primary);
}

.card-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.footer-label {
  color: var(--fg-secondary);
}

.footer-value {
  color: var(--fg-primary);
}
</style>

简洁、层级清晰的卡片布局：

HTML/CSS:

html

<div class="nothing-card">
  <div class="card-metadata">SYSTEM STATUS</div>
  <h3 class="card-title">All Systems Operational</h3>
  <p class="card-body">Last checked 2 minutes ago. No issues detected.</p>
  <div class="card-footer">
    <span class="footer-label">UPTIME</span>
    <span class="footer-value">99.97%</span>
  </div>
</div>

<style>
.nothing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-metadata {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-secondary);
  text-transform: uppercase;
}

.card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg-primary);
}

.card-body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.footer-label {
  color: var(--fg-secondary);
}

.footer-value {
  color: var(--fg-primary);
}
</style>

Platform-Specific Mappings

平台专属映射

SwiftUI Components

SwiftUI组件

swift

// Nothing Button
struct NothingButton: View {
    let label: String
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(label.uppercased())
                .font(.custom("SpaceMono", size: 12))
                .tracking(1.2)
                .padding(.horizontal, 24)
                .padding(.vertical, 12)
        }
        .foregroundColor(.primary)
        .background(Color.clear)
        .overlay(
            RoundedRectangle(cornerRadius: 0)
                .stroke(Color.primary, lineWidth: 1)
        )
    }
}

// Nothing Card
struct NothingCard<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            content
        }
        .padding(24)
        .background(Color(.systemGray6))
        .overlay(
            Rectangle()
                .stroke(Color(.separator), lineWidth: 1)
        )
    }
}

swift

// Nothing Button
struct NothingButton: View {
    let label: String
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(label.uppercased())
                .font(.custom("SpaceMono", size: 12))
                .tracking(1.2)
                .padding(.horizontal, 24)
                .padding(.vertical, 12)
        }
        .foregroundColor(.primary)
        .background(Color.clear)
        .overlay(
            RoundedRectangle(cornerRadius: 0)
                .stroke(Color.primary, lineWidth: 1)
        )
    }
}

// Nothing Card
struct NothingCard<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            content
        }
        .padding(24)
        .background(Color(.systemGray6))
        .overlay(
            Rectangle()
                .stroke(Color(.separator), lineWidth: 1)
        )
    }
}

React/Tailwind Components

React/Tailwind组件

jsx

// Base configuration
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        grotesk: ['Space Grotesk', 'sans-serif'],
        mono: ['Space Mono', 'monospace'],
      },
      colors: {
        nothing: {
          bg: '#000000',
          surface: '#0A0A0A',
          border: '#1F1F1F',
          text: '#FFFFFF',
          muted: '#8C8C8C',
          accent: '#FF0000',
        }
      }
    }
  }
}

// Button component
export function NothingButton({ children, onClick, variant = 'primary' }) {
  return (
    <button
      onClick={onClick}
      className="px-6 py-3 font-mono text-xs tracking-widest uppercase border border-nothing-border bg-transparent text-nothing-text hover:bg-nothing-surface transition-colors"
    >
      {children}
    </button>
  );
}

// Card component
export function NothingCard({ metadata, title, children }) {
  return (
    <div className="p-6 bg-nothing-surface border border-nothing-border flex flex-col gap-3">
      {metadata && (
        <div className="font-mono text-[10px] tracking-wider uppercase text-nothing-muted">
          {metadata}
        </div>
      )}
      {title && (
        <h3 className="font-grotesk text-2xl font-bold leading-tight">
          {title}
        </h3>
      )}
      <div className="font-grotesk text-sm text-nothing-muted leading-relaxed">
        {children}
      </div>
    </div>
  );
}

jsx

// Base configuration
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        grotesk: ['Space Grotesk', 'sans-serif'],
        mono: ['Space Mono', 'monospace'],
      },
      colors: {
        nothing: {
          bg: '#000000',
          surface: '#0A0A0A',
          border: '#1F1F1F',
          text: '#FFFFFF',
          muted: '#8C8C8C',
          accent: '#FF0000',
        }
      }
    }
  }
}

// Button component
export function NothingButton({ children, onClick, variant = 'primary' }) {
  return (
    <button
      onClick={onClick}
      className="px-6 py-3 font-mono text-xs tracking-widest uppercase border border-nothing-border bg-transparent text-nothing-text hover:bg-nothing-surface transition-colors"
    >
      {children}
    </button>
  );
}

// Card component
export function NothingCard({ metadata, title, children }) {
  return (
    <div className="p-6 bg-nothing-surface border border-nothing-border flex flex-col gap-3">
      {metadata && (
        <div className="font-mono text-[10px] tracking-wider uppercase text-nothing-muted">
          {metadata}
        </div>
      )}
      {title && (
        <h3 className="font-grotesk text-2xl font-bold leading-tight">
          {title}
        </h3>
      )}
      <div className="font-grotesk text-sm text-nothing-muted leading-relaxed">
        {children}
      </div>
    </div>
  );
}

Common Workflows

通用工作流程

Generating a Complete Page

生成完整页面

When asked to create a Nothing-style page:

Start with the base HTML structure including font imports
Apply the CSS token system
Build components using the three-layer hierarchy
Add mechanical/industrial details (segmented bars, borders, monospace labels)

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nothing Interface</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-primary: #000000;
      --bg-secondary: #0A0A0A;
      --fg-primary: #FFFFFF;
      --fg-secondary: #8C8C8C;
      --border: #1F1F1F;
      --accent: #FF0000;
    }
    
    @media (prefers-color-scheme: light) {
      :root {
        --bg-primary: #FFFFFF;
        --bg-secondary: #F5F5F5;
        --fg-primary: #000000;
        --fg-secondary: #737373;
        --border: #E0E0E0;
      }
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background: var(--bg-primary);
      color: var(--fg-primary);
      font-family: 'Space Grotesk', sans-serif;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <!-- Component markup here -->
</body>
</html>

当需要创建Nothing风格页面时：

从包含字体引入的基础HTML结构开始
应用CSS令牌系统
采用三层层级结构构建组件
添加机械/工业风细节（分段条、边框等宽字体标签）

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nothing Interface</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-primary: #000000;
      --bg-secondary: #0A0A0A;
      --fg-primary: #FFFFFF;
      --fg-secondary: #8C8C8C;
      --border: #1F1F1F;
      --accent: #FF0000;
    }
    
    @media (prefers-color-scheme: light) {
      :root {
        --bg-primary: #FFFFFF;
        --bg-secondary: #F5F5F5;
        --fg-primary: #000000;
        --fg-secondary: #737373;
        --border: #E0E0E0;
      }
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background: var(--bg-primary);
      color: var(--fg-primary);
      font-family: 'Space Grotesk', sans-serif;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <!-- Component markup here -->
</body>
</html>

Creating Custom Components

创建自定义组件

Follow this pattern for any new component:

Structure: Minimal, semantic HTML
Typography: Use display/body/metadata layers
Colors: Only token variables, never hardcoded
Spacing: Multiples of 8px base unit
Motion: Cubic bezier easing, 200-300ms duration
States: Clear visual feedback (borders, fills, transforms)

创建任何新组件都需遵循以下模式：

结构：极简、语义化的HTML
排版：使用展示层/正文层/元数据层
颜色：仅使用令牌变量，绝不硬编码
间距：基于8px单位的倍数
动效：三次贝塞尔缓动，200-300ms时长
状态：清晰的视觉反馈（边框、填充、变换）

Troubleshooting

故障排查

Fonts Not Loading

字体未加载

Ensure font imports are in the

<head>

html

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

For Doto (dot matrix font), use:

html

<link href="https://fonts.googleapis.com/css2?family=Doto:wght@400&display=swap" rel="stylesheet">

确保字体引入代码位于

<head>

标签内：

html

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

对于Doto（点阵字体），使用以下代码：

html

<link href="https://fonts.googleapis.com/css2?family=Doto:wght@400&display=swap" rel="stylesheet">

Dark Mode Not Working

深色模式不生效

Check that CSS custom properties use the media query:

css

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #FFFFFF;
    /* ...other light mode tokens */
  }
}

检查CSS自定义属性是否使用了媒体查询：

css

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary: #FFFFFF;
    /* ...other light mode tokens */
  }
}

Components Look Too Rounded

组件圆角过大

Nothing design uses zero border radius (perfectly square). Remove any

border-radius

properties.

Nothing设计采用零圆角（完全方形）。移除所有

border-radius

属性。

Spacing Feels Off

间距不协调

Stick to the 8px spacing scale strictly. Use

--space-*

variables or multiples of 8px. No arbitrary values.

严格遵循8px间距尺度。使用

--space-*

变量或8px的倍数。禁止使用任意值。

Text Hierarchy Unclear

文本层级不清晰

Review the three-layer system:

Display (32px+, bold, Space Grotesk): One per screen
Body (14-16px, regular, Space Grotesk): Main content
Metadata (10-12px, uppercase, Space Mono): Labels and technical info

检查三层系统：

展示层（32px及以上，粗体，Space Grotesk字体）：每个页面至多一个
正文层（14-16px，常规字重，Space Grotesk字体）：主要内容
元数据层（10-12px，大写，Space Mono字体）：标签和技术信息

Reference Files

参考文件

The skill includes three reference documents in the

references/

folder:

```
tokens.md
```
: Complete color, typography, spacing, and motion token system
```
components.md
```
: Full component library with variants and states
```
platform-mapping.md
```
: CSS, SwiftUI, and React implementation patterns

When generating UI, consult these references to maintain design system consistency.

该Skill在

references/

文件夹中包含三份参考文档：

```
tokens.md
```
：完整的颜色、排版、间距和动效令牌系统
```
components.md
```
：包含变体和状态的完整组件库
```
platform-mapping.md
```
：CSS、SwiftUI和React的实现模式

生成UI时，请参考这些文档以保持设计系统的一致性。