AI UI Designer Logo
AI UI Designer

Проектирование сервиса ИИ-изображений · SVG-макеты

UI-кит для генерации изображений: продумайте сервис до разработки

Этот UI-кит помогает независимым разработчикам и продуктовым командам связать ввод запроса, просмотр результатов, историю и выбор тарифа. Начните с готовых макетов и проверьте переходы между задачами. Затем измените тексты, расположение элементов и тему SVG с помощью бесплатного AI UI Designer Skill в Codex или Claude Code.

Входит в действующую платную подписку. Кредиты не списываются.

Посмотреть все макеты

Статичные SVG-макеты · Примеры текстов на китайском · Без кода приложения

Светлый макет рабочей области с полем запроса, параметрами генерации и карточками результатов
Рабочая область из пакета · Светлая тема
Страницы для компьютера
6
Цветовые темы
2
Мобильные примеры
2
Редактируемые исходники
SVG

Проверьте сценарий от первого запроса до управления аккаунтом

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

Светлый макет главной с описанием продукта, галереей и шагами использования

Главная страница

Расположите описание сервиса, примеры изображений и вход в генерацию.

Макет авторизации с полями входа и подсказкой о регистрации

Вход и регистрация

Изучите форму входа, а регистрацию и ошибки сверьте с доской состояний.

Макет генерации с панелью запроса, настройками и карточками изображений

Рабочая область генерации

Разместите запрос, модель, пропорции, число изображений, стоимость и результаты.

Макет истории с поиском, карточками и подробностями выбранного изображения

История изображений

Проверьте поиск, детали, повторное использование параметров и подтверждение удаления.

Светлый макет тарифов с балансом кредитов и тремя вымышленными вариантами

Тарифы и кредиты

Изучите баланс, примеры тарифов и макеты результата покупки.

Макет аккаунта с полями профиля и сообщением о сохранении

Настройки аккаунта

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

В превью сохранены китайские примеры текстов и вымышленные данные. Кнопки, формы и экраны покупки — статичные макеты.

Предусмотрите ожидание, ошибки и пустую историю

В ZIP собраны страницы, компоненты и описание сценария. Их можно использовать для сверки изменений между экранами сервиса.

Исходные SVG для редактирования

Меняйте текст, фигуры и компоновку под свой продукт. Сохраните оригинальный пакет, а правки вносите в рабочую копию.

Сначала структура, затем цвет

Макеты дополнены JSON-файлами тем: 2. Оцените иерархию информации на каркасах, а затем выберите светлое или тёмное оформление.

Компоненты и состояния интерфейса

Есть кнопки, поля, списки выбора, карточки и диалоги, а также состояния генерации, пустой истории, нехватки кредитов, ошибки входа и неудачной оплаты.

Понятный объём мобильных примеров

Рабочая область и история нарисованы шириной 390px. Для остальных страниц мобильное поведение описано в сценарии; отдельных мобильных макетов нет.

Импортируйте ZIP и задайте изменения для своего продукта

Для импорта используется бесплатный Skill. Вспомогательным скриптам нужен Python 3.9 или новее.

  1. 1

    Скачайте пакет по подписке

    Войдите в аккаунт с действующей платной подпиской AI UI Designer. При скачивании пакета кредиты генерации не расходуются.

  2. 2

    Передайте Skill локальный путь к ZIP

    Установите AI UI Designer Skill в Codex или Claude Code и попросите ассистента импортировать ZIP по пути к файлу на вашем компьютере.

  3. 3

    Опишите правки и проверьте SVG

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

Пример запроса: иллюстрации для карточек товаров

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

Начать с требований или использовать готовые макеты?

Бесплатный Skill позволяет создавать дизайн по требованиям, импортировать пакеты и применять темы. Действующая платная подписка нужна для скачивания этого набора страниц с сайта.

Создать дизайн по своим требованиям
Бесплатный Skill · Бесплатно
Импортировать пакеты и применять темы
Бесплатный Skill · Бесплатно
Скачать этот набор страниц
Сценарный пакет · Действующая платная подписка
Использовать скачанные файлы локально
Сценарный пакет · Также после окончания подписки
FAQ

Что входит в пакет и что потребуется разработать

Файлы, язык макетов и условия скачивания — до начала работы.

Сначала проверьте сценарий, затем адаптируйте макеты

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

Скачать SVG-макеты

Входит в действующую платную подписку. Кредиты не списываются.