Search Results for заголовок
Explore AI generated designs, images, art and prompts by top community artists and designers.
# Финальный промт для агента (Antigravity + Stitch MCP) ## Сайт-визитка: продажа и установка весов для погрузчиков Скопируй весь блок ниже целиком в чат задач агента как первое сообщение проекта. --- ## ПРОМТ ДЛЯ АГЕНТА (копировать с этой строки) Ты — фронтенд-разработчик и веб-дизайнер. Твоя задача: построить одностраничный сайт-визитку (лендинг) компании , которая продаёт и устанавливает весовое оборудование на вилочные погрузчики (весоизмерительные вилы , крановые весы , встраиваемые системы взвешивания , индикаторы , поверка/калибровка). Работай пошагово , по фазам ниже. После каждой фазы показывай результат (код + краткое описание) и жди подтверждения , прежде чем переходить к следующей фазе. Не используй lorem ipsum — весь текст должен быть по теме; если данные неизвестны , помечай их `[ЗАПОЛНИТЬ: ...]` явным образом прямо в коде и в комментарии. ### 0. Вводные данные проекта - Название компании: `[ЗАПОЛНИТЬ]` (если не указано — использовать нейтральное «ВесПром» как рабочее название и пометить как временное) - Номер WhatsApp: `[ЗАПОЛНИТЬ: +7XXXXXXXXXX]` - Регион работы: `[ЗАПОЛНИТЬ: город/страна]` - Ассортимент (минимум для карточек каталога , если не дано — использовать этот дефолтный список): 1. Весоизмерительные вилы (грузоподъёмность 1–5 т , точность ±0.5%) 2. Крановые/подвесные весы для интеграции с погрузчиком 3. Встраиваемые весовые системы (монтаж в раму погрузчика) 4. Индикаторы веса и дисплеи (проводные/беспроводные) 5. Поверка и калибровка весового оборудования 6. Сервисное обслуживание и ремонт - Логотип/фото/сертификаты: отсутствуют → генерировать текстовые/иконочные плейсхолдеры , фото заменять описательными alt-текстами и SVG-иллюстрациями/иконками вместо реальных фотографий. - Сайт: **одна страница** , без отдельных подстраниц. - Тип сборки: чистый HTML/CSS/JS , без бэкенда. Все заявки идут через кнопки WhatsApp (`wa.me`) , формы обратной связи не делать. ### 1. Дизайн-система — строгий индустриальный стиль (тёмный , техничный) Зафиксировать как CSS-переменные в начале `styles.css`: ```css :root { /* Фон и поверхности */ --bg-primary: #0E1116; --bg-surface: #171B21; --bg-surface-2: #1F252D; --border-color: #2A313B; /* Акцент — индустриальный оранжевый (сигнальный цвет техники) */ --accent: #FF7A1A; --accent-hover: #FF9142; --accent-muted: rgba(255 , 122 , 26 , 0.12); /* Текст */ --text-primary: #F5F6F7; --text-secondary: #9AA3AD; --text-on-accent: #0E1116; /* Статусы/бейджи */ --success: #3DDC84; /* Радиусы — небольшие , без "мягкого" UI */ --radius-sm: 4px; --radius-md: 8px; /* Шкала отступов */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; } ``` - Шрифт: `Inter` (или `Manrope`) через Google Fonts. Заголовки — 700 , текст — 400/500. - Масштаб типографики: H1 — 48px / mobile 32px; H2 — 32px / mobile 24px; H3 — 22px; body — 16px; small — 14px. Line-height заголовков 1.1–1.2 , текста — 1.5. - Иконки: line-style (обводка , без заливки) , тема — вес/точность/погрузчик/сертификат. Использовать инлайн SVG. - Кнопки: primary — заливка `--accent` , текст `--text-on-accent` , radius `--radius-sm` , без теней , чёткая обводка при hover. Secondary — прозрачная с обводкой `--border-color`. - Общее ощущение: контраст , чёткие линии-разделители секций (border-top 1px `--border-color`) , минимум скруглений , минимум декоративных теней. Сгенерировать через Stitch MCP референс hero-блока по промпту: > "Industrial B2B landing page hero , dark navy/graphite background #0E1116 , orange accent #FF7A1A , bold condensed sans-serif headline , forklift with weighing attachment illustration , minimal rounded corners , trust badges row" Выбрать один вариант , зафиксировать композицию (расположение заголовка/кнопки/иллюстрации) как референс для вёрстки. ### 2. Структура страницы (порядок секций и содержимое) 1. **Header** (sticky , `--bg-surface` с нижней обводкой) - Слева: логотип-плейсхолдер (текст названия компании , шрифт 700). - Справа: пункты меню-якоря (Услуги , Каталог , Как работаем , Кейсы , Контакты) — скрыть в бургер на мобильных. - Кнопка WhatsApp (primary) — крайняя справа. 2. **Hero** - H1: «Весы для погрузчиков под ключ: подбор , монтаж , поверка» - Подзаголовок: 1–2 предложения про скорость и точность монтажа , гарантию. - Кнопка WhatsApp (крупная , primary) — текст «Написать в WhatsApp» + иконка. - Строка доверия под кнопкой: 3 коротких пункта в столбик/строку («Гарантия N лет» , «Выезд по региону `[ЗАПОЛНИТЬ]`» , «Поверка включена»). - Иллюстрация/SVG погрузчика с весами справа (или фон-паттерн , если иллюстрации нет). 3. **Услуги** (4 карточки в сетке , `--bg-surface` фон карточки , border `--border-color`) - Продажа весового оборудования - Монтаж на погрузчик - Поверка и калибровка - Сервис и ремонт - На каждой карточке: иконка , заголовок , 1–2 строки описания. 4. **Каталог** (сетка карточек товаров , 4–6 позиций из списка в п.0) - На карточке: иконка/плейсхолдер-изображение , название , 2–3 ключевые характеристики (грузоподъёмность , точность , IP-класс) , кнопка WhatsApp с текстом `«Интересует {название товара}»` (urlencoded). 5. **Как мы работаем** (степпер/таймлайн , 5 шагов) - Заявка в WhatsApp → Консультация и подбор → Выезд/монтаж → Поверка → Гарантийная поддержка. - Каждый шаг: номер , короткий заголовок , 1 строка описания. 6. **Преимущества** (4–6 пунктов , иконка + короткий текст) - Например: «Гарантия на монтаж» , «Сертифицированное оборудование» , «Опыт работы `[ЗАПОЛНИТЬ]` лет» , «Выезд по региону» , «Поверка включена в стоимость» , «Сервис 24/7» — оставить как варианты , отметить реальные цифры как `[ЗАПОЛНИТЬ]`. 7. **Кейсы** (сетка/карусель из 3 карточек) - Плейсхолдер-описание объекта (склад/производство/логистика) , тип установленного оборудования , результат в 1 фразе. 8. **Сертификаты и документы** (ряд бейджей) - Плейсхолдер-иконки «Сертификат соответствия» , «Свидетельство о поверке» — с пометкой `[ЗАПОЛНИТЬ: реальные документы]`. 9. **Отзывы** (2–3 карточки) - Плейсхолдер-тексты , помечены как черновые. 10. **Финальный CTA-блок** - Крупный заголовок-призыв , крупная кнопка WhatsApp по центру. - Контакты: телефон , email (плейсхолдеры) , адрес/регион. - Карта — встроенный статичный блок-плейсхолдер (реальный embed добавить , когда будет адрес). 11. **Footer** - Название компании , копирайт , повтор кнопки WhatsApp (маленькая) , ссылки на мессенджеры при наличии. **Плавающая кнопка WhatsApp** — fixed , правый нижний угол , видна на всех секциях при скролле , иконка WhatsApp в зелёном кружке (`#25D366`) , лёгкая пульсация (анимация раз в 3–4 сек , без резких эффектов). ### 3. WhatsApp-интеграция (техническая часть) - Формат ссылки: `https://wa.me/<номер_без_плюса_и_пробелов>?text=<urlencoded_текст>` - Номер и дефолтный текст вынести в константы в начале `main.js`: ```js const WHATSAPP_NUMBER = "ЗАПОЛНИТЬ"; // международный формат без + const WHATSAPP_DEFAULT_TEXT = "Здравствуйте! Интересуют весы для погрузчика , хочу проконсультироваться"; ``` - Все ссылки — `target="_blank" rel="noopener noreferrer"`. - Для карточек каталога текст сообщения формируется динамически: `Здравствуйте! Интересует ${имя_товара} , хочу проконсультироваться`. ### 4. Технические требования - Адаптив mobile-first , брейкпоинты: 375 / 768 / 1024 / 1440. - Изображения — webp , `loading="lazy"` (кроме hero-изображения). - Контраст текста — проверить на соответствие WCAG AA (особенно `--text-secondary` на `--bg-primary`). - Кросс-браузерность: Chrome , Safari , Firefox. - Favicon , `sitemap.xml` , `robots.txt`. ### 5. SEO и метаданные - `<title>`: «Весы для погрузчиков — продажа , монтаж , поверка [Регион]» - `meta description`: 1–2 предложения с УТП и регионом. - OG-теги (og:title , og:description , og:image — hero-изображение). - H1 — один на странице (см. Hero). - Alt-тексты у всех изображений/иконок. - Микроразметка `schema.org`: `LocalBusiness` (общие данные компании) + `Product` для каждой карточки каталога. ### 6. Порядок выполнения (для модели Flash 3.6 Medium — дробить по шагам) Выполнять и показывать результат по одному пункту за раз , не объединяя несколько секций в один ответ: 1. Скелет HTML + подключение CSS-переменных из раздела 1. 2. Header + мобильное меню + плавающая кнопка WhatsApp. 3. Hero-секция. 4. Секция «Услуги». 5. Секция «Каталог». 6. Секция «Как мы работаем». 7. Секция «Преимущества». 8. Секция «Кейсы». 9. Секция «Сертификаты». 10. Секция «Отзывы». 11. Финальный CTA-блок + Footer. 12. SEO-метатеги , favicon , sitemap.xml , robots.txt. 13. Финальная проверка: адаптив на 4 брейкпоинтах , контраст , все wa.me-ссылки , lazy-loading изображений. ### 7. Чек-лист приёмки (сверить перед сдачей) - [ ] Все `[ЗАПОЛНИТЬ]`-плейсхолдеры собраны в единый список в комментарии наверху `index.html` для удобной правки. - [ ] Все кнопки/ссылки ведут на корректный `wa.me` с правильным текстом. - [ ] Плавающая кнопка WhatsApp не перекрывает контент на мобильных (проверить над footer). - [ ] Ни одной формы обратной связи в коде нет. - [ ] Адаптив проверен на 375/768/1024/1440. - [ ] Цветовая схема соответствует разделу 1 (никаких случайных цветов вне палитры). - [ ] Lorem ipsum отсутствует — весь текст по теме. ## КОНЕЦ ПРОМТА (копировать до этой строки) ,
Страница 1 (Левая): Визуальный конструктор «Здание Парламента» Заголовок: HOUSES OF PARLIAMENT: WHO SITS WHERE? Подзаголовок: Fill in the blanks on the diagram using the word bank below. Визуал: Стилизованная , но анатомически верная схема Вестминстерского дворца в разрезе. Никакого сложного рисунка , только прямоугольники и стрелки. · В центре — большая комната с надписью CENTRAL LOBBY (она уже подписана , чтобы было за что зацепиться). · Слева от нее — зал с рядами зеленых скамеек , расположенных друг напротив друга. · Справа — зал с рядами красных скамеек и большим золотым троном в торце. Задание: На схеме 5 пустых плашек (A , B , C , D , E) , куда нужно вписать термин из «Банка слов». Банк слов (Word Bank): 1. House of Commons Chamber 2. House of Lords Chamber 3. The Woolsack 4. The Sovereign's Throne 5. Strangers' Gallery Цель упражнения: Ученик должен не просто знать перевод , а понимать пространственную логику: · Зеленые скамейки = Commons (A). · Красные скамейки = Lords (B). · Трон только в Палате Лордов (C). · Мешок с шерстью (Woolsack) — там , где сидит Лорд-спикер , прямо перед троном (D). · Галерея для публики есть в обеих палатах , но подписать нужно хотя бы одну (E). ,
Страница 1 (Левая): Визуальный конструктор «Здание Парламента» Заголовок: HOUSES OF PARLIAMENT: WHO SITS WHERE? Подзаголовок: Fill in the blanks on the diagram using the word bank below. Визуал: Стилизованная , но анатомически верная схема Вестминстерского дворца в разрезе. Никакого сложного рисунка , только прямоугольники и стрелки. · В центре — большая комната с надписью CENTRAL LOBBY (она уже подписана , чтобы было за что зацепиться). · Слева от нее — зал с рядами зеленых скамеек , расположенных друг напротив друга. · Справа — зал с рядами красных скамеек и большим золотым троном в торце. Задание: На схеме 5 пустых плашек (A , B , C , D , E) , куда нужно вписать термин из «Банка слов». Банк слов (Word Bank): 1. House of Commons Chamber 2. House of Lords Chamber 3. The Woolsack 4. The Sovereign's Throne 5. Strangers' Gallery Цель упражнения: Ученик должен не просто знать перевод , а понимать пространственную логику: · Зеленые скамейки = Commons (A). · Красные скамейки = Lords (B). · Трон только в Палате Лордов (C). · Мешок с шерстью (Woolsack) — там , где сидит Лорд-спикер , прямо перед троном (D). · Галерея для публики есть в обеих палатах , но подписать нужно хотя бы одну (E). ,
Страница 1 (Левая): Визуальный конструктор «Здание Парламента» Заголовок: HOUSES OF PARLIAMENT: WHO SITS WHERE? Подзаголовок: Fill in the blanks on the diagram using the word bank below. Визуал: Стилизованная , но анатомически верная схема Вестминстерского дворца в разрезе. Никакого сложного рисунка , только прямоугольники и стрелки. · В центре — большая комната с надписью CENTRAL LOBBY (она уже подписана , чтобы было за что зацепиться). · Слева от нее — зал с рядами зеленых скамеек , расположенных друг напротив друга. · Справа — зал с рядами красных скамеек и большим золотым троном в торце. Задание: На схеме 5 пустых плашек (A , B , C , D , E) , куда нужно вписать термин из «Банка слов». Банк слов (Word Bank): 1. House of Commons Chamber 2. House of Lords Chamber 3. The Woolsack 4. The Sovereign's Throne 5. Strangers' Gallery Цель упражнения: Ученик должен не просто знать перевод , а понимать пространственную логику: · Зеленые скамейки = Commons (A). · Красные скамейки = Lords (B). · Трон только в Палате Лордов (C). · Мешок с шерстью (Woolsack) — там , где сидит Лорд-спикер , прямо перед троном (D). · Галерея для публики есть в обеих палатах , но подписать нужно хотя бы одну (E). ,
Страница 1 (Левая): Визуальный конструктор «Здание Парламента» Заголовок: HOUSES OF PARLIAMENT: WHO SITS WHERE? Подзаголовок: Fill in the blanks on the diagram using the word bank below. Визуал: Стилизованная , но анатомически верная схема Вестминстерского дворца в разрезе. Никакого сложного рисунка , только прямоугольники и стрелки. · В центре — большая комната с надписью CENTRAL LOBBY (она уже подписана , чтобы было за что зацепиться). · Слева от нее — зал с рядами зеленых скамеек , расположенных друг напротив друга. · Справа — зал с рядами красных скамеек и большим золотым троном в торце. Задание: На схеме 5 пустых плашек (A , B , C , D , E) , куда нужно вписать термин из «Банка слов». Банк слов (Word Bank): 1. House of Commons Chamber 2. House of Lords Chamber 3. The Woolsack 4. The Sovereign's Throne 5. Strangers' Gallery Цель упражнения: Ученик должен не просто знать перевод , а понимать пространственную логику: · Зеленые скамейки = Commons (A). · Красные скамейки = Lords (B). · Трон только в Палате Лордов (C). · Мешок с шерстью (Woolsack) — там , где сидит Лорд-спикер , прямо перед троном (D). · Галерея для публики есть в обеих палатах , но подписать нужно хотя бы одну (E). ,
На снимке экрана показано меню настроек «Уведомления» в темной теме на планшете. Слева находится вертикальное меню с вкладками «Уведомления» (выделено синим) и «Настройки» (белое). Справа расположена основная панель настроек. Заголовок — «Уведомления». Под заголовком находится переключатель «Режимы вождения» (Notification on driving mode change) в положении «вкл.». Ниже находится кнопка «Предварительный просмотр уведомления» синего цвета. Под ней есть три раздела с переключателями: «Выбор темы» (светлая , темная , система) — выбрана светлая (синяя). «Размер уведомления» (большой , нормальный , маленький) — выбран нормальный (синий). «Тип уведомления» (значок , текст , оба) — выбрано оба (синий). В самом низу находится раздел «Положение на экране» с тремя квадратами. Центральный квадрат отмечен галочкой. В правом верхнем углу всплывает уведомление с иконкой финишного флага и надписью «Sport» (Driving mode changed). Сделай его минималистичным , красивым ,
Тип баннера: Статичный имиджево-информационный для социальной сети (ВКонтакте , Instagram лента). Цель: Побудить к переходу на сайт/приложение для выбора букета. Спецификация (техническое задание для дизайна): Соотношение сторон: 1:1 (квадратный , универсальный для ленты) или 16:9 (для историй). Цветовая гамма: Нежные , пастельные тона (пыльная роза , мятный , светло-бежевый) , чтобы не перебивать главное — цветы. Возможен контрастный яркий акцент (например , кнопка). Структура и элементы макета: Фон: Плавный градиент от светло-розового к светло-персиковому. Или текстура мягкой крафтовой бумаги , чтобы создать ощущение уюта и ручной работы. Основное изображение (Центр композиции): Крупным планом , чуть сбоку , стильная ваза или крафтовая упаковка с очень красивым , модным букетом. Важно: цветы должны выглядеть не «кладбищенски» , а живо , художественно , с хорошей глубиной резкости (размытый фон). Из букета как бы «вылетает» или парит один лепесток или мелкий цветочек — это добавит динамики. Текстовая часть (иерархия): Заголовок (крупно , самым сочным шрифтом): Букет за 2 часа? Легко. Подзаголовок (мельче , но читаемо): Более подробно о выгоде/сервисе. Например: Бесплатная доставка по городу при заказе от 2000₽ или Более 500 проверенных флористов. Логотип: В верхнем или нижнем углу четкий логотип Flowwow (узнаваемый фирменный знак). Кнопка призыва к действию (CTA): Яркая кнопка (например , насыщенного розового или контрастного белого цвета) с закругленными краями. Текст на кнопке: Выбрать букет или Заказать. Рядом с кнопкой можно добавить мелкую иконку корзины или подарка. Текст для баннера: Заголовок: Букет за 2 часа? Легко. Текст: Тысячи букетов от местных флористов. Быстрая доставка по городу. Кнопка: Выбрать подарок ,
Шаг 1: Установите режим и будьте ему верны•Проблема: Хаотичный график разрушает циркадные ритмы , сокращая глубокую и REM-фазу.•Решение: Старайтесь ложиться и вставать в одно и то же время даже на выходных (разница не более 1 часа).•Ожидаемый результат: Облегчение засыпания , стабилизация и углубление структуры сна.Шаг 2: Встречайте утро светом•Проблема: Недостаток дневного света сбивает внутренние часы.•Решение: В течение 30 минут после пробуждения выйдите на яркий свет (лучше солнечный).•Ожидаемый результат: «Перезагрузка» циркадного ритма , легкое пробуждение.Шаг 3: Создайте «цифровой закат»•Проблема: Синий свет от экранов подавляет выработку мелатонина.•Решение: За 1-2 часа до сна отложите смартфон , планшет , выключите ТВ.•Ожидаемый результат: Сокращение времени засыпания , более быстрое погружение в глубокий сон.Шаг 4: Управляйте стимуляторами•Проблема: Кофеин и алкоголь мешают заснуть и разрушают глубокий сон.•Решение: Отказ от кофе , крепкого чая после 14:00-15:00. Алкоголь — не снотворное.•Ожидаемый результат: Уменьшение фрагментации и увеличение доли глубокого сна.Шаг 5: Учитесь «выключать» стресс•Проблема: Тревожные мысли повышают время засыпания и частоту пробуждений.•Решение: «Ритуал остановки»: за 30 мин до сна запишите тревоги в блокнот. Практикуйте дыхательные техники или медитацию.•Ожидаемый результат: Повышение ВСР , снижение кортизола , более спокойный и непрерывный сон.Шаг 6: Регулярная активность — ваш союзник•Проблема: Сидячий образ жизни не дает телу естественной усталости.•Решение: Аэробные нагрузки (ходьба , бег , плавание) не менее 30 мин в день. Завершайте тренировки за 2-3 часа до сна.•Ожидаемый результат: Естественное углубление сна , улучшение восстановления (рост ВСР).Шаг 7: Превратите спальню в оазис сна•Проблема: Свет , шум и жара мешают спать.•Решение: Темнота (маска , шторы) , Тишина (беруши) , Прохлада (18-20°C).•Ожидаемый результат: Минимизация беспричинных пробуждений.Шаг 8: Не ворочайтесь в кровати•Проблема: Долгое лежание без сна формирует вредную ассоциацию.•Решение: Не можете уснуть 20-30 минут – встаньте. Займитесь спокойным делом при приглушенном свете. Вернитесь , когда захочется спать.•Ожидаемый результат: Укрепление связи «кровать = сон».Шаг 9: Контролируйте питание и питье перед сном•Проблема: Тяжелая пища или голод мешают заснуть.•Решение: Легкий ужин за 2-3 часа до сна. Если голодны – стакан кефира , банан.•Ожидаемый результат: Комфортное засыпание без физиологического дискомфорта.Шаг 10: Будьте детективом своего сна•Проблема: Не всегда очевидно , что именно мешает сну.•Решение: Ведите простейший дневник сна (время , качество по шкале 1-5 , заметки).•Ожидаемый результат: Выявление индивидуальных триггеров и оценка эффективности изменений.Можешь на основе текста выше сделать буклет с советами по улучшению качества сна? Буклет должен быть на 3 страницы. Первая это заглавная страница , где будет заголовок. На второй как раз советы , а на третей пословицы-поговорки про сон и его полезность ,
Отлично , давайте разработаем концепцию красивого и интуитивно понятного интерфейса для комплексного мониторинга. Я разобью решение на несколько этапов , описывая структуру , элементы и возможные технологии.1. Общая структура и принципы дизайна:Клиент-ориентированность: Каждый заказчик видит только свои системы.Модульность: Разделение на системы , группы метрик (бизнес , инфраструктура , приложения) и детализированные графики.Визуальная иерархия: Четкое разделение элементов , использование размеров , цветов и отступов для указания важности.Интерактивность: Плавные переходы , всплывающие подсказки , фильтры и возможность кастомизации.Адаптивность: Корректное отображение на разных устройствах (десктопы , планшеты , мобильные).2. Основные экраны и элементы интерфейса:Экран авторизации/выбора заказчика:Простая форма авторизации.После авторизации – список доступных заказчиков (если у пользователя есть доступ к нескольким).Главная панель (Dashboard) для заказчика:Обзор: Краткая сводка по всем системам заказчика:Индикаторы состояния (зеленый/желтый/красный) для каждой системы.Ключевые метрики (например , количество активных пользователей , среднее время ответа) в виде небольших карточек или графиков.Список систем: Визуальное представление систем заказчика. Варианты:Карточки: Каждая система – отдельная карточка с названием , кратким описанием , индикатором состояния и ссылкой на детали.Сетка (Grid): Иконки систем в сетке.Список: Простой список систем с основными данными.Поиск: Позволяет быстро найти нужную систему по названию.Страница системы (System View):Заголовок: Название системы , описание , владелец (контактная информация).Вкладки/Навигация: Разделение на группы метрик:Бизнес-метрики: Показатели , важные для бизнеса (например , выручка , конверсия , количество заказов).Инфраструктурные метрики: Показатели , связанные с инфраструктурой (например , загрузка CPU , использование памяти , дисковое пространство).Метрики приложений: Показатели , связанные с приложениями (например , время ответа API , количество ошибок , количество запросов).Логи: Отображение логов системыСписок метрик в каждой группе: Список доступных метрик с возможностью фильтрации и поиска. Для каждой метрики:Название.Текущее значение.Мини-график (sparkline) за последний период.Индикатор тренда (вверх/вниз/стабильно).Кнопка "Подробнее в Grafana": Переход к детальным графикам в Grafana для выбранной метрики. (Важно: Передача контекста в Grafana – см. раздел "Интеграция с Grafana").Страница детализированной метрики (Metric Detail): (Обычно это Grafana , но может быть и отдельная страница в вашем приложении , если необходимо).График метрики за выбранный период времени.Возможность выбора периода времени (последний час , день , неделя , месяц , произвольный диапазон).Возможность масштабирования графика.Возможность добавления аннотаций (например , для отметки важных событий).Возможность экспорта данных.3. Технологии (примерный стек):Frontend:React , Angular , Vue.js: Современные JavaScript-фреймворки для создания интерактивных пользовательских интерфейсов. React – наиболее популярный и гибкий вариант.TypeScript: Статическая типизация для повышения надежности кода.UI-библиотеки: Material UI , Ant Design , Chakra UI – готовые компоненты для быстрого создания красивого интерфейса.Графики: Chart.js , Recharts , Nivo – библиотеки для построения графиков.Backend:Node.js (Express) , Python (Flask/Django) , Java (Spring Boot): Для обработки запросов , авторизации , доступа к данным. Выбор зависит от ваших навыков и предпочтений.База данных: PostgreSQL , MySQL , MongoDB – для хранения данных о системах , метриках и настройках пользователей.Мониторинг и сбор метрик:Prometheus: Популярная система мониторинга и сбора метрик.Grafana: Для визуализации метрик и создания дашбордов.Telegraf , Collectd: Агенты для сбора метрик с различных систем.Коммуникация:REST API: Для взаимодействия между frontend и backend.WebSockets: Для обновления данных в реальном времени (например , для живых графиков).4. Интеграция с Grafana:URL-шаблоны: Создайте URL-шаблоны для перехода в Grafana с передачей параметров , таких как:datasource: Имя источника данных в Grafana.query: Запрос для получения метрики.variables: Значения переменных Grafana (например , период времени).Single Sign-On (SSO): Если возможно , настройте SSO между вашим приложением и Grafana , чтобы пользователям не приходилось вводить логин и пароль повторно.Встраивание Grafana (iFrame): В некоторых случаях можно встроить Grafana-дашборд в ваше приложение с помощью iFrame , но это может быть менее гибким и безопасным решением.5. Дополнительные рекомендации:Ролевая модель доступа: Определите роли пользователей (например , администратор , оператор , зритель) и настройте права доступа к системам и метрикам.Уведомления и алерты: Реализуйте систему уведомлений о критических событиях (например , превышение пороговых значений).Кастомизация: Предоставьте пользователям возможность настраивать дашборды , выбирать метрики и создавать собственные графики.Документация: Напишите подробную документацию для пользователей и администраторов.Тестирование: Проведите тщательное тестирование интерфейса , чтобы убедиться в его удобстве и функциональности.Примерная структура папок frontend (React):src/ components/ ,
Отлично , давайте разработаем концепцию красивого и интуитивно понятного интерфейса для комплексного мониторинга. Я разобью решение на несколько этапов , описывая структуру , элементы и возможные технологии. 1. Общая структура и принципы дизайна: Клиент-ориентированность: Каждый заказчик видит только свои системы. Модульность: Разделение на системы , группы метрик (бизнес , инфраструктура , приложения) и детализированные графики. Визуальная иерархия: Четкое разделение элементов , использование размеров , цветов и отступов для указания важности. Интерактивность: Плавные переходы , всплывающие подсказки , фильтры и возможность кастомизации. Адаптивность: Корректное отображение на разных устройствах (десктопы , планшеты , мобильные). 2. Основные экраны и элементы интерфейса: Экран авторизации/выбора заказчика: Простая форма авторизации. После авторизации – список доступных заказчиков (если у пользователя есть доступ к нескольким). Главная панель (Dashboard) для заказчика: Обзор: Краткая сводка по всем системам заказчика: Индикаторы состояния (зеленый/желтый/красный) для каждой системы. Ключевые метрики (например , количество активных пользователей , среднее время ответа) в виде небольших карточек или графиков. Список систем: Визуальное представление систем заказчика. Варианты: Карточки: Каждая система – отдельная карточка с названием , кратким описанием , индикатором состояния и ссылкой на детали. Сетка (Grid): Иконки систем в сетке. Список: Простой список систем с основными данными. Поиск: Позволяет быстро найти нужную систему по названию. Страница системы (System View): Заголовок: Название системы , описание , владелец (контактная информация). Вкладки/Навигация: Разделение на группы метрик: Бизнес-метрики: Показатели , важные для бизнеса (например , выручка , конверсия , количество заказов). Инфраструктурные метрики: Показатели , связанные с инфраструктурой (например , загрузка CPU , использование памяти , дисковое пространство). Метрики приложений: Показатели , связанные с приложениями (например , время ответа API , количество ошибок , количество запросов). Логи: Отображение логов системы Список метрик в каждой группе: Список доступных метрик с возможностью фильтрации и поиска. Для каждой метрики: Название. Текущее значение. Мини-график (sparkline) за последний период. Индикатор тренда (вверх/вниз/стабильно). Кнопка "Подробнее в Grafana": Переход к детальным графикам в Grafana для выбранной метрики. (Важно: Передача контекста в Grafana – см. раздел "Интеграция с Grafana"). Страница детализированной метрики (Metric Detail): (Обычно это Grafana , но может быть и отдельная страница в вашем приложении , если необходимо). График метрики за выбранный период времени. Возможность выбора периода времени (последний час , день , неделя , месяц , произвольный диапазон). Возможность масштабирования графика. Возможность добавления аннотаций (например , для отметки важных событий). Возможность экспорта данных. 3. Технологии (примерный стек): Frontend: React , Angular , Vue.js: Современные JavaScript-фреймворки для создания интерактивных пользовательских интерфейсов. React – наиболее популярный и гибкий вариант. TypeScript: Статическая типизация для повышения надежности кода. UI-библиотеки: Material UI , Ant Design , Chakra UI – готовые компоненты для быстрого создания красивого интерфейса. Графики: Chart.js , Recharts , Nivo – библиотеки для построения графиков. Backend: Node.js (Express) , Python (Flask/Django) , Java (Spring Boot): Для обработки запросов , авторизации , доступа к данным. Выбор зависит от ваших навыков и предпочтений. База данных: PostgreSQL , MySQL , MongoDB – для хранения данных о системах , метриках и настройках пользователей. Мониторинг и сбор метрик: Prometheus: Популярная система мониторинга и сбора метрик. Grafana: Для визуализации метрик и создания дашбордов. Telegraf , Collectd: Агенты для сбора метрик с различных систем. Коммуникация: REST API: Для взаимодействия между frontend и backend. WebSockets: Для обновления данных в реальном времени (например , для живых графиков). 4. Интеграция с Grafana: URL-шаблоны: Создайте URL-шаблоны для перехода в Grafana с передачей параметров , таких как: datasource: Имя источника данных в Grafana. query: Запрос для получения метрики. variables: Значения переменных Grafana (например , период времени). Single Sign-On (SSO): Если возможно , настройте SSO между вашим приложением и Grafana , чтобы пользователям не приходилось вводить логин и пароль повторно. Встраивание Grafana (iFrame): В некоторых случаях можно встроить Grafana-дашборд в ваше приложение с помощью iFrame , но это может быть менее гибким и безопасным решением. 5. Дополнительные рекомендации: Ролевая модель доступа: Определите роли пользователей (например , администратор , оператор , зритель) и настройте права доступа к системам и метрикам. Уведомления и алерты: Реализуйте систему уведомлений о критических событиях (например , превышение пороговых значений). Кастомизация: Предоставьте пользователям возможность настраивать дашборды , выбирать метрики и создавать собственные графики. Документация: Напишите подробную документацию для пользователей и администраторов. Тестирование: Проведите тщательное тестирование интерфейса , чтобы убедиться в его удобстве и функциональности. Примерная структура папок frontend (React): src/ components/ # Переиспользуемые компоненты UI SystemCard.js MetricItem.js ... pages/ # Страницы приложения Dashboard.js SystemView.js MetricDetail.js services/ # Логика взаимодействия с backend api.js utils/ # Вспомогательные функции App.js index.jsПримерная структура backend (Node.js/Express): routes/ systems.js metrics.js users.js controllers/ systemController.js metricController.js userController.js models/ System.js Metric.js User.js app.jsКак начать: 1. Определите MVP (Minimum Viable Product): Сосредоточьтесь на основных функциях и реализуйте их в первую очередь. 2. Создайте макеты (wireframes) и прототипы: Протестируйте интерфейс с пользователями на ранних этапах разработки. 3. Используйте гибкие методологии разработки (Agile/Scrum): Разбивайте проект на небольшие итерации и постоянно собирайте обратную связь. Надеюсь , это поможет вам создать отличный интерфейс для комплексного мониторинга! Если у вас есть какие-либо вопросы , не стесняйтесь спрашивать. Я готов помочь вам на каждом этапе разработки. ,
Вот обновлённое профессиональное ТЗ/промт с добавлением четвёртого формата — тёмный горизонтальный. Можете копировать целиком в другой ИИ/генератор дизайна. PROMPT (ТЗ для ИИ‑дизайнера) Создай комплект рекламных листовок/баннеров для бренда «Panda MicroGreen». Задача — аккуратные и читаемые макеты для мессенджеров/соцсетей с осенне‑зимним акцентом и точным ценообразованием. Язык — русский. Обязательные версии (4 макета) - Вертикальная светлая: 1440×2560 px (и 1080×1920 для вторичного экспорта). - Горизонтальная светлая: 2560×1440 px (и 1920×1080). - Вертикальная тёмная: 1440×2560 px (и 1080×1920). - Горизонтальная тёмная: 2560×1440 px (и 1920×1080). Цель и позиционирование - Сезонный месседж: Когда за окном холода — витамины в каждый дом. - Допустимые альтернативы подзаголовка: «Зимние витамины • Свежая микрозелень»; «Витаминный заряд этой зимой». - Тон: забота , польза , натуральность; без агрессивных призывов. Бренд и логотип - Использовать предоставленный логотип Panda MicroGreen без изменений и переработок. Сохранять пропорции. - Свободное поле вокруг лого: минимум 4–6% высоты макета сверху. - В тёмных версиях допускается аккуратная светлая обводка/свечение для читаемости , без изменения фирменных цветов. Структура макета (единая логика) 1) Верх/шапка: логотип + сезонный заголовок. 2) Панель «Культуры» — сетка карточек с фото каждой культуры (вид сбоку). 3) Панель «Миксы» — только текстовые карточки (без изображений). 4) Контакты: внизу (вертикали) или в шапке справа (горизонтали). Контакты (строго) - Telegram/Viber: +375 29 323 11 16 - Не выводить строку «Розничные цены…». Контент — Культуры (ровно 8 позиций , у каждой 3 строки) Формат карточки: Название Срез 50 г — [цена] BYN Срез 100 г — [цена] BYN Контейнер 11×18 — [цена] BYN Цены (десятичная запятая , валюта BYN): - Редиска Санго — 7 , 5 • 11 , 5 • 7 , 5 - Редиска РедКорал — 7 , 5 • 11 , 5 • 7 , 5 - Горох — 6 , 0 • 9 , 0 • 7 , 0 - Базилик фиолетовый — 13 , 0 • 20 , 0 • 9 , 5 - Базилик лимонный — 12 , 5 • 19 , 0 • 9 , 0 - Подсолнечник — 6 , 5 • 10 , 0 • 7 , 0 - Руккола — 7 , 5 • 11 , 5 • 7 , 5 - Мелисса — 12 , 0 • 18 , 0 • 9 , 5 Контент — Миксы (только текст , без фото) Формат карточки: Название — [общий вес] • [цена] BYN Состав: [компонент — граммы] - Домашний салатный старт — 120 г • 12 , 5 BYN Горох 30 г , Подсолнечник 30 г , Редиска Санго 30 г , Руккола 30 г - Ароматный топпинг — 80 г • 13 , 9 BYN Базилик фиолетовый 20 г , Базилик лимонный 20 г , Мелисса 20 г , Горчица белая 20 г - Хруст и цвет — 160 г • 15 , 9 BYN Горох 60 г , Подсолнечник 60 г , Редиска РедКорал 40 г - Всё в одном — 150 г • 17 , 9 BYN Редиска Санго 20 г , Редиска РедКорал 20 г , Горох 50 г , Базилик фиолетовый 10 г , Базилик лимонный 10 г , Подсолнечник 30 г , Руккола 10 г Фотостиль культур (обязательно) - Превью есть только у «Культур». У «Миксов» — нет изображений. - Ракурс: вид сбоку , одинаковая высота среза , без «вида сверху». - Свет: мягкий нейтральный , фон светлый однотонный. Круглая маска. - Визуальная консистентность: единые тени , масштаб и ракурс. - Диаметр превью: 16–18% ширины карточки на мобильной вертикали. Сетка и композиция - Вертикальная: - Культуры: сетка 2×4. Миксы: 2×2. - Внутренний отступ панелей 24–28 px; межкарточный 16–20 px. - Горизонтальная (для светлой и тёмной версий одинаково): - Культуры слева сеткой 4×2; справа столбец из 4 карточек «Миксы». - Контакты в шапке справа от логотипа. - Безопасные поля: ≥48 px (вертикаль) , ≥56 px (горизонталь). - Разделы визуально отделять (фон панели , деликатная тень/контур). Типографика и форматирование - Язык: русский , без англицизмов. - Заголовки разделов: «Культуры» и «Миксы». - Числа: десятичная запятая; единицы «г» и «BYN». - Длинное тире с пробелами « — ». - Неразрывные пробелы между числом и единицей (50 г , 11 , 5 BYN). - Рекомендованные размеры (ориентир для 1440×2560): - H1: 56–64 px; H2: 34–38 px - Название культуры: 22–24 px - Текст цен/составов: 18–20 px - Бейджи «вес • цена»: 16–18 px - Минимум: 16 px для мелкого текста. - Гарнитуры (open‑source): Inter , Manrope , Montserrat или Noto Sans (единый набор во всех версиях). Бейджи и акценты - Для миксов — компактный бейдж «вес • цена» справа от названия или в строке заголовка. - Радиус 12–16 px; внутренние отступы 8–10 px по вертикали и 12–16 px по горизонтали. - Контраст к фону ≥ 4.5:1. Цвет и контраст - Светлая тема: - Фон: #F7F9F6; Карточки: #FFFFFF - Текст: #0E2A1D; Акцент: #3CB45C; Вторичный: #55645D - Тёмная тема (для вертикали и горизонтали): - Фон: #0F1211; Карточки: #161A18 - Текст: #E8F1EB; Акцент: #76D354; Вторичный: #A5B1AB - В тёмных горизонталях следить за контрастом шапки и бейджей (≥ 4.5:1). Запрещено - Не выводить строку «Розничные цены…». - Не использовать изображения в «Миксах». - Не изменять/искажать логотип. - Не смешивать RU/EN. - Не показывать «вид сверху» у культур. Доступность - Межстрочный интервал: 120–130% для списков; 110–115% для бейджей. - Избегать висячих предлогов в заголовках. - Проверить читабельность на экранах смартфонов (зум не обязателен). Экспорт и выдача - PNG (sRGB). Дополнительно квадрат 1080×1080 для постов. - Имена файлов: - panda-microgreen_vert-light_1440x2560.png - panda-microgreen_horiz-light_2560x1440.png - panda-microgreen_vert-dark_1440x2560.png - panda-microgreen_horiz-dark_2560x1440.png - Версии без артефактов; по возможности исходник (FIG/PSD/XD/SVG) со слоями. Чек‑лист качества - [ ] Ровно 8 культур , фото вид сбоку , единый стиль. - [ ] У каждой культуры три строки с корректными ценами и форматами. - [ ] 4 микса , корректные веса/цены/составы , без изображений. - [ ] Длинное тире , запятые в ценах , BYN , неразрывные пробелы. - [ ] Нет англицизмов , опечаток , дублей. - [ ] Логотип исходный , не деформирован. - [ ] Контакты: Telegram/Viber: +375 29 323 11 16. - [ ] Контраст и размеры шрифтов соответствуют; безопасные поля соблюдены. - [ ] Светлые и тёмные версии (включая тёмный горизонтальный) идентичны по структуре и иерархии. ,
Мне нужен одностраничный one page. 🔹 Концепт One-pager (трендовый , стильный , без лишнего) Структура (A4 , 1 страница): Заголовок: «Аналитика , которая работает на бизнес» (крупный , жирный , современный шрифт). Блок 1 — Проблема клиента: «У вас есть данные , но нет быстрых и понятных отчётов. Решения принимаются на ощущениях , а не цифрах.» (иконка ⚠️) Блок 2 — Решение: SQL-выгрузки → Excel-отчёты за 1 день. BI-дашборды (DataLens/PowerBI) с фильтрами. A/B-тесты и гипотезы с выводами. (иконки таблицы 📊 , графика 📈 , теста 🧪) Блок 3 — Пример результата (визуал): Слева: маленький скрин «до» (сырая таблица). Справа: «после» (чистый график/дашборд). Подпись: «Из данных → в понятные решения». Блок 4 — Формат работы: Мини-бриф (10 мин). Черновой макет за 24–48 ч. Финал + инструкция. Блок 5 — Контакт и призыв: «Готов показать демо под ваши данные уже завтра → начнём с малого кейса.» (кнопка/иконка «Начать проект» или QR/ссылка) 🔹 Стиль Цвета: белый фон + акцент 1 (синий/фиолетовый , тренд 2025) + акцент 2 (жёлтый/лайм). Шрифт: крупные заголовки (sans-serif , рубленый) , текст — аккуратный , читабельный. Макет: чистый , много воздуха , минимум текста , максимум смысла. Иконки в стиле flat , современные. 🔹 Продающий текст (коротко и чётко) Заголовок: 👉 «Из данных — в решения. Быстро , наглядно , для вашего бизнеса.» Тело: Автоматизирую отчёты (SQL , Excel , BI). Визуализирую ключевые метрики. Провожу A/B тесты и показываю выводы. Результат для вас: ⚡ Чёткие цифры. 📊 Красивые отчёты. 🚀 Решения быстрее. Call to Action: ✉️ Напишите — через 24 часа получите демо на ваших данных.Вот подготовленный текстовый каркас (готовый к верстке) 🔹 Заголовок (оффер) «Аналитика данных для вашего бизнеса: от SQL-выгрузки до BI-дашборда за 48 часов» 🔹 Ценность Помогаю компаниям быстро превратить сырые данные в понятные отчёты и дашборды. Результат: прозрачные метрики , управленческие решения на основе фактов , экономия времени команды. 🔹 Услуги / Компетенции SQL-выгрузки → отчёт в Excel — быстрый доступ к данным без ручной рутины. BI-дашборды (DataLens / Power BI) — наглядные графики и фильтры для руководителей. Анализ продаж и маркетинга — выявление ключевых драйверов роста и слабых точек. A/B тесты и эксперименты — проверка гипотез и обоснование решений цифрами. Автоматизация отчётов — ежедневные данные без Excel-правок вручную. 🔹 Мини-кейс (пример) Задача: интернет-магазину нужно было отслеживать ежедневные продажи по категориям. Решение: SQL-выгрузка + дашборд в DataLens (6 графиков , фильтры). Результат: руководство получило визуальные отчёты в реальном времени → сократило подготовку отчётности с 3 часов до 15 минут. 🔹 Преимущества работы со мной ⚡ Быстрый результат (черновой макет за 24–48 часов). 📊 Понятные визуализации для бизнеса. 🔒 Конфиденциальность и аккуратность с данными. 🚀 Опыт задач в финтехе , e-commerce и маркетинге. 💬 Постоянная коммуникация и поддержка после сдачи проекта. 🔹 Как мы работаем Запрос (получаю задачу и данные). Мини-бриф (5 вопросов для уточнения). Черновой макет (24–48 часов). Согласование и финал. Передача отчёта/дашборда + инструкция. 🔹 Контакты 📩 Email: voronin.ai@example.com 💬 Telegram: @voronin_ai 🌍 Портфолио: github.com/voronin-ai 📌 Этот текст уже готов для One-pager-дизайна в стиле твоих примеров: чистый , бизнесовый , с блоками и иконками. Сделай очень четкую пи продающую исторрию на одностраничнике для фрилансера. Обрати вннимание на текст и и так далее. в общем сделай все в ультро модном одностраничном стиле ,
Основные требования: Общая структура страницы 1. Шапка: - Логотип или имя и фамилия человека. - Навигационное меню с основными разделами: О себе , Услуги , Контакты. 2. Главный экран: - Фотография человека (портрет). - Заголовок с основным направлением деятельности. - Краткое описание профессии или специализации. Требования к дизайну: 1. Цветовая схема: - Использование спокойных и нейтральных цветов (например , белый , серый , пастельные оттенки). - Допускается использование одного яркого акцента (например , бирюзовый , зеленый или синий). (прислать примеры) 2. Типографика: - Шрифты должны быть читабельными и современными. - Основное внимание уделить заголовкам и подзаголовкам. 3. Фотографии: - Высококачественная портретная фотография человека должна быть подчеркнута , основываясь на примерах-референсах. - Дополнительные фотографии (по желанию) , отражающие профессиональную деятельность. 4. Интерфейс: - Все элементы должны быть расположены эргономично и гармонично. ⁃ Примеры референсов https://pin.it/4bK5JtjjW https://pin.it/4g0vEcRvv ,
Основные требования: Общая структура страницы 1. Шапка: - Логотип или имя и фамилия человека. - Навигационное меню с основными разделами: О себе , Услуги , Контакты. 2. Главный экран: - Фотография человека (портрет). - Заголовок с основным направлением деятельности. - Краткое описание профессии или специализации. Требования к дизайну: 1. Цветовая схема: - Использование спокойных и нейтральных цветов (например , белый , серый , пастельные оттенки). - Допускается использование одного яркого акцента (например , бирюзовый , зеленый или синий). (прислать примеры) 2. Типографика: - Шрифты должны быть читабельными и современными. - Основное внимание уделить заголовкам и подзаголовкам. 3. Фотографии: - Высококачественная портретная фотография человека должна быть подчеркнута , основываясь на примерах-референсах. - Дополнительные фотографии (по желанию) , отражающие профессиональную деятельность. 4. Интерфейс: - Все элементы должны быть расположены эргономично и гармонично. ⁃ Примеры референсов https://pin.it/4bK5JtjjW https://pin.it/4g0vEcRvv ,
Цель: Сделать объявление формата A5 для расклейки на заборах. Тематика: Размещение строителей и иностранных граждан в общежитии с регистрацией. Информация , которую нужно отразить: Основной заголовок (должен быть крупным и заметным): Размещение строителей и иностранных граждан с регистрацией! Подзаголовок или пояснение: Общежитие на Киевском шоссе. Цена от 300 руб./сутки. Дополнительный рекламный текст (можно использовать как основной слоган): Общежитие для рабочих Регистрация от 300 руб. за сутки Комфортные условия как в отеле Дополнительная информация: Удобное расположение Все условия для проживания Оформление регистрации Контакт: Указать номер телефона +7 900 2362311 Требования к макету: Формат: A5 , вертикальная ориентация Цветной (если возможно) , допускается чёрно-белый Крупный , читаемый шрифт Визуальный акцент на цене , регистрации и условиях Без перегрузки мелким текстом Должно быть красиво! ,
нарисуй картинку для юридической статьи. Концепция 1: "Юридическая Надежность и Государственная Поддержка" Фон: Глубокий , сдержанный синий (цвет доверия , стабильности , государственных институтов) с легким градиентом или текстурой , напоминающей официальный бланк. Центральные элементы: Стилизованный ключ: Крупный , золотистого или серебристого цвета , символизирующий приобретение жилья. Ключ выполнен в лаконичном , современном дизайне. Щит: За ключом или частично его перекрывая – стилизованный геральдический щит (символ защиты , гарантий) , окрашенный в цвета российского флага (белый , синий , красный) или с логотипом НИС/Росвоенипотеки. Скрепка/Печать: Рядом с ключом – крупная золотая скрепка или стилизованная печать АО "ДОМ.РФ" , как символ документооборота и завершенности сделки. Текст: Заголовок (Крупно , жирно , контрастный белый или золотой): "ПОКУПКА КВАРТИРЫ БЕЗ КРЕДИТА: ПОЛНОЕ РУКОВОДСТВО ПО НИС" Подзаголовок (Меньше , четкий шрифт): "Юридически выверенный алгоритм использования накоплений для приобретения жилья на вторичном рынке" Акцент (Возле ключа/щита): "ТОЛЬКО НАКОПЛЕНИЯ НИС • ПРОВЕРЕНО НА ПРАКТИКЕ" Дополнительно: В нижнем углу или по краю – мелкий , но читаемый узор из стилизованных документов (договор , выписка ЕГРН) или зданий. ,
Промт: «Создай минималистичный баннер для компании по разработке сайтов и чат-ботов. Основное: Сохрани стиль логотипа (белый фон , красные акценты). Добавь абстрактные элементы: интерфейсы , код , чат-пузыри , шестеренки. Текст: Заголовок — «Профессиональная разработка сайтов и ботов». Подзаголовок — «От идеи до реализации: быстро , качественно , надежно». Шрифты: геометрические без засечек; текст — темно-серый , ключевые слова — красные. Логотип размести вверху слева/по центру. Используй динамичные детали: тонкие красные линии , стрелки. Избегай: перегруза , других цветов (кроме белого/красного) , сложных эффектов , стоковых изображений. Баннер должен быть профессиональным , технологичным и вызывать доверие». ,
Промт: «Создай минималистичный баннер для компании по разработке сайтов и чат-ботов. Основное: Сохрани стиль логотипа (белый фон , красные акценты). Добавь абстрактные элементы: интерфейсы , код , чат-пузыри , шестеренки. Текст: Заголовок — «Профессиональная разработка сайтов и ботов». Подзаголовок — «От идеи до реализации: быстро , качественно , надежно». Шрифты: геометрические без засечек; текст — темно-серый , ключевые слова — красные. Логотип размести вверху слева/по центру. Используй динамичные детали: тонкие красные линии , стрелки. Избегай: перегруза , других цветов (кроме белого/красного) , сложных эффектов , стоковых изображений. Баннер должен быть профессиональным , технологичным и вызывать доверие». ,
Онбоардинг для медицинского приложения Заголовок: Все ваши документы — в одном месте Текст: Загружайте результаты анализов в удобном для Вас формате (фото , PDF или e-mail). Храните заключения исследований: УЗИ , МРТ , ЭКГ. Следите за динамикой биомаркеров и получайте персональный план улучшения здоровья ,
Создай изображение где нарисован купон на выдавливание прыщей 1. **Фон**: Используйте яркий , привлекательный цвет , например , розовый или салатовый , чтобы купон выглядел забавно и необычно. 2. **Заголовок**: Напишите крупными буквами: **"Купон на выдавливание прыщей"**. 3. **Детали**: - **Срок действия**: "Действует 5 минут с момента получения." - **Условия**: "Обладатель купона имеет право на выдавливание одного прыща в течение 5 минут. Время на подготовку не входит." - **Подпись**: "С любовью , ваш муж." 4. **Иллюстрации**: Добавьте забавные изображения прыщей или смайликов с прыщами. 5. **Дизайн**: Используйте шрифты с засечками для заголовка и рукописные шрифты для деталей , чтобы добавить юмора. ,
![Montserrat или Noto Sans (единый набор во всех версиях). Бейджи и акценты - Для миксов — компактный бейдж «вес • цена» справа от названия или в строке заголовка. - Радиус 12–16 px; внутренние отступы 8–10 px по вертикали и 12–16 px по горизонтали. - Контраст к фону ≥ 4.5:1. Цвет и контраст - Светлая тема: - Фон: #F7F9F6; Карточки: #FFFFFF - Текст: #0E2A1D; Акцент: #3CB45C; Вторичный: #55645D - Тёмная тема (для вертикали и горизонтали): - Фон: #0F1211; Карточки: #161A18 - Текст: #E8F1EB; Акцент: #76D354; Вторичный: #A5B1AB - В тёмных горизонталях следить за контрастом шапки и бейджей (≥ 4.5:1). Запрещено - Не выводить строку «Розничные цены…». - Не использовать изображения в «Миксах». - Не изменять/искажать логотип. - Не смешивать RU/EN. - Не показывать «вид сверху» у культур. Доступность - Межстрочный интервал: 120–130% для списков; 110–115% для бейджей. - Избегать висячих предлогов в заголовках. - Проверить читабельность на экранах смартфонов (зум не обязателен). Экспорт и выдача - PNG (sRGB). Дополнительно квадрат 1080×1080 для постов. - Имена файлов: - panda-microgreen_vert-light_1440x2560.png - panda-microgreen_horiz-light_2560x1440.png - panda-microgreen_vert-dark_1440x2560.png - panda-microgreen_horiz-dark_2560x1440.png - Версии без артефактов; по возможности исходник (FIG/PSD/XD/SVG) со слоями. Чек‑лист качества - [ ] Ровно 8 культур](/search/Montserrat%20%D0%B8%D0%BB%D0%B8%20Noto%20Sans%20(%D0%B5%D0%B4%D0%B8%D0%BD%D1%8B%D0%B9%20%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%20%D0%B2%D0%BE%20%D0%B2%D1%81%D0%B5%D1%85%20%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D1%8F%D1%85).%0A%0A%D0%91%D0%B5%D0%B9%D0%B4%D0%B6%D0%B8%20%D0%B8%20%D0%B0%D0%BA%D1%86%D0%B5%D0%BD%D1%82%D1%8B%0A-%20%D0%94%D0%BB%D1%8F%20%D0%BC%D0%B8%D0%BA%D1%81%D0%BE%D0%B2%20%E2%80%94%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%B0%D0%BA%D1%82%D0%BD%D1%8B%D0%B9%20%D0%B1%D0%B5%D0%B9%D0%B4%D0%B6%20%C2%AB%D0%B2%D0%B5%D1%81%20%E2%80%A2%20%D1%86%D0%B5%D0%BD%D0%B0%C2%BB%20%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%B0%20%D0%BE%D1%82%20%D0%BD%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%20%D0%B8%D0%BB%D0%B8%20%D0%B2%20%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B5%20%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0.%0A-%20%D0%A0%D0%B0%D0%B4%D0%B8%D1%83%D1%81%2012%E2%80%9316%20px%3B%20%D0%B2%D0%BD%D1%83%D1%82%D1%80%D0%B5%D0%BD%D0%BD%D0%B8%D0%B5%20%D0%BE%D1%82%D1%81%D1%82%D1%83%D0%BF%D1%8B%208%E2%80%9310%20px%20%D0%BF%D0%BE%20%D0%B2%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D0%B8%20%D0%B8%2012%E2%80%9316%20px%20%D0%BF%D0%BE%20%D0%B3%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D0%B8.%0A-%20%D0%9A%D0%BE%D0%BD%D1%82%D1%80%D0%B0%D1%81%D1%82%20%D0%BA%20%D1%84%D0%BE%D0%BD%D1%83%20%E2%89%A5%204.5%3A1.%0A%0A%D0%A6%D0%B2%D0%B5%D1%82%20%D0%B8%20%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%B0%D1%81%D1%82%0A-%20%D0%A1%D0%B2%D0%B5%D1%82%D0%BB%D0%B0%D1%8F%20%D1%82%D0%B5%D0%BC%D0%B0%3A%0A%20%20-%20%D0%A4%D0%BE%D0%BD%3A%20%23F7F9F6%3B%20%D0%9A%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8%3A%20%23FFFFFF%0A%20%20-%20%D0%A2%D0%B5%D0%BA%D1%81%D1%82%3A%20%230E2A1D%3B%20%D0%90%D0%BA%D1%86%D0%B5%D0%BD%D1%82%3A%20%233CB45C%3B%20%D0%92%D1%82%D0%BE%D1%80%D0%B8%D1%87%D0%BD%D1%8B%D0%B9%3A%20%2355645D%0A-%20%D0%A2%D1%91%D0%BC%D0%BD%D0%B0%D1%8F%20%D1%82%D0%B5%D0%BC%D0%B0%20(%D0%B4%D0%BB%D1%8F%20%D0%B2%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D0%B8%20%D0%B8%20%D0%B3%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D0%B8)%3A%0A%20%20-%20%D0%A4%D0%BE%D0%BD%3A%20%230F1211%3B%20%D0%9A%D0%B0%D1%80%D1%82%D0%BE%D1%87%D0%BA%D0%B8%3A%20%23161A18%0A%20%20-%20%D0%A2%D0%B5%D0%BA%D1%81%D1%82%3A%20%23E8F1EB%3B%20%D0%90%D0%BA%D1%86%D0%B5%D0%BD%D1%82%3A%20%2376D354%3B%20%D0%92%D1%82%D0%BE%D1%80%D0%B8%D1%87%D0%BD%D1%8B%D0%B9%3A%20%23A5B1AB%0A%20%20-%20%D0%92%20%D1%82%D1%91%D0%BC%D0%BD%D1%8B%D1%85%20%D0%B3%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D1%8F%D1%85%20%D1%81%D0%BB%D0%B5%D0%B4%D0%B8%D1%82%D1%8C%20%D0%B7%D0%B0%20%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%B0%D1%81%D1%82%D0%BE%D0%BC%20%D1%88%D0%B0%D0%BF%D0%BA%D0%B8%20%D0%B8%20%D0%B1%D0%B5%D0%B9%D0%B4%D0%B6%D0%B5%D0%B9%20(%E2%89%A5%204.5%3A1).%0A%0A%D0%97%D0%B0%D0%BF%D1%80%D0%B5%D1%89%D0%B5%D0%BD%D0%BE%0A-%20%D0%9D%D0%B5%20%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D1%8C%20%D1%81%D1%82%D1%80%D0%BE%D0%BA%D1%83%20%C2%AB%D0%A0%D0%BE%D0%B7%D0%BD%D0%B8%D1%87%D0%BD%D1%8B%D0%B5%20%D1%86%D0%B5%D0%BD%D1%8B%E2%80%A6%C2%BB.%0A-%20%D0%9D%D0%B5%20%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%B2%20%C2%AB%D0%9C%D0%B8%D0%BA%D1%81%D0%B0%D1%85%C2%BB.%0A-%20%D0%9D%D0%B5%20%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D1%82%D1%8C%2F%D0%B8%D1%81%D0%BA%D0%B0%D0%B6%D0%B0%D1%82%D1%8C%20%D0%BB%D0%BE%D0%B3%D0%BE%D1%82%D0%B8%D0%BF.%0A-%20%D0%9D%D0%B5%20%D1%81%D0%BC%D0%B5%D1%88%D0%B8%D0%B2%D0%B0%D1%82%D1%8C%20RU%2FEN.%0A-%20%D0%9D%D0%B5%20%D0%BF%D0%BE%D0%BA%D0%B0%D0%B7%D1%8B%D0%B2%D0%B0%D1%82%D1%8C%20%C2%AB%D0%B2%D0%B8%D0%B4%20%D1%81%D0%B2%D0%B5%D1%80%D1%85%D1%83%C2%BB%20%D1%83%20%D0%BA%D1%83%D0%BB%D1%8C%D1%82%D1%83%D1%80.%0A%0A%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C%0A-%20%D0%9C%D0%B5%D0%B6%D1%81%D1%82%D1%80%D0%BE%D1%87%D0%BD%D1%8B%D0%B9%20%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B2%D0%B0%D0%BB%3A%20120%E2%80%93130%25%20%D0%B4%D0%BB%D1%8F%20%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%3B%20110%E2%80%93115%25%20%D0%B4%D0%BB%D1%8F%20%D0%B1%D0%B5%D0%B9%D0%B4%D0%B6%D0%B5%D0%B9.%0A-%20%D0%98%D0%B7%D0%B1%D0%B5%D0%B3%D0%B0%D1%82%D1%8C%20%D0%B2%D0%B8%D1%81%D1%8F%D1%87%D0%B8%D1%85%20%D0%BF%D1%80%D0%B5%D0%B4%D0%BB%D0%BE%D0%B3%D0%BE%D0%B2%20%D0%B2%20%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B0%D1%85.%0A-%20%D0%9F%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%B8%D1%82%D1%8C%20%D1%87%D0%B8%D1%82%D0%B0%D0%B1%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%BD%D0%B0%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%D1%85%20%D1%81%D0%BC%D0%B0%D1%80%D1%82%D1%84%D0%BE%D0%BD%D0%BE%D0%B2%20(%D0%B7%D1%83%D0%BC%20%D0%BD%D0%B5%20%D0%BE%D0%B1%D1%8F%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%BD).%0A%0A%D0%AD%D0%BA%D1%81%D0%BF%D0%BE%D1%80%D1%82%20%D0%B8%20%D0%B2%D1%8B%D0%B4%D0%B0%D1%87%D0%B0%0A-%20PNG%20(sRGB).%20%D0%94%D0%BE%D0%BF%D0%BE%D0%BB%D0%BD%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%20%D0%BA%D0%B2%D0%B0%D0%B4%D1%80%D0%B0%D1%82%201080%C3%971080%20%D0%B4%D0%BB%D1%8F%20%D0%BF%D0%BE%D1%81%D1%82%D0%BE%D0%B2.%0A-%20%D0%98%D0%BC%D0%B5%D0%BD%D0%B0%20%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2%3A%0A%20%20-%20panda-microgreen_vert-light_1440x2560.png%0A%20%20-%20panda-microgreen_horiz-light_2560x1440.png%0A%20%20-%20panda-microgreen_vert-dark_1440x2560.png%0A%20%20-%20panda-microgreen_horiz-dark_2560x1440.png%0A-%20%D0%92%D0%B5%D1%80%D1%81%D0%B8%D0%B8%20%D0%B1%D0%B5%D0%B7%20%D0%B0%D1%80%D1%82%D0%B5%D1%84%D0%B0%D0%BA%D1%82%D0%BE%D0%B2%3B%20%D0%BF%D0%BE%20%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D0%B8%20%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B8%D0%BA%20(FIG%2FPSD%2FXD%2FSVG)%20%D1%81%D0%BE%20%D1%81%D0%BB%D0%BE%D1%8F%D0%BC%D0%B8.%0A%0A%D0%A7%D0%B5%D0%BA%E2%80%91%D0%BB%D0%B8%D1%81%D1%82%20%D0%BA%D0%B0%D1%87%D0%B5%D1%81%D1%82%D0%B2%D0%B0%0A-%20%5B%20%5D%20%D0%A0%D0%BE%D0%B2%D0%BD%D0%BE%208%20%D0%BA%D1%83%D0%BB%D1%8C%D1%82%D1%83%D1%80){kind=link}
1. Структура баннера (например , 1200x600 пикселей):Верхняя часть:Заголовок "Платим за комментарий!" крупным шрифтом (например , 60px) с эмодзи 💬.Фон: яркий градиент (синий → голубой) с полупрозрачными диалоговыми пузырями.Центральная часть:Подзаголовок: "Оставляйте комментарии и получайте деньги за свое мнение!" (шрифт 30px).Рядом с текстом — стилизованная иконка денег (💰) или картинка человека , пишущего комментарий.Нижняя часть:Кнопка с призывом к действию: "Начните сейчас!" (например , желтая кнопка с черным текстом).Под кнопкой мелким шрифтом: "Акция действует до [дата]. Подробности на сайте."2. Цветовая палитра:Основные цвета: синий , голубой , белый.Акцентные цвета: желтый (для кнопки и важных элементов).3. Элементы дизайна:Диалоговые пузыри (как в мессенджерах) в фоне.Иконки: 💬 , 💰 , 👍.Логотип вашей компании в правом верхнем углу. ,
1. Структура баннера (например , 1200x600 пикселей):Верхняя часть:Заголовок "Платим за комментарий!" крупным шрифтом (например , 60px) с эмодзи 💬.Фон: яркий градиент (синий → голубой) с полупрозрачными диалоговыми пузырями.Центральная часть:Подзаголовок: "Оставляйте комментарии и получайте деньги за свое мнение!" (шрифт 30px).Рядом с текстом — стилизованная иконка денег (💰) или картинка человека , пишущего комментарий.Нижняя часть:Кнопка с призывом к действию: "Начните сейчас!" (например , желтая кнопка с черным текстом).Под кнопкой мелким шрифтом: "Акция действует до [дата]. Подробности на сайте."2. Цветовая палитра:Основные цвета: синий , голубой , белый.Акцентные цвета: желтый (для кнопки и важных элементов).3. Элементы дизайна:Диалоговые пузыри (как в мессенджерах) в фоне.Иконки: 💬 , 💰 , 👍.Логотип вашей компании в правом верхнем углу. ,
1. Структура баннера (например , 1200x600 пикселей):Верхняя часть:Заголовок "Платим за комментарий!" крупным шрифтом (например , 60px) с эмодзи 💬.Фон: яркий градиент (синий → голубой) с полупрозрачными диалоговыми пузырями.Центральная часть:Подзаголовок: "Оставляйте комментарии и получайте деньги за свое мнение!" (шрифт 30px).Рядом с текстом — стилизованная иконка денег (💰) или картинка человека , пишущего комментарий.Нижняя часть:Кнопка с призывом к действию: "Начните сейчас!" (например , желтая кнопка с черным текстом).Под кнопкой мелким шрифтом: "Акция действует до [дата]. Подробности на сайте."2. Цветовая палитра:Основные цвета: синий , голубой , белый.Акцентные цвета: желтый (для кнопки и важных элементов).3. Элементы дизайна:Диалоговые пузыри (как в мессенджерах) в фоне.Иконки: 💬 , 💰 , 👍.Логотип вашей компании в правом верхнем углу. ,