nexu-io--open-design
wehub-resource-sync
758 行
78 KiB
Markdown
758 行
78 KiB
Markdown
<h1 align="center">Open Design: открытая альтернатива Claude Design</h1>
|
||
|
||
> 🔥 **Open Design 0.13.0 — _Stay in Flow_ уже здесь.** Раньше долгие сессии дизайна прерывались на каждой заминке — запуск терял своё место, выбор модели заставлял гадать, а экспорт требовал ещё одного обходного пути. 0.13.0 сохраняет сессию живой: возобновляйте запуски Codex / OpenCode / Pi / Open Design Cloud между ходами, быстрее выбирайте нужную модель и передавайте подкреплённые скриншотами PPTX / PDF, не покидая приложение. [Скачать 0.13.0](https://github.com/nexu-io/open-design/releases) · [Примечания к выпуску](https://github.com/nexu-io/open-design/releases/tag/open-design-v0.13.0)
|
||
>
|
||
> ⚡ **Open Design Cloud — официальный сервис моделей.** Одно пополнение — и GPT, Claude, Gemini и DeepSeek доступны прямо в Open Design: 20+ флагманских моделей, ноль настройки, оплата по реальному расходу токенов. [Попробовать Open Design Cloud](https://open-design.ai/cloud/?utm_source=github&utm_medium=referral&utm_content=readme_try_cloud)
|
||
>
|
||
> 🏅 **Программа Open Design Fellow теперь открыта.** Если вы тоже верите, что дизайн должен быть открытым — станьте Open Design Fellow, формируйте продукт вместе с основной командой и помогайте большему числу людей участвовать в определении будущего дизайна. Подробности → [`MAINTAINERS.md`](../../MAINTAINERS.md) и [Discord](https://discord.gg/mHAjSMV6gz).
|
||
|
||
<p align="center">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/hero.png" alt="Баннер Open Design: заголовок "Открытая альтернатива Claude Design" на фоне классической сцены с колоннами, фигурами в тогах и цифровым кодом, а также карточками статистики по дизайн-системам, плагинам, кодинг-агентам и медиапровайдерам" width="100%" />
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_website">Сайт</a> ·
|
||
<a href="https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download">Скачать</a> ·
|
||
<a href="https://open-design.ai/cloud/?utm_source=github&utm_medium=referral&utm_content=readme_cloud">Open Design Cloud</a> ·
|
||
<a href="https://discord.gg/mHAjSMV6gz">Discord</a> ·
|
||
<a href="https://x.com/OpenDesignHQ">Подписаться @OpenDesignHQ</a>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="https://github.com/nexu-io/open-design/releases"><img alt="релиз" src="https://img.shields.io/github/v/release/nexu-io/open-design?style=flat&color=blueviolet&label=release&include_prereleases&display_name=tag" /></a>
|
||
<a href="../../LICENSE"><img alt="лицензия" src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" /></a>
|
||
<a href="https://discord.gg/mHAjSMV6gz"><img alt="discord" src="https://img.shields.io/discord/1479002485040480266?style=flat&logo=discord&logoColor=white&label=discord&color=5865F2&cacheSeconds=3600" /></a>
|
||
<a href="../../QUICKSTART.md"><img alt="быстрый старт" src="https://img.shields.io/badge/quickstart-3%20commands-green?style=flat" /></a>
|
||
</p>
|
||
|
||
<p align="center"><a href="../../README.md">English</a> · <a href="README.es.md">Español</a> · <a href="README.pt-BR.md">Português</a> · <a href="README.de.md">Deutsch</a> · <a href="README.fr.md">Français</a> · <a href="README.zh-CN.md">简体中文</a> · <a href="README.zh-TW.md">繁體中文</a> · <a href="README.ko.md">한국어</a> · <a href="README.ja-JP.md">日本語</a> · <a href="README.ar.md">العربية</a> · <b>Русский</b> · <a href="README.uk.md">Українська</a> · <a href="README.tr.md">Türkçe</a> · <a href="README.th.md">ภาษาไทย</a></p>
|
||
|
||
---
|
||
|
||
## Что такое Open Design
|
||
|
||
🎨 **Открытая альтернатива Claude Design.** 🖥️ **Локальное по умолчанию нативное десктопное приложение для macOS и Windows.** ⚡ **Комбинируемые навыки, брендовые дизайн-системы `DESIGN.md` и готовые к использованию плагины.** 🖼️ Генерирует **веб-, десктопные и мобильные прототипы**, **живые дашборды / артефакты**, **презентации**, **изображения**, **видео**, а также моушн-графику **HyperFrames**. 🔒 Предпросмотр в изолированном iframe · экспорт HTML / PDF / PPTX / MP4. 🤖 **Работает на Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Amp · Hermes · Kimi · Antigravity и 22 локальных CLI**, либо на любом OpenAI-совместимом эндпоинте через BYOK.
|
||
|
||
Open Design — это то, что получается, когда **агентно-нативный** цикл, который Anthropic выпустила вместе с Claude Design — изучить бриф, зафиксировать направление, потоково собрать артефакт, провести ревью и передать результат — перестаёт быть закрытым и становится **файловой системой навыков, дизайн-систем и плагинов**, которую уже установленные на вашем ноутбуке кодинг-агенты могут читать, писать и ремиксовать. Ваш CLI становится дизайн-движком, ноутбук — студией, а `DESIGN.md` вашей команды — брендовым контрактом.
|
||
|
||
Это также **альтернатива Figma для эпохи агентов** — вместо того чтобы двигать пиксели на холсте, она поставляет одностраничные артефакты в настоящем CSS, настоящих шрифтах, настоящих компонентах, экспортируемые сразу в HTML / PDF / PPTX / MP4 — уже оформленные вашей дизайн-системой, уже запускаемые внутри агента, которым вы пользуетесь каждый день.
|
||
|
||
|
||
---
|
||
|
||
## Обзор продукта
|
||
|
||
Краткий взгляд на то, что такое Open Design и что он делает. Начните с **Home**, организуйте повторяющиеся рабочие процессы с помощью **Automation**, оформите брендовый контракт в **Design System** и расширяйте возможности через **Plugins** и **интеграции**; внутри **Studio** любого проекта та же дизайн-система потоком выдаёт прототипы, живые артефакты, HyperFrames, презентации и изображения.
|
||
|
||
### Основные страницы
|
||
|
||
<table>
|
||
<tr>
|
||
<td valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/home.png" alt="Главная страница" /><br/>
|
||
<sub><b>Home</b> — точка входа с обзором. Выберите навык и дизайн-систему, введите бриф и запустите всё из одного места.</sub>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/automation.png" alt="Страница автоматизаций" /><br/>
|
||
<sub><b>Automation</b> — превращайте повторяющиеся дизайн-процессы в переиспользуемые автоматизации с возможностью планирования.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/design-system.png" alt="Страница дизайн-системы" /><br/>
|
||
<sub><b>Design System</b> — дистиллируйте <code>DESIGN.md</code> вашей команды в брендовый контракт, который формирует каждый результат.</sub>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/plugin.png" alt="Страница плагинов" /><br/>
|
||
<sub><b>Plugin</b> — просматривайте, устанавливайте и распространяйте плагины рабочих процессов, чтобы расширять генерацию по запросу.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/integrations.png" alt="Страница интеграций" /><br/>
|
||
<sub><b>Integrations</b> — подключайте внешние системы и MCP-инструменты и используйте Open Design из любой IDE, скрипта или автоматизации.</sub>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
### Studio — множество типов артефактов в одном проекте
|
||
|
||
Внутри Studio проекта та же дизайн-система выдаёт потоком несколько типов артефактов:
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-prototype.png" alt="Прототип" /><br/>
|
||
<sub><b>Prototype</b> — одностраничные HTML-артефакты, которые читают вашу дизайн-систему и рендерятся в изолированном iframe, с мгновенным предпросмотром и возможностью скачать исходник.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-hyperframe.png" alt="HyperFrame" /><br/>
|
||
<sub><b>HyperFrame</b> — программная анимация и движущаяся графика, отрендеренные в настоящий MP4 (например, 1920×1080 · 30fps).</sub>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-ppt.png" alt="Презентация" /><br/>
|
||
<sub><b>Deck</b> — питч-презентации, которые можно листать, листать с клавиатуры и экспортировать в PPTX / PDF.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/product/studio-image.png" alt="Изображение" /><br/>
|
||
<sub><b>Image</b> — изображения и визуальные ассеты брендового уровня с генерацией и скачиванием в высоком разрешении.</sub>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
---
|
||
|
||
## Совместимость с платформами
|
||
|
||
> Open Design поставляется как **навыки, CLI и MCP-сервер**, которые мейнстримные кодинг-агенты потребляют нативно. После установки OD одна команда `od mcp install <agent>` подключает MCP-сервер в конфигурацию этого агента, и вы вызываете одни и те же инструменты изнутри любого агента.
|
||
|
||
| Кодинг-агент / платформа | Статус | Установка MCP-сервера одной строкой |
|
||
|---|:---:|---|
|
||
| [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | ✅ Поддерживается | `od mcp install claude` |
|
||
| [Codex CLI](https://github.com/openai/codex) | ✅ Поддерживается | `od mcp install codex` |
|
||
| [Cursor](https://www.cursor.com/cli) | ✅ Поддерживается | `od mcp install cursor` |
|
||
| [VS Code + GitHub Copilot](https://github.com/features/copilot) | ✅ Поддерживается | `od mcp install copilot` |
|
||
| [GitHub Copilot CLI](https://github.com/features/copilot/cli) | ✅ Поддерживается | `od mcp install copilot` |
|
||
| [Gemini CLI](https://github.com/google-gemini/gemini-cli) | ✅ Поддерживается | `od mcp install gemini` |
|
||
| [OpenCode](https://opencode.ai/) | ✅ Поддерживается | `od mcp install opencode` |
|
||
| [OpenClaw](https://github.com/openclaw/openclaw) | ✅ Поддерживается | `od mcp install openclaw` |
|
||
| [Antigravity](https://antigravity.google) | ✅ Поддерживается | `od mcp install antigravity` |
|
||
| [Cline](https://github.com/cline/cline) | ✅ Поддерживается | `od mcp install cline` |
|
||
| [Trae](https://www.trae.ai/) | ✅ Поддерживается | `od mcp install trae` |
|
||
| [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) | ✅ Поддерживается | `od mcp install kimi` |
|
||
| [Kiro](https://kiro.dev) | ✅ Поддерживается | `od mcp install kiro` |
|
||
| [Pi Agent](https://github.com/badlogic/pi-mono) | ✅ Поддерживается | `od mcp install pi` |
|
||
| [Mistral Vibe CLI](https://github.com/mistralai/mistral-vibe) | ✅ Поддерживается | `od mcp install vibe` |
|
||
| [Hermes Agent](https://github.com/nousresearch/hermes-agent) | ✅ Поддерживается | `od mcp install hermes` |
|
||
|
||
`od mcp install <agent> --print` для предпросмотра без изменений · `--uninstall` для удаления · полный список через `od mcp install --help`.
|
||
|
||
<p align="center">
|
||
<img src="https://repo-assets.open-design.ai/resources/images/coding-agents.png" alt="21 CLI кодинг-агента, которые поддерживает Open Design — Claude Code · Codex · OpenCode · Hermes · Antigravity · Gemini · Grok Build · Kimi · Cursor Agent · Qwen · Qoder · GitHub Copilot · Pi · Kiro · Kilo · Mistral Vibe · DeepSeek · Reasonix · Aider · Devin · Trae" width="100%" />
|
||
</p>
|
||
|
||
**Нет установленного CLI?** BYOK-прокси по адресу `POST /api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream` даёт вам тот же цикл (без запуска процессов) — вставьте `baseUrl` + `apiKey` + `model`, с поддержкой OpenAI, Anthropic, Azure OpenAI, Google Gemini, Ollama, LM Studio, vLLM или любого OpenAI-совместимого эндпоинта. Защита от SSRF для каждой цели блокирует внутренние IP / link-local / CGNAT на границе демона.
|
||
|
||
Контракт адаптера и парсеры потоков находятся в [`apps/daemon/src/agents.ts`](../../apps/daemon/src/agents.ts). Добавление нового CLI — это одна запись, см. [`docs/agent-adapters.md`](../../docs/agent-adapters.md).
|
||
|
||
---
|
||
|
||
## Демо
|
||
|
||
Четыре основные категории продукта, все отрендерены кодинг-агентом, работающим на вашем ноутбуке. Нажмите на миниатюру, чтобы увидеть реальный пример.
|
||
|
||
### 1 · Прототипы — веб · десктоп · мобильные
|
||
|
||
Поверхность вывода по умолчанию. Одностраничные HTML-артефакты, которые читают ваш `DESIGN.md` и рендерятся в изолированном iframe.
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/01-entry-view.png" alt="Стартовый экран" /><br/>
|
||
<sub><b>Экран входа</b> — выберите навык, выберите дизайн-систему, введите бриф. Одна поверхность для прототипов, дашбордов, презентаций, мобильных приложений, журнальных страниц.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/skills/mobile-onboarding.png" alt="Мобильный онбординг" /><br/>
|
||
<sub><b>Мобильный прототип</b> — пиксельно точный интерфейс iPhone 15 Pro, многоэкранные потоки. Агент никогда не перерисовывает рамку телефона; общие рамки устройств находятся в <code>assets/frames/</code>.</sub>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/skills/dating-web.png" alt="Веб-прототип dating-web" /><br/>
|
||
<sub><b>Веб-прототип</b> — редакционный дашборд со скроллбарами, KPI и графиками. Отрендерен напрямую из <code>design-templates/dating-web/</code>.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/skills/gamified-app.png" alt="Геймифицированное приложение" /><br/>
|
||
<sub><b>Прототип мобильного приложения</b> — трёхэкранный геймифицированный поток с лентами XP и деталями квеста. Передавайте напрямую в Cursor / Codex / Claude Code, чтобы превратить в React/Next/Vue.</sub>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
### 2 · Живые артефакты и дашборды
|
||
|
||
Живые дашборды, комнаты принятия решений, KPI-стены — одностраничные артефакты, которые подтягивают данные через панель настроек и остаются редактируемыми на месте.
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/skills/live-dashboard.png" alt="Живой дашборд" /><br/>
|
||
<sub><b>Живой дашборд</b> — редактируемая KPI-стена, чья панель настроек выводит параметры, которые стоит подкручивать. Агент выдаёт манифест, и iframe перерисовывается без перезагрузки.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/skills/research-decision-room.png" alt="Комната принятия решений" /><br/>
|
||
<sub><b>Комната принятия решений</b> — артефакт-брифинг из множества источников для встреч по продукту / исследованиям / операциям.</sub>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/skills/github-dashboard.png" alt="Дашборд GitHub" /><br/>
|
||
<sub><b>Дашборд в стиле GitHub</b> — метрики репозитория, представленные как живой артефакт.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/skills/flowai-live-dashboard-template.png" alt="Живой дашборд Flow" /><br/>
|
||
<sub><b>Шаблон живого дашборда Flow</b> — доменно-специфичный KPI-шаблон, оформленный через активный <code>DESIGN.md</code>.</sub>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
### 3 · Презентации — журнальные презентации, еженедельные апдейты, питчи
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/07-magazine-deck.png" alt="Журнальная презентация (guizang-ppt)" /><br/>
|
||
<sub><b>Режим презентации (guizang-ppt)</b> — журнальные макеты, WebGL-герой, чек-листы P0/P1/P2. Включён дословно из <a href="https://github.com/op7418/guizang-ppt-skill"><code>op7418/guizang-ppt-skill</code></a> с сохранением оригинальной лицензии.</sub>
|
||
</td>
|
||
<td width="50%" valign="top">
|
||
<img src="../../docs/screenshots/skills/deck-swiss-international.png" alt="Швейцарская презентация" /><br/>
|
||
<sub><b>Презентация в швейцарском интернациональном стиле</b> — привязанная к сетке, монохромные акценты. Один из <b>15 шаблонов презентаций</b> и <b>36 тем</b> в <code>design-templates/html-ppt-*/</code>.</sub>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
Каждая презентация экспортируется в **HTML** (один файл, встроенные ассеты), **PDF** (печать из браузера, с учётом презентации), **PPTX** (навык, управляемый агентом), **ZIP** (архив) или **Markdown**.
|
||
|
||
### 4 · Изображения — `gpt-image-2`, ImageRouter, кастомный API
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776662673014_nf0taw_HGRMNDybsAAGG88.jpg" alt="Иллюстрированная гастрономическая карта города" /><br/><sub><b>Иллюстрированная гастрономическая карта города</b><br/>Рисованный от руки редакционный туристический постер</sub></td>
|
||
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453149026_gd2k50_HHCSvymboAAVscc.jpg" alt="Кинематографичная сцена в лифте" /><br/><sub><b>Кинематографичная сцена в лифте</b><br/>Однокадровый редакционный стоп-кадр</sub></td>
|
||
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453164993_mt5b69_HHDoWfeaUAEA6Vt.jpg" alt="Киберпанк-портрет" /><br/><sub><b>Киберпанк-портрет</b><br/>Аватар профиля — неоновый текст на лице</sub></td>
|
||
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1776661968404_8a5flm_HGQc_KOaMAA2vt0.jpg" alt="Эволюция 3D-каменной лестницы" /><br/><sub><b>3D-каменная лестница</b><br/>Инфографика из тёсаного камня</sub></td>
|
||
<td width="20%" valign="top"><img src="https://cms-assets.youmind.com/media/1777453184257_vb9hvl_HG9tAkOa4AAuRrn.jpg" alt="Гламурный портрет" /><br/><sub><b>Гламурный портрет</b><br/>Редакционная студийная съёмка</sub></td>
|
||
</tr>
|
||
</table>
|
||
|
||
**93 готовых к воспроизведению промпта** находятся в [`prompt-templates/`](../../prompt-templates/) — миниатюры предпросмотра, полное тело промпта, целевая модель, соотношение сторон и указание источника. Один клик помещает бриф в композер.
|
||
|
||
### 5 · Видео и HyperFrames — агентно-нативная моушн-графика
|
||
|
||
**[HyperFrames][hyperframes]** — это открытый, агентно-нативный видеофреймворк от HeyGen, интегрированный как полноправный участник в Open Design. Агент пишет HTML + CSS + GSAP, а HyperFrames рендерит это в детерминированный MP4 через headless Chrome + FFmpeg. Сочетайте его с **Seedance 2.0** для кинематографичного t2v / i2v, **Veo 3 / Sora 2 / Kling 2** для маршрутизируемых вариантов моделей и **Suno v5 / Lyria 2** для аудиослоя.
|
||
|
||
<table>
|
||
<tr>
|
||
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-saas-product-promo-30s.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" alt="Промо SaaS-продукта" /></a><br/><sub><b>30-секундное промо SaaS-продукта</b> · 16:9 · 3D-раскрытие UI</sub></td>
|
||
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-tiktok-karaoke-talking-head.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" alt="TikTok-караоке" /></a><br/><sub><b>TikTok-караоке с говорящей головой</b> · 9:16 · TTS + субтитры с синхронизацией по словам</sub></td>
|
||
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-brand-sizzle-reel.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Динамичный брендовый ролик" /></a><br/><sub><b>30-секундный брендовый sizzle reel</b> · 16:9 · аудиореактивная кинетическая типографика</sub></td>
|
||
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-data-bar-chart-race.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" alt="Гонка столбчатых диаграмм" /></a><br/><sub><b>Гонка столбчатых диаграмм</b> · 16:9 · инфографика данных в стиле NYT</sub></td>
|
||
</tr>
|
||
<tr>
|
||
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-flight-map-route.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" alt="Карта полёта" /></a><br/><sub><b>Карта полёта</b> · 16:9 · раскрытие маршрута в стиле Apple</sub></td>
|
||
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-logo-outro-cinematic.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" alt="Заставка логотипа" /></a><br/><sub><b>4-секундная кинематографичная заставка логотипа</b> · 16:9 · посборочная сборка + bloom</sub></td>
|
||
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-money-counter-hype.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" alt="Счётчик денег" /></a><br/><sub><b>Счётчик денег $0 → $10K</b> · 9:16 · хайп в стиле Apple</sub></td>
|
||
<td width="25%" valign="top"><a href="../../prompt-templates/video/hyperframes-website-to-video-promo.json"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" alt="Сайт в видео" /></a><br/><sub><b>Сайт в видео</b> · 16:9 · снимает сайт в 3 вьюпортах</sub></td>
|
||
</tr>
|
||
</table>
|
||
|
||
11 шаблонов HyperFrames + 39 промптов Seedance поставляются с репозиторием. Миниатюры каталога © HeyGen; фреймворк под Apache-2.0. Специфичный для OD рабочий процесс рендеринга (кэш композиций, обход sandbox-exec, MP4-как-чип) подробно описан в [`design-templates/hyperframes/`](../../design-templates/hyperframes/).
|
||
|
||
[hyperframes]: https://github.com/heygen-com/hyperframes
|
||
|
||
---
|
||
|
||
## Почему Open Design
|
||
|
||
> **В апреле 2026 года Anthropic выпустила Claude Design — впервые LLM перестала писать прозу и начала поставлять дизайн-артефакты напрямую.** Это стало вирусным. Но продукт остался закрытым, только платным, только облачным, привязанным к модели Anthropic, навыкам Anthropic, поверхности Anthropic. Никакого доступа к исходникам, никакого self-host, никакого деплоя на Vercel, никакой возможности подставить собственного агента.
|
||
|
||
Open Design (OD) — это открытая альтернатива. Тот же цикл, та же ментальная модель «сначала артефакт», без всякой привязки:
|
||
|
||
- 🤖 **Агентно-нативный, не зависящий от модели.** Мы не поставляем агента. `claude` / `codex` / `cursor-agent` / `copilot` / `hermes` / `kimi`, уже находящиеся в вашем `PATH`, — это дизайн-движок. Переключайтесь одним кликом.
|
||
- 🧠 **Брендовый уровень по умолчанию.** Каждый рендер читает активный `DESIGN.md` — схему из 9 разделов, охватывающую палитру, типографику, отступы, движение, голос, антипаттерны. 150 систем поставляются с репозиторием (Linear, Stripe, Vercel, Airbnb, Apple, Tesla, Notion, Anthropic, Cursor, Supabase, Figma…). Положите папку — и выбор её найдёт.
|
||
- 🖥️ **Локальный по умолчанию, BYOK на каждом уровне.** Нативные десктопные приложения остаются локальными, без обращений в облако. Перед описанием путей данных демона необходимо прочитать корневой `AGENTS.md`, раздел **Daemon data directory contract**.
|
||
- 🌍 **Компонуемый в трёх плоскостях.** **Плагины** несут запускаемые рабочие процессы · **навыки** несут дизайнерский вкус агента · **дизайн-системы** несут бренд. Все три — это обычные файлы, которые кто угодно может создавать, версионировать и публиковать.
|
||
- 🔁 **Обновляйте существующую кодовую базу.** Передайте `git`-репозиторий + `DESIGN.md` агенту, и он отрефакторит ваши реальные компоненты под спецификацию бренда. Специальные плагины мигрируют рабочие процессы Figma / Pencil в код React / Next.js / Vue.
|
||
- 🔒 **Конфиденциальность по убеждению.** Всё работает там, где живут ваши данные — ваш ноутбук, сервер вашей команды, ваш проект на Vercel. Когда нужна сеть, BYOK-прокси защищён от SSRF.
|
||
|
||
### Сравнение
|
||
|
||
| | Claude Design | Figma | Lovable / v0 / Bolt | **Open Design** |
|
||
|---|---|---|---|---|
|
||
| Открытый исходный код | ❌ | ❌ | ❌ | **✅ Apache-2.0** |
|
||
| Self-host / десктоп | ❌ | ❌ | ❌ | **✅ macOS + Windows + Vercel** |
|
||
| Агентно-нативный (работает в вашем CLI) | Только Anthropic | ❌ | Только облачный агент | **✅ 22 CLI + BYOK** |
|
||
| `DESIGN.md` брендового уровня | Проприетарный | Theme JSON | Ограниченные токены | **✅ 150 поставляемых систем** |
|
||
| Навыки / плагины / шаблоны | Закрытые | Магазин плагинов | Закрытые | **✅ 100+ навыков · 261 плагин** |
|
||
| HyperFrames (HTML→MP4) | ❌ | ❌ | ❌ | **✅ Полноправный** |
|
||
| Обновление существующего репозитория под бренд | ❌ | ❌ | ❌ | **✅ через агента + `DESIGN.md`** |
|
||
| Минимальный биллинг | Pro / Max / Team | Pro / Org | Pro / Team | **BYOK · любой совместимый эндпоинт** |
|
||
|
||
---
|
||
|
||
## Быстрый старт
|
||
|
||
### 🖥️ Скачайте десктопное приложение (рекомендуется — без настройки)
|
||
|
||
Самый быстрый способ использовать Open Design. Никакого Node, никакого pnpm, никакого клонирования.
|
||
|
||
- **macOS** (Apple Silicon · Intel x64) → [**open-design.ai**](https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download_macos) или [GitHub Releases](https://github.com/nexu-io/open-design/releases)
|
||
- **Windows** (x64) → [**open-design.ai**](https://open-design.ai/?utm_source=github&utm_medium=referral&utm_content=readme_download_windows) или [GitHub Releases](https://github.com/nexu-io/open-design/releases)
|
||
- **Linux** (AppImage, опциональная линия) → [GitHub Releases](https://github.com/nexu-io/open-design/releases)
|
||
|
||
После установки: приложение автоматически обнаруживает каждый CLI кодинг-агента в вашем `PATH`, загружает 100+ навыков и 150 дизайн-систем и позволяет вам ввести бриф на экране входа.
|
||
|
||
### 🤖 Установка в ваш кодинг-агент (без UI)
|
||
|
||
Вы можете использовать Open Design, ни разу не открыв GUI — вызывайте его как навык, плагин или MCP-сервер внутри Claude Code, Codex, Cursor, Copilot, OpenClaw, Antigravity, Hermes, Kimi и других.
|
||
|
||
```bash
|
||
# Установка одной командой в агент, которым вы пользуетесь:
|
||
od mcp install <agent>
|
||
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
|
||
# | pi | vibe | hermes | cline | kimi | trae | opencode
|
||
|
||
# Аналогичная установка через hosted shell-скрипт:
|
||
curl -fsSL https://open-design.ai/install.sh | sh -s <agent>
|
||
```
|
||
|
||
`install.sh` — тонкая shell-обертка вокруг `od mcp install`. Она нужна, чтобы hosted URL возвращал shell-скрипт вместо HTML-fallback лендинга и быстро падал, если ваша оболочка находит не Open Design, а другой бинарник `od`.
|
||
|
||
> **Пользователям WSL2:** если CLI ваших кодинг-агентов запускаются внутри WSL2, сначала выполните шаги из [`гайда по настройке WSL2`](../../docs/wsl-setup.md). Linux-команда `/usr/bin/od` может перекрывать команду `od` из Open Design.
|
||
|
||
Затем, внутри агента:
|
||
|
||
```
|
||
> Use open-design to generate a landing page with the Linear design system
|
||
```
|
||
|
||
Агент читает `skills/`, выбирает правильный `SKILL.md`, привязывает названный вами `DESIGN.md` и выдаёт `<artifact>`, доступный для предпросмотра по адресу `http://localhost:7456`.
|
||
|
||
### 🐳 Запуск с Docker
|
||
|
||
```bash
|
||
git clone https://github.com/nexu-io/open-design.git
|
||
cd open-design/deploy
|
||
cp .env.example .env
|
||
echo "OD_API_TOKEN=$(openssl rand -hex 32)" >> .env
|
||
docker compose up -d
|
||
# open http://localhost:7456
|
||
```
|
||
|
||
> **Пользователям macOS:** если веб-интерфейс показывает `Authorization: Bearer <OD_API_TOKEN> required`, причина в bridge networking Docker Desktop. Решение описано в разделе [Docker Desktop on macOS](../../deploy/README.md#docker-desktop-on-macos).
|
||
|
||
### 🚀 Развертывание на Sealos
|
||
|
||
[](https://sealos.io/products/app-store/open-design/)
|
||
|
||
Шаблон Sealos App Store запускает опубликованный Docker-образ Open Design с постоянным хранилищем рабочей области и Basic Auth на публичном прокси. Для пользовательских публичных или совместных Docker-развертываний следуйте рекомендациям по обратному прокси и `OPEN_DESIGN_ALLOWED_ORIGINS` в [`deploy/README.md`](../../deploy/README.md#local-compose).
|
||
|
||
### 🧑💻 Запуск из исходников
|
||
|
||
```bash
|
||
git clone https://github.com/nexu-io/open-design.git
|
||
cd open-design
|
||
corepack enable && pnpm install
|
||
pnpm tools-dev run web
|
||
```
|
||
|
||
Node `~24`, pnpm `10.33.x`. Пользователям WSL2 см. [`docs/wsl-setup.md`](../../docs/wsl-setup.md); пользователям нативной Windows — [`docs/windows-troubleshooting.md`](../../docs/windows-troubleshooting.md). Полный быстрый старт, переменные окружения, Nix flake и процесс упакованной сборки → [`QUICKSTART.md`](../../QUICKSTART.md).
|
||
|
||
### Полный рабочий процесс — от брифа до артефакта
|
||
|
||
`brief → plugin → direction → design system → artifact → handoff → memory`
|
||
|
||
1. **PM подаёт бриф.** Выбор плагина предлагает лендинг · питч-презентацию · дашборд · пост для соцсетей · PM-спецификацию · OKR-карту…
|
||
2. **Дизайнер (или агент) фиксирует направление.** Нет бренда? Выберите одно из 5 кураторских направлений. Есть бренд? Добавьте скриншот или URL → агент подключит GitHub, импортирует Figma и кодифицирует переиспользуемый `DESIGN.md`.
|
||
3. **Агент выдаёт первый `<artifact>`.** Плагин + навык + `DESIGN.md` привязаны. Он стримится в изолированный iframe, редактируемый на месте — а не «перегенерировать с нуля».
|
||
4. **Передача в разработку.** Артефакт — это настоящий HTML/CSS. Откройте его в Cursor, Codex или Claude Code, чтобы продолжать сборку как код, либо сразу экспортируйте PPTX / PDF / MP4 для маркетинга.
|
||
5. **Open Design становится умнее по мере использования.** Ваши скриншоты, шрифты, палитры и подтверждённые артефакты накапливаются как значения по умолчанию для следующей сессии. Меньше переделок, меньше дрейфа.
|
||
|
||
---
|
||
|
||
## Используйте Open Design из вашего кодинг-агента
|
||
|
||
Open Design поставляет **stdio MCP-сервер** и **скрипты установки** для каждого агента. Любой MCP-совместимый агент в другом репозитории может читать файлы из ваших локальных проектов Open Design напрямую — токены CSS, JSX-компоненты, входной HTML — как структурированный API, запрашиваемый по имени. Агент всегда видит живой файл, а не устаревший экспорт.
|
||
|
||
```bash
|
||
# Установка одной командой (поддерживается 16+ CLI):
|
||
od mcp install <agent>
|
||
|
||
# После этого агент может:
|
||
od search-files "primary button" # поиск файлов по проектам
|
||
od get-file design-systems/linear-app/DESIGN.md
|
||
od get-artifact <slug> # последний отрендеренный артефакт
|
||
od plugin run web-prototype --brief "..."
|
||
od skill list --scenario marketing
|
||
```
|
||
|
||
**Почему MCP?** Экспорт и повторное прикрепление zip на каждой итерации ломает поток. MCP открывает дизайн-источник напрямую — агент всегда видит живой файл.
|
||
|
||
**Для агента, начинающего с нуля,** установщик размещает `~/.config/<agent>/open-design.json` (или эквивалент для платформы) плюс готовый к копированию MCP-сниппет. Cursor получает диплинк в один клик; Claude Code получает однострочник `claude mcp add-json`; каждый другой агент получает JSON в той схеме, которую ожидает его конфигурация. Полный процесс для каждого агента → **Settings → MCP server** в десктопном приложении или [`docs/agent-adapters.md`](../../docs/agent-adapters.md).
|
||
|
||
**Модель безопасности.** Только для чтения по умолчанию, демон привязывается к `127.0.0.1`, а SSRF блокируется на границе прокси. Доступ из LAN требует явного `OD_BIND_HOST` плюс `OD_ALLOWED_ORIGINS`. Учётные данные коннекторов и маршруты предпросмотра живых артефактов остаются только loopback в любом случае.
|
||
|
||
**Внутренние эндпоинты моделей.** Чтобы предотвратить SSRF, демон по умолчанию блокирует базовые URL провайдеров, которые резолвятся в приватные или внутренние диапазоны адресов (RFC1918, link-local, CGNAT и IP cloud-metadata), и показывает `Internal IPs blocked`. Если вы запускаете внутренний gateway, например LiteLLM или Ollama на доступном только через VPN адресе `10.x` / `192.168.x`, разрешите этот хост через `OD_ALLOWED_INTERNAL_HOSTS=<host1>,<host2>,...` — список голых hostnames или IP через запятую либо пробел (`10.0.0.5`, `litellm.internal.corp`; `host:port` или полный URL принимаются и сводятся к hostname; IPv6 нужно писать в квадратных скобках, например `[fd00::1]`). Allowlist строго opt-in (пустой по умолчанию), exact-host (без сопоставления поддоменов или подстрок) и применяется **только** к настроенным вами provider endpoints: проверке соединения, обнаружению моделей и BYOK-чату. Он намеренно **не** ослабляет защиту для download URL, возвращённых в ответах upstream: они остаются заблокированными. Некорректная запись — как и CIDR-нотация, которая не поддерживается — отбрасывается с предупреждением, а не молча считается доверенной, поэтому опечатка не расширит (и не сузит) защиту незаметно. Разрешая hostname, вы доверяете тому, во что он резолвится (как и с `OD_ALLOWED_ORIGINS`); если хотите повторно проверять DNS-результат, добавьте в allowlist уже разрешённый IP.
|
||
|
||
---
|
||
|
||
## Навыки
|
||
|
||
**100+ навыков поставляются из коробки** — каждый представляет собой папку в [`skills/`](../../skills/), следующую конвенции Claude Code [`SKILL.md`][skill], расширенной фронтматтером `od:` (`mode`, `platform`, `scenario`, `preview.type`, `design_system.requires`, `default_for`, `fidelity`, `example_prompt`). Положите папку, перезапустите демон, и она появится в выборе.
|
||
|
||
Два **режима** закрепляют каталог: `prototype` (одностраничные веб-/мобильные/десктопные артефакты) и `deck` (горизонтально-листаемые презентации). Также режимы `image`, `video`, `audio`, `template`, `design-system` и `utility`. Поле **`scenario`** группирует их по аудитории: `design` · `marketing` · `operation` · `engineering` · `product` · `finance` · `hr` · `sale` · `personal`.
|
||
|
||
| Навык | Режим | Сценарий | Что производит |
|
||
|---|---|---|---|
|
||
| [`web-prototype`](../../design-templates/web-prototype/) | prototype | design | Лендинг / герой по умолчанию |
|
||
| [`saas-landing`](../../design-templates/saas-landing/) | prototype | marketing | Герой / фичи / прайсинг / CTA |
|
||
| [`dashboard`](../../design-templates/dashboard/) | prototype | operation | Админка / аналитика (с сайдбаром) |
|
||
| [`mobile-app`](../../design-templates/mobile-app/) | prototype | design | Приложение в рамке iPhone 15 Pro / Pixel |
|
||
| [`mobile-onboarding`](../../design-templates/mobile-onboarding/) | prototype | design | Сплеш · ценностное предложение · поток входа |
|
||
| [`social-carousel`](../../design-templates/social-carousel/) | prototype | marketing | Карусель из 3 карточек 1080×1080 |
|
||
| [`email-marketing`](../../design-templates/email-marketing/) | prototype | marketing | Брендовое письмо с безопасным табличным фолбэком |
|
||
| [`magazine-poster`](../../design-templates/magazine-poster/) | prototype | marketing | Одностраничный журнальный макет |
|
||
| [`motion-frames`](../../design-templates/motion-frames/) | prototype | marketing | Зацикленный CSS-моушн-герой |
|
||
| [`sprite-animation`](../../design-templates/sprite-animation/) | prototype | marketing | 8-битный пиксельный анимированный объяснитель |
|
||
| [`pm-spec`](../../design-templates/pm-spec/) | prototype | product | PM-спецификация (с оглавлением + журналом решений) |
|
||
| [`team-okrs`](../../design-templates/team-okrs/) | prototype | product | OKR-карта |
|
||
| [`eng-runbook`](../../design-templates/eng-runbook/) | prototype | engineering | Runbook по инцидентам |
|
||
| [`finance-report`](../../design-templates/finance-report/) | prototype | finance | Финансовая сводка для руководства |
|
||
| [`hr-onboarding`](../../design-templates/hr-onboarding/) | prototype | hr | План онбординга на роль |
|
||
| [`guizang-ppt`](../../design-templates/guizang-ppt/) | deck | marketing | Веб-PPT в журнальном стиле (презентация по умолчанию) |
|
||
| [`html-ppt-*`](../../design-templates/) | deck | marketing | 15 шаблонов презентаций × 36 тем (мастер-шаблон в [`design-templates/html-ppt/`](../../design-templates/html-ppt/)) |
|
||
| [`hyperframes`](../../design-templates/hyperframes/) | video | marketing | Моушн-графика HTML → MP4 (OSS-фреймворк HeyGen) |
|
||
| [`critique`](../../design-templates/critique/) | utility | design | Пятимерный лист самокритики с оценками |
|
||
| [`tweaks`](../../design-templates/tweaks/) | utility | design | Манифест панели настроек, выдаваемый ИИ |
|
||
|
||
Полный протокол навыков → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Эндпоинт реестра навыков: `GET /api/skills`.
|
||
|
||
---
|
||
|
||
## Дизайн-системы
|
||
|
||
**150 систем `DESIGN.md` брендового уровня** поставляются с репозиторием — каждая представляет собой один Markdown-файл со схемой из 9 разделов (цвет, типографика, отступы, макет, компоненты, движение, голос, бренд, антипаттерны), из [`VoltAgent/awesome-design-md`][acd2]. Переключите систему → следующий рендер использует новые токены. Никакого theme JSON.
|
||
|
||
<details>
|
||
<summary><b>Полный каталог (нажмите, чтобы раскрыть)</b></summary>
|
||
|
||
**AI и LLM** — `claude` · `cohere` · `mistral-ai` · `minimax` · `together-ai` · `replicate` · `runwayml` · `elevenlabs` · `ollama` · `x-ai`
|
||
|
||
**Инструменты разработчика** — `cursor` · `vercel` · `linear-app` · `framer` · `expo` · `clickhouse` · `mongodb` · `supabase` · `hashicorp` · `posthog` · `sentry` · `warp` · `webflow` · `sanity` · `mintlify` · `lovable` · `composio` · `opencode-ai` · `voltagent`
|
||
|
||
**Продуктивность** — `notion` · `figma` · `miro` · `airtable` · `superhuman` · `intercom` · `zapier` · `cal` · `clay` · `raycast`
|
||
|
||
**Финтех** — `stripe` · `coinbase` · `binance` · `kraken` · `mastercard` · `revolut` · `wise`
|
||
|
||
**E-commerce** — `shopify` · `airbnb` · `uber` · `nike` · `starbucks` · `pinterest`
|
||
|
||
**Медиа** — `spotify` · `playstation` · `wired` · `theverge` · `meta`
|
||
|
||
**Автомобили** — `tesla` · `bmw` · `ferrari` · `lamborghini` · `bugatti` · `renault`
|
||
|
||
**Прочее** — `apple` · `ibm` · `nvidia` · `vodafone` · `resend` · `spacex`
|
||
|
||
**Стартеры** — `default` (Neutral Modern) · `warm-editorial`
|
||
|
||
</details>
|
||
|
||
Переимпортируйте библиотеку через [`scripts/sync-design-systems.ts`](../../scripts/sync-design-systems.ts). Добавьте свой бренд → бросьте `DESIGN.md` в `design-systems/<brand>/`. Полное руководство → [`design-systems/README.md`](../../design-systems/README.md).
|
||
|
||
[acd2]: https://github.com/VoltAgent/awesome-design-md
|
||
|
||
---
|
||
|
||
## Плагины
|
||
|
||
**261 официальный плагин** находится в [`plugins/_official/`](../../plugins/_official/). Каждый плагин — это **переносимая папка агентского навыка** — `SKILL.md` (читаемый любым агентом, поддерживающим Agent Skills), плюс опциональный манифест `open-design.json`, который даёт Open Design метаданные маркетплейса, входы, предпросмотры, пайплайны и декларации возможностей. Перейдите сразу к категории:
|
||
|
||
| Категория | Кол-во | Содержимое |
|
||
|---|---|---|
|
||
| [`scenarios/`](../../plugins/_official/scenarios/) | 11 | Полные дизайн-сценарии — [`od-default`](../../plugins/_official/scenarios/od-default/), [`od-design-refine`](../../plugins/_official/scenarios/od-design-refine/), [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/), [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/), [`od-react-export`](../../plugins/_official/scenarios/od-react-export/), [`od-nextjs-export`](../../plugins/_official/scenarios/od-nextjs-export/), [`od-vue-export`](../../plugins/_official/scenarios/od-vue-export/), [`od-media-generation`](../../plugins/_official/scenarios/od-media-generation/), [`od-new-generation`](../../plugins/_official/scenarios/od-new-generation/), [`od-tune-collab`](../../plugins/_official/scenarios/od-tune-collab/), [`od-plugin-authoring`](../../plugins/_official/scenarios/od-plugin-authoring/) |
|
||
| [`image-templates/`](../../plugins/_official/image-templates/) | 45 | Одношаговые промпты для изображений — редакционные, кинематографичные, продуктовые, портретные |
|
||
| [`video-templates/`](../../plugins/_official/video-templates/) | 50 | Моушн-шаблоны HyperFrames / Seedance / Veo |
|
||
| [`design-systems/`](../../plugins/_official/design-systems/) | 142 | Брендовые `DESIGN.md`, обёрнутые в плагины |
|
||
| [`atoms/`](../../plugins/_official/atoms/) | 13 | Переиспользуемые UI-фрагменты (кнопки, герои, KPI-карточки) |
|
||
| [`examples/`](../../plugins/_official/examples/) | 140 | Ремиксуемые эталонные результаты |
|
||
|
||
Также [`plugins/community/`](../../plugins/community/) для плагинов сообщества и [`plugins/registry/`](../../plugins/registry/) для процесса публикации.
|
||
|
||
### Что умеют плагины
|
||
|
||
- 🤖 **Работают в любом кодинг-агенте** — [Claude Code](../../docs/agent-adapters.md), Codex, Cursor, Copilot, [OpenClaw](https://github.com/openclaw/openclaw), [Antigravity](https://antigravity.google), Hermes, Kimi… через тот же протокол навыков, который агент уже знает.
|
||
- 🔁 **Мигрируют рабочие процессы Figma / Pencil** → исходники React, Next.js или Vue. См. [`od-figma-migration`](../../plugins/_official/scenarios/od-figma-migration/).
|
||
- 🛠️ **Обновляют существующую кодовую базу под спецификацию бренда** — направьте плагин на `git`-репозиторий + `DESIGN.md`, получите PR. См. [`od-code-migration`](../../plugins/_official/scenarios/od-code-migration/).
|
||
- 💾 **Сохраняют кастомные рабочие процессы** — переиспользуемые шаблоны вашей команды лежат рядом с поставляемыми.
|
||
|
||
### Использование плагинов
|
||
|
||
Плагины полностью равнозначны в **веб-UI** и **`od` CLI** — те же эндпоинты `/api/plugins`, выбирайте, что удобнее.
|
||
|
||
**В десктопном / веб-приложении:** откройте страницу **Plugin**, чтобы просмотреть маркетплейс и нажать **Install**; внутри Studio проекта плагины появляются как чипы композера, по которым вы кликаете для применения (с входами, которые они декларируют).
|
||
|
||
**В командной строке** (работает без UI — это путь, который используют внешние агенты):
|
||
|
||
```bash
|
||
od plugin list # список установленных плагинов (фильтры --task-kind / --mode / --tag)
|
||
od plugin search "landing page" # поиск по ключевым словам
|
||
od plugin info od-default # метаданные, входы и возможности плагина
|
||
od plugin install od-figma-migration # установка из registry; также принимает ./local-folder или ссылку https://…
|
||
od plugin apply od-default --input brief="одностраничный питч для нашего seed-раунда"
|
||
od plugin upgrade od-default # обновление
|
||
od plugin uninstall od-default # удаление
|
||
```
|
||
|
||
Каждая команда поддерживает `--json`, так что вы можете пропускать вывод через `jq` / `xargs` в автоматизацию.
|
||
|
||
### Создание плагина
|
||
|
||
Плагину **нужен как минимум только `SKILL.md`**; чтобы он попал в маркетплейс Open Design, добавьте `open-design.json`:
|
||
|
||
```
|
||
my-plugin/
|
||
├── SKILL.md ← обязательно: YAML-фронтматтер (name · description) + условия запуска + процесс (лучше < 500 строк)
|
||
├── open-design.json ← нужно для каталога: метаданные маркетплейса + inputs + pipeline + capabilities
|
||
├── README.md ← опционально: использование, установка, ссылки на registry
|
||
├── preview/ ← опционально: index.html / poster.png (очень желательно для визуальных плагинов)
|
||
└── examples/ ← опционально: конкретные сценарии использования
|
||
```
|
||
|
||
Основные поля `open-design.json`: `specVersion` (сейчас `1.0.0`), `name` (стабильный ID), `version` (semver), `compat.agentSkills[].path` (указывает на `./SKILL.md`), `od.kind` (`skill` / `scenario` / `atom` / `bundle`), `od.taskKind` (`new-generation` / `figma-migration` / `code-migration` / `tune-collab`), `od.mode` (поверхность вывода, например `prototype` / `deck` / `live-artifact` / `image` / `video` / `hyperframes` / `audio` / `design-system` / `scenario`), `od.capabilities[]` (**декларируйте минимум** — ограниченная установка по умолчанию даёт только `prompt:inject`), `od.inputs[]` (параметры на момент применения).
|
||
|
||
Создайте каркас + проверьте локально:
|
||
|
||
```bash
|
||
od plugin scaffold --id my-plugin --title "My Plugin" # сгенерировать каркас
|
||
od plugin validate ./my-plugin # проверить манифест и структуру файлов
|
||
pnpm guard && pnpm --filter @open-design/plugin-runtime typecheck
|
||
```
|
||
|
||
Полный набор полей и рантайм-контракт → [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md); разработка плагина с кодинг-агентом → [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md); готовые к копированию минимальные шаблоны → [`plugins/spec/examples/`](../../plugins/spec/examples/).
|
||
|
||
### Вклад в виде плагина
|
||
|
||
1. Поместите папку плагина в [`plugins/community/`](../../plugins/community/) (сторонние плагины), или — чтобы поставлять его вместе с Open Design — в соответствующий уровень [`plugins/_official/`](../../plugins/_official/).
|
||
2. Пройдите валидацию: `od plugin validate`, `pnpm guard`, `pnpm --filter @open-design/plugin-runtime typecheck`.
|
||
3. Заполните PR, используя шаблон в [`plugins/spec/CONTRIBUTING.md`](../../plugins/spec/CONTRIBUTING.md) (ID, версия, линия, режим, возможности, примеры триггеров; приложите скриншот / предпросмотр для визуальных плагинов).
|
||
4. Чтобы опубликовать во внешнем реестре (skills.sh / ClawHub / отдельный GitHub) → [`plugins/spec/PUBLISHING-REGISTRIES.md`](../../plugins/spec/PUBLISHING-REGISTRIES.md).
|
||
|
||
Эндпоинт реестра плагинов: `GET /api/plugins`. Обзор директории → [`plugins/README.md`](../../plugins/README.md) ([简体中文](../../plugins/README.zh-CN.md)).
|
||
|
||
---
|
||
|
||
## Архитектура
|
||
|
||
```
|
||
┌────────────────── browser (Next.js 16) / Electron shell ──────────────┐
|
||
│ chat · file workspace · iframe preview · settings · import · MCP │
|
||
└──────────────┬─────────────────────────────────────┬─────────────────┘
|
||
│ /api/* │
|
||
▼ ▼
|
||
┌─────────────────────────────────┐ /api/proxy/{provider}/stream (SSE)
|
||
│ local daemon (Express+SQLite) │ ─→ any OpenAI-compatible BYOK,
|
||
│ │ SSRF-guarded at the edge
|
||
│ /api/skills /api/plugins │
|
||
│ /api/design-systems │
|
||
│ /api/chat (SSE) /api/proxy/* │
|
||
│ /api/projects/:id/files/... │
|
||
│ /api/artifacts/{save,lint} │
|
||
│ /api/import/claude-design │
|
||
│ MCP stdio server │
|
||
└─────────┬───────────────────────┘
|
||
│ spawn(cli, [...], { cwd: managed project cwd })
|
||
▼
|
||
┌──────────────────────────────────────────────────────────────────┐
|
||
│ claude · codex · cursor-agent · copilot · openclaw · antigravity ·│
|
||
│ gemini · opencode · qwen · qoder · hermes (ACP) · kimi (ACP) · │
|
||
│ pi (RPC) · kiro · kilo · vibe (ACP) · cline · trae · deepseek │
|
||
│ reads SKILL.md + DESIGN.md, writes artifacts to disk │
|
||
└──────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
| Слой | Стек |
|
||
|---|---|
|
||
| Фронтенд | Next.js 16 App Router + React 18 + TypeScript |
|
||
| Демон | Node 24 · Express · SSE-стриминг · `better-sqlite3` |
|
||
| Хранилище | Перед изменением или документированием путей хранения демона необходимо прочитать корневой `AGENTS.md`, раздел **Daemon data directory contract**. Этот README НЕ ДОЛЖЕН пересказывать его. |
|
||
| Предпросмотр | Изолированный iframe `srcdoc` + стриминговый парсер `<artifact>` |
|
||
| Экспорт | HTML (встроенный) · PDF (печать из браузера) · PPTX (управляемый агентом) · ZIP · Markdown · MP4 (HyperFrames) |
|
||
| Десктоп | Electron-оболочка + изолированный рендерер + sidecar IPC (STATUS · EVAL · SCREENSHOT · CONSOLE · CLICK · SHUTDOWN) |
|
||
| Жизненный цикл | Одна точка входа: `pnpm tools-dev` (start / stop / run / status / logs / inspect / check) |
|
||
|
||
Полная архитектура → [`docs/architecture.md`](../../docs/architecture.md). Протокол навыков → [`docs/skills-protocol.md`](../../docs/skills-protocol.md). Контракт адаптера агента → [`docs/agent-adapters.md`](../../docs/agent-adapters.md).
|
||
|
||
---
|
||
|
||
## Дорожная карта
|
||
|
||
- [x] Демон + 22 адаптера CLI кодинг-агентов + реестр навыков + каталог дизайн-систем
|
||
- [x] Веб-приложение + чат + форма вопросов + выбор из 5 направлений + прогресс задач + изолированный предпросмотр
|
||
- [x] 100+ навыков · 150 дизайн-систем · 5 визуальных направлений · 5 рамок устройств
|
||
- [x] Проекты на SQLite · диалоги · сообщения · вкладки · шаблоны
|
||
- [x] Мультипровайдерный BYOK-прокси (`/api/proxy/{anthropic,openai,azure,google,ollama,senseaudio}/stream`) + защита от SSRF
|
||
- [x] Импорт ZIP из Claude Design (`/api/import/claude-design`)
|
||
- [x] Sidecar-протокол + десктоп на Electron + IPC-автоматизация
|
||
- [x] API линтинга артефактов + пятимерный гейт самокритики перед выдачей
|
||
- [x] **0.8.0** — инфраструктура маркетплейса плагинов (261 официальный плагин, спецификация манифеста, скрипты установки для каждого агента)
|
||
- [x] **0.9.0** — Open Design Cloud (официальный сервис моделей, встроенный в приложение: без настройки, вход в один клик)
|
||
- [x] **0.10.0** — универсальное рабочее пространство дизайна: весь craft-цикл в одном окне (референсы → материалы → интерактивное редактирование → motion → handoff)
|
||
- [x] **0.11.0** — _The Bazaar_: разработка в открытую — community-маркетплейс плагинов и дизайн-систем, которые можно выбирать и пополнять
|
||
- [x] **0.12.0** — _Brand-backed Design System_: превращайте уже существующий бренд в переиспользуемую переносимую систему `DESIGN.md`
|
||
- [x] **0.13.0** — _Stay in Flow_: нативное возобновление сессий, более быстрый выбор модели и экспорт сразу в PPTX / PDF со скриншотами
|
||
- [x] Упакованные сборки Electron — macOS (Apple Silicon + Intel) + Windows (x64) + Linux AppImage (опциональная линия)
|
||
- [ ] Хирургические правки в режиме комментариев — частично выпущено; надёжное точечное патчинг в процессе
|
||
- [ ] UX панели настроек, выдаваемой ИИ — ещё не реализовано
|
||
- [ ] `npx od init` для создания каркаса проекта с `DESIGN.md`
|
||
- [ ] Plugin SDK + CLI `od plugin {add,list,remove,test,publish}`
|
||
- [ ] Плагины миграции Figma / Pencil → React / Next / Vue (alpha)
|
||
- [ ] Плагин обновления существующей кодовой базы (направить на git-репозиторий + `DESIGN.md`)
|
||
|
||
Поэтапная поставка → [`docs/roadmap.md`](../../docs/roadmap.md).
|
||
|
||
---
|
||
|
||
## Сообщество
|
||
|
||
За каждым каналом стоят настоящие люди.
|
||
|
||
- 💬 **Discord** — ежедневный чат, обмен плагинами, вопросы → [**discord.gg/mHAjSMV6gz**](https://discord.gg/mHAjSMV6gz)
|
||
- 🐦 **X / Twitter** — заметки о релизах, вехи, закулисье → [**@OpenDesignHQ**](https://x.com/OpenDesignHQ)
|
||
- 🗣️ **GitHub Discussions** — глубокие Q&A, RFC, «покажи свою работу» → [**Discussions**](https://github.com/nexu-io/open-design/discussions)
|
||
- 🐛 **GitHub Issues** — отчёты об ошибках, запросы функций → [**Issues**](https://github.com/nexu-io/open-design/issues)
|
||
|
||
Метки [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) и [`help-wanted`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22) — самый простой способ начать.
|
||
|
||
---
|
||
|
||
## Вклад в проект
|
||
|
||
Open Design продолжает двигаться, потому что контрибьюторы — дизайнеры, инженеры, авторы промптов — продолжают появляться. Многие из самых используемых навыков, дизайн-систем и плагинов были написаны людьми вне основной команды.
|
||
|
||
### 🎯 С чего начать (максимум пользы, минимум изменений)
|
||
|
||
| Хотите выпустить… | Как | Где |
|
||
|---|---|---|
|
||
| Новый **навык** | Бросьте папку с `SKILL.md` + `assets/` + `references/` | [`skills/`](../../skills/) · спецификация в [`docs/skills-protocol.md`](../../docs/skills-protocol.md) |
|
||
| Новую **дизайн-систему** | Бросьте `DESIGN.md`, используя схему из 9 разделов | [`design-systems/<brand>/`](../../design-systems/) |
|
||
| Новый **плагин** | Бросьте `open-design.json` + манифест в папку категории | [`plugins/community/`](../../plugins/community/) · спецификация в [`plugins/spec/SPEC.md`](../../plugins/spec/SPEC.md) · руководство по разработке для агентов в [`plugins/spec/AGENT-DEVELOPMENT.md`](../../plugins/spec/AGENT-DEVELOPMENT.md) |
|
||
| Поддержку нового **CLI кодинг-агента** | Одна запись адаптера + парсер потока | [`apps/daemon/src/agents.ts`](../../apps/daemon/src/agents.ts) |
|
||
| Исправить баг или отполировать UI | Просмотрите метку [`good-first-issue`](https://github.com/nexu-io/open-design/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) | [Issues →](https://github.com/nexu-io/open-design/issues) |
|
||
| Перевести документацию | Обновите файлы `README.<lang>.md` | [`TRANSLATIONS.md`](../../TRANSLATIONS.md) |
|
||
|
||
### 🤖 Вклад в роли агента
|
||
|
||
Если *вы — агент, читающий это*, самый быстрый путь:
|
||
|
||
```bash
|
||
# 1. Запустите проект локально
|
||
git clone https://github.com/nexu-io/open-design.git
|
||
cd open-design && corepack enable && pnpm install
|
||
pnpm tools-dev run web
|
||
|
||
# 2. Найдите good-first-issue и назначьте себя
|
||
gh issue list --label "good first issue" --state open --limit 20
|
||
gh issue develop <number> # создать ветку и worktree
|
||
|
||
# 3. Внесите изменение и запустите проверки
|
||
pnpm guard && pnpm typecheck
|
||
pnpm --filter @open-design/<package> test
|
||
|
||
# 4. Откройте PR
|
||
gh pr create --fill
|
||
```
|
||
|
||
Полный процесс вклада, дружественный к агентам, стиль кода и планка PR → [`CONTRIBUTING.md`](../../CONTRIBUTING.md) ([Deutsch](CONTRIBUTING.de.md) · [Français](CONTRIBUTING.fr.md) · [简体中文](CONTRIBUTING.zh-CN.md) · [日本語](CONTRIBUTING.ja-JP.md) · [한국어](CONTRIBUTING.ko.md) · [Português](CONTRIBUTING.pt-BR.md) · [ภาษาไทย](CONTRIBUTING.th.md)).
|
||
|
||
### 🏅 Программа Open Design Fellow
|
||
|
||
Мы набираем **Open Design Fellows** по всему миру — Fellows формируют продукт вместе с основной командой, официально представляют Open Design в своём регионе и развивают сообщество локально, при финансовой поддержке ($1,000 / MR), бесплатных кредитах на LLM и прямом треке ревью. Подробности → [`MAINTAINERS.md`](../../MAINTAINERS.md) и анонс в [Discord](https://discord.gg/mHAjSMV6gz).
|
||
|
||
---
|
||
|
||
## Мейнтейнеры
|
||
|
||
Они несут на себе значительную часть нагрузки — ежедневное обслуживание, ревью и поддержку сообщества.
|
||
|
||
<table>
|
||
<tr>
|
||
<td align="center" valign="top" width="200">
|
||
<a href="https://github.com/Nagendhra-web">
|
||
<img src="https://github.com/Nagendhra-web.png" width="96" alt="@Nagendhra-web" /><br/>
|
||
<sub><b>@Nagendhra-web</b></sub>
|
||
</a><br/>
|
||
<sub>Мейнтейнер</sub>
|
||
</td>
|
||
<td align="center" valign="top" width="200">
|
||
<a href="https://github.com/Sid-Qin">
|
||
<img src="https://github.com/Sid-Qin.png" width="96" alt="@Sid-Qin" /><br/>
|
||
<sub><b>@Sid-Qin</b></sub>
|
||
</a><br/>
|
||
<sub>Мейнтейнер</sub>
|
||
</td>
|
||
<td align="center" valign="top" width="200">
|
||
<a href="https://github.com/YOMXXX">
|
||
<img src="https://github.com/YOMXXX.png" width="96" alt="@YOMXXX" /><br/>
|
||
<sub><b>@YOMXXX</b></sub>
|
||
</a><br/>
|
||
<sub>Мейнтейнер</sub>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
Правила мейнтейнеров, критерии повышения и протокол выхода → [`MAINTAINERS.md`](../../MAINTAINERS.md) (также [Deutsch](MAINTAINERS.de.md) · [Français](MAINTAINERS.fr.md) · [简体中文](MAINTAINERS.zh-CN.md) · [日本語](MAINTAINERS.ja-JP.md) · [한국어](MAINTAINERS.ko.md) · [Português](MAINTAINERS.pt-BR.md) · [ภาษาไทย](MAINTAINERS.th.md)).
|
||
|
||
## Контрибьюторы
|
||
|
||
Спасибо всем, кто принял участие — код, документация, обратная связь, точный issue, новый навык, новая дизайн-система.
|
||
|
||
<a href="https://github.com/nexu-io/open-design/graphs/contributors">
|
||
<img src="https://contrib.rocks/image?repo=nexu-io/open-design&max=500&columns=20&anon=1&cache_bust=2026-06-29" alt="Контрибьюторы Open Design" />
|
||
</a>
|
||
|
||
---
|
||
|
||
## Активность репозитория
|
||
|
||
<picture>
|
||
<img alt="Open Design — метрики репозитория" src="https://repo-assets.open-design.ai/resources/images/github-metrics.svg" />
|
||
</picture>
|
||
|
||
SVG выше регенерируется ежедневно через [`.github/workflows/metrics.yml`](../../.github/workflows/metrics.yml) с помощью [`lowlighter/metrics`](https://github.com/lowlighter/metrics).
|
||
|
||
---
|
||
|
||
## Поставьте нам звезду
|
||
|
||
<p align="center">
|
||
<a href="https://github.com/nexu-io/open-design"><img src="https://repo-assets.open-design.ai/resources/images/star-us.png" alt="Поставьте звезду Open Design на GitHub — github.com/nexu-io/open-design" width="100%" /></a>
|
||
</p>
|
||
|
||
Если это сэкономило вам тридцать минут, поставьте ★. Звёзды не платят за аренду — но они говорят следующему дизайнеру, агенту и контрибьютору, что этот эксперимент достоин их внимания. Один клик, три секунды, настоящий сигнал.
|
||
|
||
<a href="https://star-history.com/#nexu-io/open-design&Date">
|
||
<picture>
|
||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&theme=dark&cache_bust=2026-06-29" />
|
||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-06-29" />
|
||
<img alt="История звёзд Open Design" src="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-06-29" />
|
||
</picture>
|
||
</a>
|
||
|
||
---
|
||
|
||
## Ссылки и происхождение
|
||
|
||
| Проект | Роль |
|
||
|---|---|
|
||
| Claude Design | Закрытый продукт, открытой альтернативой которому является этот репозиторий. |
|
||
| [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design) | Компас дизайн-философии — рабочий процесс джуниор-дизайнера, протокол брендовых ассетов, чек-лист против AI-слопа, пятимерная критика. |
|
||
| [`op7418/guizang-ppt-skill`](https://github.com/op7418/guizang-ppt-skill) | Навык веб-PPT в журнальном стиле, включённый дословно в [`design-templates/guizang-ppt/`](../../design-templates/guizang-ppt/). По умолчанию для режима презентаций. |
|
||
| [`lewislulu/html-ppt-skill`](https://github.com/lewislulu/html-ppt-skill) | Семейство HTML PPT Studio — 15 шаблонов презентаций, 36 тем, 31 макет страниц, рантайм анимации, режим презентера с магнитными карточками. |
|
||
| [`OpenCoworkAI/open-codesign`](https://github.com/OpenCoworkAI/open-codesign) | Первая открытая альтернатива Claude Design; UX-паттерны, которые мы заимствуем (цикл стриминга артефактов, изолированный iframe, живая панель агента). |
|
||
| [`multica-ai/multica`](https://github.com/multica-ai/multica) | Архитектура демона + адаптеров — обнаружение агентов сканированием PATH, локальный демон как единственный привилегированный процесс. |
|
||
| [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md) | Источник схемы `DESIGN.md` из 9 разделов и 70 продуктовых систем. |
|
||
| [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills) | Источник 57 дизайн-навыков, добавленных в `design-systems/`. |
|
||
| [`heygen-com/hyperframes`](https://github.com/heygen-com/hyperframes) | Фреймворк моушн-графики HTML→MP4, интегрированный как полноправный `hyperframes-html` в Open Design. |
|
||
| [Claude Code skills][skill] | Конвенция `SKILL.md`, которую мы перенимаем дословно. |
|
||
|
||
Подробное происхождение → [`docs/references.md`](../../docs/references.md).
|
||
|
||
[skill]: https://docs.anthropic.com/en/docs/claude-code/skills
|
||
|
||
## Лицензия
|
||
|
||
Apache-2.0. Включённые навыки и шаблоны со своими файлами `LICENSE` сохраняют собственные лицензии, включая `design-templates/guizang-ppt/` (MIT, [@op7418](https://github.com/op7418)), `design-templates/html-ppt/` (MIT, [@lewislulu](https://github.com/lewislulu)) и `skills/web-clone/` (MIT, [@Jane-xiaoer](https://github.com/Jane-xiaoer)).
|