1. 项目定位与用途
Nothing Design Skill 是面向 Claude Code 用户的设计系统插件，旨在将 Nothing 品牌的视觉语言转化为可编程的 UI 生成规则。用户只需触发技能，即可获得符合其设计原则的完整界面代码，包括 HTML/CSS、SwiftUI 或 React/Tailwind 格式，适用于快速原型开发和实际项目集成。仓库中未明确提及与其他设计工具（如 Figma）的直接集成，但通过令牌系统可间接支持设计开发协作。
项目档案插件 / 扩展
dominikmartn/nothing-design-skill 插件：用途、安装与配置说明
dominikmartn/nothing-design-skill：这是一个为 Claude Code 设计的 Nothing 品牌设计系统插件，通过标准化设计令牌与三层视觉层级，让 AI 一键生成符合 Mono本页整理它解决什么问题、适用场景、安装方式和使用方法。
2,790Star 于 2026年4月2日2026年9月19日 更新
AI 总结
这是一个为 Claude Code 设计的 Nothing 品牌设计系统插件，通过标准化设计令牌与三层视觉层级，让 AI 一键生成符合 Monochrome、Typographic、Industrial 风格的跨平台 UI 代码。
中文项目介绍
Nothing Design Skill 是一个专为 Claude Code 开发的设计系统技能，灵感源自 Nothing 品牌的视觉语言。它允许用户通过简单指令快速生成遵循 Monochrome（单色）、Typographic（排版驱动）、Industrial（工业风格）原则的用户界面代码，涵盖 Web、iOS 和 React 等多种平台。
该项目解决了在 AI 辅助编程中反复口头描述同一套设计规则（如瑞士排版、OLED 黑、分段进度条）的低效问题。通过将这些规则封装为可复用的技能，确保每次生成的 UI 都能严格保持设计一致性，无需重复解释。
适用场景包括：在 Claude Code 中通过 `/nothing-design` 命令快速原型设计；为实际项目直接输出适配 HTML/CSS、SwiftUI 或 React/Tailwind 的 production-ready 代码；以及作为设计团队与开发团队之间的标准化沟通桥梁。
技术实现上，它采用令牌驱动架构，所有视觉属性（颜色、字体、间距、动效）均通过 `tokens.md` 统一定义；核心组织原则是三层视觉层级（Display/Body/Metadata）；支持深色与浅色双模式平等设计；并通过 `platform-mapping.md` 实现跨平台代码映射。仓库中包含完整的设计哲学、令牌系统、组件规范及映射指南。
详细信息与使用说明
2. 解决的问题
在 AI 辅助编程中，设计一致性常因每次对话都需要重新解释风格规则而难以保证。本项目通过将 Nothing 的设计语言（如瑞士排版、OLED 黑、分段进度条、点阵图案）固化为技能，消除了重复描述，确保每次生成的 UI 都严格遵循既定规范，显著提升协作效率。这解决了口头描述设计规则容易遗漏或变形的问题，将主观描述转化为客观、可执行的代码生成指令。
3. 适用场景
主要适用于：1) 在 Claude Code 环境中通过 `/nothing-design` 命令或提及 "Nothing style" 来生成设计原型；2) 为跨平台项目（Web、iOS、React）直接输出适配的设计系统代码；3) 设计团队向开发团队交付标准化 UI 实现。基于其设计令牌和组件规范，也可作为学习 Nothing 设计语言的参考文档。仓库中未明确提及团队协作场景，但令牌结构支持多角色使用。
4. 安装方式
安装过程需手动复制技能目录至 Claude Code 配置路径。具体步骤：首先克隆本仓库到本地（`git clone https://github.com/dominikmartn/nothing-design-skill.git`）；然后进入仓库目录，将 `nothing-design` 文件夹复制到 `~/.claude/skills/` 路径下（`cp -r nothing-design-skill/nothing-design ~/.claude/skills/`）。重启 Claude Code 后技能即可生效。仓库中未提供其他安装方式（如包管理器或自动检测），且未明确说明 Windows 系统下的路径变体。
5. 使用方式
在 Claude Code 中，用户可通过两种方式激活技能：一是直接输入命令 `/nothing-design`，Claude 将进入 Nothing 设计模式；二是在自然语言描述中明确包含 "Nothing style" 或 "Nothing design" 关键词，Claude 会自动应用相关设计规则。根据 SKILL.md，技能仅在这些显式条件下触发，不会自动应用。生成结果将遵循三层视觉层级、指定字体栈及组件规范，并输出为所选平台的代码。用户可通过后续对话调整细节，但核心规则由技能固定。
6. 实现特点与结构
项目采用令牌驱动设计，所有视觉属性由 `references/tokens.md` 集中管理，确保跨平台一致性。核心设计原则包括：三层信息层级（Display/Body/Metadata）、严格字体纪律（每屏最多 2 字体家族、3 字号、2 字重）、深色/浅色模式平等对待。组件规范定义在 `references/components.md`，涵盖按钮、卡片、列表等；平台映射指南在 `references/platform-mapping.md`，说明如何将令牌转换为 CSS 变量、SwiftUI Color 等。仓库结构稳定，主要模块清晰分离，但未提供自动化测试或示例代码文件。
思维导图
Nothing Design Skill
设计哲学与工作流
触发条件（显式命令/关键词）
三层视觉层级（Display/Body/Metadata）
字体纪律（2家族/3字号/2字重）
双模式优先（深色/浅色平等）
设计令牌系统
字体栈（Space Grotesk/Mono + Doto）
颜色令牌（OLED黑/暖白/状态色）
间距与比例令牌
运动与动效令牌
组件库规范
按钮与输入控件
卡片与列表
表格与导航
工业风组件（进度条/开关）
多平台代码映射
HTML/CSS 变量映射
SwiftUI Color 扩展
React/Tailwind 配置
设计工具（Figma/Paper）参考
常见问题
如何安装 Nothing Design Skill？
安装需手动复制技能目录：先克隆仓库（git clone https://github.com/dominikmartn/nothing-design-skill.git），再将 nothing-design 文件夹复制到 ~/.claude/skills/ 路径下（cp -r nothing-design-skill/nothing-design ~/.claude/skills/），重启 Claude Code 即可。仓库中未提供包管理器安装方式。
如何使用该技能生成 UI？
在 Claude Code 中输入 `/nothing-design` 命令，或在描述需求时包含 "Nothing style" 或 "Nothing design" 关键词，Claude 将自动应用 Nothing 设计规则生成 UI。根据 SKILL.md，技能仅在这些显式条件下触发，不会自动应用。
支持哪些 UI 输出格式？
支持 HTML/CSS、SwiftUI 和 React/Tailwind 三种格式。具体映射规则参考 references/platform-mapping.md，该文件说明如何将设计令牌转换为各平台特定的代码结构。
设计原则有哪些核心要点？
核心包括：三层视觉层级（Display/Body/Metadata 严格区分信息权重）、Space Grotesk + Space Mono + Doto 字体栈、完整的深色（OLED 黑）与浅色（暖白）模式令牌系统、以及分段进度条、机械开关等工业风组件。所有规则由 SKILL.md 和 tokens.md 定义。
这个技能会与其他 Claude Code 技能冲突吗？
仓库中未明确说明与其他技能的兼容性。由于技能通过显式命令触发，且设计规则封装在独立文件夹内，理论上可与其他技能共存。但实际体验可能受 Claude Code 环境配置影响，建议在干净环境中测试。