LeCodes Design

Канвас для проектирования приложения до того, как оно существует. Каждый экран — это файл design/screens/<id>.ts, живой и исполняемый; meta.json связывает экраны в карту переходов. Команда lecodes design открывает доску в браузере: экраны рендерятся по-настоящему, выбранный — интерактивен.

Расчёт — на пару «человек + AI»: ассистент пишет экраны кодом и сам смотрит на результат, ты смотришь на доску, двигаешь, соединяешь и правишь. Это этап фиксации замысла — экраны работают на инлайн-моках, до всякого бэкенда.

Канвас — опциональный пакет рядом с CLI. Работает и внутри клонированного проекта, и standalone в любой папке — логин не нужен:

npm i -D lecodes-design lecodes-renderer
lecodes design init   # скаффолд: screens/, shared/, meta.json, spec.md, CLAUDE.md
lecodes design        # dev-сервер + доска в браузере (порт 4477)

init заодно кладёт типы SDK и tsconfig.json (IntelliSense в файлах экранов) и регистрирует MCP-сервер доски в .mcp.json, чтобы Claude Code сразу видел её инструменты. lecodes-renderer нужен для headless-рендера — команды snapshot и MCP-инструмента render_screen.

Экраны хот-релоадятся при сохранении файлов, а всё, что делаешь на доске, пишется обратно в файлы:

• Перетащи невыбранный экран — позиция сохранится в meta.json. Клик выбирает экран, и он становится интерактивным: тапы, скролл, ввод работают.
• Потяни коннектор на другой экран — появится ребро перехода; клик по ребру редактирует подпись и активатор (элемент, запускающий переход) или удаляет его.
• Двойной клик по тексту редактирует его на месте — строковый литерал переписывается прямо в исходнике экрана. Двойной клик по картинке (или drop файла из ОС) заменяет её: файл ложится в design/assets/, путь в asset() переписывается.
• H — режим подсказок: подсвечивает интерактивные элементы, редактируемые тексты и заменяемые картинки.

Экраны в meta.json можно собирать в группы (они рендерятся подписанными областями) и помечать ролью (list, form, auth, …) — на большой доске это единственный способ не потеряться.

Правила простые, и именно они делают дизайн пригодным для AI:

• Один файл — один экран. screens/<id>.ts делает default-export UIScreen; имя файла — идентичность экрана.
• Экраны — острова. Импортировать можно только из shared/ (токены, общие компоненты); экраны не знают друг о друге — все связи живут в meta.json.
• Мок-данные — это домен. Реалистичные данные в начале файла — первый черновик будущей схемы; стабилизировавшиеся сущности переезжают в spec.md — текстовую половину дизайна (модель данных, акторы, правила).
• Состояния экрана — не отдельные файлы, а функция от строкового юниона; юнион и есть список состояний:

export default (state: "default" | "empty" = "default") => UIScreen([
  Header(),
  state === "empty" ? EmptyState("Пока пусто") : UIScrollable(items.map(Card)),
])

• Иконки — через compile-time макрос assetIcon("lucide:bell"): SVG вендорится при сборке, поэтому экраны рендерятся офлайн и детерминированно.

init кладёт в папку CLAUDE.md — спецификацию конвенций, написанную для ассистента, — и регистрирует MCP-сервер доски. Пока сервер запущен, у Claude Code есть инструменты: render_screen (как экран реально выглядит — JSON или PNG), check_screens (быстрая проверка компиляции), design_state (актуальные экраны и рёбра), check_concept (связность spec.md и экранов) и board_activity (что ты только что делал на доске). Ассистент строит экран, рендерит, видит проблемы и чинит их — до того, как показать тебе.

Когда сервер не запущен, то же самое доступно из CLI:

lecodes design snapshot home --png   # headless-рендер экрана → JSON/PNG
lecodes design check                 # связность: рёбра, состояния, ссылки spec.md
lecodes design arrange --new         # расставить новые экраны рядом с соседями

Внутри клонированного проекта дизайн пушится вместе с остальными файлами (lecodes push), а lecodes design share включает публичную ссылку: любой, у кого она есть, увидит работающие мокапы — код приложения остаётся приватным. Отключается через lecodes design share --off.