Авторское примечание: open-design — это open-source альтернатива Anthropic Claude Design. В этой статье мы с точки зрения новичка разберем архитектуру, процесс установки и настройку Claude API для работы с 19 навыками (Skills) и 71 системой дизайна.
На GitHub недавно появился проект, который привлек внимание дизайн-сообщества — open-design. Его называют «open-source аналогом» Anthropic Claude Design, и его главные фишки — локальный деплой, 19 встроенных навыков (Skills) и 71 готовая система дизайна корпоративного уровня.
Это не очередной «оберточный» AI-инструмент, а полноценный фреймворк для разработчиков. Он позволяет генерировать дизайн, используя уже установленные у вас CLI-инструменты (например, Claude Code, Codex, Cursor, Gemini CLI). Проект распространяется по лицензии Apache-2.0, поддерживает локальный запуск и деплой на Vercel.
Ключевая ценность: прочитав эту статью, вы поймете архитектуру open-design, возможности 19 навыков и узнаете, как с помощью сервиса-прокси API (например, APIYI apiyi.com) запустить весь рабочий процесс без лишних сложностей.
I. Что такое open-design: 3 ключевых преимущества перед Claude Design
Проект open-design, разработанный командой nexu-io, позиционируется как платформа для генерации дизайна, ориентированная на локальный запуск (Local-first), возможность деплоя на Vercel и работу через систему навыков (Skills). Его главная особенность в том, что он не содержит встроенного AI-агента, а делегирует выполнение задач CLI-инструментам, которые уже установлены на вашем компьютере.
1.1 Основное позиционирование open-design
| Параметр | Особенности open-design | Отличия от Claude Design |
|---|---|---|
| Режим работы | Локальный + деплой на Vercel | Только онлайн-хостинг |
| Источник агентов | Использует локальные CLI (Claude Code/Codex и др.) | Жесткая привязка к Opus |
| Лицензия | Apache-2.0 (открытый код) | Проприетарный продукт |
| Количество навыков | 19 файловых Skills | Закрытые, нельзя расширить |
| Системы дизайна | 71 брендовая система | Системы дизайна закрыты |
| API-ключ | BYOK (приносите свой ключ) | Официальная тарификация |
1.2 Почему новичкам стоит обратить внимание на open-design
Если вы только начинаете путь в AI-дизайне, open-design предлагает более «прозрачный» выбор, чем Claude Design:
- Полностью открытый код: можно изучить каждую деталь рабочего процесса и доработать его под себя.
- Отсутствие привязки к вендору: можно использовать модели Anthropic, OpenAI или Google.
- Никаких лишних подписок: если вы уже платите за Claude Code или другой CLI, вам не нужно отдельно оплачивать Claude Design.
- Поддержка BYOK: можно подключить сторонний сервис-прокси API для Claude (например, APIYI apiyi.com), что дает гибкий контроль над расходами и лимитами.
💡 Совет для новичков: если вы еще не работали с Claude API, рекомендую сначала зарегистрироваться на APIYI apiyi.com, получить единый API-ключ и только потом приступать к развертыванию open-design. Это избавит вас от необходимости регистрировать официальный аккаунт Anthropic, привязывать карты и решать проблемы с международными платежами.
1.3 Кому подойдет open-design
- Индивидуальным разработчикам: если нужно сделать лендинг, дашборд или мобильный прототип, но нет бюджета на дизайнера.
- Продакт-менеджерам: для быстрой визуализации прототипов, документации PRD и дорожных карт.
- Техническим блогерам: для создания качественных обложек, сравнительных таблиц и инфографики.
- Дизайнерам: для ускорения рутинных задач с помощью AI (шаблоны писем, счета, доски Kanban).
二、Основные характеристики open-design: подробный разбор 19 Skills + 71 Design Systems
Ядро архитектуры open-design состоит из двух абстрактных уровней: Skills (навыки) и Design Systems (визуальные стили). Комбинация 19 навыков и 71 системы дизайна теоретически позволяет создавать более 1300 уникальных сочетаний «навык × стиль».
2.1 Обзор 19 встроенных Skills
19 навыков (Skills) в open-design делятся на три основные категории:
Дизайн и верстка (8 навыков)
| Название Skill | Назначение | Формат вывода |
|---|---|---|
web-prototype |
Одностраничный HTML-лендинг | HTML |
saas-landing |
Маркетинговая страница SaaS | HTML |
dashboard |
Интерфейс панели управления | HTML |
pricing-page |
Страница с тарифами | HTML |
docs-page |
Документация в три колонки | HTML |
blog-post |
Длинная статья для блога | HTML/Markdown |
mobile-app |
Экран мобильного приложения | HTML + рамка устройства |
simple-deck |
Лаконичная горизонтальная презентация | HTML |
Демонстрационные навыки (2 навыка)
guizang-ppt: Web-презентация в стиле журнала (режим демонстрации по умолчанию)magazine-poster: Дизайн печатной продукции и плакатов
Офисные документы (9 навыков)
Включают спецификации для продакт-менеджеров (PRD), еженедельные отчеты, протоколы встреч, инженерные Runbook, финансовые отчеты, HR-онбординг, счета-фактуры, Kanban-доски, оценочные карты OKR и многое другое.
2.2 Классификация 71 системы дизайна (Design Systems)
71 брендовая система дизайна распределена по отраслям:
| Категория | Представители брендов | Особенности стиля |
|---|---|---|
| AI / LLM | Claude, Cohere, Mistral, ElevenLabs, Ollama | Лаконичность, технологичность, низкая насыщенность |
| Инструменты разработчика | Cursor, Vercel, Linear, Framer, Supabase | Темная тема, моноширинный шрифт, высокий контраст |
| Продуктивность | Notion, Figma, Miro, Airtable, Cal | Дружелюбность, светлый фон, скругленные элементы |
| Финансы | Stripe, Coinbase, Binance, Wise | Доверие, синие оттенки, профессионализм |
| E-commerce / Такси | Shopify, Airbnb, Uber, Nike, Starbucks | Визуальный эффект, акцентные цвета бренда |
| Медиа | Spotify, PlayStation, Wired, The Verge | Редакционный стиль, крупные изображения, контраст |
| Автомобили | Tesla, BMW, Ferrari, Lamborghini | Премиальность, металлические текстуры, «воздух» |
| Базовые стили | Default Neutral, Warm Editorial | Универсальные нейтральные тона |
🎯 Совет по использованию: Новичкам не обязательно сразу пробовать все Skills. Рекомендую начать с
web-prototypeиsaas-landingв сочетании с системой дизайнаDefault Neutral. Когда отработаете процесс, можно переходить к другим комбинациям. Если вы столкнулись с лимитами при вызове API Claude, воспользуйтесь сервисом-прокси APIYI (apiyi.com), чтобы избежать ограничений по скорости.
2.3 Пять визуальных направлений (Visual Direction)
Если у вас нет готовых бренд-активов, open-design предлагает 5 предустановленных визуальных направлений:
- Editorial: Стиль Monocle / FT, ощущение печатного журнала, акцент на теплых тонах.
- Modern Minimal: Стиль Linear / Vercel, холодный, структурированный и сдержанный.
- Tech Utility: Высокая плотность информации, моноширинные шрифты, эстетика терминала.
- Brutalist: Брутализм, крупная типографика, резкие формы, отсутствие теней.
- Soft Warm: Мягкость, низкий контраст, персиковые нейтральные оттенки.
Каждое направление жестко задает цветовую схему OKLch и шрифтовую пару, чтобы результат генерации AI выглядел профессионально и целостно.
III. Быстрый старт open-design: локальное развертывание за 3 шага
3.1 Системные требования
Перед развертыванием open-design убедитесь, что ваша локальная среда соответствует требованиям:
| Зависимость | Требования к версии | Примечание |
|---|---|---|
| Node.js | ~24 | Рекомендуется использовать nvm для управления |
| pnpm | 10.33.x | Включается через corepack |
| Git | Любая | Для клонирования репозитория |
| Минимум один CLI-агент | Claude Code / Codex / Cursor и др. | См. список совместимости ниже |
3.2 Установка в три шага
Шаг 1: Клонирование репозитория
git clone https://github.com/nexu-io/open-design.git
cd open-design
Шаг 2: Включение pnpm и установка зависимостей
corepack enable
pnpm install
Шаг 3: Запуск локального сервиса
pnpm tools-dev run web
После запуска автоматически выполняются следующие действия:
- Сканирование переменной окружения PATH для обнаружения доступных CLI-агентов.
- Загрузка всех 19 навыков (Skills) и 71 дизайн-системы.
- Создание рабочей директории
.od/(содержит SQLite, проекты и артефакты). - Открытие веб-интерфейса в браузере.
3.3 Проверка успешности установки
Откройте браузер и перейдите по адресу http://localhost:3000. Вы должны увидеть:
- ✅ Селектор агентов в верхней части (список распознанных CLI).
- ✅ Селектор навыков слева (19 карточек навыков).
- ✅ Селектор дизайн-систем справа (71 бренд).
- ✅ Форму инициализации (Discovery Form) по центру.
Если какой-либо CLI не был распознан, убедитесь, что он добавлен в системный PATH.
# Проверка доступности CLI
which claude
which codex
which cursor-agent
IV. Использование open-design с API Claude: полное руководство по настройке BYOK
Самый сложный этап для новичков — это настройка API-ключа. Режим BYOK (Bring Your Own Key) в open-design поддерживает два способа вызова моделей Claude: через Claude Code CLI или напрямую через Anthropic API SSE.
4.1 Зачем нужен сервис-прокси API для Claude
При прямом использовании официального API Anthropic новички часто сталкиваются с тремя проблемами:
- Барьер зарубежных платежей: требуется иностранная банковская карта, российские карты Visa/Mastercard часто отклоняются.
- Строгие лимиты скорости: у новых аккаунтов (Tier 1) очень низкие лимиты токенов в минуту, что легко исчерпывается при выполнении сложных задач.
- Ограниченная параллелизация: при выполнении нескольких задач open-design одновременно официальный интерфейс часто выдает ошибку 429.
Использование профессионального сервиса-прокси API (например, APIYI, apiyi.com) решает эти проблемы. Ниже приведены инструкции по настройке.
4.2 Подключение через переменные окружения (рекомендуется)
Демон open-design при вызове API Anthropic считывает стандартные переменные окружения SDK. Перед запуском настройте ANTHROPIC_BASE_URL и ANTHROPIC_API_KEY:
# macOS / Linux
export ANTHROPIC_BASE_URL="https://vip.apiyi.com"
export ANTHROPIC_API_KEY="sk-your-apiyi-key-here"
# Windows PowerShell
$env:ANTHROPIC_BASE_URL = "https://vip.apiyi.com"
$env:ANTHROPIC_API_KEY = "sk-your-apiyi-key-here"
# Запуск open-design
pnpm tools-dev run web
🎯 Важное примечание:
ANTHROPIC_BASE_URL— это стандартная переменная, поддерживаемая официальным SDK Anthropic. APIYI полностью совместим с нативным форматом Anthropic, поэтому менять код не нужно — достаточно заменитьbase_url, чтобы open-design прозрачно работал через прокси.
4.3 Использование с Claude Code CLI
Если вы уже установили Claude Code CLI, open-design по умолчанию будет отдавать ему приоритет. Перед использованием направьте Claude Code на APIYI:
# Настройка Claude Code для работы через прокси APIYI
claude config set api-url https://vip.apiyi.com
claude config set api-key sk-your-apiyi-key-here
# Проверка соединения
claude --version
claude "Привет" --max-tokens 100
После настройки open-design будет автоматически использовать эту конфигурацию при вызове Claude Code, дополнительная настройка в самом open-design не требуется.
4.4 APIYI vs Официальное подключение: сравнение
| Критерий | Anthropic (официально) | APIYI (apiyi.com) |
|---|---|---|
| Способ оплаты | Зарубежная карта (USD) | Оплата в рублях |
| Цена | Стандартная | Бонус +10% при пополнении от 100$ (≈ 15% скидка) |
| Лимиты скорости | Жесткие (Tier 1) | Без ограничений по параллелизации |
| Формат API | Нативный Anthropic | Полная совместимость |
| Сложность подключения | Требует правки base_url | Правка base_url |
| Отказоустойчивость | Один канал | Балансировка нагрузки между серверами |
| Техподдержка | Тикеты на английском | Поддержка на русском |
4.5 Проверка конфигурации API
Создайте тестовый проект в веб-интерфейсе open-design, выберите простейший навык web-prototype и введите промпт: "Create a simple landing page for a coffee shop". Следите за логами в терминале:
- ✅ Сообщение
Connecting to https://vip.apiyi.com/v1/messagesозначает работу через прокси. - ✅ Время отклика < 5 секунд (APIYI обычно работает быстрее официального API).
- ✅ Отсутствие ошибок 429 / 529.
Если соединение не удалось, проверьте, правильно ли экспортированы переменные окружения (можно проверить командой echo $ANTHROPIC_BASE_URL).
五、open-design 实战场景：5 大典型应用案例
5.1 场景一：独立开发者做 SaaS 落地页
目标：3 小时内产出一个可上线的 SaaS 产品落地页
操作流程：
- 在 open-design 选择
saas-landingSkill - Design System 选择
Linear或Vercel风格 - 在 Discovery Form 填写产品定位（受众、卖点、价格档）
- Agent 自动生成完整 HTML（含 Hero、Features、Pricing、CTA）
- 导出 ZIP，部署到 Vercel
API 用量预估：单次生成约消耗 30-50K input + 8-15K output tokens。如果反复迭代 5 次，总消耗约 25 万 tokens。建议使用 APIYI apiyi.com 来降低反复迭代的成本压力。
5.2 场景二：PM 快速生成 PRD 文档
目标：基于一段需求描述，自动生成结构化的 PRD
操作流程：
- 选择办公文档类 Skill（PM 规范文档）
- Design System 选择
Notion风格 - 输入需求要点和约束
- Agent 生成包含背景、目标、用户故事、AC、技术方案的完整 PRD
- 导出为 Markdown 或 HTML
5.3 场景三：技术博主生成封面图
目标：为博客文章生成统一风格的封面图
操作流程：
- 选择
magazine-posterSkill - Design System 选择
Wired或The Verge - 输入文章主题和关键词
- 调整视觉方向（Editorial / Brutalist / Soft Warm）
- 导出 PNG
5.4 场景四：移动端原型快速验证
目标：1 天内产出 5 个屏幕的移动 App 原型
操作流程：
- 选择
mobile-appSkill - Device Frame 选择 iPhone 15 Pro
- Design System 选择
Spotify或Airbnb - 分屏生成（首页、列表、详情、设置、Onboarding）
- 导出 HTML 给前端参考
5.5 场景五：数据 Dashboard 设计
目标：基于业务数据字段，生成可交互的 Dashboard 原型
操作流程：
- 选择
dashboardSkill - Design System 选择
Stripe或Vercel - 输入数据字段和图表类型偏好
- Agent 生成包含侧边栏、KPI 卡片、图表、表格的完整 Dashboard
💡 场景共性建议：以上 5 个场景都涉及反复迭代，每次迭代都是一次完整的 Claude API 调用。我们建议把 open-design 接到 APIYI apiyi.com，这样不仅能享受 85 折的成本优势，也能利用其不限并发的特性同时跑多个 Skill 任务。
六、open-design 常见问题 FAQ
Q1: open-design 和 Claude Design 的核心区别是什么？
核心区别在于 Agent 运行方式。Claude Design 是 Anthropic 的闭源 SaaS 产品，强绑定 Opus 模型；open-design 是开源项目，Agent 由你本地的 CLI 提供（Claude Code、Codex、Cursor 等任选），换句话说 Claude Design 是“产品”，open-design 是“框架”。
如果你已经订阅了 Claude Code 或拥有 APIYI apiyi.com 的 API-ключ, open-design 几乎是零额外成本的选择。
Q2: 我没有 Anthropic 官方账号，可以使用 open-design 吗？
完全可以。open-design 支持任意 CLI Agent，并不强制使用 Anthropic API。常见的替代方案有：
- 使用 Cursor Agent（自带 Cursor 订阅）
- 使用 Gemini CLI（Google 免费额度）
- 使用 OpenCode 或 Qwen Code
- 使用 APIYI apiyi.com 提供的 Claude API 服务-прокси API（推荐新人）
APIYI 支持人民币充值，免去申请海外账号的麻烦，对国内开发者最友好。
Q3: 19 个 Skills 哪些最值得新人优先尝试？
按“容易上手 + 输出价值高”排序，推荐顺序：
web-prototype— 最简单，单页 HTMLsaas-landing— 实用性高，可直接用于产品simple-deck— PPT 替代，5 分钟出一份演示dashboard— 数据可视化练手mobile-app— 学习移动端布局
办公文档类（如 PRD、周报）也很实用，但需要更多的 промпт 调优。
Q4: 71 套 Design Systems 是固定的吗，能自定义吗？
完全可以扩展。Design Systems 本质上是 DESIGN.md 文件，遵循 9 段式 Schema。你只需要：
- 在
design-systems/目录新建一个文件夹（以品牌名命名） - 创建
DESIGN.md描述配色、字体、间距、组件风格 - 重启 Daemon，新设计系统会自动出现在选择器中
这种文件式扩展是 open-design 区别于 Claude Design 的核心优势。
Q5: 使用 open-design 会消耗大量 API tokens 吗？
会，但可以控制。每个 Skill 的 промпт stack 都比较长（约 5-10K tokens 系统 промпт），加上输出可能 5-15K tokens。一次完整生成消耗约 20-40K tokens。
降低成本的方式：
- 使用 APIYI apiyi.com 服务-прокси API，享受充值 100 美金送 10%（≈ 85 折）的优惠
- 优先使用 Claude Sonnet 4.5 而非 Opus（性价比高 5 倍以上）
- 利用 Claude 原生的 промпт caching 功能（APIYI apiyi.com 完全兼容）
Q6: open-design 支持中文 промпт 吗？
完全支持。open-design 本身只是一个 промпт 编排框架，最终的中文理解能力取决于你选用的模型。Claude Sonnet 4.5 和 Opus 4.7 对中文支持都非常优秀，包括中文场景的设计语境（如“国潮风”、“赛博朋克”等）。
Q7: 部署到 Vercel 后还能本地访问 .od 目录吗？
不能。Vercel 是 Serverless 架构，没有持久化文件系统。如果需要 Vercel 部署，建议采用混合模式：Web 层部署到 Vercel，Daemon 仍然跑在本地或自有服务器，通过隧道（如 Cloudflare Tunnel）暴露给 Vercel 的 Web 层。
Q8: open-design 的 Anti-AI-Slop 机制具体做了什么？
open-design 在 промпт stack 中嵌入了 6 重防“AI 味”机制：
- 强制初始化表单：第一轮必须先收集需求，不允许直接生成
- 品牌资产五步协议：定位 → 下载 → 提取色值 → 写入 brand-spec → 复述确认
- 五维自评：生成前必须给自己打分（哲学、层次、执行、具体性、克制）
- P0/P1/P2 检查清单：每个 Skill 都有强制检查项
- AI Slop 黑名单：明确禁止渐变、通用 emoji、圆角左边框卡片、虚假数据
- 诚实占位符：用
—或灰块代替编造的数据
这套机制是 open-design 区别于普通 AI 设计工具的核心壁垒。
VII. Основные выводы по open-design
- ✅ open-design — это open-source альтернатива Claude Design, распространяемая по лицензии Apache-2.0, с приоритетом локального запуска и возможностью деплоя на Vercel.
- ✅ Ядро состоит из 19 навыков (Skills) и 71 дизайн-системы, что в теории дает более 1300 комбинаций «навык × стиль».
- ✅ Агенты используют локальный CLI, поддерживая работу с Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Qwen и другими.
- ✅ Локальный деплой в 3 шага: клонирование репозитория →
pnpm install→pnpm tools-dev run web. - ✅ Настройка BYOK требует всего 2 переменных окружения:
ANTHROPIC_BASE_URLиANTHROPIC_API_KEY. - ✅ Новичкам рекомендуем использовать сервис-прокси APIYI: apiyi.com обеспечивает полную совместимость с нативным форматом, отсутствие лимитов на параллельные запросы и бонус 10% при пополнении от 100 долларов.
- ✅ Механизм Anti-AI-Slop: 6 уровней защиты от «AI-штампов» для обеспечения высокого качества результата.
VIII. Заключение
open-design — это проект с открытым исходным кодом, который явно недооценивают. Вместо того чтобы позиционировать себя как «AI-дизайнер» (как это делает Claude Design), он прагматично предлагает фреймворк, объединяющий навыки (Skills) + дизайн-системы + оркестрацию агентов. Именно этот «инструментальный» подход позволил ему быстро завоевать признание среди профессиональных разработчиков.
Для новичков главным препятствием при работе с open-design становится не техника, а настройка API. Самый простой способ обойти это — воспользоваться профессиональным сервисом-прокси для Claude API (например, APIYI на apiyi.com). Полная совместимость с нативным форматом означает, что вам не придется менять ни строчки кода, оплата в рублях избавляет от необходимости иметь зарубежную карту, а отсутствие лимитов на параллельные запросы позволяет спокойно запускать рабочие процессы open-design с несколькими навыками одновременно. Бонус в 10% при пополнении от 100 долларов фактически дает вам скидку 15% от официальных цен.
Если вы планируете системно внедрить AI в процессы проектирования, связка open-design и APIYI (apiyi.com) — это на текущий момент самый дружелюбный вариант для разработчиков из РФ. Начните деплой сегодня, и уже через час вы запустите свой первый навык.
🎯 Рекомендация по дальнейшим шагам: зарегистрируйтесь на APIYI (apiyi.com), получите API-ключ, настройте переменные окружения согласно четвертой главе этой статьи, запустите процесс с помощью навыка
web-prototype, а затем постепенно исследуйте возможности остальных 18 навыков.
Справочные материалы
-
Репозиторий open-design на GitHub: основной репозиторий проекта
- Ссылка:
github.com/nexu-io/open-design - Описание: содержит полный исходный код, 19 навыков (Skills) и 71 дизайн-систему.
- Ссылка:
-
Официальная документация Anthropic: руководство по использованию Claude API
- Ссылка:
docs.anthropic.com/claude/docs - Описание: параметры API, структура промпта, сравнение моделей.
- Ссылка:
-
Официальный сайт APIYI: сервис-прокси API для Claude
- Ссылка:
apiyi.com - Описание: полная совместимость с нативным форматом, отсутствие лимитов на параллельные запросы, оплата в юанях, бонус 10% при пополнении на 100 долларов.
- Ссылка:
Автор: Техническая команда
Последнее обновление: 30.04.2026
О проекте APIYI: APIYI (apiyi.com) — это профессиональный сервис-прокси API для Claude, обеспечивающий стабильный доступ ко всей линейке моделей, включая Claude Sonnet 4.5 и Claude Opus 4.7. Поддерживает вызовы в нативном формате Anthropic. При пополнении счета на 100 долларов вы получаете бонус 10% (что эквивалентно скидке 15% от официальных цен), нет ограничений по количеству параллельных запросов, а техподдержка отвечает максимально оперативно.
