Nothing Design Skill — Установка & Живое демо

Зачем использовать

Ключевые функции

Строгая монохромная палитра (только белый/чёрный/красный акцент)
Dot-matrix сетки на фоне и декоративные числа
Индустриальная пара шрифтов (mono + sans grotesk)
Прозрачные / glass слоистые компоненты
Рецепты компонентов: hero, feature grid, CTA, data table
Вывод, готовый для Tailwind

Живое демо

Как выглядит на практике

готово

Установка

Выберите клиент

~/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 использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

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
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "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 использует массив объектов серверов, а не map.

~/.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

👤 Frontend-разработчики / дизайнеры-разработчики ⏱ ~45 min intermediate

Когда использовать: Бриф на бренд говорит «индустриальный / минималистичный»; нужен лендинг в стиле Nothing без изобретения системы с нуля.

Предварительные требования

Скилл установлен — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
Tailwind-проект — Существующий Next.js или Vite + Tailwind

Поток

Установить токены

Nothing-design: выведи дизайн-токены (цвета, шкала типографики, отступы) для Tailwind-конфига.✓ Скопировано

→ Фрагмент расширения Tailwind с монохромной палитрой + mono/grotesk шрифтами
Создать hero

Сгенерируй hero-секцию: огромное число «01.», заголовок, подзаголовок, dot-matrix фон. Только Tailwind, без изображений.✓ Скопировано

→ JSX hero, соответствующий языку бренда
Доработать

Заголовок должен быть увереннее — Nothing использует высокий контраст и grotesk. Скорректируй.✓ Скопировано

→ Насыщенность и трекинг шрифта изменены под бренд

Итог: Лендинг, выглядящий как продукт Nothing-экосистемы.

Подводные камни

Добавление тёплых цветов ломает язык бренда — Скилл отклоняет предложения за пределами палитры если попросить; полагайся на него

Сочетать с: filesystem · shadcn-ui-mcp

Переделать существующий дашборд в стиле Nothing

👤 Разработчики, поддерживающие внутренние инструменты ⏱ ~60 min advanced

Когда использовать: Внутренний admin выглядит как Bootstrap 4; хочется сделать его намеренно стильным.

Поток

Инвентаризация

Nothing-design: сканируй src/components/. Перечисли компоненты и предложи аналог в языке Nothing для каждого.✓ Скопировано

→ Предложение по каждому компоненту
Рефакторинг одного

Отрефактори DataTable.tsx в стиле Nothing. Mono-шрифт для чисел, dot-matrix разделители, акцент только при наведении на строку.✓ Скопировано

→ Обновлённый компонент соответствует языку бренда

Итог: Связный монохромный дашборд.

Подводные камни

Трудно читать с первого взгляда — Увеличь контраст; Nothing высококонтрастный, не низкоконтрастный

Создать маркетинговую колоду в эстетике Nothing

👤 Маркетинговые разработчики ⏱ ~30 min intermediate

Когда использовать: Нужна слайд-колода, не похожая на типовой шаблон.

Поток

Составить

Nothing-design: сгенерируй 12-слайдовую HTML-колоду для запуска продукта. Используй огромные числа как маркеры разделов.✓ Скопировано

→ Единая HTML-колода, соответствующая языку бренда

Итог: Колода, усиливающая бренд без лишних усилий.

Подводные камни

Слишком тёмно для светлой проекторной комнаты — Скилл поставляется с инверсией «light» — запроси её

Сочетать с: guizang-ppt-skill

Комбинации

Сочетайте с другими MCP — эффект x10

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	Привести legacy компоненты в соответствие

Стоимость и лимиты

Во что обходится

Квота API: Н/П
Токенов на вызов: 500–3000
Деньги: Бесплатно
Совет: Генерируй токены один раз, затем стилизуй компоненты инкрементно — не переиздавай токены при каждом вызове

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: filesystem-read filesystem-write

Хранение учётных данных: Нет

Исходящий трафик: Нет

Это фанатская интерпретация; не имеет отношения к компании Nothing

Устранение неполадок

Частые ошибки и исправления

Вывод использует другие цвета

Перепромтируй: «только монохром, красный акцент допускается на <10% поверхности»

Пара шрифтов выглядит неправильно

Укажи точные mono + grotesk шрифты в prompt; по умолчанию JetBrains Mono + Inter

Dot-matrix фон выглядит как шум

Уменьши плотность точек; по умолчанию скилл слишком плотный для некоторых экранов

Альтернативы

Nothing Design Skill в сравнении

Альтернатива	Когда использовать	Компромисс
shadcn/ui по умолчанию	Нужен более стандартный вид	Универсальный; нет голоса бренда
Tailwind UI	Нужно полированное, но универсальное	Похоже на каждый другой Tailwind UI сайт
Кастомная дизайн-система	Есть бренд-дизайнер	Медленно; дорого

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills