AI UI Designer Logo
AI UI Designer

Согласуйте экран до начала разработки

Бесплатный скилл для UI-дизайна в Codex и Claude Code

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

Скачивание без входа. Результат — статичный SVG; доступ к помощнику и использование моделей оплачиваются отдельно.

От задачи к понятной структуре

Сначала расположите поля и действия, затем подберите шрифты, отступы и цвета.

SVG-вайрфрейм с полями товара, размерами, кнопкой генерации и четырьмя карточками результатов
02 Проверьте вайрфрейм
Цветной SVG-макет с фиолетовыми элементами управления и постерами товаров в бутылках
03 Уточните UI-дизайн

Один экран: от структуры к оформлению

На примере инструмента для постеров показан бесплатный процесс без платного набора сцен. Оба SVG сохраняют поля товара, выбор размера и сетку результатов. Откройте файлы и сравните.

01 Опишите задачу

Используй скилл ai-ui-designer.
Спроектируй инструмент для постеров товаров: название, преимущества, выбор размера, кнопка генерации и сетка результатов.

Укажите, что должен сделать пользователь и какие данные нужны.

02 Проверьте вайрфрейм

SVG-вайрфрейм с полями товара, размерами, кнопкой генерации и четырьмя карточками результатов
Оцените состав полей, основное действие и место для результатов.
Открыть SVG

03 Уточните UI-дизайн

Цветной SVG-макет с фиолетовыми элементами управления и постерами товаров в бутылках
Сохраните согласованную структуру, уточняя типографику, отступы и цвета.
Открыть SVG

Установите скилл и создайте первый вайрфрейм

Скачайте и распакуйте ZIP. Поместите папку ai-ui-designer в каталог скиллов вашей среды Codex или Claude Code.

  1. 1.Разместите файлы

    Файл SKILL.md должен лежать прямо в ai-ui-designer. В архив входят инструкции по дизайну, справочные материалы и вспомогательные скрипты.

    Codex
    ~/.agents/skills/ai-ui-designer/
    Claude Code
    ~/.claude/skills/ai-ui-designer/

    Проверьте, не появилась ли лишняя вложенная папка при распаковке.

  2. 2.Укажите цель и основное действие

    Вызовите скилл и опишите страницу, аудиторию и обязательные блоки.

    Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

Создай SVG-вайрфрейм главной страницы продукта с ценностным предложением, функциями и регистрацией.

  3. 3.Откройте SVG и запросите правки

    Проверьте файл в браузере или просмотрщике SVG. Попросите конкретное изменение: выделить заголовки или увеличить отступ у главной кнопки.

    Если скилл не виден, проверьте путь и SKILL.md. Codex обнаруживает изменения автоматически; при необходимости перезапустите его. В Claude Code проверьте меню /.

Нужен собственный доступ к помощнику и моделям. Локальным скриптам для наборов требуется Python 3.9 или новее. Для скачивания дополнительных наборов с сайта нужна активная платная подписка.

Решайте задачи дизайна поэтапно

Сначала информационная структура

Расположите контент, поля и действия в сером вайрфрейме.

Затем визуальное оформление

Настройте шрифты, отступы, цвета и изображения на согласованной основе.

Продолжайте работу с тем же макетом

Храните SVG в проекте и передавайте помощнику конкретные замечания по мере уточнения требований.

Что входит в бесплатную загрузку

Начните со своих требований

Скилл включает вайрфреймы, цветной UI-дизайн, применение тем и локальное управление наборами.

Наборы сцен — дополнительные референсы. Для бесплатного процесса они не обязательны.

Статичные макеты для обсуждения

Результат — SVG-файлы и рекомендации по дизайну. Нарисованные кнопки не выполняют вход, оплату или генерацию изображений.

Разработка приложения — отдельная задача. Доступность помощника и стоимость моделей зависят от условий соответствующего инструмента.

Перед началом работы

Нужна ли подписка или набор сцен?
Скилл скачивается бесплатно и работает с вашими требованиями. Только скачивание дополнительных наборов с этого сайта требует активной платной подписки.
Как вызвать скилл в обоих помощниках?
После установки в нужный каталог используйте $ai-ui-designer в Codex или /ai-ui-designer в Claude Code и опишите задачу.
Получится ли работающее приложение?
Этот процесс создает статичные SVG-вайрфреймы и UI-макеты. Код приложения, серверная часть и реальные взаимодействия требуют отдельной реализации.
Почему помощник не видит скилл?
Проверьте путь и наличие SKILL.md прямо в ai-ui-designer. При необходимости перезапустите Codex; в Claude Code найдите /ai-ui-designer.

Начните следующую страницу с понятного макета

Установите бесплатный скилл для UI-дизайна и превратите требования в SVG, который можно проверить и уточнить до разработки.

Скачать скилл бесплатноВернуться к установке