# Дизайн-система KT AI — по ней собирается весь UI В папке проекта лежит `design-system/` — это **дизайн-система KT AI** (источник: `github.com/erjan-A/kt-ai-design-system`, MIT, версия в `design-system/VERSION`). Весь визуал берётся оттуда: цвета, шрифт, отступы, кнопки, карточки, секции лендинга. **Не выдумывай свой стиль и не тащи чужие фреймворки.** Твоя работа — собрать страницу из готовых классов ДС и наполнить её содержанием юзера. Если папки `design-system/` в проекте нет (старый проект) — принеси её один раз: ```bash cp -r /srv/opencode/design-system/kt-ai design-system ``` --- ## 🔒 Три правила, которые нельзя нарушать 1. **Цвета и размеры — только токенами** `var(--kt-ai-…)`. Сырой hex (`#0F1218`, `#fff`) в вёрстке запрещён: он ломает светлую/тёмную тему. 2. **Никакого Bootstrap / Tailwind / Material / Font Awesome / Google Fonts.** Шрифт (Inter) уже внутри ДС и работает офлайн. Всё, что нужно лендингу, в ДС уже есть. 3. **Свой `

Название О нас Оставить заявку

Главное обещание в одну строку

Подзаголовок: кому это и почему стоит остаться.

Оставить заявку Подробнее

Что вы получите

Одно-два предложения пояснения к секции.

Пункт первый

Коротко и по делу.

Пункт второй

Коротко и по делу.

Пункт третий

Коротко и по делу.

Призыв к действию

Город, адрес, часы работы — то, что нужно, чтобы дойти.

Написать

``` --- ## Блоки страницы (`kt-ai-page.css`) | Класс | Что это | |-------|---------| | `.kt-ai-wrap` | контейнер по центру (1080px). `data-width="narrow"` — 720px, `"wide"` — 1200px | | `.kt-ai-pagehead` + `.kt-ai-pagehead-in` | липкая шапка страницы | | `.kt-ai-hero`, `.kt-ai-hero-sub`, `.kt-ai-hero-actions` | первый экран. `data-align="center"` — по центру | | `.kt-ai-section` + `.kt-ai-section-head` (h2 + p) | обычная секция. `data-divider="true"` — линия сверху | | `.kt-ai-grid` + `.kt-ai-tile` (h3 + p) | сетка плиток «возможности». `data-cols="2"/"4"`, у плитки `data-span="2"/"full"` | | `.kt-ai-tile-icon` | иконка над заголовком плитки — из спрайта ДС (см. «Иконки и логотипы» ниже) | | `.kt-ai-cta` | финальный блок с призывом | | `.kt-ai-pagefoot` | подвал | | `.kt-ai-spacer` | распорка внутри шапки/подвала (толкает остальное вправо) | | `.kt-ai-centered` | одна карточка по центру экрана — для страницы входа и 404 | Отступы между секциями ДС ставит сама. Адаптив (3→2→1 колонка) — тоже, `@media` писать не нужно. ## Элементы (`kt-ai-components.css`) | Класс | Как применять | |-------|---------------| | `.kt-ai-btn` | кнопка / ссылка-кнопка. `data-variant="primary"` — главная, `"ghost"` — прозрачная, `"danger"` — опасная. `data-size="sm"/"lg"` | | `.kt-ai-card` | карточка контента | | `.kt-ai-chip` | статус-пилюля / тег | | `.kt-ai-link` | текстовая ссылка | | `.kt-ai-field` + `.kt-ai-input` / `.kt-ai-textarea` / `.kt-ai-select` | поле формы с подписью | **Один `primary` на экран.** Остальные кнопки — обычные или `ghost`. ## Токены (`kt-ai-tokens.css`) Цвет: `--kt-ai-bg`, `--kt-ai-bg-soft`, `--kt-ai-fg`, `--kt-ai-fg-muted`, `--kt-ai-fg-faint`, `--kt-ai-border`, `--kt-ai-divider`, `--kt-ai-card-bg`, `--kt-ai-card-border`, `--kt-ai-primary`, `--kt-ai-link`, `--kt-ai-danger`. Отступы: `--kt-ai-space-1…12` (2px → 64px). Скругления: `--kt-ai-radius-md/lg/xl/2xl/3xl/full`. Текст: `--kt-ai-text-xs…3xl`. Вес: `--kt-ai-weight-regular/medium/semibold/bold`. Шрифты: `--kt-ai-font-sans` (Inter), `--kt-ai-font-mono`. **Тема** — атрибут на ``: `data-theme="auto"` (по системной, ставь его по умолчанию), `"light"`, `"dark"`. Проверь страницу в обеих темах — с токенами это бесплатно. --- ## Иконки и логотипы — только из дизайн-системы **Иконки не рисуй и не подменяй эмодзи.** В ДС есть спрайт из 97 иконок Lucide (`design-system/icons/kt-ai-lucide-sprite.svg`), штрих 1.75, монохром через `currentColor`. Подключение — две строки: ```html ``` Внешняя ссылка `` **не работает** (браузер блокирует), поэтому именно скрипт. В React/Vite-проекте скопируй спрайт в `public/icons.svg` и подключи скрипт с `data-sprite="icons.svg"`. Имена иконок (других нет — выбирай ближайшую по смыслу): `home chat send feed lots source catalog decisions risk recommender compare collections search settings chart table sort filter download chevronRight external help history info users file tool model dashboard columns more check x alert clock arrowRight panelLeftClose panelLeft trophy pin sun moon menu book rocket sparkles play lightbulb plus minus chevronDown chevronLeft arrowLeft arrowUpDown eye calendar link copy trash pencil user bell refresh logout lock mail megaphone archive arrow-right building chevron-right alert-circle check-circle clipboard sync database spreadsheet merge inbox layers checklist package receipt scale split warning upload circleNumber0 circleNumber1 circleNumber2 circleNumber3 circleNumber4 circleNumber5 circleNumber6 circleNumber7 circleNumber8 circleNumber9` Запрещено: эмодзи вместо иконок (🚀 ✅ 📊 и т.п. в кнопках, плитках, списках, заголовках), самодельные `

Название продукта ``` Если в проекте нет папки `design-system/brand/` (старый проект) — скопируй: `cp -r /srv/opencode/design-system/kt-ai/brand design-system/ && cp /srv/opencode/design-system/kt-ai/icons/kt-ai-icons.js design-system/icons/`. ## Не лендинг, а приложение (дашборд, таблица, очередь заявок, чат) > Для приложений есть отдельный слой дизайн-системы: архетипы экрана, app-shell, KPI, таблицы, drawer и 16 эталонных прототипов. > Вызови навык `skill({ name: "kt-design-system" })` — он важнее этого раздела. Тогда экран собирается **не вёрсткой руками, а конфигом**: 1. Возьми `design-system/templates/kt-ai-app-shell.html` — самодостаточный HTML-каркас приложения (без React и npm). 2. Опиши экран JSON-конфигом по `design-system/docs/PRODUCT_CONTRACT.md` и положи его в тег `` внутри каркаса — он сам отрисует таблицу, KPI, фильтры, drawer и темы. 3. Проверь конфиг: `python3 design-system/scripts/validate_product.py config.json --strict` → нужен `0/0`. Полные правила для сложных экранов — `design-system/AGENTS.md`, список компонентов — `design-system/COMPONENTS.md`, приёмка — `design-system/CHECKLIST.md`. Читай их, когда лендинга уже мало. --- ## 📦 Готовые рецепты ### Фото без ключей - Одно и то же слово → одна и та же картинка: `https://picsum.photos/seed/coffee/800/600` - По теме: `https://loremflickr.com/800/600/coffee` (тег прямо в URL) Вставляй с рамкой ДС: `

` ### Кнопка WhatsApp ```html Написать в WhatsApp ``` `7XXXXXXXXXX` — номер в международном формате без `+`. ### Форма заявки без бэкенда ```html ``` Скажи юзеру: замени `EMAIL` на свою почту — заявки будут приходить туда (первая заявка активирует форму). ### Favicon ```html ``` Эмодзи-фавикон не делай: у продукта есть логотип. ### Карта На maps.google.com: место → «Поделиться» → «Встроить карту» → вставь iframe как есть: ```html ``` ### Плавные появления при скролле ```html ``` --- ## Перед тем как сказать «готово» - [ ] Подключены все четыре CSS из `design-system/`, папка лежит в проекте (не забудь закоммитить её). - [ ] В вёрстке нет сырых hex-цветов и чужих шрифтов. - [ ] Страница нормально выглядит в светлой и тёмной теме и на телефоне (узкое окно). - [ ] Один `data-variant="primary"` на экран, тексты — про юзера, а не «Lorem ipsum».