Отчёт о разработке сайта «PC Club» с применением нейросетей Claude, Qwen и DeepSeek

1. Введение

Задача: создать многостраничный сайт для компьютерного клуба «PC Club» (г. Новозыбков) с тёмным неон-дизайном, включающий:

Главную страницу (информация, тарифы, регистрация).
Каталог товаров (б/у и новое оборудование) с фото, корзиной, диалогом с продавцом.
Страницу отзывов с формой добавления.
Игровой раздел с системой токенов и тремя мини-играми (кликер, мемори, стрелялка).
Рулетку с ежедневным вращением, призами и историей.

Срок: 2 недели.
Инструменты: HTML5, CSS3, JavaScript (ES6), LocalStorage, Canvas API.
Помощники: три нейросети — Claude AI, Qwen, DeepSeek.

Результат: готовый сайт доступен по адресу → http://veron322.beget.tech/

2. Использованные нейросети и их роль

Нейросеть	Ссылка	Основная задача
Claude AI (Anthropic)	https://claude.ai	Разработка структуры HTML/CSS, адаптивного дизайна, карточек товаров, системы токенов и навигации.
Qwen (Alibaba Cloud)	https://qwenlm.github.io	Реализация сложной игровой логики: рулетка (вероятности, canvas‑анимация), мини‑игры (кликер, мемори, стрелялка), LocalStorage для токенов и истории.
DeepSeek (深度求索)	https://deepseek.com	Финальная сборка всех страниц, замена эмодзи на реальные фото товаров, унификация валюты (символ P), исправление багов, интеграция корзины и диалогов.

3. Этапы работы и примеры промтов

Этап 1. Разработка главной страницы (Claude AI)

Промт:

«Создай современную главную страницу для компьютерного клуба. Используй тёмную тему, неоновые акценты, шрифты Orbitron, Rajdhani, Inter. Сделай секции: Hero с кнопками, О клубе (6 карточек), Тарифы (6 карточек с ценами), Контакты и карточка основателя. Добавь модальное окно регистрации с валидацией полей. Все стили внутри одного CSS.»

Результат от Claude:
Полностью рабочий index.html с адаптивной сеткой, фиксированным меню, формой регистрации и сохранением данных в LocalStorage. Дизайн соответствует киберпанк-стилю.

Этап 2. Страница товаров и корзина (Claude + Qwen)

Промт для Claude (структура товаров):

«Сделай страницу товаров для игрового клуба. 15 товаров: мониторы, мыши, клавиатуры, кресла, геймпады. У каждого: название, цена, состояние (б/у, хорошее, отличное), описание, характеристики. Товары отображаются в виде карточек с кнопкой “В корзину”. Храни товары в массиве JavaScript.»

Промт для Qwen (корзина):

«Напиши функции для корзины: добавление/удаление, подсчёт суммы, отображение боковой панели. Используй LocalStorage, чтобы корзина не исчезала после перезагрузки. Сделай кнопку “Оформить заказ” с выводом сообщения и очисткой корзины.»

Результат:
Qwen выдал полностью работающий код корзины с боковым выезжающим меню, счётчиком и сохранением состояния. Единственный недостаток — при удалении товара не обновлялась цена в реальном времени (позже исправлено DeepSeek).

Этап 3. Игры и токен-система (Qwen + DeepSeek)

Промт для Qwen:

«Создай три мини-игры, которые начисляют токены:
– Кликер: за каждый клик +1 токен, каждые 50 кликов множитель увеличивается на 1.
– Мемори (16 карточек, 8 пар): за полную победу +50 токенов.
– Стрелялка: появляются цели (эмодзи), при попадании +2 токена.
Все токены сохраняются в LocalStorage. На отдельной панели пользователь может тратить токены: 1500 токенов = 1 час игры, 300 = бесплатный напиток и т.д.»

Ответ Qwen:
Код игр был рабочим, но в мемори карточки переворачивались некорректно (не блокировались на время сравнения), а в стрелялке цели накапливались слишком быстро.

Уточнение (промт) для DeepSeek:

«Исправь мемори: добавь задержку перед закрытием несовпавших карточек, сделай счётчик шагов. В стрелялке ограничь количество целей до 8, увеличь скорость движения и добавь анимацию “+2 токена” при попадании. В кликере сделай вылетающие плавающие монетки при клике.»

Результат DeepSeek:
Все игры стали идеально работать. Добавлена анимация, фикс багов, сохранение прогресса (токены, клики) в LocalStorage.

Этап 4. Рулетка (Qwen)

Промт:

«Сделай ежедневную рулетку. 8 призов с вероятностями: 1 час (10%), напиток (20%), бургер (8%), 300 токенов (15%), скидка 20% (12%), пицца (7%), 100 токенов (18%), ничего (7%). Плюс два суперприза по 1.5%: VIP-абонемент и 10 часов. Отрисуй колесо на canvas, при вращении выбирай приз с учётом вероятностей. Крутить можно раз в 24 часа, храни таймер. Показывай историю выигрышей. При выигрыше суперприза – конфетти.»

Результат:
Qwen написал рулетку полностью, но неправильно рассчитывал угол остановки (всегда попадал на первый сектор). Это было исправлено DeepSeek на этапе финальной сборки.

Этап 5. Финальная полировка, замена эмодзи на фото и символ валюты (DeepSeek)

Промт к DeepSeek:

«Замени все эмодзи товаров на реальные изображения. Добавь для каждого товара ссылку на фото-заглушку (потом заменю своими). Цены везде переделай с символа ₽ на латинскую букву P. Убедись, что все страницы (index, products, reviews, game, roulette) стилистически одинаковы и корректно работают вместе. Корзина должна отображать цены с P, итог тоже. Диалог с продавцом не должен закрывать модальное окно товара.»

Что сделал DeepSeek:

В массив products добавлено поле img.
В карточках товаров и модальных окнах вместо product-img-placeholder с эмодзи появился тег <img> с fallback-картинкой.
Во всех местах (цены, корзина, итого) символ ₽ заменён на P.
Исправлен z-index модалок, добавлен event.stopPropagation() для диалога.
Проверена работа LocalStorage на всех страницах, устранены конфликты.

4. Что было сделано лично мной (без нейросетей)

Продуман дизайн и цветовая схема (тёмный фон + фиолетовый/голубой неон).
Написан весь текстовый контент: описания товаров, отзывы, тарифы, страница «О клубе».
Подобраны и загружены реальные фотографии товаров (вместо заглушек).
Настроены ссылки между страницами, проверена кроссбраузерность и адаптивность.
Выполнен деплой на хостинг.

5. Итоги и выводы

Нейросеть	Сильные стороны	Слабые стороны
Claude AI	Идеальная вёрстка, семантический HTML, чистый CSS, быстрое создание сложных сеток.	Требует точных промтов для динамической логики (JS).
Qwen	Отлично пишет игровую логику, работу с LocalStorage, canvas, анимации.	Иногда выдаёт мелкие баги (неправильные углы, гонка событий), которые нужно исправлять.
DeepSeek	Лучший для финальной сборки, правки чужих ошибок, интеграции компонентов, замены элементов (эмодзи → фото).	Требуется чётко сформулированное ТЗ на доработку.

Общий вывод: совместное использование трёх нейросетей позволило создать полноценный коммерческий сайт за минимальное время. Каждая ИИ показала свою специализацию, а DeepSeek выступил как “архитектор” и “финишёр”.

6. Благодарности со ссылками

Выражаю благодарность командам разработчиков нейросетей:

Anthropic (Claude AI) – за красивый и адаптивный дизайн → https://claude.ai
Alibaba Cloud (Qwen) – за мощную игровую механику и работу с canvas → https://qwenlm.github.io (демо-чат: chat.qwen.ai)
DeepSeek (深度求索) – за финальную шлифовку, замену эмодзи на фото и внедрение символа валюты P → https://deepseek.com

Дата: 11 июня 2026 г.
Автор: Жевлаков Иван 26группа PC Club, г. Новозыбков

Сайт проекта: http://veron322.beget.tech/

Конец отчёта

ЖевлаковОтчет.md 12 KB Постоянна връзка История Директен файл