Каталог товаров на сайте из таблицы: прайс из Excel на странице с помощью нейросети

Чтобы сделать каталог товаров на сайте из таблицы, скопируй прайс-лист из Excel, вставь его в чат с нейросетью и попроси одну страницу: только HTML и CSS (языки разметки и оформления страниц), названия и цены ровно как в таблице, ничего не придумывать и до кода перечислить всё странное в таблице. Получится один файл index.html, который выкладывают на хостинг, а для конструктора его переделывают в блок. Когда цены поменяются, вставь новую таблицу и попроси поменять только то, что изменилось, и перечислить изменения.

Мы проверили это на прайсе выдуманной веломастерской «Спица» из Твери: 14 строк, в которые заранее заложили семь ловушек (разговор с моделью Claude Sonnet, 12 ноября 2026 года). На короткую просьбу модель добавила то, о чём её не просили, и одну ловушку пропустила. С подробной просьбой она нашла все семь, а при обновлении цен поменяла только те места, которые изменились в таблице.

Сделать такую страницу можно в чате сервиса: там модели Claude, GPT, Gemini и DeepSeek доступны из России без ВПН, с оплатой в рублях. Для кода есть ассистент-программист. В сервисе «Нейросети» полный доступ к моделям и ассистентам - по подписке, условия и цены - на странице тарифов.

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

У мастера «Спицы» уже есть страница с калькулятором ремонта и недельный отчёт из Excel: как собирали калькулятор, мы разобрали в статье конструктор без кода или своя программа. Создание сайтов и программ с помощью нейросети, без ручного написания кода, называют вайб-кодингом (подробнее в статье что такое вайб-кодинг). Теперь мастер хочет показать на сайте запчасти с ценами.

Мастер, мастерская и прайс выдуманы, на настоящем сайте ничего не публиковали, данных клиентов в таблице нет. Это один разговор из трёх сообщений с одной моделью, Claude Sonnet, которая отвечала без поиска в интернете. Другая модель или другой день могут ответить иначе. Страницу мы в этот раз не открывали в браузере: сверяли код страницы с таблицей построчно и сравнивали файлы до и после обновления.

Что мы заложили в таблицу и как модель справилась:

Первое сообщение было коротким: «Вот мой прайс из Excel. Сделай из него страницу-каталог для сайта». Цены модель перенесла верно, но сама добавила поиск по названию и фильтр по категориям на JavaScript: это лишний код, который потом придётся понимать и чинить. Покрышку за 990,5 она не назвала среди мест, «которые стоит проверить».

Во втором сообщении мастер описал задачу подробно (по смыслу тот же запрос - в разделе «Готовый запрос: каталог из таблицы»). Модель до кода назвала восемь странностей, включая все семь наших ловушек, и скриптов в файл не добавила. Мы сверили код страницы с таблицей: все 14 товаров на месте, названия и цены совпали. Выдуманного на странице нет: заголовок «Запчасти» и название мастерской модель взяла из нашего сообщения.

Готовый запрос: каталог из таблицы

Я не программист. Ниже прайс моего магазина [что продаёшь, город], скопированный из Excel. Нужна страница с каталогом для сайта.

Мне нужен один файл index.html. Пиши его на HTML и CSS, скриптов и подключаемых библиотек не добавляй. Файл я буду открывать прямо с компьютера, а покупатели будут смотреть его со смартфона, так что всё должно помещаться на узком экране.

Бери данные только из таблицы: названия и цены переноси как есть, от себя ничего не добавляй (ни описаний, ни фото, ни телефона, ни адреса, ни корзины). Товары сгруппируй по категориям.
Где цены нет, пиши «цену уточняйте». Где в наличии «нет», товар оставь с пометкой «нет в наличии».

Прежде чем писать код, перечисли всё странное, что видишь в таблице, и скажи, как ты это покажешь на странице. После кода объясни, как мне сверить страницу с таблицей.

[вставь таблицу из Excel]

Что поправить в таблице до отправки

Модель может перенести на страницу всё, что видит в таблице. Поэтому перед отправкой пройди по таблице:

• Только то, что увидит покупатель. Закупочную цену, поставщика, остаток на складе и заметки для себя удали из копии таблицы, иначе они могут оказаться на странице.
• Одна строка - один товар. Если два товара называются одинаково, как наши звонки, допиши, чем они отличаются: два «Звонка» с разной ценой покупатель не поймёт.
• Пустые цены и «от». Реши заранее, что писать вместо пустой цены, и скажи это в запросе. «От 350» модель сохраняет, но такой товар лучше проверить глазами.
• Дробные и странные цены. Цена 990,5 среди целых похожа на опечатку. Короткая просьба её пропустила, поэтому исправь такие места в таблице сам.
• Никаких данных клиентов. Лист с заказами, именами и телефонами в чат не вставляй: для каталога он не нужен. Как работать с таблицей, где есть клиенты, мы разобрали в статье про отчёт из Excel: там нейросети показывали только строку заголовков и несколько придуманных строк, без имён и телефонов.

Фото, контакты и адрес добавляй отдельной просьбой и своими данными: в нашей проверке модель на короткую просьбу сама дописала поиск и фильтр, так же она может дописать и телефон. Как ставить задачу, чтобы переделывать код пришлось меньше, мы разобрали в статье как поставить задачу нейросети.

Как обновлять цены в каталоге, не трогая остальное

В третьем сообщении мастер прислал новую версию прайса. В ней мы поменяли семь мест: подняли цены на камеру и цепь, исправили 990,5 на 990, вписали цену фонаря, вернули покрышку в наличие, убрали второй звонок и добавили ручной насос. Этот список мы записали до отправки. Мастер попросил сначала перечислить изменения, а в файле поменять только их. Запрос ниже по смыслу тот же, слова другие:

Цены поменялись, вот новая таблица из Excel. Сначала сравни её с прошлой и напиши списком, какие строки стали другими. Потом пришли index.html заново, исправив только эти строки, а всё прочее оставь как было.

[если это новый чат, вставь и текущий index.html]
[вставь новую таблицу]

Модель перечислила те же семь изменений и сама заметила: «Количество то же, но состав в «Аксессуарах» другой». Мы сравнили старый и новый файл построчно: изменились только эти места, остальной файл остался прежним. Мы обновляли в том же разговоре, где модель делала страницу. В новом чате ей не с чем сравнивать новую таблицу, поэтому вставь туда и текущий index.html.

Список изменений от модели сверяй со своим, пункты должны совпасть. Если у неё есть лишний пункт или какого-то не хватает, сравни старый и новый файл: она могла тронуть то, чего ты не менял, или пропустить твою правку. Старый файл сохрани под другим именем до замены: если что-то пойдёт не так, его можно вернуть.

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

Как сверить страницу с таблицей

План проверки мы попросили у модели в том же втором сообщении. Мы бы оставили его почти без изменений:

1. Посчитай товары. В таблице «Спицы» 14 строк, на странице должно быть 14 карточек: камеры 2, покрышки 3, цепи 2, тормоза 2, смазка 1, аксессуары 4.
2. Проверь особые строки: пустую цену, «от», «нет в наличии», дубли и всё, что ты исправлял.
3. Открой страницу и таблицу рядом и иди сверху вниз, отмечая каждую строку. Найти конкретную цену на странице помогает поиск браузера: Ctrl+F.
4. Открой файл на телефоне: названия должны переноситься, цены не должны уезжать за край экрана.
5. Попроси кого-то помочь, модель тоже советовала это «для надёжности»: один читает вслух строки таблицы, второй ищет их на странице. Так находятся опечатки, которые свои глаза уже не видят.

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

Как поставить прайс-лист на сайт и что важно про цены

Готовый index.html выкладывают так же, как любую страницу сайта: как выбрать хостинг и домен, мы разобрали в статье как выложить сайт в интернет. Если сайт сделан в конструкторе, модель советовала вставить код в блок «HTML». Но файл - целая страница со своими стилями, и если вставить его как есть, может поменяться вид всей страницы конструктора. Попроси нейросеть переделать код для вставки в блок: без частей html и head, со стилями только для каталога. Есть ли такой блок и как он работает, смотри в справке своего конструктора. Если сайта ещё совсем нет, начни со статьи как сделать сайт с помощью нейросети, а каталог добавь следующей страницей.

Цены на странице держи такими же, как в магазине. Описание товаров на сайте магазина Гражданский кодекс признаёт публичной офертой, даже если цена и другие условия в нём не указаны. Исключение: продавец прямо написал, что эти товары не продаются (статья 494, пункт 2). Публичная оферта - это предложение заключить договор на указанных условиях с любым, кто откликнется. Цену покупателю сообщают в рублях (статья 10 закона о защите прав потребителей), а при продаже по описанию на сайте продавец до заключения договора сообщает среди прочего цену, условия покупки, своё наименование и адрес (статья 26.1 того же закона).

С 1 сентября 2026 года действуют новые Правила продажи товаров (постановление Правительства от 30 мая 2026 года № 657), а во многих старых инструкциях ссылаются на прежние. По ним индивидуальный предприниматель, который продаёт через сайт, указывает на сайте фамилию, имя, отчество, основной государственный регистрационный номер индивидуального предпринимателя и почту или телефон (пункт 22). Эти сведения и адрес добавь на страницу отдельной просьбой и своими настоящими данными. Если цены у тебя ориентировочные и окончательная сумма зависит от согласования с мастером, напиши это на странице прямо. Одной такой пометки может не хватить, чтобы каталог перестал быть офертой. В новых Правилах товар не предназначен для продажи через сайт, если продажа подразумевает предварительное согласование условий, например наличия, названия и количества, или если продавец явно так указал (пункт 19). Как это записать для своего случая, уточни у юриста.

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

Частые вопросы

Можно ли самому сделать каталог товаров на сайте из таблицы Excel?
Да, если каталог - это страница с названиями, ценами и наличием. Скопируй таблицу в чат с нейросетью и попроси один файл на HTML и CSS с данными только из таблицы. В нашей проверке подробная просьба, отправленная вторым сообщением, дала страницу, где все 14 товаров и цены совпали с таблицей. Корзину и оплату так не делают.

Как обновлять цены на странице, если они часто меняются?
Вставь новую таблицу и попроси поменять только то, что изменилось, и сначала перечислить изменения. Сверь этот список со своим и сохрани старый файл до замены. В новом чате приложи текущий файл страницы.

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

Можно ли вставить в чат таблицу с заказами клиентов?
Для каталога она не нужна. Имена и телефоны клиентов - персональные данные, поэтому в чат отдавай только лист с товарами и ценами. Если нужна работа с заказами, покажи нейросети строку заголовков и несколько придуманных строк вместо настоящих.

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