ШПАРГАЛКА ПО ФОРМУЛАМ
ШПАРГАЛКА ПО мини-приложениям
ГДЕ БРАТЬ ИДЕИ ДЛЯ ВДОХНОВЕНИЯ

Использую сервисы:

SYNTX - для генерации
Промт для дизайна мини-приложения для вдохновения
Создай полный современный UI-kit для мини-приложения, используя присланный логотип и/или фирменные элементы как основу визуального стиля бренда. Подбери цвета, шрифты и визуальные элементы на основе логотипа, а также информации о компании, чтобы интерфейс выглядел гармонично, современно и профессионально.

Информация о компании (обязательно для подбора визуального стиля):

Чем занимается компания: (кратко опишите сферу деятельности, продукты или услуги, целевую аудиторию, атмосферу бренда)
Пример: «Компания организует гастрономические вечера с дегустациями, акцент на еду, блюда, уютную тёплую атмосферу для взрослых»
Эмоциональные ориентиры бренда: (какие чувства должны вызывать интерфейс и визуалы: тепло, доверие, радость, спокойствие, азарт и т.д.)
Целевая аудитория: (возраст, интересы, потребности)
Тональность визуального стиля: (игривый, строгий, минималистичный, премиальный, мультяшный, корпоративный и т.д.)

Используй эту информацию вместе изображением для подбора:

основных и акцентных цветов, чтобы гармонировать с логотипом и сферой деятельности;
декоративных элементов, иллюстраций, иконок;
общей атмосферы интерфейса, подчеркивающей характер бренда.

Стиль интерфейса: дружелюбный, современный, чистый, эстетичный, с учётом целей приложения. Интерфейс должен быть мобильным (mobile-first), удобным, интуитивно понятным, с акцентом на визуальное восприятие основных действий пользователя и логичную навигацию.

Требования к UI-kit:

Цветовая система:

Основные цвета из логотипа и фирменных элементов
Дополнительные акцентные цвета для действий, статусов, уведомлений
Цвета должны учитывать характер компании и создавать нужные эмоции (например, тёплые оттенки для еды, гостеприимной атмосферы)
Нейтральные цвета для текста и фонов

Типографика:

Чёткие, хорошо читаемые шрифты (sans-serif или rounded, в зависимости от логотипа и характера приложения)
Заголовки, подписи, тексты кнопок, вспомогательные тексты
Высокая контрастность и доступность

Основные компоненты:

Кнопки: primary, secondary, ghost, disabled, icon button
Карточки контента (товары, события, элементы интерфейса)
Прогресс-бары, бейджи, индикаторы статусов
Навигационные элементы: таб-бары, header, боковые меню
Поля ввода, чекбоксы, радиокнопки, переключатели, выпадающие списки
Модальные окна, всплывающие подсказки, уведомления
Аватары, профили, карточки действий, пустые и загрузочные состояния
Экраны ошибок и уведомлений

Иллюстративные и декоративные элементы:

Иконки в стиле, гармонирующем с логотипом и сферой деятельности
Мини-иллюстрации или декоративные элементы, связанные с тематикой компании
Мягкие тени, скругления, визуальные акценты на интерактивных элементах
Возможность использования маскота или персонажей, если они есть

Экраны приложения:

Splash screen / загрузка
Онбординг / первые шаги пользователя
Главная / каталог / основной контент
Экран деталей / карточки
Экран действий / интерактивный контент
Профиль / настройки
Экран уведомлений / достижений
Пустые состояния, экраны ошибок, загрузочные состояния

Состояния компонентов:
default, pressed, hover (если актуально), active, completed, locked, disabled, empty, success

UX-особенности:

Простая и понятная навигация
Легкость восприятия интерфейса
Акцент на ключевых действиях пользователя
Интуитивно понятные визуальные подсказки
Доступность для разных групп пользователей

Результат:

UI-kit как готовая профессиональная дизайн-система
Отдельные секции с компонентами
6–8 экранов приложения в едином стиле
High-fidelity mobile app design, clean layout grid, pixel-perfect, премиальное визуальное оформление

Технические требования:

Mobile-first
iOS/Android friendly
8pt grid, rounded cards, soft gradients
Современный, чистый, polished visual design
Дизайн легко адаптируется под разные темы и контент приложения
ВАЖНО ЗНАТЬ, ЧТОБЫ НАЧАТЬ

  1. Настраиваем цвета заливки фона в настройках мини-приложения.
  2. Выбираем шрифты для загрузки по ссылке
  3. Просим нейросеть прописывать это при использовании шрифтов
  4. Ссылки перехода от мини-приложения к мини-приложению выглядят так
  5. Можно писать все блоки единым кодом. А можно дробить на отдельные
  6. Меню тоже можно настроить html блоком
Статья будет пополняться материалами
Застряли в проекте? Проблемы с функционалом бота или с его настройкой? Не хватает идей?

Ирина Захарова
Разработчик ботов
Made on
Tilda