Стиль на словах: сделайте красиво
Стиль на словах: сделайте красиво
Вот секрет, о котором никто не рассказывает: в вайб-кодинге вы задаёте стиль не кодом, а прилагательными.
Вы не заучиваете свойства CSS. Вы описываете нужный вид так, как ставили бы задачу дизайнеру: ощущениями, прилагательными и отсылками. «Тёмный, стеклянный, премиальный — как музыкальное приложение». ИИ переводит вайб в классы.
Посмотрите на один реальный пример.
Вы говорите:
«Сделай мою карточку профиля тёмной и стеклянной, с мягкими скруглёнными углами и премиальным ощущением — как экран „сейчас играет" в Spotify».
ИИ выдаёт:
<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">
Каждое прилагательное стало классом:
- тёмный →
bg-gradient-to-br from-slate-950 to-indigo-950 - стеклянный →
bg-white/10 backdrop-blur-md border border-white/20 - премиальный, мягкие углы →
rounded-2xl p-8
В этом весь трюк: прилагательные на входе, классы на выходе. Чем точнее ваши отсылки («как музыкальное приложение», «как лендинг банка», «как неоновая аркада»), тем лучше результат.
Ниже — ваша карточка профиля из прошлого урока, лишённая всех стилей. Простой белый фон, текст по умолчанию, ноль вайба. Ваша миссия: вернуть её к жизни, описывая один образ за другим.
Инструкции
Задайте <body> тёмный градиентный фон — сначала опишите вайб про себя: тёмный, глубокий, премиальный. Затем добавьте классы
Подсказка: Попробуйте: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
Оформите контейнер карточки: матовое стекло, мягкие скруглённые углы, щедрые отступы — тот самый «стеклянный, премиальный» вид
Превратите CTA-ссылку в градиентную кнопку — смелую, яркую, которую невозможно не заметить
Добавьте hover-эффект, чтобы кнопка реагировала на курсор — мелкие детали оживляют интерфейс
Ваш код
Опишите, что хотите создать на этом шаге, и я напишу код — затем нажмите «Применить», чтобы вставить его в редактор. Текущий шаг: Задайте <body> тёмный градиентный фон — сначала опишите вайб про себя: тёмный, глубокий, премиальный. Затем добавьте классы