
dominikmartn/nothing-design-skill
Data science & MLЭта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал
Навык 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
Рекомендуемые инструменты
Попробуйте другой запрос или уберите фильтр.
Установка
npx skillfish add dominikmartn/nothing-design-skill