10 уроков по промптам для ИИ, которые я усвоил
Потратив 100 часов на составление промптов для ИИ в области UI-дизайна, я обнаружил, что большинство дизайнеров делают это совершенно неправильно. Разница между получением шаблонных заготовок и компонентов, готовых к использованию (production-ready), сводится к 10 конкретным техникам. Вот что я усвоил:
Урок 1: Конкретика бьет креативность
- Плохой промпт: «Создай дашборд»
- Хороший промпт: «Дашборд для SaaS-аналитики, темная тема, 3-колоночный макет, метрики в виде карточек, Tailwind CSS»
ИИ нужны ограничения, чтобы быть креативным.
Урок 2: Кради как художник (буквально)
Не просите ИИ «быть креативным». Ссылайтесь на реальные продукты:
- «Сделай дизайн как у Linear для просмотра задач, но для тикетов поддержки»
ИИ понимает паттерны лучше, чем эстетику. Копируйте с умом, затем адаптируйте.
Урок 3: Компоненты > целые страницы
Создание целых страниц = неконтролируемый хаос. Создание компонентов = контролируемая магия.
Начните с: «Создай компонент карточки с ценами» А не: «Сделай мне страницу с ценами»
Урок 4: Лайфхак с «модными» словами
Общие слова = общие результаты. Конкретные «модные» слова = четкий дизайн.
- Вместо «современный»: используйте «глассморфизм», «брутализм», «необрутализм»
- Вместо «чистый»: используйте «минималистичный», «швейцарский дизайн», «моноширинный»
«Модные» слова — это кратчайший путь в дизайне.
Еще больше контента у меня в тг
Урок 5: Всегда указывайте технологический стек
«React-компонент с Tailwind CSS» — это совсем другое дело, чем просто «компонент». ИИ знает паттерны фреймворков. Он выдаст вам правильный JSX, имена классов и структуру. Чем больше технического контекста, тем лучше результат.
Урок 6: Итерируйте публично (с ИИ)
Не прячьтесь в приватных чатах. Создавайте в Lovable. Делитесь процессом. Реальная обратная связь > идеальные промпты. Выпускайте «сырой» продукт. Итерируйте быстро. Пользователям все равно важнее функция, а не форма.
Урок 7: Промптинг по принципу Mobile-first
«Адаптивный mobile-first» — этого недостаточно. Будьте конкретны:
- «Мобильные: одна колонка, минимальный размер кликабельной области 44px»
- «Десктоп: 3-колоночная сетка, состояния при наведении (hover states)»
Сначала проектируйте для больших пальцев. Затем масштабируйте.
Урок 8: Правило промпта 80/20
80% результата зависят от этих 4 элементов:
- Тип компонента
- Визуальный стиль
- Техстек
- Структура макета
Все остальное — отвлекающие факторы. Сначала освойте основы.
Урок 9: ИИ не умеет читать ваши мысли
- «Сделай лучше» = расплывчатая обратная связь.
- «Увеличь контрастность, увеличь текст, добавь отступы» = руководство к действию.
Относитесь к ИИ как к младшему (junior) дизайнеру. Будьте конкретны, терпеливы и итеративны.
Урок 10: Наслаивайте промпты
Не пытайтесь получить идеальный результат за один раз.
- Первый промпт: «Создай компонент формы входа»
- Второй промпт: «Добавь состояния ошибок и анимации загрузки»
- Третий промпт: «Сделай его адаптивным для мобильных с правильными отступами»
Наращивайте сложность шаг за шагом. ИИ лучше работает с сфокусированными, послойными запросами, чем с одним большим промптом.
Реальность такова:
ИИ не заменяет дизайнеров. Он просто показывает, кто не умеет мыслить системами, структурой и замыслом.
еще больше контента у меня в тг