Files
nexu-io-open-design/docs/i18n/README.ru.md
2026-06-29 15:00:45 +00:00

736 lines
71 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<h1 align="center">Open Design: открытая альтернатива Claude Design</h1>
> 🔥 **Open Design 0.10.0 уже здесь: универсальное Agentic-рабочее пространство для дизайна.** Всё ремесло теперь живёт в одном окне — от смутной идеи к поиску референсов, сбору материала, интерактивному редактированию, очереди комментариев, полировке анимаций и передаче результата редактору или Code Agent — не покидая приложение. С параллельными сессиями это уже не один ассистент, а целая локальная команда дизайнеров, работающая на вас. [Скачать 0.10.0](https://github.com/nexu-io/open-design/releases) · [Присоединиться к обсуждению](https://github.com/nexu-io/open-design/discussions/4153)
>
> ⚡ **Open Design AMR (Agentic Model Router) — официальный сервис моделей.** Одно пополнение — и GPT, Claude, Gemini и DeepSeek доступны прямо в Open Design: 20+ флагманских моделей, ноль настройки, оплата по реальному расходу токенов. [Попробовать AMR](https://open-design.ai/amr/)
>
> 🏅 **Программа 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 — The open-source Claude Design alternative · 150 Design Systems · 261 Plugins · 21 Coding Agents · 14 Media Providers" width="100%" />
</p>
<p align="center">
<a href="https://open-design.ai/">Сайт</a> ·
<a href="https://open-design.ai/">Скачать</a> ·
<a href="https://open-design.ai/amr/">Model Router</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="release" 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="license" 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="quickstart" 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></p>
---
## Что такое Open Design
🎨 **Локальная по умолчанию, открытая альтернатива [Claude Design][cd].** &nbsp;🖥️ **Нативное десктопное приложение для macOS и Windows.** &nbsp;⚡ **100+ навыков** · ✨ **150 систем `DESIGN.md` брендового уровня** · 📦 **261 готовый к использованию плагин.** &nbsp;🖼️ Генерирует **веб-, десктопные и мобильные прототипы**, **живые дашборды / артефакты**, **презентации**, **изображения**, **видео**, а также моушн-графику **HyperFrames**. 🔒 Предпросмотр в изолированном iframe · экспорт HTML / PDF / PPTX / MP4. &nbsp;🤖 **Работает на Claude Code · OpenClaw · Codex · Cursor · OpenCode · Qwen · Copilot · Hermes · Kimi · Antigravity и 21 локальном CLI**, либо на любом OpenAI-совместимом эндпоинте через BYOK.
Open Design — это то, что получается, когда **агентно-нативный** цикл, который Anthropic выпустила вместе с Claude Design — изучить бриф, зафиксировать направление, поток артефакта, критика, поставка — перестаёт быть закрытым и становится **файловой системой навыков, дизайн-систем и плагинов**, которые уже стоящие на вашем ноутбуке кодинг-агенты могут читать, писать и ремиксовать. Ваш CLI становится дизайн-движком, ваш ноутбук становится студией, а `DESIGN.md` вашей команды становится брендовым контрактом.
Это также **альтернатива Figma для эпохи агентов** — вместо того чтобы двигать пиксели на холсте, она поставляет одностраничные артефакты в настоящем CSS, настоящих шрифтах, настоящих компонентах, экспортируемые сразу в HTML / PDF / PPTX / MP4 — уже оформленные вашей дизайн-системой, уже запускаемые внутри агента, которым вы пользуетесь каждый день.
[cd]: https://x.com/claudeai/status/2045156267690213649
---
## Обзор продукта
Краткий взгляд на то, что такое 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="Home page" /><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="Automation page" /><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="Design System page" /><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="Plugin page" /><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="Integrations page" /><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="Prototype" /><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="Deck" /><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="Image" /><br/>
<sub><b>Image</b> — изображения и визуальные ассеты брендового уровня с генерацией и скачиванием в высоком разрешении.</sub>
</td>
</tr>
</table>
---
## Совместимость с платформами
> Open Design поставляется как **навыки, CLI и MCP-сервер**, которые мейнстримные кодинг-агенты потребляют нативно. После установки OD одна команда `od mcp install <agent>` подключает MCP-сервер в конфигурацию этого агента, и вы вызываете одни и те же инструменты изнутри любого агента.
| Кодинг-агент / платформа &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Статус &nbsp;&nbsp; | Установка MCP-сервера одной строкой &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |
|---|:---:|---|
| [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` |
| [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="The 21 coding-agent CLIs Open Design supports — 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="Entry view" /><br/>
<sub><b>Экран входа</b> — выберите навык, выберите дизайн-систему, введите бриф. Одна поверхность для прототипов, дашбордов, презентаций, мобильных приложений, журнальных страниц.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/mobile-onboarding.png" alt="Mobile onboarding" /><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="Web prototype 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="Gamified app" /><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="Live dashboard" /><br/>
<sub><b>Живой дашборд</b> — редактируемая KPI-стена, чья панель настроек выводит параметры, которые стоит подкручивать. Агент выдаёт манифест, и iframe перерисовывается без перезагрузки.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/research-decision-room.png" alt="Decision room" /><br/>
<sub><b>Комната принятия решений</b> — артефакт-брифинг из множества источников для встреч по продукту / исследованиям / операциям.</sub>
</td>
</tr>
<tr>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/github-dashboard.png" alt="GitHub dashboard" /><br/>
<sub><b>Дашборд в стиле GitHub</b> — метрики репозитория, представленные как живой артефакт.</sub>
</td>
<td width="50%" valign="top">
<img src="../../docs/screenshots/skills/flowai-live-dashboard-template.png" alt="Flow live dashboard" /><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="Magazine deck (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="Swiss deck" /><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="Illustrated city food map" /><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="Cinematic elevator scene" /><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="Cyberpunk anime portrait" /><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 stone staircase evolution" /><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="Glamorous portrait" /><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 promo" /></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 karaoke" /></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="Brand sizzle reel" /></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="Bar chart race" /></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="Flight map" /></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="Logo outro" /></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="Money counter" /></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="Website to video" /></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][cd] — впервые 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][cd] | Figma | Lovable / v0 / Bolt | **Open Design** |
|---|---|---|---|---|
| Открытый исходный код | ❌ | ❌ | ❌ | **✅ Apache-2.0** |
| Self-host / десктоп | ❌ | ❌ | ❌ | **✅ macOS + Windows + Vercel** |
| Агентно-нативный (работает в вашем CLI) | Только Anthropic | ❌ | Только облачный агент | **✅ 21 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/) или [GitHub Releases](https://github.com/nexu-io/open-design/releases)
- **Windows** (x64) → [**open-design.ai**](https://open-design.ai/) или [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
# One-line install into the agent you're using:
od mcp install <agent>
# <agent> = claude | codex | cursor | copilot | openclaw | antigravity | gemini
# | pi | vibe | hermes | cline | kimi | trae | opencode
```
Затем, внутри агента:
```
> 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
```
### 🚀 Развертывание на Sealos
[![Deploy on Sealos](https://sealos.io/Deploy-on-Sealos.svg)](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`. Пользователям 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
# One-line install (16+ CLIs supported):
od mcp install <agent>
# Then the agent can:
od search-files "primary button" # search files across projects
od get-file design-systems/linear-app/DESIGN.md
od get-artifact <slug> # latest rendered artifact
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 в любом случае.
---
## Навыки
**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 # list installed plugins (--task-kind / --mode / --tag filters)
od plugin search "landing page" # search by keyword
od plugin info od-default # inspect a plugin's metadata, inputs, capabilities
od plugin install od-figma-migration # install from a registry; also accepts ./local-folder or an https://… link
od plugin apply od-default --input brief="a one-page pitch for our seed round"
od plugin upgrade od-default # upgrade
od plugin uninstall od-default # uninstall
```
Каждая команда поддерживает `--json`, так что вы можете пропускать вывод через `jq` / `xargs` в автоматизацию.
### Создание плагина
Плагину **нужен как минимум только `SKILL.md`**; чтобы он попал в маркетплейс Open Design, добавьте `open-design.json`:
```
my-plugin/
├── SKILL.md ← required: YAML frontmatter (name · description) + trigger phrasing + workflow (aim for < 500 lines)
├── open-design.json ← needed to list: marketplace metadata + inputs + pipeline + capabilities
├── README.md ← optional: usage, install, registry links
├── preview/ ← optional: index.html / poster.png (strongly recommended for visual plugins)
└── examples/ ← optional: concrete use cases
```
Основные поля `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" # generate the skeleton
od plugin validate ./my-plugin # check manifest / file layout
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] Демон + 21 адаптер 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 AMR (официальный Model Router, встроенный в приложение: без настройки, вход в один клик)
- [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. Boot locally
git clone https://github.com/nexu-io/open-design.git
cd open-design && corepack enable && pnpm install
pnpm tools-dev run web
# 2. Find a good-first-issue and assign yourself
gh issue list --label "good first issue" --state open --limit 20
gh issue develop <number> # create a branch and worktree
# 3. Make the change, run the checks
pnpm guard && pnpm typecheck
pnpm --filter @open-design/<package> test
# 4. Open the 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) · [Português](CONTRIBUTING.pt-BR.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>Maintainer</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>Maintainer</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) · [Português](MAINTAINERS.pt-BR.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 contributors" />
</a>
---
## Активность репозитория
<picture>
<img alt="Open Design — repository metrics" 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="Star Open Design on 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 star history" src="https://api.star-history.com/svg?repos=nexu-io/open-design&type=Date&cache_bust=2026-06-29" />
</picture>
</a>
---
## Ссылки и происхождение
| Проект | Роль |
|---|---|
| [Claude Design][cd] | Закрытый продукт, открытой альтернативой которому является этот репозиторий. |
| [`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. Включённый `design-templates/guizang-ppt/` сохраняет свою оригинальную [LICENSE](../../design-templates/guizang-ppt/LICENSE) (MIT, [@op7418](https://github.com/op7418)). Включённый `design-templates/html-ppt/` сохраняет свою оригинальную [LICENSE](../../design-templates/html-ppt/LICENSE) (MIT, [@lewislulu](https://github.com/lewislulu)).