如何安装这个技能？

克隆仓库后，将 nothing-design 文件夹复制到 ~/.claude/skills/ 目录下即可。下次启动 Claude Code 时技能自动生效。

它支持哪些输出格式？

支持输出为 HTML/CSS、SwiftUI 或 React/Tailwind 三种格式。

这个技能是做什么的？

它是一个 Claude Code 技能，将 Nothing 品牌的设计规则（如单色、瑞士排版、工业感）封装起来，让 AI 按这些规则生成 UI 代码。

September 26, 2026

Nothing Design Skill

AI & Machine Learning Prompt Engineering & Skill Management0

Get resource

一个 Claude Code 技能，用于生成遵循 Nothing 设计语言的 UI 代码。

MITClaude CodeText InputCode Output

Prompt Templates Skill Packaging

安装 / 调用方式bash

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

调用示例json

/nothing-design

Product facts

Type: AI Skill & Agent
Category: AI & Machine Learning › Prompt Engineering & Skill Management
Pricing: Open source
Platforms: Claude Code
License: MIT
Launched: Sep 26, 2026
Listed: Sep 26, 2026
Website: github.com

Overview

GitHub GitHub

## 简介 Nothing Design Skill 是一个为 [Claude Code](https://claude.ai/code) 设计的 AI 技能（skill），灵感来源于 Nothing 品牌的视觉语言。它将单色、排版驱动和工业感的设计规则打包成可复用的提示词集合，避免在每次对话中重复描述相同的设计规范。 ## 解决的问题在使用 AI 生成 UI 时，开发者往往需要反复向模型说明特定的设计约束，例如瑞士排版风格、OLED 纯黑背景、分段式进度条或点阵图案等。该技能将这些规则固化在一个文件夹中，安装后即可直接调用。 ## 主要能力 - **三层视觉层级**：仅使用 display、body、metadata 三个层级构建信息结构。 - **指定字体栈**：使用 Space Grotesk、Space Mono 和 Doto 三种字体。 - **明暗模式支持**：内置完整的 dark mode 与 light mode token 系统。 - **特定组件风格**：生成分段式进度条、机械感开关、仪表风格控件等符合 Nothing 设计语言的 UI 元素。 - **多平台输出**：支持将设计输出为 HTML/CSS、SwiftUI 或 React/Tailwind 代码。 ## 文件结构技能目录包含以下核心文件： - `SKILL.md`：定义设计哲学、工艺规则和工作流。 - `references/tokens.md`：颜色、字体、间距和动效的 token 定义。 - `references/components.md`：按钮、卡片、列表、表格、覆盖层等组件规范。 - `references/platform-mapping.md`：CSS、SwiftUI、React 的输出映射关系。 ## 适用人群适合需要在 Claude Code 中快速生成具有统一工业极简风格 UI 的前端开发者和移动端开发者。

Key features

三层视觉层级：仅使用 display、body、metadata 三个层级来组织界面信息。
指定字体栈：强制使用 Space Grotesk、Space Mono 和 Doto 字体组合。
明暗模式 Token：内置完整的 dark 和 light 模式颜色与间距 token 系统。
工业风组件：生成分段式进度条、机械感开关和仪表风格控件。
多框架输出：支持输出为 HTML/CSS、SwiftUI 或 React/Tailwind 代码。
命令触发：通过输入 /nothing-design 或 "Nothing style" 即可调用该技能。

Releases

Notify me

Initial · Nothing Design Skill

September 26, 2026

Q&A

如何安装这个技能？AI-generated: 克隆仓库后，将 nothing-design 文件夹复制到 ~/.claude/skills/ 目录下即可。下次启动 Claude Code 时技能自动生效。
它支持哪些输出格式？AI-generated: 支持输出为 HTML/CSS、SwiftUI 或 React/Tailwind 三种格式。
这个技能是做什么的？AI-generated: 它是一个 Claude Code 技能，将 Nothing 品牌的设计规则（如单色、瑞士排版、工业感）封装起来，让 AI 按这些规则生成 UI 代码。