Nothing Design Skill

为什么要用

核心特性

严格的单色调色板（白/黑/红色强调）
点阵网格背景和装饰数字
工业字体搭配（等宽 + 无衬线 Grotesk）
透明/磨砂玻璃叠层组件
组件模板：Hero、Feature Grid、CTA、数据表格
Tailwind-ready 输出

实时演示

实际使用效果

就绪

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： Nothing Design Skill

用 Nothing 风格构建落地页

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

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

步骤

建立 token

Nothing-design：为我的 Tailwind 配置输出设计 token（颜色、字阶、间距）。✓ 已复制

→ Tailwind 扩展片段，包含单色调色板 + 等宽/Grotesk 字体
组合 Hero

生成一个 Hero 区块：超大数字「01.」、主标题、副标题、点阵网格背景。纯 Tailwind，无图片。✓ 已复制

→ 符合该视觉语言的 Hero JSX
精修

主标题应该更有力——Nothing 用高对比度和 Grotesk 字体，调整一下。✓ 已复制

→ 字重和字间距变化以匹配品牌风格

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

注意事项

加入暖色会破坏视觉语言 — 如果要求，skill 会拒绝超出调色板的建议；依赖它

搭配使用： filesystem · shadcn-ui-mcp

将现有 dashboard 改为 Nothing 风格

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

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

步骤

盘点

Nothing-design：扫描 src/components/，列出组件并为每个组件提出对应的 Nothing 风格方案。✓ 已复制

→ 逐组件提案
重构一个组件

将 DataTable.tsx 重构为 Nothing 风格：数字用等宽字体、点阵分割线、仅行悬停时显示强调色。✓ 已复制

→ 更新后的组件符合视觉语言

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

注意事项

视觉上难以一眼辨别 — 提高对比度；Nothing 是高对比度，不是低对比度

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

👤 营销开发者 ⏱ ~30 min intermediate

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

步骤

生成

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	（无）	项目初始化
generate_component	kind: hero\|cta\|table\|card, content	添加新区块时
restyle_existing	path, target_kind	将遗留组件纳入品牌语言

成本与限制

运行它的成本

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

安全

权限、密钥、影响范围

最小权限： filesystem-read filesystem-write

凭据存储： 无

数据出站： 无

这是粉丝自制的演绎；与 Nothing 公司无关

故障排查

常见错误与修复

输出使用了其他颜色

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

字体搭配感觉不对

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

点阵背景看起来像噪点

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

替代方案