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

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

## Что ставим

| # | Что | Что делает | Как ставится | Лицензия |
|---|---|---|---|---|
| 1 | UI UX Pro Max | подбирает под тип продукта структуру страницы, палитру, шрифты, эффекты и список того, чего делать нельзя | плагин Claude Code или программа uipro | MIT |
| 2 | Taste Skill | скилл против шаблонного ИИ-дизайна: лендинги, портфолио, редизайн | команда npx skills | MIT |
| 3 | Awesome Claude Design | 68 готовых дизайн-систем в файлах DESIGN.md | файл в проект или загрузка в Claude Design | MIT |
| 4 | design-md-chrome | расширение Chrome: снимает стиль открытого сайта в DESIGN.md или SKILL.md | Chrome Web Store | MIT |
| 5 | Design Motion Principles | скилл анимации: делает анимацию с таймингами и плавностью и проверяет готовую | команда npx skills | MIT |

Все пять бесплатные, с открытым кодом. У 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 и назови скилл в промпте.

---

Источник: https://localhost:3000/m/5-besplatnyh-repozitoriev-dlya-dizayna-v-claude-stavim-po-shagam