| .. | ||
| archetypes | ||
| docs | ||
| fonts | ||
| icons | ||
| scripts | ||
| templates | ||
| AGENTS.md | ||
| CHECKLIST.md | ||
| COMPONENTS.md | ||
| kt-ai-chart-tip.js | ||
| kt-ai-components.css | ||
| kt-ai-composer.js | ||
| kt-ai-feedback.js | ||
| kt-ai-fonts.css | ||
| kt-ai-orb.js | ||
| kt-ai-page.css | ||
| kt-ai-print.css | ||
| kt-ai-tokens.css | ||
| LICENSE | ||
| product.schema.json | ||
| README.md | ||
| THIRD-PARTY-NOTICES.md | ||
| tokens.json | ||
| VERSION | ||
KT AI Design System
Дизайн-система для внутренних продуктов ИИ-команды КТ. Прототип и продакшн-фронтенд — один и тот же код: продуктовый контракт (config.json) рендерится либо React-китом, либо самодостаточным HTML app-shell.
Одна папка, внешних зависимостей нет.
Быстрый старт
Систему не нужно изучать — её читает ИИ-агент. Положите папку в проект как design-system/ и дайте задачу:
Примени дизайн-систему из
design-system/— прочитайdesign-system/AGENTS.mdцеликом и следуй ему. Затем собери экран «Реестр договоров».
Дальше агент делает всё сам: выбирает рантайм под ваш стек, собирает экран через контракт, а не вёрсткой руками, и прогоняет гейт качества.
Работает с Claude Code, Codex, Cursor и любым агентом, который читает файлы репозитория.
Чтобы не повторять это каждую сессию — добавьте в CLAUDE.md проекта одну строку:
UI собирается по дизайн-системе KT AI: следуй `design-system/AGENTS.md`.
Если проект уже существует
Самая частая ошибка — «перекрасить» имеющиеся экраны токенами. Структура остаётся старой, меняются только цвета — это не применённая ДС.
Как правильно — раздел «Если в проекте УЖЕ есть экран» в AGENTS.md: главный экран данных пересобирается через контракт, старый компонент удаляется. Агент читает это сам.
Посмотреть и проверить
open showcase.html # галерея компонентов, светлая и тёмная темы
python3 scripts/doctor.py # 10 секунд: всё ли на месте и цело
examples/ — 16 готовых продуктов, каждый парой «контракт + собранный прототип». Прототипы открываются двойным кликом.
Подключить как зависимость
Чтобы проект всегда работал на свежей ДС, а не на копии, которая тихо отстаёт:
npm i github:erjan-A/kt-ai-design-system
import { KTAIShell, KTScreen } from "kt-ai-design-system/kit";
Обновление — npm update kt-ai-design-system. Настраивать сборщик не нужно: кит приезжает собранным, с типами. Нужен доступ к репозиторию у всех и в CI — docs/SETUP.md.
Подключить как копию
Проекту нужно править компоненты под себя — скопируйте папку к себе и дальше ведите её сами. Система в этом не участвует: копия становится ответственностью проекта, включая обновления.
Коротко, если без React:
<link rel="stylesheet" href="kt-ai-tokens.css"> <!-- значения -->
<link rel="stylesheet" href="kt-ai-components.css"> <!-- компоненты -->
<link rel="stylesheet" href="kt-ai-fonts.css"> <!-- Inter, кириллица + ₸ -->
<body class="kt-ai-app"> <!-- тёмная тема: data-theme="dark" -->
Что где лежит
AGENTS.md |
инструкция ИИ-агенту — главный документ |
CHECKLIST.md |
Definition of Done: экран не готов, пока не прошёл |
COMPONENTS.md |
анатомия компонентов и компоновка экрана |
docs/ |
канон: токены и API, принципы, контракт, архетипы |
docs/RELEASE.md |
как выпускается ДС — правка в каноне до продуктов доезжает только релизом |
examples/ |
16 готовых продуктов |
tokens.json |
единственный источник значений |
templates/ |
React-кит и HTML app-shell |