Я 1С-ник. Фронтендом профессионально всерьёз не занимался — ну, один раз сверстал по ТЗ интернет магазин да делал всякие поделки, многие из которых уже и не существуют. И вот понадобился персональный сайт: показать услуги, опыт, собрать заявки. Классика жанра.
Раньше это значило: либо платить верстальщику 30–50к и ждать неделю, либо самому лезть в HTML/CSS/JS, разбираться с фреймворками, ковыряться с деплоем. (или найти шаблон одностраничку на бутсрап и героически править её под себя выходные) Ни то, ни другое не хотелось. Решил попробовать собрать сайт через ИИ — за один вечер, без боли.
Спойлер: получилось. В статье расскажу, как именно, покажу промпты, которые реально работали, и сравню с «классическим» путём по времени и деньгам.
Почему это вообще взлетает
Персональный сайт разработчика — это лендинг. Пять-шесть блоков, немного анимаций, форма обратной связи. Под такую задачу React и Next.js — из пушки по воробьям. А вот чистый HTML/CSS/JS ИИ генерирует на отлично: задача типовая, в обучающей выборке таких сайтов миллионы.
Главное открытие было такое: ИИ плохо работает с размытой задачей и отлично — с конкретной. Если написать «сделай мне сайт» — получите помойку. Если описать структуру, стиль и ограничения — получите рабочий результат с первого-второго прохода.
Постановка задачи: главный этап
На этом шаге я потратил больше всего времени. Не на генерацию, а именно на то, чтобы сформулировать, что мне нужно.
Я полазил по сайтам, нашёл то, что мне приглянулось как пример. Нашёл скил для Claude code (фронтенд дизайн) кинул его в пустую папку с проектом (вдруг поможет).
Почему я помню, какой промпт я писал два месяца назад, возможно не спросите вы? потому, что я пользуюсь Claude Note
Генерация и доработка
Генерил через Claude Code в терминале. Первый вариант получил за минуту — уже рабочий, уже адаптивный, уже с анимациями. Но было что докрутить: изменил некоторые отступы, добавил ссылки. Всё через промпты.
Запустить локально можно прямо из VScode пкм->open with live server
Для этого достаточно установить одноименное расширение.
Да, есть что ещё сделать. Сделаю, когда нужно будет посжигать лимиты и когда будет настроение.
Деплой и домен за 15 минут
Тут всё просто до неприличия. Выбрал Cloudflare Pages, потому что бесплатно, быстро, без сюрпризов.
Алгоритм:
Отправляем на гитхаб
git init
git add .
git commit -m "initial"
git remote add origin https://github.com/USERNAME/REPO.git
git push -u origin main
Дальше в Cloudflare Pages: Create project → Connect to Git → выбираешь репозиторий → Deploy. Билда нет, собирать нечего, просто раздача статики. Через минуту сайт доступен по адресу your-project.pages.dev.
Домен купил на nic.ru, привязал через Cloudflare: в DNS-панели добавил CNAME на pages.dev, в настройках проекта в Cloudflare Pages добавил custom domain. Прогрелось за десять минут.
Обновление сайта теперь выглядит так: git push — и через 30 секунд изменения в проде. Никаких FTP, никаких сборок, никакой боли.
Публикация прямо на гитхабе
Ну и можно опубликовать прямо на гитхаб
для этого переходим в вашем репо settings->pages и выбираем ветку вашего репо
Сравнение: а был бы вариант сделать быстрее «по старинке»?
Прошу не обзываться, отдал ТЗ от Claude Code фронтендеру, он озвучил прайс:
| Этап | Классический путь | Через ИИ |
|---|---|---|
| Заказ у фронта | 3–7 дней, 30–50к рублей | — |
| Самому с нуля | 15–25 часов (с изучением) | — |
| Макет + генерация | — | 30 минут |
| Доработка текстов и мелочей | — | 1.5 часа |
| Деплой + домен | 2–3 часа (если первый раз) | 15 минут |
| Итого | неделя + 30к, либо выходные целиком | ~2.5 часа + 0 руб. за работу |
Домен — 200 руб. в год, хостинг на Cloudflare Pages бесплатный. Всё.
Что из этого следует для 1С-ников
Пара выводов, которые я сделал для себя:
Первое — порог входа во «всё, что не 1С», резко упал. Раньше я смотрел на фронт как на отдельную профессию, в которую надо вкладываться месяцами. Сейчас на типовых задачах (лендинг, простая админка, форма) это уже не так. ИИ закрывает 80% работы, остаётся доработать тексты и нюансы.
и это не только с простыми одностраничками, везде где мне полезен веб интерфейс я его прикручиваю теперь за минуты, вот пара не секретных примеров
Второе — ценность промпта. Это новый важный навык. Плохо описанная задача даёт плохой результат — как с подрядчиком, только быстрее. Хорошо описанная — даёт рабочий сайт за вечер. Учитесь формулировать ТЗ самим себе, это пригодится везде, не только с ИИ.
Третье — не тащите React туда, где он не нужен. Для лендинга чистый HTML — это правильный выбор, не компромисс. Проще деплой, быстрее загрузка, меньше мест, где что-то сломается.
Универсальный промпт-шаблон
Клод сам мне его предложил.
Если хотите повторить — вот скелет, который можно адаптировать под себя. Заменяйте в квадратных скобках:
Сделай одностраничный сайт-портфолио для [кто вы — профессия].
Стек: чистый HTML, CSS, JS. Без фреймворков, без сборки.
Структура:
1. Hero — [ваш оффер] + CTA
2. Обо мне — [что рассказать]
3. Услуги — [сколько карточек и какие]
4. Кейсы — [сколько проектов]
5. Контакты — форма + [каналы связи]
Дизайн:
- [тёмная/светлая] тема
- акцентный цвет: [hex]
- [стиль: минимализм / брутализм / корпоративный]
Поведение:
- плавные анимации при скролле
- hover-эффекты
- адаптив 320–1920px
- форма через mailto
Три файла: index.html, style.css, script.js. Без CDN.
Ссылки:
- Репозиторий
- Сайт
- Сайт на гитхаб пэйджес (если не открывается из за блокировок оригинальный)
Если при открытии сайта у вас пошла кровь из глаз, то закройте его и навайбкодьте свой.
Ссылка ютуб на видеоверсию (можно скачать, если тут не открывается).
Предыдущие статьи про вайбкодинг:
Вайб-кодинг в 1С: как рефакторить код бесплатно с помощью VS Code и Roo Code
Вайб-кодинг в 1С: как заставить ИИ БЕСПЛАТНО писать новый код с помощью MCP-серверов
Вайб-кодинг в 1С: Подключаем локальные MCP-сервера к любой нейросети через MCP SuperAssistant
Вайб-кодинг в 1С: Создаём MCP для 1С 7.7 за вечер и пишем обмен с Бухгалтерией 3
Вайб-кодинг в 1С: Codex Desktop + GPT-5.4 пишет обработку САМ (Скайнет?)
Вайб-кодинг в 1С: Настраиваем эффективный workflow
Вайб-кодинг в 1С: Обходим лимиты поиска в Z AI и Claude: поднимаем свой поисковый движок через MCP
Вайб-кодинг в 1С: Бесплатное выполнение рутинных скиллов Claude Code
PromptPilot: менеджер задач для Claude Code, Codex и других CLI
Claude Note — каждая сессия с Claude Code становится знанием
Вступайте в нашу телеграмм-группу Инфостарт
