# 5 инструментов дизайн-ассистента для Claude

Эти 5 инструментов превращают Claude из генератора шаблонов в нормального дизайн-ассистента.

## Impeccable

- Для чего: дизайн-правила, аудит, polish, критика интерфейса, работа с PRODUCT.md и DESIGN.md.
- Команда: `npx impeccable install`
- Ссылка: https://impeccable.style/tutorials/getting-started/
- GitHub: https://github.com/pbakaus/impeccable

## Playwright

- Для чего: чтобы агент сам проверял сайт в браузере, адаптивы, клики, состояния, ошибки и визуальные проблемы.
- Ссылка: https://playwright.dev/

## Mobbin MCP

- Для чего: реальные экраны приложений как референсы, чтобы Claude понимал не "красиво вообще", а как выглядят сильные интерфейсы в конкретной нише.
- Ссылка: https://docs.mobbin.com/mcp/introduction

## shadcn/ui

- Для чего: готовые доступные компоненты, которые можно забрать в проект как код и адаптировать под свой дизайн.
- Ссылка: https://ui.shadcn.com/docs/components
- GitHub: https://github.com/shadcn-ui/ui

## Magic UI

- Для чего: анимированные компоненты, эффекты, hero-блоки, marquee, glow, particles, bento и другие элементы, чтобы интерфейс не выглядел пустым.
- Ссылка: https://magicui.design/docs/components
- GitHub: https://github.com/magicuidesign/magicui

## Проверка перед использованием

- 01 «Контекст продукта» — сначала дай Claude контекст продукта
- 02 «Референсы» — потом дай референсы через Mobbin
- 03 «Сборка интерфейса» — затем собирай интерфейс на shadcn/ui
- 04 «Анимация» — добавляй Magic UI только там, где анимация усиливает смысл
- 05 «Прогон» — после сборки прогоняй через Playwright и Impeccable.

---

Источник: https://localhost:3000/m/5-instrumentov-dlya-claude-dizajn-assistenta