/ 目录 / 演练场 / Nothing Design Skill
● 社区 dominikmartn ⚡ 即开即用

Nothing Design Skill

作者 dominikmartn · dominikmartn/nothing-design-skill

生成 Nothing 美学风格的 UI——单色系、点阵格、工业字体、透明叠层——无需从 inspect-element 复制粘贴 CSS。

Nothing Design Skill 将 Nothing(手机品牌)的视觉语言编码为 Claude Code skill。适用于落地页、dashboard、营销站或 app UI——当你想要那种单色工业极简、点阵装饰和自信排版的氛围时使用。输出地道的 Tailwind/CSS,符合该视觉语言的实际规范。

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "nothing-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "nothing-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/nothing-design-skill",
          "~/.claude/skills/nothing-design"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

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

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: Nothing Design Skill

用 Nothing 风格构建落地页

👤 前端开发者/设计师开发者 ⏱ ~45 min intermediate

何时使用: 品牌简报要求「工业/极简」,你不想从头创造一套系统。

前置条件
  • 已安装 skill — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
  • Tailwind 项目 — 已有 Next.js 或 Vite + Tailwind 配置
步骤
  1. 建立 token
    Nothing-design:为我的 Tailwind 配置输出设计 token(颜色、字阶、间距)。✓ 已复制
    → Tailwind 扩展片段,包含单色调色板 + 等宽/Grotesk 字体
  2. 组合 Hero
    生成一个 Hero 区块:超大数字「01.」、主标题、副标题、点阵网格背景。纯 Tailwind,无图片。✓ 已复制
    → 符合该视觉语言的 Hero JSX
  3. 精修
    主标题应该更有力——Nothing 用高对比度和 Grotesk 字体,调整一下。✓ 已复制
    → 字重和字间距变化以匹配品牌风格

结果: 看起来属于 Nothing 生态的落地页。

注意事项
  • 加入暖色会破坏视觉语言 — 如果要求,skill 会拒绝超出调色板的建议;依赖它
搭配使用: filesystem · shadcn-ui-mcp

将现有 dashboard 改为 Nothing 风格

👤 维护内部工具的开发者 ⏱ ~60 min advanced

何时使用: 内部管理后台看起来像 Bootstrap 4,你想让它有些设计感。

步骤
  1. 盘点
    Nothing-design:扫描 src/components/,列出组件并为每个组件提出对应的 Nothing 风格方案。✓ 已复制
    → 逐组件提案
  2. 重构一个组件
    将 DataTable.tsx 重构为 Nothing 风格:数字用等宽字体、点阵分割线、仅行悬停时显示强调色。✓ 已复制
    → 更新后的组件符合视觉语言

结果: 风格统一的单色 dashboard。

注意事项
  • 视觉上难以一眼辨别 — 提高对比度;Nothing 是高对比度,不是低对比度

生成 Nothing 美学风格的营销幻灯片

👤 营销开发者 ⏱ ~30 min intermediate

何时使用: 你想要一套不像通用模板的幻灯片。

步骤
  1. 生成
    Nothing-design:生成 12 张产品发布 HTML 幻灯片,用超大数字作为章节分割标记。✓ 已复制
    → 单文件 HTML 幻灯片,符合视觉语言

结果: 不费力就能强化品牌的幻灯片。

注意事项
  • 在明亮的投影室里太暗 — skill 提供「light」反转模式——主动要求
搭配使用: guizang-ppt-skill

组合

与其他 MCP 搭配,撬动十倍杠杆

nothing-design-skill + shadcn-ui-mcp

使用 shadcn 组件,应用 Nothing 主题

shadcn:获取 Form。Nothing-design:将其样式调整为品牌语言。✓ 已复制
nothing-design-skill + filesystem

在整个项目中应用风格

Nothing-design:扫描 components/,提出重构方案,逐一应用。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
emit_tokens (无) 项目初始化 0
generate_component kind: hero|cta|table|card, content 添加新区块时 0
restyle_existing path, target_kind 将遗留组件纳入品牌语言 0

成本与限制

运行它的成本

API 配额
不适用
每次调用 Token 数
500–3000
费用
免费
提示
只生成一次 token,再逐步为组件添加样式——不要每次调用都重新输出 token

安全

权限、密钥、影响范围

最小权限: filesystem-read filesystem-write
凭据存储:
数据出站:

故障排查

常见错误与修复

输出使用了其他颜色

重新提示:「只允许单色,强调红色面积 <10%」

字体搭配感觉不对

在 prompt 中指定具体的等宽 + Grotesk 字体;默认是 JetBrains Mono + Inter

点阵背景看起来像噪点

降低点密度;默认在某些屏幕上过密

替代方案

Nothing Design Skill 对比其他方案

替代方案何时用它替代权衡
shadcn/ui 默认样式你想要更传统的外观通用,没有品牌个性
Tailwind UI你想要精美但通用的样式看起来和所有 Tailwind UI 网站一样
定制设计系统你有专职品牌设计师慢;成本高

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills