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

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

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

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

Что сделал

Пример рабочий, проверить можно здесь https://kili.ru/screen/ ^[2] (актуальная версия).

Для сравнения – вот первая версия https://kili.ru/screen1/ ^[3]

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

Быстрый сайт, где можно редактировать скриншоты, мне лично нужен и интересен — в частности, чтобы общаться совместно, редактировать с коллегами (примерно как в 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/ ^[4] заработал сайт. И как быстро… просто мгновенно.

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

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

Промпт 2:

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

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

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

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

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

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

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

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

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

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

Обновление от 1.08.2026

Продолжил разработку, и конечно наступил на разные грабли, которыми с удовольствием поделюсь! Обзор:

• Не все ИИ одинаково полезны

• Тесты. Тесты. И ещё раз – тесты.

• Выноски (callout) – сразу очень круто получились

• Особенности мобильной версии

• Типичный промпт и ответ ИИ

• Вайбкод – это круто!

Как я делал новую версию

Решил добавить инструмент “обрезка” – DeepSeek её добавил быстро и в целом верно, НО – начал “уезжать” масштаб после обрезки, изображение стало “скукоживаться”. Я про это написал. Один раз написал, два раза.., цитаты:

Если при вставке картинки она больше, чем экран – впиши её в экран, чтобы вся была видна по умолчанию. Сейчас она уходит за пределы экрана. Пример https://kili.ru/screen1/vQvCm3TaAO ^[6] Надо как в боевой версии – изначально тут масштаб отлично смотрится https://kili.ru/screen/2_ygkE8wcV ^[7] (тот же скриншот вставил).

Это не помогло, написал так:

После обрезки также скукоживается и как раньше. Постарайся СОХРАНИТЬ 100% КАК БЫЛ МАСШТАБ после обрезки, чтобы НИЧЕГО НЕ ПРЫГАЛО, НЕ СКУКОЖИВАЛОСЬ!!!

А после так:

Скукоживание после обрезки осталось. Примерно в 5 раз уменьшает масштаб. Сделай после обрезки равнение на экран, увеличь масштаб по экрану.

С n-ной попытки решить удалось, но.. в начальном экране при вставке стал сбиваться масштаб. В общем – появились проблемы, где их не было, ухудшения. А это очень, ОЧЕНЬ СИЛЬНО осложняет тестирование.

Не все ИИ одинаково полезны

В итоге я поставил.. ChatGPT Sol. Для через “через пень колоду” подключил подписку Pro, танцы с бубном пробы разных VPN, и хорошие люди помогли. Итог – ИИ стал меньше тупить! Я очень рад, сколько времени можно сэкономить!! Главное, стало меньше этих поганых “уверенных” слов ИИ в стиле “да, ты прав, я нашёл ошибку ^[8]. Всё исправил, теперь на 100% работает правильно!”. Эти слова обычно означают “ничего не получилось, но я не признаюсь!” – тесты покажут, что “100% рабочий вариант” как и прежде не работает. С Sol стало лучше – меньше лишних “перепроверок проверенного”, быстрее пошла работа! Хотя и с ним далеко не сразу всё получается, надо проверять, дорабатывать, допиливать.

Тесты. Тесты. И ещё раз – тесты.

Вайбкодинг – это не проработка архитектуры классов ООП. Вайбкодинг – это тесты. Тестировщики и ранее давали задачи “кожаным” программистам, а теперь подобные задачи ставятся для ИИ. Баги сам ИИ ищет плохо, здесь сейчас нужен человек, плюс во время тестирования появляется много идей, как улучшить функционал. Банально и эффективно. Обычно тестирую в первую очередь то, что было сделано в последней итерации после очередного промпта. Всегда сразу вижу, что нужно доработать, поэтому промптов – многие десятки.

Мобильная версия

Типичный промпт и ответ ИИ

Промежуточный промпт:

v2.08.

Добавь выравнивание, похожее на работу в PowerPoint. При движении элементов, их маркеров, при создании элементов старайся “цепляться” и “равняться” на соседние элементы. Без фанатизма, чтобы было как PowerPoint, и показывай пунктирными линиями (неярко, солидно) с чем именно мы “связались”. Цель – удобное расположение разных элементов в одну линию, на равной ширине. 4. Правка: ты сделал, чтобы колесом мыши как в CAD увеличивался масштаб. 4.1. Это работает, но дёргается изображение. Сделай максимально плавное изменение, солидное. 4.2. Если мышь крутить вниз, то масштаб уменьшается, но “пиксель из под мыши” уходит – видимо CAD-стиль сделан только для увеличения масштаба, а не для уменьшения. Для уменьшения тоже надо.

Ответ ИИ после первой попытки выполнения задачи:

v2.08

• Добавлена привязка краев и центров элементов при создании и перемещении.

• Привязка работает при редактировании маркеров.

• Прямоугольники цепляются к одинаковой ширине и высоте.

• Связи показываются тонкими голубыми пунктирными направляющими.

• Порог привязки остается одинаковым при любом масштабе.

• Колесный zoom получил плавную rAF-анимацию.

• Пиксель под курсором фиксируется при увеличении и уменьшении.

• Устранено дергание от асинхронной компенсации scroll.

А далее – тесты, которые показали: функционал появился, но конечно есть ещё проблемы. И далее ещё несколько итераций изменений.

Вайбкод – это круто? Да – это круто!

Безусловно, впечатление ^[9] от вайбкода, несмотря на все проблемы – очень и очень хорошее! Скорость разработки невероятно возросла, качество на высоте, восхищает разнообразие работ: логика ^[10], вёрстка, дизайн, деплой – всё умеет.