5 бесплатных репозиториев для дизайна в Claude: ставим по шагам

Что ставим

Все пять бесплатные, с открытым кодом. У UI UX Pro Max есть отдельная платная Premium-версия на сайте проекта, для этого материала она не нужна.

Что понадобится

• Claude Code на платном тарифе Claude (Pro, Max, Team или Enterprise) либо с аккаунтом Console. Бесплатный план Claude Code не включает. Установка: на macOS, Linux и WSL curl -fsSL https://claude.ai/install.sh | bash, через Homebrew brew install --cask claude-code, на Windows winget install Anthropic.ClaudeCode. Документация: https://code.claude.com/docs/en/setup
• Claude Design нужен только для второго способа в шаге 3. Он входит в тариф Pro и выше. Тарифы Claude: https://claude.com/pricing
• Node.js 18 или новее для команд npx. Проверка: node -v. Node.js: https://nodejs.org/en/download
• Python 3 для UI UX Pro Max: на нём работает поиск по базе стилей. Проверка: python3 --version. Python: https://www.python.org/downloads/
• Браузер Chrome для расширения из шага 4.
• Доступ к Claude из твоей страны. Страны, где работает Claude: https://www.anthropic.com/supported-countries. России в списке нет.

Шаг 1. UI UX Pro Max: дизайн-система под твой продукт

Способ А, плагином. Открой Claude Code в папке проекта (claude) и выполни по очереди:

1. /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
2. /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
3. Если Claude Code пишет «Run /reload-plugins to activate.», он перезагрузит плагины сам. Если появилось предупреждение про повторное чтение переписки, набери /reload-plugins --force.

Способ Б, через программу uipro:

1. npm install -g ui-ux-pro-max-cli. Пакет называется именно так, старый uipro-cli устарел, его не ставь.
2. Перейди в папку проекта и выполни uipro init --ai claude. Чтобы скилл был во всех проектах сразу: uipro init --ai claude --global, он ляжет в ~/.claude/skills/.
3. Обновить потом: uipro update, удалить: uipro uninstall --ai claude.

Как пользоваться. Скилл включается сам, когда просишь что-то про интерфейс: «Собери лендинг для моего сервиса онлайн-записи в салон красоты». Перед кодом он выдаёт дизайн-систему: структуру страницы, стиль, цвета, пару шрифтов, эффекты, чего избегать и чек-лист перед сдачей.

Чтобы дизайн-система сохранилась в файлы и не терялась между сессиями (для установки способом Б в проект), выполни в папке проекта python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp". Появится папка design-system/myapp/ с файлом MASTER.md: это главный источник правды по цветам, шрифтам и компонентам.

Проверка: в ответе на просьбу собрать страницу сначала идёт дизайн-система - паттерн страницы, стиль, цвета, шрифты и чего избегать. Если агент сразу пишет код без неё, назови скилл прямо: «используй ui-ux-pro-max».

Шаг 2. Taste Skill: убираем ИИ-слоп

1. В папке проекта выполни npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend". Установщик спросит, в какие агенты ставить, выбери Claude Code. Чтобы без вопросов, добавь -a claude-code, чтобы во все проекты сразу, добавь -g.
2. Скилл ляжет в .claude/skills/ проекта, а с -g в ~/.claude/skills/.
3. Посмотреть весь набор: npx skills add https://github.com/Leonxlnx/taste-skill --list. Кроме основного там есть redesign-existing-projects для переделки готового сайта, high-end-visual-design для дорогого спокойного стиля, minimalist-ui, industrial-brutalist-ui и full-output-enforcement, если агент бросает код на середине.
4. Основной скилл сейчас во второй версии, она помечена как экспериментальная и заточена под лендинги, портфолио и редизайн, а не под дашборды и таблицы. Если что-то сломалось, поставь первую: --skill "design-taste-frontend-v1".
5. Как пользоваться: «Используй design-taste-frontend. Собери лендинг для моего продукта, аудитория - владельцы небольших кофеен».
6. Проверка: перед кодом агент пишет одну строку «Reading this as: …» - как он понял задачу, аудиторию и стиль. Это значит, что скилл сработал.
7. У скилла три шкалы от 1 до 10: DESIGN_VARIANCE (насколько смелая вёрстка), MOTION_INTENSITY (сколько анимации) и VISUAL_DENSITY (насколько плотно). По умолчанию 8, 6 и 4. Файл править не нужно, говори прямо в чате: «сделай спокойнее, DESIGN_VARIANCE 5».

Шаг 3. Awesome Claude Design: 68 готовых дизайн-систем

1. Открой список Awesome Claude Design: https://github.com/VoltAgent/awesome-claude-design. Там 68 систем по группам: ИИ-платформы, инструменты разработчика, базы данных, SaaS, дизайн, финтех, магазины, медиа и автомобили. Выбери ту, что по ощущению подходит твоему продукту.

Способ А, в проект для Claude Code:

2. В корне проекта выполни npx getdesign@latest add claude. Вместо claude подставь нужную систему, например vercel, stripe, linear.app или notion. Весь список с описаниями: npx getdesign@latest list.
3. Команда создаст файл DESIGN.md в корне проекта. Если DESIGN.md там уже есть, новый ляжет во вложенную папку с именем системы. Заменить старый: добавь --force, положить в свой путь: --out ./docs/design.md.
4. Напиши Claude: «Перед любой вёрсткой прочитай DESIGN.md. Держись токенов, шкалы шрифтов и компонентов оттуда».

Способ Б, в Claude Design:

5. Скачай файл кнопкой Download DESIGN.md на странице системы, например DESIGN.md для Claude на getdesign.md: https://getdesign.md/claude/design-md
6. В Claude Design нажми Create new design system и на экране Set up your design system загрузи файл в Add assets. Второй вариант: создай прототип, приложи DESIGN.md в чат и напиши «Create a design system from this DESIGN.md». Claude соберёт цвета, шрифты, компоненты, карточки превью и рабочий набор интерфейса.

Файлы собраны по публичным сайтам брендов и не являются их официальными системами. Логотипы, фирменные шрифты и узнаваемый стиль чужого бренда в свой продукт не переносить: бери файл как основу и собирай на нём свою систему.

Шаг 4. design-md-chrome: стиль любого сайта в один файл

1. Установи расширение DESIGN.md Style Extractor в Chrome Web Store: https://chromewebstore.google.com/detail/designmd-style-extractor/ogpdnchdjiibhobphelbbkemnnemkfma и нажми «Установить». Исходный код расширения, design-md-chrome: https://github.com/bergside/design-md-chrome
2. Вариант из исходников: скачай репозиторий, в Chrome открой меню → Расширения → Управление расширениями, включи режим разработчика, нажми «Загрузить распакованное расширение» и выбери папку репозитория.
3. Открой сайт, стиль которого нравится, и нажми на иконку расширения. Auto-extract снимет с открытой страницы шрифты, цвета, отступы, скругления, тени и анимации.
4. Нажми Generate DESIGN.md, если нужен файл дизайн-системы, или Generate SKILL.md, если хочешь сразу скилл. Потом Download.
5. DESIGN.md положи в корень проекта и дальше как в шаге 3, пункт 4. SKILL.md положи в папку .claude/skills/название-стиля/.
6. Если страница поменялась, например ты открыл меню или другую вкладку сайта, нажми Refresh, и расширение снимет стили заново.
7. Расширению нужны права на активную вкладку, запуск скриптов на ней, хранилище и загрузки. В карточке магазина разработчик заявляет, что данные не собирает.

Шаг 5. Design Motion Principles: анимация с таймингами и плавностью

1. В папке проекта: npx skills add kylezantos/design-motion-principles, выбери Claude Code или сразу добавь -a claude-code. Вручную: git clone https://github.com/kylezantos/design-motion-principles.git, затем cp -r design-motion-principles/skills/design-motion-principles ~/.claude/skills/.
2. Режим «сделать»: «Добавь аккуратную анимацию появления и закрытия для этого модального окна» или «Сделай анимированное уведомление для этого дашборда». Скилл сначала уточнит тип проекта и подберёт характер анимации, потом напишет компонент на React, Framer Motion, CSS или HTML.
3. Режим «проверить»: «Проведи аудит анимаций в этом проекте». Скилл найдёт места, где интерфейс должен анимироваться, но не анимируется, и типичные ИИ-анимации: пульсацию, размытие на каждом появлении, увеличение при наведении на всём подряд. Отчёт с демо сохранится в HTML в папку motion-audits/ и откроется в браузере. Нужен отчёт прямо в терминале: добавь --terminal.

Как собрать сайт со всеми пятью

1. Положи DESIGN.md в корень проекта: готовую систему из шага 3 или стиль понравившегося сайта из шага 4.
2. Открой Claude Code в папке проекта и отправь промпт:

«Прочитай DESIGN.md в корне проекта и держись его цветов, шрифтов и компонентов. Собери лендинг для моего продукта: что за продукт, для кого он и какое главное действие на странице. Используй ui-ux-pro-max, чтобы выбрать структуру страницы и пройти чек-лист перед сдачей. Используй design-taste-frontend, чтобы не было шаблонных решений. Используй design-motion-principles для анимации появления блоков и наведения.»

3. Когда страница готова: «Проведи аудит анимаций на этой странице и исправь всё из разделов Critical и Important».
4. Если результат всё равно выглядит типовым: «Используй redesign-existing-projects и переделай страницу, сохранив DESIGN.md».

Если что-то не работает

• /plugin не распознаётся - обнови Claude Code: через Homebrew brew upgrade claude-code, при установке скриптом повтори команду установки.
• npx: command not found - не установлен Node.js, поставь его и открой терминал заново.
• uipro: command not found - поставь пакет ui-ux-pro-max-cli, а не uipro-cli.
• UI UX Pro Max не выдаёт дизайн-систему - проверь python3 --version, без Python 3 поиск по базе не работает.
• getdesign не заменил старый DESIGN.md - новый файл лежит во вложенной папке, повтори команду с --force.
• Скилл не срабатывает - проверь, что в .claude/skills/ или ~/.claude/skills/ есть папка скилла с файлом SKILL.md, перезапусти Claude Code и назови скилл в промпте.