По требованию читателя поясняю: мы расширем мое очко в Chrome. Далее в посте информация о том, как сделать расширения для Chrome Web Store с использованием модных нейросетей

Мне сказали, что пост про создание расширения — это скучно, однако надо же что-то написать

Что использовал: figma, cursor, gemini 2,5 pro

Для начала нужно было сделать хоть какой-то макет всего это безобразия. Идея была взята рандомно с целью проверить гипотезу: нужно ли вообще кому-то расширение или нет?

Если что, то расширение еще не доделано, но в активном процессе.

Так как я не особо много понимаю за чистый код, то мне было все равно, как это выглядит. Главное — чтобы можно было прочитать и +- сказать, что сойдет

Немного опишу принцип взаимодействия с MCP: это связующее звено между Figma и IDE (Cursor); MCP позволяет Cursor просматривать файлы Figma и переносить стили и прочее в код. Спойлер: делает он это так, как будто бы вы наняли пьяного индуса-джуна

На практике можно часами расписывать ему, что нужно точно четко следовать макету, просить вносить минимальные правки и ни в коем случае не ломать структуру кода, но бесплатный лимит рано или поздно даст о себе знать, а вместо работающего кода будет порно-пародия на проект

Выход один: в IDE есть коммиты, они позволяют вам сохранять текущую версию, чтобы после неумелых рук индуса можно было откатиться назад, когда еще трава была зеленее, а небо ярче

В итоге пришлось включать православный VPN и подключаться к gemini 2,5 pro

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

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

Ни в коем случае не стоит превышать порог контекстного окна в 150-200 к токенов, потому что модель начинает все крушить и ломать по непонятной причине

И самое главное: сначала обсуждать с моделью перед тем, как вносить изменения в код; не более одного ключевого изменения (не нужно просить модель написать всю кодовую базу сразу, иначе он сделает все так, что вы никогда не поймете, что там вообще происходит и по какой причине не работает)

Естественно, без базовых знаний html, css, js будет сложно, но никто не запрещает задавать тупые вопросы нейросети

О дальнейшем ходе работы и функционале расскажу в каком-нибудь другом посте