Свой продукт · В проде

Фабрика фронтенда

Личный набор фронтенда: полный комплект стоковых компонентов shadcn, авторская библиотека блоков и страниц-образцов поверх него и галерея, где всё это можно посмотреть. Набор лежит на диске рядом с проектом, а не ставится из удалённого реестра.

Болело

Каждый новый экран начинался с нуля: свои компоненты, свои цвета, свои отступы. Удачный блок не переносился в соседний проект: он был прибит к теме и вёрстке своего.

Стало

Набор авторских секций и страниц-образцов поверх стоковых компонентов shadcn. Блок переносится файлом: данные приходят пропсами, а цвет берётся из темы принимающего приложения, без правок.

Что это даёт бизнесу

Блок переносится копированием файла: он не тащит за собой ни фикстуры, ни чужую тему.
Стоковые компоненты не правятся никогда, поэтому обновление из официального реестра остаётся безопасным, а не превращается в разбор конфликтов.
Тема здесь параметр, а структура продукт: один и тот же блок выглядит по-своему в каждом приложении.
Основание нового проекта воспроизводится одной командой, а не собирается по памяти.
Тему и слоевую модель отсюда уже взяли две другие системы: это обкатанный набор, а не эталон на будущее.

От источника к результату

Описание экрана
Ближайшая эталонная страница
Блоки и стоковые компоненты
Проверка токенов
Экран в проекте

Описание экрана сначала сводится к ближайшей из двух сотен эталонных страниц набора-референса и только потом собирается из блоков: так у экрана есть образец, а не только представление о нём.

Как устроено

Слои разведены жёстко: стоковые компоненты не кастомизируются никогда, авторские блоки принимают данные только пропсами и не импортируют фикстуры, а страницы-образцы владеют своими данными. Кастомизация это блоки и страницы, а не правка стокового слоя.

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

Примитивы здесь Base UI, а не Radix, и об этом стоит отдельное предупреждение: примеры из обучающих данных почти всегда радиксовские. Кнопка-ссылка без нужного признака ругается только в живом браузере: ни типы, ни линтер её не поймают.

Набор не ставится из удалённого реестра: он лежит на диске рядом, и Claude Code читает исходник блока и переносит его по рецепту, с переустановкой стоковых компонентов на принимающей стороне. Открытым реестром отдаётся другое: тема и компоненты этого сайта. Витрина по ссылке показывает их вживую, а машина читает их по адресу /r/registry.json.

Кто ведёт систему сейчас

Я. Репозиторий набора закрыт; открыта витрина темы и компонентов этого сайта, на ней же показана команда установки.

Другие кейсы этого шага

Внутренняя система · В проде

Управленческий финансовый контур

Отчёт за полчаса вместо недель

Болело: Управленческую отчётность собирали руками неделями: выгрузки, сведение, перепроверка.
Стало: Отчёт собирается за полчаса, данные подтягиваются сами, расхождения по бюджету видно сразу.

Было → стало: недели → полчаса
Сбор данных: подтягивается сам

Та же система даёт эффект ещё по 3 шагам

Внутренняя система · В проде

Товарный портал

Замена внешней PLM за дни

Болело: Товарные данные жили в чужой системе: поменять в ней ничего нельзя, а на любую доработку уходили месяцы ожидания.
Стало: Свой портал заменил внешнюю PLM за несколько дней работы. Промышленный контур доставки был готов в день первого коммита, поэтому изменения доезжают до людей тем же днём.

Срок
Контур доставки: готов в день первого коммита
Заменило: внешнюю PLM-систему

Та же система даёт эффект ещё по 2 шагам

Открытый код · В проде

Стартовый шаблон приложения

От первого коммита до промышленного контура один день

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

Срок: один день до промышленного контура
В коробке: база, вход с ролями, тесты, CI, два контура

две из трёх систем запущены в день первого коммита

Та же система даёт эффект ещё на одном шаге

GitHub

Открытый код · В проде

Выкат из чата

Выкат без ручного SSH, прямо из чата

Болело: Между «код готов» и «этим пользуются люди» стоит ручная возня: SSH, сервер, веб-сервер, сертификат, DNS-запись. Каждый раз заново и каждый раз по памяти.
Стало: Плагин и MCP-сервер дают Claude Code прямой доступ к облаку: сервер, база, DNS, сертификат и сам выкат делаются командой в чате. Рядом лежат проверка готовности, состояние контуров, логи и откат.

Выкат: команда в чате вместо ручного SSH
В плагине
Инфраструктура: сервер, база, DNS, сертификат вызовом инструмента

GitHub npm

Тип: Свой продукт
Статус: В проде
В наборе: 143 блока, 76 страниц-образцов
Ведёт: инженер
Заменило: вёрстку каждого экрана с нуля

Next.js 16React 19TypeScriptTailwind 4shadcn/uiBase UIrechartsTanStack TableESLintPrettier

webkoth.com/ui-kit