Как я делаю сложные HTML-баннеры с помощью Cursor

Покажу на примере резиновых баннеров. Если вы сделали набросок в HTML и не знаете, как реализовать задумку дальше, — упёрлись в технический порог. Например, не можете заставить элементы на странице располагаться в определённом порядке при изменении размера фрейма. Это нужно при создании резиновых баннеров: форматов вроде 100%×250 или fullscreen.

Я перевожу задумку на язык графики и снабжаю пояснениями.

Слова вместо того, чего ещё не умеешь

После того как баннер собран в HTML, я передаю его Cursor и описываю словами тот результат, которого хочу достичь. Он хорошо меня понимает и меняет код готового баннера так, чтобы результат был достигнут.

Когда правки стирают путь

Проблема начинается, когда нужно внести правки. Тогда агенту снова приходится проделывать все изменения, которые он уже внёс. Если вы дорабатывали баннер вместе какое-то значительное время, этот путь, скорее всего, придётся пройти заново.

Вторая папка

Чтобы сэкономить время, я создаю другую папку с проектом и кладу туда исходник, с которым работал в последний раз. Говорю Cursor: здесь лежит файл с изменениями. Перечисляю список того, что сделал, и передаю ему. Он берёт эти правки из файла и вносит их в уже готовый баннер.

Получается, что я работаю дальше над эскизом и показываю ему наглядно, что хочу сделать. Перевожу на язык графики, чтобы ему было понятнее, и снабжаю пояснениями.

Следующая гора

Такой подход позволяет исследовать дальше. После этого я обучаюсь у него тому, как сделать то, чего ещё не умею, — чтобы делать так же, как он.

Далее процесс повторяется по кругу, начинаясь с нового парного восхождения на следующую гору.