Как устроен Open Design — самостоятельно размещаемая архитектура с собственным ключом

Это руководство для тех, кто хочет понять, что он на самом деле запускает: как Open Design устроен под капотом, почему его можно разместить самостоятельно и сделать BYOK на каждом уровне, и почему его навыки и дизайн-системы — это просто файлы, которые можно форкнуть. Оно следует ориентированному на архитектуру разбору, который AI Stack Engineer даёт в своём полном видео, переписанному и приведённому в соответствие с текущим релизом. Смотрите видео выше для живого прогона или читайте текстовую версию ниже.

Центр плагинов: просматривайте реестр, импортируйте плагины и подготавливайте их для своей команды.

Что такое Open Design?

Open Design — это полностью открытая замена облачному дизайн-инструменту: local-first, разворачиваемый в вебе и BYOK на каждом уровне. «BYOK» означает приносите свой ключ (bring your own key). Вместо того чтобы поставлять собственную модель или агента, Open Design сканирует вашу машину в поисках любого уже имеющегося у вас CLI для кодинга — Claude Code, Codex, Cursor, Gemini, OpenCode и других — и использует его в качестве движка. Если ни одного нет в вашем PATH, есть запасной вариант через Anthropic API. Лицензия — Apache-2.0, так что вы можете форкнуть его, развернуть внутри компании и свободно изменять.

Мысль, к которой AI Stack Engineer возвращается снова и снова: облачный дизайн-инструмент работает только на модели одного поставщика, в его облаке, за платным тарифом, без всякой возможности самостоятельного размещения. Open Design переворачивает все три пункта — ваша машина, ваш агент, ваш ключ.

Как это устроено (та часть, которую стоит понять)

Архитектура намеренно проста:

• Фронтенд — приложение на Vite + React + TypeScript.
• Бэкенд — демон на Node + Express с SQLite для проектов, бесед, сообщений и вкладок.
• Демон — единственный привилегированный процесс. Он запускает выбранный вами CLI, задавая рабочий каталог как папку для конкретного проекта внутри скрытого каталога .od.

Именно последний пункт делает Open Design чем-то большим, чем окно чата: агент получает настоящие инструменты чтения / записи / bash / web-fetch для реальной файловой системы. Когда он создаёт артефакт, он пишет настоящие файлы на диск, которые вы можете открыть, отредактировать, версионировать и экспортировать — а не возвращает кусок текста в окне чата.

Навыки и дизайн-системы — это просто файлы

Основную работу выполняют два строительных блока, и оба — это обычные файлы, принадлежащие вам:

• Навыки покрывают реальные поверхности — веб-прототип, SaaS-лендинг, дашборд, страница тарифов, документация, блог, мобильное приложение, презентации (включая навык для PPT в журнальном стиле) — а также шаблоны рабочих результатов: спецификации PM, еженедельные апдейты, заметки со встреч, ранбуки, финансовые отчёты, счета, доски Kanban и OKR. Каждый — это файл, который вы можете прочитать, отредактировать или дополнить.
• Дизайн-системы хранятся как обычные markdown-файлы DESIGN.md. Каждый задаёт цвет, типографику, отступы, компоновку, компоненты, движение, тон, правила бренда и анти-паттерны, взятые из реальных брендов.

Рабочее пространство Open Design: опишите, что хотите создать, выберите режим, а остальное сделает ваш агент.

Поскольку и то и другое — файлы, весь ваш дизайн-процесс становится версионируемым и форкаемым: команда может держать свой внутренний навык и брендовый DESIGN.md в git и заставлять любой агент генерировать на их основе.

Установка и самостоятельное размещение

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install   # это подтянет много зависимостей — дайте ему минуту
pnpm tools-dev run web

Откройте локальный URL, который он напечатает (порт динамический — не зашивайте его жёстко). Предпочитаете нулевую настройку? Десктопное приложение на open-design.ai/download обходится без Node и pnpm. При первом запуске оно сканирует ваш PATH и перечисляет найденные агенты; выберите один (AI Stack Engineer тестирует не-Claude-путь с OpenCode) или используйте вариант BYOK от Anthropic.

Две умные детали в стеке промптов, о которых стоит знать: форма обнаружения (она спрашивает о поверхности, аудитории, тоне, бренде и масштабе до начала письма — 30 секунд переключателей экономят 30 минут переделок) и выбор направления (пять выверенных визуальных направлений с детерминированными палитрами, чтобы модель не импровизировала с настроением).

Режим слайд-презентаций: выберите категорию презентаций и форкните пример в качестве отправной точки.

Когда закончите, экспортируйте в HTML, PDF или ZIP — или разверните. Поскольку это разворачивается в вебе и работает local-first, ничему не нужно касаться чужого облака.

Честный вердикт

AI Stack Engineer беспристрастен: вылизанный облачный инструмент, настроенный на одну топовую модель, всё ещё выигрывает по готовому из коробки лоску и широте экспорта. Open Design выигрывает в том, что важно для многих людей — он бесплатный и под Apache-2.0, вы приносите своего агента и свой ключ, а гибкость по моделям — это тихая суперсила: если один поставщик поднимет цены или вы захотите сравнить, как две модели справляются с вёрсткой, вы меняете агента в выпадающем списке и перезапускаете. Несколько честных замечаний: это ранняя стадия research preview; Claude Code получает самый богатый стриминг (структурированный stream-JSON), тогда как другие CLI работают построчно; качество вывода сильно зависит от модели, на которую вы указываете; а некоторые функции, например хирургические правки в режиме комментариев, пока в дорожной карте.

Советы

• Разберитесь с папкой проекта .od — ваши артефакты там лежат настоящими файлами; делайте резервные копии / коммитьте их.
• Держите навыки и DESIGN.md в git ради версионируемого и доступного команде процесса.
• Используйте локальный CLI, чтобы генерация шла на подписке, за которую вы уже платите.
• Выбирайте движок осознанно — слабая модель даже с отличной дизайн-системой всё равно выдаёт слабый результат.
• Размещайте у себя / разворачивайте, когда нужна приватность или контроль — ничему не обязательно покидать вашу машину.

FAQ

Что значит «BYOK на каждом уровне»? Вы приносите свой CLI-агент и свой ключ модели. Open Design предоставляет поверхность дизайна, навыки и дизайн-системы; модель и её стоимость остаются на вашей стороне.

Где на самом деле живёт моя работа? На вашей машине, в папке для конкретного проекта внутри .od, под управлением локального демона (SQLite + настоящие файлы). Это можно разместить самостоятельно и развернуть в вебе.

Могу ли я настраивать навыки и дизайн-системы? Да — это обычные файлы (навыки в виде папок, дизайн-системы в виде DESIGN.md). Редактируйте их, добавляйте свои и держите под контролем версий.

Это бесплатно? Приложение открыто под Apache-2.0 и бесплатно для локального запуска. Вы платите только за использование модели тем агентом и ключом, которые подключаете.

---

Это текстовое руководство основано на полном разборе от AI Stack Engineer. Посмотрите полное видео выше и подпишитесь на AI Stack Engineer ради новых практичных разборов AI-стеков.