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

Интернет-магазин

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

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

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

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

Магазин по правилам ниже, в seed шесть товаров, id латиницей, photo это <id>.jpg рядом с файлом:
- [шесть строк «id: название, цена, о товаре», например lilac-candles: Свечи «Сирень», 690, пчелиный воск]

Блоки:
1. Шапка: название слева, справа кнопка корзины data-inki-cart-open с числом data-inki-cart-count.
2. [Заголовок и фраза о магазине].
3. Сетка карточек из каталога products, нарисуй их после ответа: фото из поля photo товара, название, строка about, цена <span data-inki-price="id">690</span> ₽ (знак ₽ вне span) и кнопка «Купить» с data-inki-buy="id", тот же id товара. Три колонки, на планшете две, на телефоне одна.
Вся карточка кликабельна: растяни область кнопки «Купить» на фото, название и описание через ::after с position:absolute; inset:0 внутри position:relative карточки. Оставь настоящую кнопку для клавиатуры и видимый фокус карточки. Без inki область не кликабельна.
4. Подвал: [продавец, телефон, почта].

Без объекта inki нарисуй карточки из seed блока application/inki+json, а кнопки замени строкой из правил.

Оформление: фон #f7f3ee, текст #2a2420, акцент #4a5d3f на кнопках и цене. Заголовки Lora 600, текст Inter (Google Fonts). В :root: --inki-cart-bg #f7f3ee, --inki-cart-fg #2a2420, --inki-cart-accent #4a5d3f, --inki-cart-radius 18px. Шапка липкая. Фото 4:5, скругление 18px, при наведении чуть приближается (не при prefers-reduced-motion). Цена и кнопка «Купить» 48px в одной строке. Над названием мелкий номер «№ 01» прописными, как на аптечной этикетке. Видимый фокус. <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: товар, который я сниму с продажи в кабинете, покажи бледным, а вместо кнопки «Купить» напиши «Сейчас нет в наличии».
Добавь товару поле section (строка, например «Свечи» или «Мыло»), заполни его в seed и сгруппируй карточки по разделам: заголовок раздела, под ним его товары. Товары без раздела покажи в конце под заголовком «Другое».