/ Каталог / Песочница / 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 + пайплайнами экспорта.

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

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

Живое демо

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

готово

Установка

Репозиторий автора · Официальная документация Claude Skills

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

Реальные сценарии: 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