Как я сделала в ИИ новый лендинг для курса за пять минут
…и три дня с ним ковырялась, потому что я гребаный перфекционист 🤣
Промпты - ниже в посте, а на скринах - ответы ИИ, чтобы вы лучше представляли себе процесс 👆
1️⃣ открыла Claude, создала новый чат в проекте, где уже сохранена вся информация обо мне и о моей работе, загрузила старый лендинг в PDF и попросила
«Посмотри старый лендинг моего курса по фотографии в стиле On top. Сейчас я делаю новые лендинг. Как лучше его сделать, чтобы увеличить конверсию?»
Старый ленд я сохраняла, чтобы из него перенести всю информацию на новый сайт. Если бы у меня не было старой страницы - пришлось бы просто текстом набирать: о чем курс, какие уроки входят, для кого, зачем и т.д.
2️⃣ Клод пишет новую структуру страницы по блокам и предлагает сразу сгенерировать HTML-код для страницы. Я попросила только сделать дизайн более светлым, а не на темном фоне.
Готовый код я сразу скопировала, вставила в страницу на тильде и начала добавлять картинки.
И тут я совершила 2 ошибки (не повторяйте):
Ошибка раз: не попросила ИИ переписать тексты, потому что решила, что быстрее перепишу сама, почему-то 🤪 в итоге, промучалась долго, потому что почти все текстовые блоки были написаны ии-шным языком и местами были даже фактические ошибки.
Как надо было: посмотреть текст, и дать команду «перепиши тексты в моем стиле» (в проекте уже есть примеры текстов, написанных мной), «убери такие-то формулировки, они звучат неестественно» (благо, ИИ не обижается, когда ему говоришь, чтобы не писал всякую хрень), «вместо этой фразы … - напиши вот это …» - это реально улучшает ситуацию и в результате получается быстрее, хотя поначалу кажется, что проще самой написать, чем каждую фразу кидать обратно в ИИ и просить переделать.
Ошибка два: не продумала изображения.
Надо было заранее загрузить фотографии с примерами в стиле ON TOP и кинуть в чат ссылки на них, чтобы они уже были встроены в код.
Вставлять их вручную несложно, даже если вы в верстке ни бум-бум: Клод говорит, какую строку надо найти, и что вместо неё вставить.
3️⃣ Поняла, что не хватает галереи с фотографиями, закинула в Клод следующий промпт:
«добавь пожалуйста на эту страницу блок галереи с примерами фото в стиле ON TOP. Оформление - на твой вкус, только сделай так, чтобы при нажатии можно было посмотреть картинку поближе.
Ссылки на изображения можно использовать эти:
https://static.tildacdn.com/tild3136-3961-4566-a239-303163623861/1000-sasha_bunaeva-7.jpg ссылок>»
Клод прислал мне куски кода, которые нужно вставить в таблицу стилей и в тело самой страницы.
Галерея получилась хорошая, но я потом поняла, что надо было в другом порядке поставить фотки, и меняла их местами сама.
4️⃣ Потом я вспомнила, что вообще-то есть второй тариф, с обратной связью, которого не было на старом лендинге, и попросила его добавить в блок с тарифами. С первого раза он что-то намутил со вторым тарифом, я попросила переделать (см. скрины)
5️⃣ Потом мне захотелось еще фото добавить в пустое пространство в блоке про стиль. Уже на опыте, я сразу метнула в чат запрос со ссылкой на фото, чтобы проще было вставлять код.
6️⃣ Вручную я добавляла всплывающий блок с формой регистрации на курс - в него один фиг надо вставлять html-код с формой zenclass. Хотя в теории, можно было и этот код скормить Клоду и попросить оформить.
Итого, если хотите сверстать готовую страницу в ИИ:
1. сразу готовьте список ссылок на фотографии и пишите, какую в какой блок надо вставить, с какой стороны, и какого размера;
2. гоняйте ИИ, пока не напишет тексты человеческим языком, чтобы потом в коде их не искать и не переписывать.
Знание html-верстки в этой ситуации - скорее минус, потому что я много где копалась сама, вместо того, чтобы заставить ИИ переписать код. Ну ладно, раз в 20 лет могу себе позволить 🤣
Я пользуюсь Claude, а не Чатом GPT, потому что стиль текстов у Клод мне нравится больше, и он у меня оплачен. Бесплатной подписки чатГПТ не хватило на генерацию кода, он сказал - возвращайся завтра, поэтому как он пишет код - я так не и протестировала. А так, думаю, все нормальные ИИ могут сгенерировать вам html-код для сайта.
