Как бесплатно сделать сайт с помощью ProtoSpec и AI
Пошаговый гайд: от идеи до опубликованного лендинга за 0 рублей. Работает для любого типа сайта — лендинг, портфолио, визитка, страница продукта.
Что вам понадобится (всё бесплатно):
- •ProtoSpec — бесплатный тариф Starter (2 генерации/день)
- •AI-инструмент для кода — Cursor, Windsurf, Bolt.new, Lovable или v0 (бесплатные тарифы)
- •Хостинг — Vercel или Netlify (бесплатно)
- 1
Зарегистрируйтесь в ProtoSpec
Откройте app.protospec.ru и создайте бесплатный аккаунт. Регистрация через email занимает 30 секунд.
На бесплатном тарифе Starter вы получаете: 2 AI-генерации ТЗ в день, 1 активный проект и доступ к 12 типам блоков. Этого достаточно, чтобы сделать полноценный лендинг.
- 2
Соберите структуру сайта из блоков
Создайте новый проект и перетащите блоки на канвас. Типичная структура лендинга:
- 1.Header — логотип и навигация
- 2.Hero — главный заголовок, описание и кнопка CTA
- 3.Преимущества — 3-4 карточки с ключевыми фишками
- 4.Как это работает — 3 шага
- 5.Тарифы — таблица цен (если есть)
- 6.FAQ — частые вопросы
- 7.Footer — контакты и ссылки
Вы можете использовать любые блоки из библиотеки — комбинируйте под свою задачу. Для портфолио добавьте блок «Карточки» с проектами. Для визитки — «Контакты» и «Медиа».
- 3
Сгенерируйте промпт
Нажмите кнопку «Сгенерировать». AI создаст структурированный промпт — подробное техническое задание для каждого блока:
- •Какой контент содержит каждый блок
- •Как блок выглядит на десктопе, планшете и мобильном
- •Какие HTML-теги и семантическую разметку использовать
- •SEO-рекомендации (meta, Open Graph, alt-тексты)
Скопируйте промпт в буфер обмена — он готов для любого AI-агента.
- 4
Выберите бесплатный AI-инструмент для кода
Вставьте промпт из ProtoSpec в один из бесплатных AI-инструментов. Вот все варианты:
Cursor
AI-редактор кода (IDE)
Бесплатно: 50 premium запросов/мес
Лучше для: полный контроль над кодом
Windsurf
AI-редактор кода (IDE)
Бесплатно: безлимитный автокомплит
Лучше для: бесплатный AI-автокомплит
Bolt.new
Браузерный AI-конструктор
Бесплатно: стартовые токены
Лучше для: быстрый результат в браузере
Lovable
AI-платформа для веб-приложений
Бесплатно: несколько генераций
Лучше для: нетехнические пользователи
v0 by Vercel
AI-генератор UI
Бесплатно: ежедневные генерации
Лучше для: React/Next.js компоненты
Claude Code
Терминальный AI-агент
Бесплатно: API-кредиты на старте
Лучше для: опытные разработчики
Рекомендация для начинающих: Bolt.new или Lovable — вставляете промпт, получаете готовый сайт в браузере за 2 минуты.
Рекомендация для разработчиков: Cursor — полный контроль над кодом, возможность доработки.
- 5
Получите код и доработайте
AI-агент сгенерирует код лендинга на основе вашего промпта. Что нужно сделать после генерации:
- •Замените тексты-заглушки на реальный контент
- •Добавьте свои изображения и логотип
- •Проверьте адаптивность на мобильном
- •Убедитесь, что ссылки и кнопки работают
Благодаря структурированному промпту из ProtoSpec код обычно получается качественным с первого раза — минимум правок.
- 6
Опубликуйте сайт бесплатно
Последний шаг — деплой. Два лучших бесплатных варианта:
Vercel
Бесплатно для личных проектов. Идеально для Next.js. Подключите GitHub-репозиторий — деплой автоматический.
Netlify
Бесплатно для личных проектов. Поддерживает любой стек. Drag-and-drop деплой или через Git.
Оба сервиса дают бесплатный поддомен (your-site.vercel.app). Свой домен можно подключить позже.
Итого: от идеи до опубликованного сайта
0 ₽
Стоимость
~30 мин
Время
0 строк
Кода вручную
Все инструменты в этом гайде имеют бесплатные тарифы. Вы платите только если хотите больше генераций или premium-функции.