Прототип сайта нейросетью: первый проект для клиента

Прототип помогает обсудить структуру сайта до полноценной разработки. Он показывает содержание, порядок блоков и основные действия. С помощью AI-агента можно подготовить такой пример, но работа начинается с задачи пользователя и заканчивается проверкой.

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

Определите, что продаёте

Прототип, дизайн и сайт с работающими интеграциями — разные результаты. В прототипе можно показать будущую форму, но приём заявок требует реализации и проверки. Если вы предлагаете только структуру и демонстрационные экраны, так и называйте услугу.

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

Учебный бриф

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

Сначала план страницы

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

Plan a website prototype for a clearly fictional bicycle repair workshop.
Goal: help city cyclists understand services and prepare an enquiry.
Known services: inspection, maintenance, and repair.
Unknown: prices, address, opening hours, testimonials, and booking backend.
Propose a page structure, user journey, and mobile content order.
Use labelled placeholders for missing facts. Do not invent proof or guarantees.
The enquiry form must be clearly marked as a demo. Do not write code yet.
Return the plan and acceptance criteria in Russian.

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

Подготовьте рабочую среду

Для реализации используйте отдельную папку или ветку с сохранённым состоянием. Не давайте учебному проекту доступ к клиентским базам и платёжным системам. Удобно начать с простой страницы без сложных зависимостей, если они не нужны для демонстрации.

Claude Code и другие агентные инструменты могут читать файлы и выполнять разрешённые операции. Границы работы задаются настройками, правами среды и задачей. В официальной документации Claude Code описаны режимы разрешений. Инструкции проекта поддерживаются через CLAUDE.md, но текст правил не заменяет техническую защиту.

Промпт на реализацию

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

Build the approved fictional workshop prototype in this project folder.
Use semantic HTML, responsive CSS, and minimal JavaScript only where needed.
Keep content and visual styling easy to edit. Do not add a framework
unless the existing project requires one.
Use clear field labels, visible keyboard focus, and accessible navigation.
Support small screens without horizontal overflow. Use original visuals
or labelled placeholders, not copied brands or fabricated testimonials.
Mark the enquiry form as a non-sending demo. No backend, analytics, payment,
or deployment. After implementation, list changed files and checks performed.
State which checks could not be run. Do not claim unperformed browser tests.

Если агент предлагает дополнительные зависимости, попросите объяснить их необходимость. Для демонстрации услуг сложная архитектура может добавить работу без пользы. Оценивайте решение по удобству изменения и передачи, а не по числу инструментов.

Визуальная система вместо случайных экранов

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

Изображения должны объяснять услугу. Для учебной мастерской подойдут собственные снимки велосипеда или честно обозначенные иллюстрации. Не ставьте стоковый портрет с выдуманным именем владельца. При передаче клиенту все временные материалы должны быть перечислены.

Проверка с реальным содержанием

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

Подписи полей должны оставаться понятными после ввода. Рекомендации W3C по формам объясняют, почему placeholder не заменяет label. Добавьте сообщения об ошибках там, где прототип демонстрирует проверку, и обозначьте, что отправка ещё не реализована.

Браузерные скриншоты требуют доступного инструмента. Если агент не подключён к браузеру, проверьте результат самостоятельно и передайте наблюдения. Не принимайте фразу «всё адаптивно» за подтверждённую проверку.

Форма: граница между демо и сайтом

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

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

Что показывать в портфолио

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

Для клиента подготовьте список следующего этапа: подтверждённые тексты, финальные фотографии, контакты, интеграция формы, публикация и сопровождение. Такой документ помогает обсуждать полноценную разработку на конкретной основе.

Как превратить навык в услугу

Предлагайте определённый объём: прототип одной страницы по согласованному брифу, с мобильной версией и ограниченным числом правок. Оценивайте собственное время на структуру, реализацию и проверку. Если пока не можете принять код, добавьте проверку разработчиком до передачи.

Освоить такой процесс на своей задаче можно через индивидуальное обучение нейросетям. Вводная консультация бесплатная, обучение платное, стоимость обсуждается по проекту. Если нужен действующий сайт с формой и публикацией, есть создание сайта под ключ и дизайн интерфейса.