Да-да, один из инвесторов в Lovable (не на 100 долларов, крупный) является дизайнером)
Это перевод очень классного твита, решил поделиться без всяких рерайтов, как есть, потому что я сам взял его себе на вооружение.
1. Используйте модные слова.
Они реально меняют игру и сразу делают ваш дизайн круче. Я составил целый список лучших buzzwords.
«Минимализм, стеклянные элементы, плавающие детали»
«Игривый, жирные/яркие цвета, скруглённые углы»
«Люксовый, журнальный, тактильный, кинематографичный»
2. Если первый промпт не зашёл — моментально начинайте заново.
Не тратьте время на исправление того, что с самого начала не работает.
Если первая версия ощущается не так, как нужно — удаляйте её.
Перепишите идею, переформулируйте промпт и попробуйте ещё раз.
Лучшие мои результаты были со второго захода.
3. Lovable любит картинки — используйте их для быстрых правок.
Сделайте скриншот бага, выделите проблему и добавьте короткий комментарий:
«Тут странные отступы, сделай плотнее и аккуратнее.»
Lovable намного лучше понимает визуальные задачи, чем чистый текст.
4. Используйте этот промпт для апгрейда верстки:
«Сохрани контент, но улучши отступы, визуальную иерархию и сделай так, чтобы всё ощущалось премиально.»
Этот промпт решает 80% проблем с дизайном в одном предложении.
5. Итерации по-дизайнерски
Функция отката — ваш лучший друг. Пробуйте смелые варианты. Не чини сломанное, а просто откати и сделай по-новой.
6. Используйте настоящие библиотеки компонентов
Если всё выглядит шаблонно — не пытайтесь это исправлять. Просто вставьте нормальные строительные блоки, например из:
* 21st(dot)dev
* Aceternity UI
* HyperUI
Скопируйте промпт и вставьте в свой проект Lovable.
7. Добавьте лёгкую анимацию для ощущения премиум-качества
«Плавные переходы при наведении, появление по скроллу, мягкие анимации входа»
Или: «Анимируй этот логотип при наведении».
Анимация = ощущение качества.
8. Редактируйте визуально, чтобы экономить время
Не обязательно всё делать через промпты. Мой главный лайфхак — выбрать конкретный элемент в визуальном редакторе и отдельно к нему прописать промпт.
9. Сделайте мобильную версию одной строкой
«Сделай страницу адаптивной и оптимизированной под мобильные устройства.»
Lovable делает 80% работы — просто проверь обе версии перед публикацией.
10. Финальный чек-лист перед публикацией:
Перед запуском не забудьте:
* Добавить title и описание (SEO)
* Загрузить favicon и OG/social изображение
* Подключить домен
P.S. Ни убавить - ни прибавить) Человек сэкономил много времени нам всем)
—
Мой тг-канал по ии-стартапам и вайб-коду