За полчаса и 10 рублей — полноценный сайт для загрузки и редактирования скриншотов. Пошаговая инструкция

Делюсь личным опытом создания проекта с нуля на вайбкоде.

Красивый сайт со сверхбыстрой загрузкой и функционалом, которого не найти на ресурсах без авторизации. И всё это — с нуля за полчаса описания банальных пожеланий на русском языке и менее 10 рублей затрат на одном из самых дешёвых ИИ-сервисов. Это реально новый мир.

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

Что сделал

Пример рабочий, проверить можно здесь https://kili.ru/screen/

Причём не просто делимся скриншотами, а оформляем их с аннотациями:

Быстрый сайт, где можно редактировать скриншоты, мне лично нужен и интересен — в частности, чтобы общаться совместно, редактировать с коллегами (примерно как в Google Docs в режиме редактора). Раньше подобные решения искал и не нашёл, а сейчас — просто взял и сделал. Описал, что захотел — и получил. Разве не чудо?

Кстати: все пометки на скриншотах в этой статье сделаны в этом самом инструменте.

За 9 рублей – уже отличное решение

Рабочий продукт за полчаса и 10 рублей

Полчаса и 10 рублей — это время и деньги на первые пару промптов и рабочий сайт, который ИИ запустил на локальном компьютере. Далее — отладка, ещё промпты, тесты, улучшения. Понятно, что любой продукт можно и нужно долго доводить до ума, но полчаса достаточно, чтобы увидеть очень крутой результат для «личных целей». А для релиза «в массы» нужно потратить многие часы и дни на тесты и тюнинг.

Здесь использую экономичный DeepSeek V4 Pro, до этого работал на более мощной модели Kimi K3 – но последний «выедает» деньги очень быстро.

Деплой — развёртывание на сайте

Деплой, то есть выкладка готового сайта на сервер, «скушала» более 20 рублей. Но и эту работу ИИ сделал сам — я лишь дал данные доступа. ИИ очень хотел облачный сервер VDS, где удобно развернуть Node.js, но я просил сделать на обычном хостинге, и после «танцев с бубном» минут на 20 ИИ самостоятельно справился. Во время развёртывания ИИ много раз «упирался» в проблемы, когда что-то было заблокировано, и пробовал другие гипотезы решения. Это типично: ИИ делает много разных попыток и путей, если упирается в препятствия.

Умные слова. Как это работает. Вайбкод для начинающих

Теперь как это всё повторить, по шагам.

1. Качаем и ставим opencode — это бесплатно (я ставил на Windows). На opencode сильно останавливаться не буду — есть и другие решения.

2. Покупаем подписку Go за $5. Я оплатил через Telegram через один из сервисов — 896 ₽ ($5 на сегодня — это 394 рубля. Сервисы тоже хотят жить…).

   Важно: один из таких сервисов недавно обманул меня на 2500 рублей — я перевёл, а они не оплатили. Будьте осторожны.

3. В командной строке Windows устанавливаем opencode по инструкции, далее запуск: Win+R → opencode.

   

4. Пишем /models и выбираем Deepseek (или другую модель — эта на сегодня хороша по соотношению цены и качества).

   

5. Мой начальный промпт:

   Сделай онлайн-сервис “поделись скриншотом”. Максимально быстрая загрузка сайта (вначале грузим минимум, а функционал редактирования лишь по клику) Максимально солидный мягкий комфортный дизайн (react?)

   Работа с сайтом:

   1 зашли

   2 вставили скриншот

   3 сайт изменился на новую ссылку с этим скриншотом, она автоматом в буфере обмена

   4 на сайте появилась кнопка, по которой выпадает редактор.

   В редакторе:

   4.1. изменение размера скриншота (маркерами)

   4.2. подпись текстом

   4.3. прямоугольник

   4.4. стрелка все элементы редактора можно менять в любой последовательности. Их видят все кому выслали скриншот (рисуются поверх и остаются редактируемыми).

   5. никаких логинов не требуется.

6. Через несколько минут ИИ сообщает что всё готово. но видим умные слова:

   

   Оказалось — несложно: надо выполнить эти команды в командной строке (снова Win+R) — копируем и запускаем. И на http://localhost:5173/ заработал сайт. И как быстро… просто мгновенно.

Без косяков не обошлось

На сайте основной функционал заработал сразу, а тексты не писались. Жму на «Т», кликаю в экране — и ничего нет. Пришлось поругать ИИ, заставить его это сделать. Обратите внимание:

Промпт 2:

1. Тексты не печатаются. Надо чтобы был текст и на русском.

2. Добавь кнопку смена цвета выделенного элемента — сделай 10 базовых цветов.

После этого промпта появились цвета, но текст… а текст так и не заработал!

Промпт 3 (один из пунктов промпта)

.. ГЛАВНОЕ — так и не работает ввод текста. ПРОВЕРЬ.

И — чудо случилось — ввод текста заработал!

Странные мысли

У меня огромный опыт в ООП-программировании, я разрабатывал сложнейшие архитектуры классов для CAD-элементов и бизнес-аналитики, а здесь — ничего этого не нужно. Все сложности «под капотом», и всё работает.

Теперь при работе с ИИ включаются навыки работы с людьми: пока десять раз не скажешь и «пальцем не тыкнешь» — баги будут. Так же и в классическом программировании — баги есть всегда. И если там половина времени тратится на тестирование, описание проблем и поиск решений, то в вайбкоде почти всё время уходит на тесты (написание тестов — это и есть промпты на изменение), а само написание кода берёт на себя ИИ. В тестировании ИИ тоже сильно помогает, что ускоряет процессы (не буду углубляться — это тема отдельной статьи).

ИИ-революция уже началась, и куда она приведёт — мы пока не знаем.