ЖевлаковОтчет.md 12 KB
Отчёт о разработке сайта «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/
Конец отчёта