Этот ИИ строит сайты с безупречным дизайном. Протестировал Hatch Canvas

Знакомое чувство, когда в голове рождается идея, а ты смотришь на пустой экран и не знаешь, с чего начать? Или когда представляешь себе идеальный сайт, но мысль о том, чтобы нанять разработчика или снова разбираться в этих громоздких конструкторах, убивает все желание? Мне это знакомо до боли. И, честно говоря, я уже порядком устал от инструментов, которые на каждом углу кричат о «лучшая агентская система», а на деле выдают пластиковый сайт, который дорабатывать и дорабатывать или в принципе сломанный функционал.

Поэтому, когда я наткнулся на Hatch Canvas, я отнесся к нему без особого интереса. Его позиционировали как некую смесь умного чата и бесконечной доски, куда можно поместить свои идеи, наброски, изображения, а встроенный агент сам разберется, что с этим делать. Организовать, создать визуал, разработать концепцию и, в финале, превратить простой эскиз в работающий сайт или даже игру. «Ну да, конечно», — подумал я.

Но два фактора заставили меня его все-таки проверить. Во-первых, на момент написания статьи Hatch Canvas абсолютно бесплатный. Совсем. Во-вторых, у него, кажется, нет лимитов. Я серьезно — я намеренно генерировал сложные проекты один за другим — сайты, игры, прототипы — пытаясь нащупать то самое уведомление «Ваш лимит исчерпан». Оно так и не появилось. Это сочетание простоты (всего одно поле для ввода) и щедрости заставило меня отложить скепсис и посмотреть, на что он способен на самом деле.

Меня интересовало не то, что он может в теории, а то, что он сделает на практике. Поймет ли он детальное ТЗ на русском языке, со всеми этими «поиграйте со шрифтами» и «сделайте красиво»? Справится ли он с нетривиальной задачей, например, создать сайт в стиле брутализма с кастомной анимацией?

Поэтому дальше я не буду рассуждать о технологиях. Я просто покажу, что именно я писал в строку промпта и что получал в ответ. Шаг за шагом, на реальных примерах. Посмотрим, насколько Hatch Canvas “лучше” чем другие агенты.

Не доска, а полноценная студия

Когда впервые заходишь на Hatch Canvas, видишь не перегруженную панель с десятками кнопок, а всего одну строку для ввода запроса — «Hatch an idea». Ниже — несколько готовых примеров, которые сразу дают понять, что этот инструмент не только про текст. «Создать игру», «спроектировать сайт», «сгенерировать мудборд» — предложения звучат смело, и именно они заставили меня копнуть глубже.

Но самое интересное начинается, когда вы создаете свой первый проект и попадаете на тот самый «бесконечный холст». Это огромное, чистое пространство, которое не ограничивает ваши мысли рамками одного слайда. Сверху — минималистичная панель инструментов: можно добавить текст, создать полноценный документ прямо на холсте, накидать стикеры-заметки, загрузить свои файлы или нарисовать простые фигуры. Справа — палитра и инструменты для рисования. Все интуитивно понятно.

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

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

Типичный лендинг, но с идеальным визуалом

Я решил начать с классики. Лендинги для вебинаров — одна из самых частых задач для маркетологов и предпринимателей. Мне было интересно, сможет ли Hatch Canvas создать не просто «нормальную» страницу, а что-то, что будет выглядеть по-настоящему чисто, современно и профессионально. Я хотел проверить его вкус и внимание к деталям.

Это была моя попытка воссоздать страницу, которую я бы заказал у хорошего дизайнера. Я постарался описать в промпте не только структуру, но и ощущения, которые должен вызывать визуал.

Промпт: Сделай современный и легкий лендинг для бесплатного вебинара «ИИ, который вас понимает». Целевая аудитория — предприниматели. Визуальный стиль — чистый, много «воздуха», с мягкими пастельными градиентами на фоне, которые плавно переливаются. Типографика должна быть крупной и легко читаемой. Анимации: при прокрутке страницы блоки должны появляться с легким эффектом fade-in (плавное появление). Кнопки при наведении должны слегка увеличиваться и менять оттенок. Структура: 1. Главный экран с заголовком, кратким описанием и яркой градиентной кнопкой «Участвовать бесплатно». 2. Блок «О чем поговорим?» — четыре карточки с минималистичными иконками. 3. Блок «Для кого этот вебинар?» — три карточки, описывающие аудиторию. 4. Секция «Практика: До и После» — сравни два блока: «Проблема» (с красными элементами) и «Решение ИИ» (с зелеными), чтобы наглядно показать пользу. 5. Блок с отзывами «Что говорят предприниматели». 6. Бонусный блок «Ваш AI-инструментарий». 7. В конце — секция FAQ (Отвечаем на вопросы) в формате аккордеона, который плавно раскрывается при клике.

Я нажал Enter и стал наблюдать. Честно говоря, это одна из моих любимых генераций. ИИ не просто выполнил ТЗ, он его прочувствовал. На холсте, блок за блоком, начал собираться сайт, который выглядел именно так, как я себе представлял. Градиентное «облако» на фоне было мягким и не отвлекало. Карточки были идеально выровнены. Анимации при прокрутке были плавными и ненавязчивыми.

Особенно меня впечатлил блок «До и После» — он действительно создал две колонки, визуально противопоставив проблему и решение, используя именно те цвета, которые я указал. Финальный результат был не просто «хорошим», он был безупречным с точки зрения дизайна и верстки. Я потратил на это около 15 минут, и большая часть времени ушла на формулирование детального промпта. Сделать такое же в конструкторе у меня заняло бы целый день, и я не уверен, что смог бы так же точно настроить все анимации.

Может ли Hatch в авторский стиль? Тестируем брутализм

Одно дело — собрать красивый лендинг из стандартных элементов. Совсем другое — создать что-то в узком, авторском стиле. Я решил проверить, есть ли у Hatch Canvas «вкус» и сможет ли он справиться с нетривиальной задачей. Я выбрал брутализм — стиль, который легко испортить, превратив в неряшливый хаос.

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

Промпт: Создай сайт-портфолио для фотографа Алекса Восса. Стиль — черный, минималистичный, цифровой брутализм. Типографика — крупный, жирный, рубленый шрифт белого цвета, все буквы заглавные. Главный экран — на всю высоту. Сделай кинематографический эффект: при прокрутке страницы вниз должны плавно меняться фоновые полноэкранные изображения и заголовки для разных категорий работ: «PORTRAITS», «ABSTRACT», «BRUTALIST». Ниже — секция «SELECTED WORKS» с галереей работ в виде сетки (3х2). Анимация при наведении: курсор наводится на изображение в галерее, оно плавно затемняется, и поверх него появляется название проекта с ярким цветовым акцентом (например, кислотно-желтым). В самом низу — футер с контактами «GET IN TOUCH».

Я был почти уверен, что на механике со сменой фонов ИИ споткнется. Это требует довольно сложного кода. Но результат снова превзошел ожидания. ИИ создал именно тот сайт, который был нужен: строгий, черный, с акцентом на типографику и фотографии.

Самое главное — он реализовал ключевую фишку. Когда я начал прокручивать страницу, фоновые изображения действительно менялись, создавая мощный визуальный эффект. Галерея работ тоже была интерактивной: при наведении курсора на превью, как я и просил, появлялся текст с ярким цветовым акцентом. Это выглядело не как дешевый шаблон, а как продуманный авторский сайт. Это был момент, когда я понял, что Hatch Canvas способен не только на стандартные, но и на по-настоящему креативные задачи.

Заказываем интерактивный 3D-сайт

Хорошо, стильные сайты — это одно. Но что насчет чего-то по-настоящему сложного, с 3D-графикой и кастомной анимацией, которая реагирует на действия пользователя? Я решил устроить финальный стресс-тест и проверить, сможет ли Hatch Canvas создать нечто подобное.

Я был настроен максимально скептически. Это казалось невозможным, даже специализированные агенты по типу Bolt.new ломаются на этом запросе.

Промпт: Создай одностраничный промо-сайт для дизайн-студии «Neo-Retro». Стиль — темный, футуристичный, с эффектом глассморфизма (frosted glass) и яркими неоновыми градиентами (розовый, голубой). На главном экране — заголовок «FUTURE» и анимированная каркасная 3D-геометрия на фоне. Ниже — блоки с описанием трендов в дизайне, оформленные как полупрозрачные «стеклянные» карточки с легкой неоновой подсветкой по контуру. Главный интерактивный элемент в конце страницы — большая черная сфера с надписью «Click & Drag». Внутри сферы должна быть сложная 3D-анимация частиц, которая реагирует на движение курсора в реальном времени. Под сферой — три кнопки: «EXPLODE», «MORPH», «RESET». Они должны управлять анимацией частиц внутри сферы.

Я был готов к провалу. Я думал, что в лучшем случае получу статичную страницу с картинками, имитирующими 3D. Но то, что я увидел, заставило меня несколько раз перезагрузить страницу, чтобы убедиться, что это не глюк.

Hatch Canvas создал все, что я просил. Сайт был темным, с неоновыми акцентами. Карточки действительно были выполнены в стиле «глассморфизм». Но самое главное — внизу страницы была та самая интерактивная сфера. Я мог кликать и «рисовать» частицами внутри нее. Кнопки «EXPLODE», «MORPH» и «RESET» работали именно так, как было задумано. Это была не видеозапись и не GIF-анимация. Это был живой, работающий 3D-элемент, с которым можно было взаимодействовать.

Это был момент, когда я понял, что Hatch Canvas — это не просто «очередной агент собирающий одностранички». Он для создания полноценного цифрового опыта, который стирает грань между идеей и ее интерактивным воплощением. И тот факт, что он реализовал такой сложный визуал без поломок, дальнейших правок, до сих пор не укладывается в голове.

Так в чем его реальное отличие от других ИИ-агентов?

Чтобы понять ценность Hatch Canvas, его нужно сравнивать не с досками для заметок, а с другими ИИ-агентами, которые умеют работать с кодом и дизайном — системами вроде Flowith, режимом Canvas у ChatGPT или многозадачными возможностями Gemini.

И вот здесь становится понятна его основная особенность. Большинство агентов работают по принципу «запрос-ответ» в рамках чата. Вы даете команду, они ее выполняют. Hatch Canvas работает иначе. Он воспринимает весь холст как единое техническое задание. Он не просто отвечает на вопросы, он собирает готовый цифровой продукт, используя все, что вы ему предоставили: ваши идеи, наброски, изображения и текстовые команды. Это не чат, это полноценная среда разработки.

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

Причем он не просто вставляет картинки из стоков. У него есть несколько моделей для генерации изображений, включая аналоги ChatGPT Imagen и, что особенно интересно, модель FLUX. Она позволяет вносить контекстные изменения в уже сгенерированное изображение, например, дорисовать объект или изменить деталь, не перерисовывая всю картинку с нуля. Это флагманский инструмент для тонкой настройки визуала, которого нет у многих конкурентов.

Но что действительно выделяет Hatch Canvas, так это его способность генерировать интерактивный фронтенд, а не просто статичную верстку. То, как агент справляется с созданием плавных переходов, эффектов при наведении и даже работающих 3D-анимаций, говорит о его глубоком понимании современных фреймворков и JavaScript. Это не просто набор HTML-тегов, а полноценный фронтенд, который агент пишет на основе текстового описания, что ставит его на голову выше простых генераторов кода.

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

Для каких задач он подходит лучше?

Hatch Canvas — это инструмент, который берет на себя самую нудную часть работы: создание качественной основы. Он выдает 80% готового проекта за минуты, будь то код, текст, дизайн или структура. Это позволяет сосредоточиться на том, что действительно важно — на креативе и стратегии.

Он идеально подходит для ситуаций, когда нужно:

1. Быстро протестировать гипотезу, создав рабочий лендинг за полчаса, а не за три дня.
2. Превратить хаотичный мозговой штурм в структурированный план или майнд-карту.
3. Наглядно показать команде или клиенту работающий прототип, а не набор статичных картинок.
4. Создать сложный интерактивный элемент, не привлекая разработчика.

Я не знаю, что будет с Hatch Canvas, когда он выйдет из беты и, скорее всего, станет платным. Но я точно знаю, что уже сейчас он изменил мой подход к запуску новых идей. И я собираюсь выжать из этого бесплатного периода максимум.

А если вы хотите разобраться, как работать и с другими инструментами ИИ для создания крутого контента с нуля, советую курс «Мастер искусственного интеллекта».