UStackUStack
Redesign icon

Redesign

Redesign — бесплатный open-source локальный инструмент MIT для Claude: создает карусели LinkedIn и Instagram по вашему коду как style guide.

Redesign

Что такое Redesign?

Redesign — бесплатный open-source локальный инструмент, который позволяет Claude создавать карусели для LinkedIn и Instagram, используя ваш собственный код как style guide. Вы описываете, что хотите, а Claude строит слайды в canvas-редакторе, где их можно просмотреть и отредактировать.

Основная идея — избежать старта с чистого холста: Redesign извлекает реальные компоненты (такие как карточки, кнопки, иконки и типографика) из вашего репозитория и размещает их в посте, чтобы результат соответствовал вашей существующей дизайн-системе.

Ключевые возможности

  • Локальный open-source рабочий процесс дизайна (MIT-лицензия): Инструмент запускается на вашей машине и имеет MIT-лицензию.
  • Стилизация на основе кодовой базы: Укажите Redesign путь к вашему репозиторию, чтобы Claude использовал ваши иконки, кнопки, цвета, шрифты и структуру компонентов как основу для новых постов.
  • Canvas-редактор с живым предпросмотром: Claude генерирует слои и проверяет изменения перед сохранением, а вы можете наблюдать сборку в интерфейсе.
  • Повторно используемые ассеты из составных слоев: Вы можете сохранять слои или композиции как ассеты для повторного использования в будущих постах.
  • Интеграция MCP для Claude Code: Redesign — это MCP, который подключается к рабочим процессам Claude Code без необходимости API-ключа для самого Redesign.
  • Нет сервера под контролем Redesign: На странице указано, что у Redesign нет бэкенда под его контролем; посты, изображения и любой API-ключ остаются на вашей машине.

Как использовать Redesign

  1. Установка одной командой: Выполните npx @nodewave-io/redesign в терминале, чтобы настроить canvas-приложение и автоматически зарегистрировать MCP в Claude Code.
  2. Запуск локального canvas: Рабочий процесс подразумевает открытие http://localhost:3000 для просмотра интерфейса сборки.
  3. Подключение, если инструменты не появились: Если после перезапуска инструменты не видны в Claude Code, выполните npx @nodewave-io/redesign connect.
  4. Дайте инструкцию: Опишите желаемый пост. На странице указано, что Claude затем создает слои, выравнивание и проверки, а получившиеся слайды сохраняются в редакторе.
  5. Редактирование и экспорт: Используйте canvas-редактор для корректировки содержимого слайдов и кода компонентов, затем экспортируйте карусель для целевой платформы.

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

  • Брендированные карусели для запуска на LinkedIn/Instagram: Генерируйте многослайдовую карусель, визуальные элементы которой (иконки, стили карточек, формы кнопок и типографика) берутся из компонентов вашего сайта.
  • Быстрая итерация промо-постов: Меняйте текст, макет или отступы с помощью промптов, сохраняя те же базовые определения компонентов из репозитория.
  • Преобразование удачных секций слайдов в шаблоны: Сохраняйте набор слоев или композиций (например, секцию CTA или макет слайда) как повторно используемые ассеты для постов следующей недели.
  • Дизайн с использованием библиотеки компонентов команды: Для команд, поддерживающих UI-компоненты в коде, Redesign использует их как общий источник истины вместо ручного воссоздания дизайнов.
  • Локальные рабочие процессы без загрузки ассетов: Если вы предпочитаете настройку без бэкенда у Redesign, генерация и ваши ассеты остаются на вашей машине.

FAQ

  • Что такое Redesign? Redesign — бесплатный open-source локальный инструмент, который позволяет Claude создавать карусели для LinkedIn и Instagram в контролируемом canvas-редакторе.

  • Redesign действительно бесплатный? Да. На сайте указано, что он имеет MIT-лицензию и запускается на вашей машине. Вы платите Anthropic за использование Claude, а сам инструмент Redesign бесплатный.

  • Что нужно для запуска? На странице указано Node.js 20+ и Claude Code. Также отмечается, что одна команда в терминале настраивает остальное.

  • Загружает ли Redesign что-либо на сервер? Нет. На странице указано, что у Redesign нет бэкенда под контролем проекта, и посты, изображения и любой API-ключ остаются на вашей машине.

  • Как заставить инструменты появиться в Claude Code? Перезапустите Claude Code (он читает конфиг MCP при запуске). Если инструменты все равно не появились, выполните npx @nodewave-io/redesign connect для регистрации MCP.

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

  • Инструменты для соцпостов на основе шаблонов: Сервисы для создания каруселей с шаблонами. Они обычно не интегрируются с вашей кодовой базой как style guide, поэтому приходится вручную подгонять под бренд.
  • Дизайн-инструменты с ручным воссозданием компонентов: Инструменты, где вы вручную строите или воссоздаете UI-компоненты (например, в визуальном редакторе). Это гибко для макетов, но не переиспользует компоненты из репозитория автоматически.
  • Рабочие процессы предпросмотра UI на основе кода: Подходы, рендерящие дизайн в коде и предпоказывающие локально. Они подходят командам, работающим с UI-кодом, но не обеспечивают такой же рабочий процесс генерации и валидации слайдов под управлением Claude, как в Redesign.