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

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

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

Болело

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

Стало

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

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

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

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

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

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

Как устроено

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чужая система учёта товаров заменена за дни

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

Срок
Выкладка: настроена в первый день
Заменило: чужую систему учёта товаров

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

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

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

От первой строки кода до рабочей выкладки один день

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

Срок: один день до рабочей выкладки
В коробке: база, вход с ролями, тесты, два окружения

две из трёх систем выкладывались уже в первый день

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

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