Многие до сих пор воспринимают нейросети как игрушку для генерации картинок с котами. Но реальность такова: сегодня грань между «у меня есть идея» и «у меня есть работающий бизнес» сжалась до нескольких часов.
Вчера я решил провести эксперимент: сможет ли Claude (модель 4.6) написать полноценное веб-приложение для рисования, которое не стыдно показать людям, и принесет ли оно хоть какие-то деньги за 24 часа.
Шаг 1: Идея и ТЗ для нейросети
Я не хоел делать очередной сложный Photoshop. Моя цель: минималистичное веб-приложение для медитативного рисования.
Функционал:
Чистый холст на весь экран.
Набор кистей с плавными градиентами.
Кнопка «Экспорт в 4К» (для тех, кто хочет напечатать свой шедевр).
Адаптивность (чтобы работало и на планшетах).
Я зашел в Claude и скормил ей промпт/ Почему Claude? На сегодняшний день её функция Artifacts - это лучший инструмент для мгновенного предпросмотра кода.
Шаг 2: Разработка (60 минут)
Саме удивительное - я почти не писал код руками. Мы итерировали с Claude:
Первая версия: Просто черная линия на белом фоне. Слишком скучно.
Вторая версия: Добавили выбор цветов и толщину кисти. Уже лучше.
Киллер-фича: Я попросил добавить «эффект акварели» и симметрию (как в калейдоскопе). Это превратило обычную рисовалку в залипательный инструмент.
Важный нюанс: Когда код становился слишком длинным, Claude иногда «забывала» старые функции. Приходилось напоминать: «Сохрани логику сохранения файла, но перепиши только блок с палитрой».
Шаг 3: Монетизация «на коленке»
Чтобы заработать в первый день, нельзя ждать одобрения в App Store. Я пошел путем Web-first:
Хостинг: Задеплоил всё на Vercel за 5 минут (бесплатно).
Модель оплаты: Я не стал вешать агрессивную рекламу. Вместо этого я добавил кнопку «Unlock Pro Brushes» (Разблокировать кисти с эффектами неона и масляной краски) за символические $2.99.
Прием платежей: Интегрировал простую форму Buy Me a Coffee / Stripe.
👉 Скачивай короткие видео без водяных знаков
Шаг 4: Трафик и первые деньги
Запускаться в пустоту бессмысленно. Я использовал три канала:
X (Twitter) и TikTok: Выложил короткое видео (screen recording), как я рисую неоновую абстракцию за 30 секунд с подписью: «Сделал это за час с помощью Claude. Попробуйте сами».
Product Hunt (Launch Day): Закинул проект в раздел «Ship».
Telegram-чаты: Скинул ссылку в пару сообществ для дизайнеров и любителей нейросетей.
Результаты за 24 часа:
Посетителей: 1,240 человек.
Конверсия в покупку Pro: 12 человек.
Чистая прибыль: $35.88 (минус комиссии).
Как выжать из Claude максимум
Если в первой части мы говорили о деньгах и маркетинге, то здесь разберем, как Claude 3.5 Sonnet справляется с ролью ведущего разработчика и где ей нужно «подставлять костыли».
Архитектура через Artifacts
Главная фишка Claude - это Artifacts. В отличие от обычных чат-ботов, она создает отдельное окно с кодом, который исполняется прямо в браузере.
Для приложения-рисовалки я выбрал связку React + Canvas API.
Почему React: Claude отлично структурирует компоненты и управляет состоянием (state).
Почему Tailwind CSS: Это позволяет нейросети описывать дизайн прямо в классах элементов, не плодя бесконечные файлы стилей.
Технический хак: Чтобы приложение не «рассыпалось» при обновлении, я просил Claude использовать Lucide React для иконок. Это стандарт в её базе знаний, поэтому интерфейс сразу выглядел современно.
Как правильно «промптить» код
Самая большая ошибка - попросить «напиши всё сразу». Код быстро раздувается, и Claude начинает его обрезать из-за лимита контекста.
Мой алгоритм итераций:
База: «Создай React-компонент с полноэкранным Canvas и базовыми функциями рисования (черный цвет, толщина 5px)».
Математика: «Добавь поддержку давления (через event.pressure), если пользователь использует стилус или тачпад».
Экспорт: «Добавь функцию захвата изображения с холста и его конвертацию в Blob для скачивания в PNG».
5. Главные «боли» и их решение
Проблема: Галлюцинации в зависимостях
Иногда Claude пытается импортировать библиотеки, которых нет в её песочнице (например, специфические плагины для фильтров).
Решение: Я жестко ограничил её: «Используй только нативный Canvas API и стандартные хуки React». Это заставило её писать чистую логику вместо того, чтобы надеяться на сторонние пакеты.
Проблема: Забывчивость при больших объемах
Когда прложение выросло до 400 строк кода, Claude при внесении мелкой правки могла выдать только измененный кусок.
Решение: Я использовал команду: «Выдай полный обновленный код файла, сохранив всю предыдущую логику экспорта и слоев».
6. Оптимизация под Mobile
Поскольку я планировал лить трафик из соцсетей, приложение должно было летать на смартфонах.
Мы столкнулись с тем, что скролл страницы мешал рисованию.
Фикс: Claude добавила CSS-свойство touch-action: none, которое блокирует стандартные жесты браузера, пока палец находится на холсте.
Вывод: Claude - это не просто «копирайтер для кода». Это напарник, который понимает контекст. Если вы понимаете основы JS, вы можете превратить её из советчика в полноценный компилятор ваших идей.Итоги и выводы
Заработать миллион за день не получилось, но $35 - это больше, чем ноль. Главный инсайт: скорость сейчас важнее идеального кода.
Мои советы тем, кто хочет повторить:
Не усложняйте. Делайте одну вещь, но делайте её эффектно.
Используйте Claude Artifacts. Это позволяет видеть результат правок в реальном времени, не переключаясь в редактор кода.
Дизайн решает. Нейросети отлично пишут логику, но «чувство стиля» им нужно прививать через четкие промпты («используй пастельные тона», «добавь стеклянный эффект в стиле Apple»).
🔥 Больше про заработок на нейросетях в тг: Polevoy