Как сделать сайт с помощью нейросети: пошаговый туториал

Да, в 2026 году собрать рабочий сайт с помощью нейросети реально, и не из кубиков конструктора, а полноценную верстку под свой дизайн. Нейросеть берёт на себя код: ты показываешь макет и объясняешь, что нужно, а она пишет HTML, CSS и скрипты. Ниже полный путь, который я прошёл сам: от поиска дизайна до публикации в интернете.

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

Сайт-референс

дизайн, который нравится

html.to.design

→

импорт в Figma

макет под свой бренд

Dev Mode MCP

→

макет к агенту

пишет код по макету

файлы сайта

→

загрузка

публикация, сайт в сети

Что понадобится

Минимальный набор инструментов. Ничего из этого не требует навыков программиста, но терминала придётся коснуться.

Figma. Бесплатного тарифа достаточно. В ней я готовлю дизайн-макет будущего сайта.

Claude Code. Это нейросеть-агент от Anthropic, которая работает прямо в терминале твоего компьютера, видит файлы проекта и сама пишет код. Для неё нужна платная подписка, о ценах и лимитах подробно расскажем ниже.

Хостинг. Место, где сайт будет жить в интернете. Я использую hoster.kz: для бизнеса в Казахстане важно, чтобы сайт и данные физически были в стране.

Браузер и немного терпения. Часть шагов делается через командную строку, но всё сводится к копированию готовых команд.

Шаг 1. Найди дизайн-референс и затащи его в Figma

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

Найди сайт-референс, дизайн которого тебе по душе. Это может быть сайт из твоей ниши или просто красивый лендинг. Дальше его нужно перенести в Figma, чтобы было что редактировать.

Для этого есть плагин html.to.design. Он импортирует готовый сайт из интернета в Figma как редактируемые слои, то есть ты получаешь не картинку, а живой макет, который можно менять. Установи плагин html.to.design в Figma (через меню Actions, поиск по названию) и его браузерное расширение для Chrome. Открой нужный сайт, нажми на иконку расширения, дай ему захватить страницу и отправь результат в Figma.

Важно понимать направление работы: html.to.design тянет сайт ИЗ интернета В Figma, а не наоборот. Это инструмент входа, чтобы получить основу для своего дизайна, а не выгрузки готового макета в код.

Шаг 2. Доработай макет под себя

Чужой дизайн как референс это старт, а не финал. Дальше делаешь его своим.

Перекрась под свой бренд: поменяй цвета на фирменные, замени шрифты, поставь свой логотип. Убери лишние блоки, добавь нужные секции, перестрой структуру под свои услуги или товары. Цель этого шага получить макет, который выглядит как твой сайт, а не как копия референса.

Если своего дизайна совсем нет, можно взять готовый шаблон из Figma Community и доработать его так же.

Шаг 3. Установи Claude Code

Claude Code работает в терминале. Звучит страшно, но установка это одна команда.

На macOS, Linux или в WSL открой терминал и вставь:

curl -fsSL https://claude.ai/install.sh | bash

На Windows открой PowerShell и вставь:

irm https://claude.ai/install.ps1 | iex

После установки открой новый терминал (это важно, иначе система не увидит команду) и проверь, что всё встало:

claude --version

Если версия показалась, всё хорошо. Если команда не найдена, чаще всего достаточно просто закрыть и заново открыть терминал. Для полной проверки можно запустить claude doctor, она покажет состояние установки.

Теперь запусти Claude Code командой claude. При первом запуске откроется браузер для входа в аккаунт. Здесь важный момент: Claude Code требует платную подписку (минимум план Pro), бесплатный аккаунт к нему доступа не даёт. Про деньги подробно поговорим в отдельном разделе ниже, чтобы ты понимал расходы заранее.

Шаг 4. Подключи Figma к Claude Code

Чтобы нейросеть собирала сайт точно по твоему макету, она должна его видеть. Figma и Claude Code связываются напрямую.

У Figma есть официальный Dev Mode MCP server. MCP это протокол, по которому нейросеть-агент подключается к внешним инструментам и читает из них данные. Когда Figma подключена к Claude Code через MCP, агент видит твой макет напрямую: цвета, шрифты, отступы, структуру. Не нужно выгружать дизайн в промежуточный HTML-файл, что обычно даёт кривой код, который потом приходится чинить. Агент читает исходный макет и сразу пишет верстку по нему.

Подключение делается один раз: включаешь Dev Mode MCP server в настройках Figma и добавляешь его в Claude Code. После этого агент получает доступ к выбранному фрейму.

Шаг 5. Собери сайт с Claude Code

Теперь самое интересное. Макет подключён, нейросеть его видит, осталось попросить собрать сайт. Формулировка запроса решает многое, поэтому вот рабочий пример промта, который ты адаптируешь под себя:

Контекст: я собираю лендинг по макету из Figma. Figma подключена к тебе через
официальный Dev Mode MCP. Дизайн-макет: [ССЫЛКА НА FIGMA-ФРЕЙМ].
Референс по стилю и анимациям: [ССЫЛКА НА САЙТ-РЕФЕРЕНС].

Задача: собрать статическую страницу (HTML + CSS + минимум JS) точно по макету.

Требования:
- Вёрстку делать строго по фрейму из Figma: цвета, шрифты, отступы, сетку брать
  из макета, не придумывать свои.
- Адаптив: десктоп и мобильная версия, аккуратные брейкпоинты.
- Семантический HTML, чистый CSS, без тяжёлых библиотек.
- Все тексты на странице сейчас рыба (заглушки). Это черновик, потом заменю на
  финальные тексты вручную. Пометь блоки комментариями, чтобы я их легко нашёл.
- Картинки-заглушки оставь плейсхолдерами, пути к ассетам вынеси отдельно.
- Форму обратной связи свёрстай визуально, но без привязки к бэкенду пока,
  оставь TODO в коде.

Сначала покажи план: какие секции и файлы создашь. Не пиши код, пока я не
подтвержу план.

Обрати внимание на последнюю строчку. Просьба сначала показать план, а не сразу писать код, экономит твои деньги и нервы: ты успеваешь поправить направление до того, как агент написал гору кода не туда. Это особенно важно с учётом расхода, о котором ниже.

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

Шаг 6. Наполни сайт контентом

Вот первый важный момент, который многие пропускают, а потом удивляются, почему сайт не работает.

Нейросеть собрала тебе каркас, но в нём тексты-рыба, заглушки вместо реального содержания. Сайт без нормального контента не продаёт и не приводит клиентов, как бы красиво он ни выглядел. Тексты придётся написать.

Да, черновик текстов можно попросить у того же Claude или у ChatGPT. Но будь готов: тексты от нейросети выходят сырыми. Это общие формулировки, которые не знают твоей специфики, твоих клиентов и твоих преимуществ. Их обязательно нужно дорабатывать руками: добавлять конкретику, цифры, твои реальные кейсы, живой язык. Сырой текст от ИИ виден сразу и доверия не вызывает. Воспринимай его как заготовку, а не как готовый результат.

То же касается картинок: заглушки нужно заменить на реальные фото, логотипы и изображения.

Шаг 7. Привяжи форму и продумай воронку

Второй важный момент. Красивая форма на сайте бесполезна, если заявка из неё никуда не приходит.

Форму обратной связи на прошлом шаге я свёрстал только визуально. Теперь её нужно привязать к тому, что будет принимать заявки: например, отправлять данные в Telegram-бот или на почту. Это отдельная техническая работа, и здесь нейросеть тоже поможет с кодом, но настроить приём заявок и проверить, что они реально доходят, нужно внимательно. Сайт, который собирает заявки в никуда, хуже, чем отсутствие сайта.

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

Шаг 8. Опубликуй сайт

Сайт собран на твоём компьютере, но в интернете его пока нет. Нужен хостинг, место, где файлы сайта лежат и откуда их видят посетители.

Я публикую на hoster.kz. Для бизнеса в Казахстане это осознанный выбор: сайт и данные клиентов физически хранятся в стране. Ты регистрируешь хостинг, получаешь доступ к серверу и загружаешь на него файлы сайта. После этого сайт открывается по твоему домену.

На выходе ты получаешь набор файлов (HTML, CSS, картинки, скрипты), которые и есть твой сайт. Их можно залить на хостинг вручную или настроить автоматическую выгрузку, но это уже следующий уровень.

Сколько это стоит и где подводные камни

Теперь про деньги и ограничения прямо.

Claude Code платный. Бесплатно собрать сайт этим способом не получится: нужна подписка, минимум план Pro (порядка 20 долларов в месяц), есть и более дорогие тарифы Max для тех, кто работает много. Бесплатный аккаунт к Claude Code доступа не даёт.

Есть лимиты на расход. Каждый запрос к нейросети тратит токены, и подписка имеет потолок. Лимиты сбрасываются раз в несколько часов, плюс есть месячный кап. Если гонять агента бесконечными итерациями, лимит закончится, и придётся ждать сброса или брать тариф дороже. Внутри Claude Code команда /context показывает текущий расход, и привычка планировать задачи (как в промте выше: сначала план, потом код) реально экономит лимит.

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

Оплата подписки из региона. Подписка Claude Code оплачивается международной картой, и из некоторых стран это может оказаться отдельным квестом. Уточняй актуальные способы оплаты на момент покупки.

Где заканчивается «сам» и начинается агентство

Теперь главный разговор, ради которого стоило дочитать.

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

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

Грубо граница такая: если задача сделать страницу на вечер, делай сам, это нормально и полезно хотя бы понять, как всё устроено. Если сайт это часть бизнеса, от которого зависят заявки и выручка, то экономия на сборке обычно оборачивается потерями на том, что сайт не продаёт. Тогда дешевле и быстрее доверить это тем, кто делает воронки и сайты под результат.

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

А что насчёт конструкторов

Коротко, потому что про них и так знают. Конструкторы сайтов с ИИ (где сайт собирается из готовых блоков по описанию) это самый простой путь, без терминала и кода вообще. Они подойдут, если нужно быстро и совсем без технических деталей. Минус в том, что ты ограничен возможностями конструктора: меньше контроля над дизайном, кодом, скоростью и переносимостью. Подход из этого туториала (свой дизайн плюс нейросеть-кодер) даёт куда больше свободы, но требует чуть больше вовлечённости. Выбор за тобой.

Вывод

Собрать сайт с помощью нейросети в 2026 году реально, и это полезный навык. Нейросеть берёт на себя код, ты отвечаешь за дизайн, контент и смысл. Путь такой: референс в Figma через html.to.design, доработка макета под себя, сборка через Claude Code по MCP, наполнение контентом, привязка формы и публикация на хостинге.

Но держи в голове два правила. Первое: тексты, форму и воронку нейросеть за тебя не продумает, это ручная работа, и без неё сайт не продаёт. Второе: для простого сайта ты справишься сам, а для сайта, от которого зависит бизнес, есть потолок DIY, за которым дешевле работать со специалистами.

Частые вопросы

Источники

• Официальная документация Claude Code (Anthropic): установка, требования, лимиты (2026).
• Figma: официальный Dev Mode MCP server.
• html.to.design (divRIOTS): импорт сайтов в Figma, Chrome-расширение.