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

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

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

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

Живое демо

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

готово

Установка

Репозиторий автора · Официальная документация Claude Skills

Сценарии использования

Реальные сценарии: Nothing Design Skill

Создать лендинг в стиле Nothing

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

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

Поток

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

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