Inki
← Все шаблоны
Приложениепроверен 12 октября 2026 г.

Страница одного товара

Лендинг одного товара с корзиной: покупатель нажимает «Заказать», оставляет имя, почту и телефон и сразу видит номер заказа, вам приходит письмо, а заказы собираются в кабинете Inki. Оплату и доставку вы обсуждаете с покупателем сами. Без своего сервера.

Claude.ai и Claude DesktopChatGPTDeepSeekClaude CodeCodexCursorОткрыть пример
Промпт
Сделай страницу одного товара с заказом. Товар: [название], [цена] ₽, [одна фраза о нём]. Продавец: [имя, город].

В shop.products укажи "photo": "photo".

Магазин (правила ниже): каталог products с полями title, price, about, photo; товар в seed с id [латиницей, например candle], фото photo.jpg рядом с файлом.

Платные файлы загружает человек в «Магазин → Товары», не прикладывай их к странице.

Блоки:
1. Первый экран: обычный img вне picture с data-inki-photo="id" и src="photo.jpg" (тот же реальный id из seed), фото слева, справа название, фраза, цена <span data-inki-price="id">[цена]</span> ₽ (знак ₽ вне span) и кнопка «Заказать» с data-inki-buy="id", тот же id товара.
Первый экран оберни в data-inki-product="id": корзина возьмёт оттуда фото. Растяни область настоящей кнопки на фото и описание через ::after с position:absolute; inset:0 внутри position:relative первого экрана. Сохрани клавиатуру и видимый фокус.
Фото первого экрана обновляет только SDK через data-inki-photo: оставь src="photo.jpg" как запасное фото. Если читаешь каталог для названия и описания, не присваивай этому img src из сырого поля photo и не вычисляй его через location.href: папку файлов знает SDK.
2. «[О товаре]»: [3-5 пунктов: из чего, размер, уход].
3. «Как заказать»: заказ, звонок продавца, оплата и доставка.
4. Подвал: [продавец, телефон, почта].

Оформление: фон тёплой бумаги #f4efe6, текст #2b2621, акцент #b5532c на кнопках и цене. Заголовки Cormorant Garamond 600, текст Manrope (Google Fonts). Цена на круглой бирке, чуть повёрнутой, у края фото. Фото со скруглением 24px и тенью. Кнопки 56px, скругление 28px. На телефоне одна колонка, фото сверху. Видимый фокус. <title>: [товар и продавец]. Meta description: одно предложение о том, [чем хорош товар].
Отметь SVG-иконки data-icon="moon/fa-solid/имя". Покажи известную библиотечную иконку и рисунок с распознаваемым именем, чтобы человек мог привести его к библиотеке. Не ставь id/aria-labelledby на редактируемые SVG.

Правила Inki, добавляются к промпту при копировании:

## Правила Inki (добавь к результату)
- Внешние скрипты, стили и шрифты только с этих хостов: cdnjs.cloudflare.com, cdn.jsdelivr.net, unpkg.com, esm.sh, fonts.googleapis.com, fonts.gstatic.com, code.jquery.com, cdn.tailwindcss.com, mc.yandex.ru. Остальное Inki вырежет при публикации.
- Встраивать видео только с: www.youtube.com, www.youtube-nocookie.com, vk.com, vkvideo.ru, rutube.ru, kinescope.io.
- Без автоматических переходов, скачиваний и всплывающих окон при открытии.
- Отдай один самодостаточный файл index.html: стили и скрипты внутри, картинки рядом с файлом или по https.
- Обязательны <title> и <meta name="description">: из них Inki делает превью для соцсетей и поиска.
- Размер: index.html до 5 МБ, папка страницы до 50 МБ, один файл до 25 МБ.

## Магазин Inki (корзина и заказы)
- В <head>:
<script type="application/inki+json">
{"collections":{"products":{"mode":"owner","fields":{"title":"string!","price":{"type":"number","required":true,"min":0},"about":"string","photo":"string"}}},
"shop":{"products":{"collection":"products","title":"title","price":"price","photo":"photo"},"seed":[{"id":"candle","title":"Свеча","price":1200,"about":"Воск","photo":"candle.jpg"}]}}
</script>
- Рубли; seed для пустого каталога. Потом правит владелец. Читай:
const { docs } = await inki.db.collection('products').limit(200).get()
- Фото есть: mapping photo; карточки из docs берут поле photo. Статичный img:
<img data-inki-photo="candle" src="candle.jpg" alt="Свеча">
- Буквальный /_inki/img/ допустим в HTML и docs; CSS/JS-only и сборка URL — файлы папки; сохраняй фото владельца.
- <script src="/_inki/sdk.js"></script>. Корзину и заказ рисует Inki:
<span data-inki-price="candle">1200</span> ₽ <button data-inki-buy="candle">Купить</button>
<button data-inki-cart-open>Корзина <span data-inki-cart-count>0</span></button>
- data-inki-add/data-inki-buy: id товара; data-inki-price: цена.
- :root: --inki-cart-accent, --inki-cart-bg, --inki-cart-fg, --inki-cart-radius.
- Без inki замени кнопки: «Заказы заработают после публикации на Inki».
- Платные файлы загружает человек в «Магазин → Товары»; не прикладывай их к странице.

Как достать артефакт

Claude.ai и Claude Desktop
  1. Открой артефакт справа от ответа
  2. Меню артефакта, «Скачать»: получишь файл .html
  3. Перетащи файл на inki.ru/new и нажми «Опубликовать»
ChatGPT
  1. Открой результат в Canvas
  2. Меню Canvas, «Скачать»: файл .html
  3. Перетащи файл на inki.ru/new и нажми «Опубликовать»
DeepSeek
  1. Скопируй код из ответа целиком
  2. На inki.ru/new открой вкладку «Код» и вставь
  3. Нажми «Опубликовать»
Claude Code
  1. Попроси сохранить результат в папку с index.html
  2. В терминале: npx -y inki-cli publish ./папка-со-страницей
  3. Или скажи агенту «опубликуй на Inki»: подключение на inki.ru/agent
Codex
  1. Попроси сохранить результат в папку с index.html
  2. В терминале: npx -y inki-cli publish ./папка-со-страницей
  3. Или скажи агенту «опубликуй на Inki»: подключение на inki.ru/agent
Cursor
  1. Сохрани файл агента как index.html в отдельную папку
  2. В терминале: npx -y inki-cli publish ./папка-со-страницей
  3. Или скажи агенту «опубликуй на Inki»: подключение на inki.ru/agent

Готовый файл или папку: опубликовать на Inki.

Что получится

Страница, которая сразу принимает заказы: покупатель нажимает «Заказать», Inki открывает корзину с формой: имя, почта, телефон; покупатель отправляет заказ и сразу видит его номер. Вам приходит письмо, а заказы лежат в кабинете Inki в разделе «Магазин»: там их берут в работу и отмечают оплату. Деньги через Inki не идут, об оплате и доставке вы договариваетесь с покупателем сами. Способы доставки и минимальную сумму заказа задайте в кабинете: «Магазин → Настройки корзины». Цену меняйте в кабинете: «Магазин → Товары», страница покажет новую сама. Перед запуском заполните «Оператор данных» в настройках сайта: без него заказ не примется, а текст согласия у флажка Inki подставит сам. Фото меняйте в кабинете: «Магазин → Товары». Фото товара также можно заменить на холсте; оформление и иконки сохраняются в версии страницы. Пример выше сделан этим шаблоном без правок.

Как доработать

Добавь товару поле active (bool) и привяжи его в shop.products: если я сниму товар с продажи в кабинете, вместо кнопки «Заказать» покажи «Сейчас нет в наличии».