/ Каталог / Песочница / Open Design
● Сообщество nexu-io ⚡ Сразу

Open Design

автор nexu-io · nexu-io/open-design

Open-source клон Claude Design — 19 skills + 71 дизайн-система уровня бренда, изолированный preview, экспорт в HTML/PDF/PPTX/MP4.

open-design от nexu-io — альтернатива от сообщества к Anthropic Claude Design. Включает 19 skills для веб-дизайна, мобильных прототипов, слайдов, изображений, видео и HyperFrames, плюс 71 готовую брендовую систему (Linear, Stripe, Vercel, Notion, Toss-style...). Работает в любом харнессе, совместимом с Claude Code, и поставляется с изолированным preview + пайплайнами экспорта.

Зачем использовать

Ключевые функции

Живое демо

Как выглядит на практике

готово

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "open-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ],
      "_inferred": true
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "open-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/nexu-io/open-design",
        "~/.claude/skills/open-design"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json
{
  "context_servers": {
    "open-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/nexu-io/open-design",
          "~/.claude/skills/open-design"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add open-design-skill -- git clone https://github.com/nexu-io/open-design ~/.claude/skills/open-design

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Open Design

Создать питч-дек в конкретном брендовом стиле

👤 Фаундеры / PM ⏱ ~30 min beginner

Когда использовать: Нужны 10 слайдов, и воевать с Keynote не хочется.

Поток
  1. Выбрать бренд
    Use open-design. Pick the Stripe-style skin. List its tokens.✓ Скопировано
    → Показаны токены скина
  2. Черновик
    Generate a 10-slide deck for our launch — title, problem, solution, traction, roadmap, ask. Use the Stripe skin.✓ Скопировано
    → 10 слайдов с согласованным стилем
  3. Экспорт
    Export to PPTX so I can edit in Keynote.✓ Скопировано
    → PPTX-файл записан

Итог: Дек, который не выглядит AI-сгенерированным; согласованный брендовый вид.

Подводные камни
  • Изображения выглядят шаблонно — Skill предоставляет наборы иконок и иллюстраций; укажите, какие использовать
Сочетать с: filesystem

Прототипировать лендинг в брендовом стиле

👤 Разработчики / дизайнеры, итерирующие hero-страницы ⏱ ~25 min intermediate

Когда использовать: Нужны 3 визуальных направления перед настоящей сборкой.

Поток
  1. Варианты
    Generate 3 hero variants — Linear, Notion, and Vercel skins. Same content, different style.✓ Скопировано
    → 3 HTML-preview
  2. Выбрать + итерировать
    Take the Linear one. Tighten typography and add a secondary CTA.✓ Скопировано
    → Доработанный HTML

Итог: Быстрые стратегические решения до глубокой сборки.

Подводные камни
  • Токены скина конфликтуют с вашим существующим CSS — Изолированный preview избегает конфликтов; интегрируйте выборочно
Сочетать с: ui-ux-pro-max-skill

Создать короткое маркетинговое видео из сценария

👤 Marketing / DevRel ⏱ ~60 min intermediate

Когда использовать: Есть 30-секундный сценарий, нужно видео.

Поток
  1. Сторибоард
    Turn this script into a HyperFrames storyboard — 6 shots, brand-styled.✓ Скопировано
    → Сторибоард
  2. Рендер
    Render to MP4.✓ Скопировано
    → MP4-файл записан

Итог: Брендово-согласованное короткое видео без обращения к дизайнеру.

Подводные камни
  • Время рендеринга нетривиально — Итерируйте по сторибоарду перед финальным рендером

Комбинации

Сочетайте с другими MCP — эффект x10

open-design-skill + ui-ux-pro-max-skill

Брендовые скины + дизайн-фундаменталы

Use UI/UX Pro Max for typography, open-design for brand skin.✓ Скопировано
open-design-skill + filesystem

Вывод в директории проекта

Export deck to /presentations/launch/.✓ Скопировано

Инструменты

Что предоставляет этот MCP

ИнструментВходные данныеКогда вызыватьСтоимость
list_skins (none) Выбрать брендовый стиль free
design_web spec, skin Веб-страницы / прототипы tokens
design_slides outline, skin Питч / докладные деки tokens
export format: html|pdf|pptx|mp4 Финальная выдача render time

Стоимость и лимиты

Во что обходится

Квота API
N/A
Токенов на вызов
Много при тяжёлых выводах (видео)
Деньги
Бесплатно
Совет
Итерируйте по сторибоарду, а не по финальному рендеру

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: Local sandbox + file write
Хранение учётных данных: Нет
Исходящий трафик: Нет — локально

Устранение неполадок

Частые ошибки и исправления

Render fails for video

Убедитесь, что ffmpeg установлен; skill отмечает отсутствующие зависимости

Skin doesn't apply consistently

Некоторые шаблоны предшествуют системе скинов; используйте skin-aware шаблоны из README

Альтернативы

Open Design в сравнении

АльтернативаКогда использоватьКомпромисс
Anthropic Claude DesignНужна первоклассная поддержкаЗакрытый; менее настраиваемый
Hand-coded designsУ вас есть дизайнерМедленнее итерации

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills