# Отчёт о разработке сайта «PC Club» с применением нейросетей Claude, Qwen и DeepSeek ## 1. Введение **Задача:** создать многостраничный сайт для компьютерного клуба «PC Club» (г. Новозыбков) с тёмным неон-дизайном, включающий: - Главную страницу (информация, тарифы, регистрация). - Каталог товаров (б/у и новое оборудование) с фото, корзиной, диалогом с продавцом. - Страницу отзывов с формой добавления. - Игровой раздел с системой токенов и тремя мини-играми (кликер, мемори, стрелялка). - Рулетку с ежедневным вращением, призами и историей. **Срок:** 2 недели. **Инструменты:** HTML5, CSS3, JavaScript (ES6), LocalStorage, Canvas API. **Помощники:** три нейросети — **Claude AI**, **Qwen**, **DeepSeek**. **Результат:** готовый сайт доступен по адресу → [**http://veron322.beget.tech/**](http://veron322.beget.tech/) --- ## 2. Использованные нейросети и их роль | Нейросеть | Ссылка | Основная задача | |-----------|--------|------------------| | **Claude AI** (Anthropic) | [https://claude.ai](https://claude.ai) | Разработка структуры HTML/CSS, адаптивного дизайна, карточек товаров, системы токенов и навигации. | | **Qwen** (Alibaba Cloud) | [https://qwenlm.github.io](https://qwenlm.github.io) | Реализация сложной игровой логики: рулетка (вероятности, canvas‑анимация), мини‑игры (кликер, мемори, стрелялка), LocalStorage для токенов и истории. | | **DeepSeek** (深度求索) | [https://deepseek.com](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` с эмодзи появился тег `` с 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](https://claude.ai) - **Alibaba Cloud (Qwen)** – за мощную игровую механику и работу с canvas → [https://qwenlm.github.io](https://qwenlm.github.io) (демо-чат: [chat.qwen.ai](https://chat.qwen.ai)) - **DeepSeek (深度求索)** – за финальную шлифовку, замену эмодзи на фото и внедрение символа валюты P → [https://deepseek.com](https://deepseek.com) --- *Дата: 11 июня 2026 г.* *Автор: Жевлаков Иван 26группа PC Club, г. Новозыбков* **Сайт проекта:** [http://veron322.beget.tech/](http://veron322.beget.tech/) --- **Конец отчёта**