Проектирует страницу с курсами: информационная архитектура, карточки, преподаватели, CTA и компонентная структура.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — консультант по веб-дизайну. Проанализируй задачу организации и предложи информационную архитектуру, визуальный дизайн и интерактивные элементы, которые улучшают опыт пользователя и работают на бизнес-цели. Организация: [описание школы или компании] Задача: [например: страница со списком курсов, кратким описанием, преподавателями и понятными CTA] Аудитория: [кто выбирает курсы] Стек: [например: Next.js + Tailwind] Что подготовить: 1. Информационная архитектура: блоки страницы сверху вниз и зачем каждый. 2. Карточка курса: какие поля показывать (название, формат, длительность, уровень, цена, преподаватель), что прятать до клика. 3. Фильтры, сортировка и поиск: какие нужны и как ведут себя на мобильном. 4. Блок преподавателей: как показать экспертизу без перегруза. 5. CTA: основной и вторичный, где стоят и что написано. 6. Визуальное направление и рекомендации по дизайн-системе (сетка, типографика, цвета, состояния). 7. Доступность: контраст, фокус, семантика карточек и фильтров. 8. Компонентная структура для разработки. Формат: структурированный план с заголовками, в конце список компонентов с props.
```text Ты — консультант по веб-дизайну. Проанализируй задачу организации и предложи информационную архитектуру, визуальный дизайн и интерактивные элементы, которые улучшают опыт пользователя и работают на бизнес-цели. Организация: [описание школы или компании] Задача: [например: страница со списком курсов, кратким описанием, преподавателями и понятными CTA] Аудитория: [кто выбирает курсы] Стек: [например: Next.js + Tailwind] Что подготовить: 1. Информационная архитектура: блоки страницы сверху вниз и зачем каждый. 2. Карточка курса: какие поля показывать (название, формат, длительность, уровень, цена, преподаватель), что прятать до клика. 3. Фильтры, сортировка и поиск: какие нужны и как ведут себя на мобильном. 4. Блок преподавателей: как показать экспертизу без перегруза. 5. CTA: основной и вторичный, где стоят и что написано. 6. Визуальное направление и рекомендации по дизайн-системе (сетка, типографика, цвета, состояния). 7. Доступность: контраст, фокус, семантика карточек и фильтров. 8. Компонентная структура для разработки. Формат: структурированный план с заголовками, в конце список компонентов с props. ```
{
"messages": [
{
"role": "user",
"content": "Ты — консультант по веб-дизайну. Проанализируй задачу организации и предложи информационную архитектуру, визуальный дизайн и интерактивные элементы, которые улучшают опыт пользователя и работают на бизнес-цели.\n\nОрганизация: [описание школы или компании]\nЗадача: [например: страница со списком курсов, кратким описанием, преподавателями и понятными CTA]\nАудитория: [кто выбирает курсы]\nСтек: [например: Next.js + Tailwind]\n\nЧто подготовить:\n1. Информационная архитектура: блоки страницы сверху вниз и зачем каждый.\n2. Карточка курса: какие поля показывать (название, формат, длительность, уровень, цена, преподаватель), что прятать до клика.\n3. Фильтры, сортировка и поиск: какие нужны и как ведут себя на мобильном.\n4. Блок преподавателей: как показать экспертизу без перегруза.\n5. CTA: основной и вторичный, где стоят и что написано.\n6. Визуальное направление и рекомендации по дизайн-системе (сетка, типографика, цвета, состояния).\n7. Доступность: контраст, фокус, семантика карточек и фильтров.\n8. Компонентная структура для разработки.\n\nФормат: структурированный план с заголовками, в конце список компонентов с props."
}
]
}