Дизайн
design-craft
MaxCHL/design-craft-skillClaude Code скилл для создания высококачественных HTML-дизайнов: прототипы, слайд-деки, инфографика и дизайн-критика. Библиотека из 20 стилей — классика студий и тренды 2026 года.
Установка
terminal
bash
git clone https://github.com/MaxCHL/design-craft-skill.gitREADME
design-craft
Скилл для Claude Code, предназначенный для создания высококачественных HTML-нативных визуальных дизайнов — прототипов, слайд-деков, инфографики и дизайн-экспериментов — с библиотекой из 20 стилей.
Что умеет
Когда вы описываете визуальную задачу в диалоге, design-craft активируется и направляет запрос к нужному справочнику: задаёт уточняющие вопросы, помогает выбрать дизайн-направление и генерирует чистый HTML-файл.
Поддерживаемые типы вывода
| Тип | Примеры триггеров |
|---|---|
| Интерактивный прототип | 做原型、mockup、App 原型、iOS、可點擊 |
| Слайд-дек | 幻燈片、簡報、PPT、slide deck |
| Инфографика / визуализация данных | 資訊圖、數據視覺化、dashboard |
| Дизайн-критика | 設計評審、好不好看、幾分、critique |
| Анимация / моушн | 動畫、互動動效、motion |
| Исследование стилей | 幫我設計、做個好看的、設計方向 |
| Прямой выбор стиля | T1–T11、R1–R9、Bento、Y2K、Neo-Brutalism、Locomotive… |
Установка
bash
# Вариант A — npx (рекомендуется, git не требуется)
npx github:MaxCHL/design-craft-skill
# Вариант B — git clone
git clone https://github.com/MaxCHL/design-craft-skill ~/.claude/skills/design-craft
# Обновление (если установлено через git clone)
git -C ~/.claude/skills/design-craft pullТребуется Claude Code с поддержкой скиллов.
Библиотека стилей
Timeless — классика студий и арт-директоров (T1–T11)
| # | Стиль | Характер | Лучше всего для |
|---|---|---|---|
| T1 | Pentagram | Авторитет бренда, редакционная точность | Корпоративный айдентика, годовые отчёты |
| T2 | Müller-Brockmann | Швейцарская сетка, математический порядок | Насыщенные данными деки, техническая документация |
| T3 | Kenya Hara | Ма (негативное пространство), тихая роскошь | Велнес, премиальные продукты |
| T4 | Takram | Инженерная поэзия в тёмном режиме | Технологические запуски, аппаратные продукты |
| T5 | Information Architects | Читаемость на первом месте, ДНК iA Writer | Лонгриды, медицина, редакционный контент |
| T6 | Fathom | Сторителлинг с данными, графики уровня FT | Исследования, бизнес-аналитика |
| T7 | Build | Уверенные отступы, типографика как герой | SaaS, стартапы, современный брендинг |
| T8 | Locomotive | Сторителлинг на скролле, кинетическая типографика | Микросайты, портфолио агентств |
| T9 | Active Theory | Иммерсивный WebGL, 3D пространственный нарратив | Сайты фильмов/игр, технологические запуски |
| T10 | Sagmeister & Walsh | Нарушение правил, провокационная эстетика | Арт-выставки, креативные агентства |
| T11 | Experimental Jetset | Нео-модернистская диалектика, вера в Helvetica | Культурные институции, музыка, издательства |
Trending — культурные тренды 2026
| # | Стиль | Характер | Лучше всего для |
|---|---|---|---|
| R1 | Anti-AI Crafting | Текстура бумаги, смещение печати, коллаж | Креативные студии, инди-бренды |
| R2 | Dopamine Design | Высокая насыщенность, глянцевый 3D, упругость | Потребительские приложения, молодая аудитория |
| R3 | Retrofuturism / Y2K | Неон, хром, CRT-сканлайны | Технологии, музыка, игры |
| R4 | Maximalism | Слоистость, плотность, намеренный хаос | Мода, искусство, культура |
| R5 | Tactile Organic | Земляные тона, текстура льна, ручная графика | Еда, велнес, устойчивое развитие |
| R6 | Bento Box | CSS Grid карточки, эстетика Apple WWDC | Страницы продуктов, витрины функций |
| R7 | Intentional Imperfection | Ручная графика, повёрнутые элементы, скетч | Личные портфолио, инди-авторы |
| R8 | Neo-Brutalism | Толстые чёрные рамки, жёсткие тени, сырость | Стартапы, лендинги программных продуктов |
| R9 | Glassmorphism | Слои матового стекла, эстетика Vision OS | iOS-приложения, AI-продукты, тёмный SaaS |
Ассеты
Встраивайте эти компоненты напрямую в блок <script type="text/babel"> вашего HTML.
| Компонент | Путь | Использование |
|---|---|---|
IOSFrame | assets/ios_frame.jsx | Рамка iOS-устройства — пресеты: standard (393×852) · pro (402×874) · pro-max (440×956) · se (375×667) |
AndroidFrame | assets/android_frame.jsx | Рамка Android-устройства — пресеты: pixel (412×917) · pixel-compact (393×851) · samsung-s (360×780) · samsung-plus (384×854) · ultra (384×832) |
MacOSWindow | assets/macos_window.jsx | Хром окна macOS — светофор, заголовок, пресеты: default (1280×800) · large (1440×900) · small · dialog |
BrowserWindow | assets/browser_window.jsx | Хром браузера для десктопа — область контента 1440×900 по умолчанию |
deck_stage.js | assets/deck_stage.js | Движок слайдов: навигация с клавиатуры, заметки докладчика (S), полноэкранный режим (F) |
Справочники
Файлы справочников, загружаемые по таблице маршрутизации в SKILL.md:
| Файл | Назначение |
|---|---|
references/prototype.md | Рамки устройств, управление состоянием, источники изображений, спецификация плейсхолдеров |
references/slides.md | Типы слайдов, типографическая шкала, правила анимации |
references/infographic.md | Выбор типа графика, настройка Chart.js, цветовая палитра |
references/animation.md | Токены движения, пресеты easing, prefers-reduced-motion |
references/critique.md | Фреймворк оценки по 5 измерениям (0–10 по каждой оси) |
references/anti-patterns.md | Чего не делать — типичные AI-дизайн-паттерны с исключениями по стилям |
references/direction-advisor.md | Поток уточнений для размытых брифов |
references/react-setup.md | Настройка React + Babel CDN, частые ошибки, интеграция Chart.js / Tailwind |
references/export.md | Рабочие процессы экспорта в PDF / скриншот / PPTX и справочник размеров |
references/styles-timeless.md | Полные записи T1–T11: философия, ДНК, шаблоны промптов |
references/styles-trending.md | Полные записи R1–R9: философия, ДНК, шаблоны промптов |
Лицензия
MIT