25 GitHub-репозиториев для UI-дизайна с Claude Code и Codex

Попросить Claude Code или Codex «сделать красиво» легко. Сложнее добиться, чтобы результат не сводился к привычной комбинации градиента, крупного заголовка и одинаковых карточек. Агенту помогают конкретные ориентиры: визуальное направление, макет, правила дизайн-системы и проверяемые компоненты.

Мы собрали 25 GitHub-проектов для разных этапов этой работы. Одни передают агенту рекомендации по дизайну, другие связывают его с Figma или Penpot, третьи предлагают компоненты и средства проверки. Подборка сгруппирована по этапам: от выбора визуального направления до готового интерфейса. Часть проектов подключается через Skills или MCP, остальные дают библиотеки и редакторы для совместной работы с агентом. Совместимость и условия доступа у каждого проекта свои.

Задать визуальное направление и правила

1. Frontend Design от Anthropic — задать интерфейсу собственный характер

Frontend Design — навык из официального репозитория Anthropic. Он помогает агенту сначала определить визуальную идею и выразительные детали, а затем воплотить их в коде. Навык полезен, когда задача сформулирована широко и хочется избежать безликой страницы по типичному шаблону. Устанавливать его нужно в формате, который поддерживает выбранный агент.

2. Stitch Skills от Google Labs — перенести работу между макетом и кодом

Stitch Skills — набор навыков для Google Stitch и его MCP-сервера. С их помощью агент может создавать и изменять экраны по тексту или изображению, извлекать описание дизайн-системы в DESIGN.md, а затем преобразовывать экраны Stitch в React-компоненты. Репозиторий поддерживает Codex и Claude Code, но сами навыки требуют настроенного Stitch MCP и учётных данных. Это отдельный проект Google Labs, а не самостоятельное приложение для рисования интерфейсов.

3. UI UX Pro Max — палитры, шрифты и правила под разные продукты

UI UX Pro Max помогает агенту подбирать структуру страницы, цветовую палитру, типографику и визуальный стиль с учётом типа продукта. В репозитории описаны 192 палитры, 74 сочетания шрифтов, наборы стилей и более сотни рекомендаций по UX. Навык поддерживает несколько сред разработки, включая Claude Code и Codex. Эти справочники дают отправную точку; финальные решения всё равно нужно сверить с брендом и задачей.

4. Impeccable — команды для доработки и критики интерфейса

Impeccable добавляет к агенту словарь конкретных команд: например, попросить отполировать экран, провести критику или сделать стиль смелее. В репозитории перечислены 24 команды и 59 автоматических правил, которые обнаруживают типовые дизайнерские и технические проблемы. Инструмент также помогает агенту изучить проект и оформить его правила в DESIGN.md. Проверки по детерминированным правилам работают без отдельного вызова модели.

5. Agent Skills от Vercel — проверить готовый интерфейс

Agent Skills — официальный набор навыков Vercel для ИИ-агентов. Для ревизии интерфейса пригодится web-design-guidelines: он проверяет код более чем по 100 правилам доступности, производительности и удобства. Такой навык уместен после вёрстки или перед выпуском: он помогает найти проблемы, которые не видны на одном удачном скриншоте.

6. Superdesign Skill — подготовить варианты макета

Superdesign Skill помогает агенту превращать текстовое задание в визуальные концепции и компоненты. Актуальный вариант проекта — именно отдельный репозиторий навыка; прежнее расширение Superdesign авторы больше не развивают. Перед установкой навыка проверьте, поддерживает ли выбранный агент формат Agent Skills.

7. Better Design — применить правила дизайн-системы

Better Design объединяет MCP-сервер и каталог дизайн-систем для интерфейсов на shadcn/ui. Агент может получать сведения о цветах, типографике, компонентах и правилах доступности, чтобы новые страницы соответствовали уже принятому стилю продукта. Для работы потребуется настроить MCP-клиент и выбрать подходящую систему.

8. Design Taste — выбрать направление до работы над деталями

Design Taste — набор навыков, которые предлагают сначала определить визуальное направление, а затем переходить к компонентам и оформлению. В репозитории есть стилевые примеры — от редакционного минимализма до индустриальной графики. Авторы указывают Claude Code и Codex среди поддерживаемых агентов.

Набросать идею и работать на интерактивном холсте

9. Excalidraw MCP — превратить запрос в редактируемую схему

Excalidraw MCP передаёт агенту холст Excalidraw: тот может создавать схемы в нарисованном от руки стиле, а человек — открыть их на весь экран и продолжить редактирование. Это удобный промежуточный шаг для карты экранов, пользовательского сценария или обсуждения идеи до начала вёрстки. Интеграция рассчитана на клиенты, поддерживающие MCP Apps.

10. tldraw — собрать собственный холст с поддержкой агентов

tldraw — SDK для создания бесконечных холстов на React. В репозитории есть стартовые шаблоны для приложений с ИИ-агентами: они могут читать содержимое холста, интерпретировать его и менять. Чтобы связать такой холст со своим агентом, можно использовать шаблон Agent и адаптировать его под приложение.

Связать ИИ-агента с макетом в Figma или Penpot

11. Figma MCP Server Guide — официальный мост от макета к коду

Figma MCP Server Guide — официальный репозиторий с инструкциями по MCP-серверу Figma. Подключённый агент может получить контекст выбранного фрейма, переменные, компоненты и данные о расположении элементов, а затем написать код по макету. Удалённый сервер также умеет создавать и редактировать объекты на холсте Figma; эта возможность обозначена как бета. Доступ и лимиты вызовов зависят от типа учётной записи Figma.

12. Figma-Context-MCP — передать агенту структуру макета

Figma-Context-MCP, известный также как Framelink MCP for Figma, преобразует данные Figma в контекст, который проще использовать агенту при написании интерфейса. Сервер передаёт структуру выбранного фрейма, размеры и сведения об оформлении элементов. Проект изначально ориентирован на Cursor; для доступа к данным Figma понадобится токен API.

13. TalkToFigma от Grab — читать и менять файл Figma через MCP

TalkToFigma соединяет MCP-сервер, плагин Figma и локальный WebSocket-сервер. Агент может читать выбранные элементы, получать информацию о документе и программно менять содержимое Figma. В репозитории перечислены Cursor, Claude Code и Codex. Для настройки нужно установить плагин в Figma и запустить сервер; это сторонняя интеграция, отдельная от официального MCP-сервера Figma.

14. Penpot — открыть дизайн-систему через MCP

Penpot — открытая платформа для проектирования интерфейсов с собственным MCP-сервером. Он связывает дизайн и код, позволяя подключать ИИ-агентов к рабочему пространству и автоматизировать операции с макетами. Penpot можно развернуть самостоятельно; поэтому проект интересен командам, которым важно управлять размещением и доступом к данным.

Собрать интерфейс из компонентов и проверить его

15. shadcn/ui — искать и добавлять компоненты из реестров

shadcn/ui — набор доступных компонентов, исходный код которых можно добавлять и менять в своём проекте. MCP-сервер умеет искать и устанавливать компоненты из основного, сторонних и частных реестров. Официальный CLI помогает настроить сервер для Claude Code, Codex, Cursor и других клиентов.

16. UI Layouts — готовые блоки для React

UI Layouts предлагает компоненты, эффекты и блоки для веб-интерфейсов: от кнопок и каруселей до раскрытия изображений и анимированных фонов. Основной стек — React и Tailwind CSS. Перед переносом компонента в проект попросите агента сверить зависимости, версии библиотек и существующие правила стилей.

17. Hyperiux Components — анимированные компоненты для Next.js

Hyperiux Components — коллекция интерактивных элементов и эффектов для Next.js. Компоненты можно добавить командой CLI, после чего их исходный код остаётся в проекте и доступен для правок. В репозитории есть бесплатные и платные материалы, поэтому перед использованием конкретного элемента проверьте его условия лицензирования.

18. Motion Primitives — выбрать и установить нужную анимацию

Motion Primitives позволяет просматривать и добавлять в React-проект отдельные анимированные компоненты: диалоги, аккордеоны, карусели, эффекты наведения и анимации текста. CLI копирует исходники компонента в проект и устанавливает необходимые зависимости. Такой подход оставляет реализацию под контролем команды.

19. Cursify — эффекты указателя для React и Next.js

Cursify собирает анимации и эффекты, связанные с курсором и наведением. Они могут дополнить портфолио или интерактивную галерею. Проверьте, что важные действия остаются доступны с клавиатуры и на сенсорных экранах: там нет привычного наведения указателя.

20. Trickle UI Kit — анимировать текст средствами CSS

Trickle UI Kit — набор текстовых эффектов для React в формате, совместимом с каталогом shadcn. Компоненты преимущественно используют CSS-анимации. При включённой настройке уменьшения движения эффекты следует отключать или упрощать.

21. Paper Shaders — добавить графические эффекты на GPU

Paper Shaders — библиотека настраиваемых шейдеров для фонов, фигур, масок и текста. Есть пакеты для React и обычного JavaScript; цветами и параметрами искажения можно управлять из кода. Эффекты лучше проверять на телефонах и слабых устройствах: графическая нагрузка зависит от выбранного шейдера и его настроек.

22. Canvas UI — эффекты WebGL поверх HTML-интерфейса

Canvas UI предлагает графические эффекты, например искажение стекла и жидкие формы, для React, Vue, Svelte и обычного JavaScript. Canvas и WebGL/WebGPU используются рядом с HTML, поэтому текст остаётся выделяемым, а ссылки — нажимаемыми. Для сложных эффектов стоит предусмотреть упрощённый вариант и проверить поведение в целевых браузерах.

23. 21st MCP — каталог компонентов вместо прежнего Magic MCP

Magic MCP сменил название: актуальный сервис называется 21st MCP, а этот репозиторий сохраняет совместимость со старыми настройками и публикует плагин. Через сервер можно искать React- и Tailwind-компоненты и, при включённом доступе к генерации, создавать варианты интерфейса. Для подключения нужен новый ключ и настройка через CLI 21st; старые ключи Magic больше не подходят.

24. Storybook — дать агенту контекст уже существующих компонентов

Storybook помогает разрабатывать и документировать компоненты отдельно от приложения. Его MCP-интеграция может передавать агенту сведения о компонентах и документации, помогать создавать истории и запускать проверки взаимодействий и доступности. В документации Storybook AI-возможности обозначены как предварительная версия, поэтому интерфейс и набор функций могут измениться.

25. Onlook — править Next.js-интерфейс визуально и в коде

Onlook — визуальный редактор, который связывает элементы интерфейса с исходным кодом React-приложения. Можно выбрать объект в браузерном предпросмотре, изменить его стиль и увидеть правку в коде. Проект в первую очередь рассчитан на Next.js и Tailwind CSS; hosted-версия находится в раннем доступе, а репозиторий содержит открытый редактор и его исходники.

Как собрать рабочий процесс из этих проектов

Для начала выберите навык, который задаст направление, например Frontend Design, Impeccable или UI UX Pro Max. Если макет уже существует, подключите Figma MCP или Penpot. Для повторяемых элементов используйте компоненты shadcn/ui и документацию Storybook, а Vercel Agent Skills — для проверки доступности, производительности и удобства.

Не каждый проект нужно подключать к агенту: библиотеку компонентов можно просто изучить и перенести подходящий код. Перед установкой проверьте лицензию, требования к API-ключу и доступу к файлам макета. Совместимость интерфейсов также зависит от настроек MCP-клиента и его версии.

Если нужны и другие ресурсы для разработки с ИИ, посмотрите нашу подборку инструментов и материалов для вайб-кодинга.