(перевёл и скомпоновал советы из постов крутого вайб-кодера 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. Анимируй мой лого при загрузке.»

А теперь самое интересное!

Сделал для вас страницу на русском со всеми Buzzwords от автора. Вы можете их применять при создании сайта как в самом lovable, так и в Bolt, Rork, Cursor и так далее. Они меняют/улучшают дизайн вашего веб или мобильного приложения.

#вайбкодингУроки #вайбкодинг #lovable

мой канал: https://t.me/oh_my_zen