(перевёл и скомпоновал советы из постов крутого дизайнера и вайб-кодера Damien Ghader)
1) Начните с цели.
Сформулируйте, что вы создаёте: например, «Сделай мобильный крипто-кошелёк с современным премиальным вайбом». Чем яснее цель, тем проще получить результат.
2) Задайте Look & Feel (вайб, настроение).
Опишите атмосферу приложения: используйте buzzwords вроде «минималистично», «кинематографично», «чистый интерфейс», «лаконично, как Apple», «эстетика Behance», «стильно, как Dribbble-шоты».
3) Определите бренд: цвета, шрифты, стилистику.
Уточните основной и вторичные цвета (по hex-кодам), нужный шрифт, межбуквенное расстояние, светлый или тёмный режим.
Пример: «Шрифт Inter, -5 letter-spacing, основной цвет #4F5D61, акценты #99B3B6 и #FF6E35, светлый режим».
4) Укажите UI-библиотеку.
Если хотите, чтобы компоненты были похожи на определённую библиотеку, прямо пишите это: «Используй shadcn UI для всех компонентов».
5) Распишите структуру и детали интерфейса.
Какие страницы/блоки, какие элементы, какой макет:
«Боковая навигация: Home, Portfolio, Buy/Sell, Profile, Settings. На Home — аналитика аккаунта, резюме портфеля».
6) Добавьте хаковые детали для максимального результата:
• Референсы брендов: просите сделать «в стиле Apple», «референс Nike.com» или просто «как на сайте Tesla».
• Логика сетки: сразу пишите, что хотите — «двухколоночная верстка», «грид из карточек с отступами и hover-эффектами», «карусель отзывов».
• Анимации: добавляйте «плавные анимации при скролле», «микровзаимодействия при наведении», «анимировать логотип при загрузке».
• Чейнинг модификаторов:
комбинируйте через запятую:
«Hero-секция, фон на всю ширину, центрированный текст, стеклянный эффект, белый шрифт с засечками, скругления 2xl, лёгкая тень».
• Загрузка своих иконок/логотипов: добавляйте в промпт: «Анимируй мой логотип на старте», загружайте SVG, просите сделать hover-анимации.
Пример полного промпта:
«Сделай премиальный крипто-кошелёк с акцентом на мобильный формат. Атмосфера: минимализм, эффектность, как Apple. Основной цвет #4F5D61, шрифт Geist, белый фон, акценты #99B3B6 и #FF6E35. Light mode. UI — shadcn. Страницы: Home (с аналитикой и резюме), Portfolio, Buy/Sell, Profile, Settings. Навигация боковая, collapsible. Hero — фон на всю ширину, стеклоэффект, плавные анимации на скролле, micro-interactions на hover. Анимируй мой лого при загрузке.»
А теперь интересное!
Сделал страницу на русском (https://lovable-buzzword.lovable.app/) со всеми Buzzwords от автора. Вы можете их применять при создании сайта как в самом lovable, так и в Bolt, Rork, Cursor и так далее. Они меняют/улучшают дизайн вашего веб или мобильного приложения.
—
Мой тг-канал по ии-стартапам и вайб-коду