DN

dominikmartn/nothing-design-skill

Data science & ML

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

2,8 тыс. stars Качество 47 Тренд 27MIT

Навык Claude Code для генерации интерфейса на языке дизайна Nothing. Монохромный, типографский, промышленный.

Обзор

Навык дизайн-системы для Claude Code, вдохновлённый визуальным языком Nothing. Монохромный, типографический, индастриал. Я постоянно описывал одни и те же правила дизайна Клоду снова и снова — швейцарская типографика, OLED-чёрные цвета, сегментированные полоски прогресса, матричные мотивы. Поэтому я упаковал это в многоразовый навык. Скажите Claude /nothing-design или скажите «Nothing style», и интерфейс генерируется по следующим принципам: - Трёхслойная визуальная иерархия (дисплей, тело, метаданные — вот и всё) - Space Grotesk + Space Mono + стек шрифтов Doto - Полная система токенов в режимах тёмного и света - Сегментированные полоски прогресса, механические переключатели, виджеты в стиле инструментов - Вывод в виде HTML/CSS, SwiftUI или React/Tailwind Скопируйте папку nothing-design в каталог навыков Claude Code: Вот и всё. В следующий раз, когда начнёте играть в Claude Code, навык будет доступен.

Обзор (машинный перевод)

Навык дизайн-системы для Claude Code, вдохновлённый визуальным языком Nothing. Монохромный, типографический, индастриал.

Я постоянно описывал одни и те же правила дизайна Клоду снова и снова — швейцарская типографика, OLED-чёрные цвета, сегментированные полоски прогресса, матричные мотивы. Поэтому я упаковал это в многоразовый навык.

Что ты получаешь

Скажите Клоду /nothing-design или скажите «Nothing style», и интерфейс генерируется по следующим принципам:

  • Трёхслойная визуальная иерархия (отображение, тело, метаданные — вот и всё)
  • Space Grotesk + Space Mono + стек шрифтов Doto
  • Полная система токенов в режимах тёмного и светлого режимов
  • Сегментированные индикаторы прогресса, механические переключатели, инструментальные виджеты
  • Вывод в формате HTML/CSS, SwiftUI или React/Tailwind

Установка

Скопируйте папку nothing-design в каталог навыков Claude Code:

Вот и всё. В следующий раз, когда начнёте играть в Claude Code, навык будет доступен.

Что внутри

| Файл | |------|—| | SKILL.md | Философия дизайна, правила ремесла, рабочий процесс | | references/tokens.md | Цвета, шрифты, интервалы, токены движения | | references/components.md | Пуговицы, карты, списки, таблицы, наложения | | references/platform-mapping.md | CSS, SwiftUI, выходные отображения React |

Лицензия

MIT

Эта страница переведена автоматически. Технические детали смотрите в оригинале.

README

Nothing Design Skill

A design system skill for Claude Code inspired by Nothing’s visual language. Monochrome, typographic, industrial.

I kept describing the same design rules to Claude over and over — Swiss typography, OLED blacks, segmented progress bars, dot-matrix motifs. So I packaged it into a reusable skill.

What you get

Tell Claude /nothing-design or say “Nothing style” and it generates UI following these principles:

  • Three-layer visual hierarchy (display, body, metadata — that’s it)
  • Space Grotesk + Space Mono + Doto font stack
  • Full dark and light mode token system
  • Segmented progress bars, mechanical toggles, instrument-style widgets
  • Output as HTML/CSS, SwiftUI, or React/Tailwind

Install

Copy the nothing-design folder into your Claude Code skills directory:

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

That’s it. Next time you start Claude Code, the skill is available.

What’s inside

File
SKILL.md Design philosophy, craft rules, workflow
references/tokens.md Colors, fonts, spacing, motion tokens
references/components.md Buttons, cards, lists, tables, overlays
references/platform-mapping.md CSS, SwiftUI, React output mappings

License

MIT

Открыть полный README на GitHub

Рекомендуемые инструменты

Попробуйте другой запрос или уберите фильтр.

Установка

npx skillfish add dominikmartn/nothing-design-skill
Новичок в MCP? Начните с руководства на mcpskill.org →