Superdesign — дизайн-агент в редакторе

У обычной связки «дизайн → код» всегда есть шов: макет живёт в одном инструменте, код — в другом, и переносить одно в другое руками приходится тебе. Superdesign убирает этот шов. Это открытый дизайн-агент, который встаёт прямо в твой редактор или подключается к Claude Code как навык: агент сам рисует варианты интерфейса на холсте, а потом тем же движением собирает их в код в твоём проекте — по твоим компонентам и правилам. В этом гайде подключим Superdesign к Claude Code одной строкой и разберём, как им проектировать, не выходя из терминала.

Короткий ответ

Superdesign (superdesign.dev, репозиторий superdesigndev/superdesign) — первый опенсорсный дизайн-агент, который живёт внутри редактора. Два способа: расширение для IDE (VS Code, Cursor, Windsurf) с холстом-панелью или навык (skill) для кодинг-агентов — Claude Code, Cursor и других. Подключение навыка: ставишь CLI, добавляешь skill одной командой, дальше вызываешь его слэш-командой прямо в чате Claude Code. Агент находит референсы, рисует несколько вариантов экрана на бесконечном холсте, итерирует по твоим словам — и, в отличие от простого экспорта, сам доводит выбранный вариант до кода в твоём репозитории. Бесплатно, открытый код.

Чем это отличается от Figma-MCP или Stitch: те отдают агенту конвертацию уже готового макета — «вот дизайн, сделай код». Superdesign отдаёт агенту весь цикл: он сам создаёт дизайн, крутит варианты вместе с тобой и потом пишет компоненты в твоём проекте. Не «перенеси картинку в код», а «спроектируй и внедри».

Что понадобится

• Node.js и npm — CLI Superdesign ставится через npm, глобально.
• Claude Code — команда claude доступна в терминале (либо Cursor / другой поддерживаемый агент).
• Проект, в котором работаешь — Superdesign складывает дизайны и дизайн-систему в папку .superdesign/ внутри проекта.

Как подключить навык к Claude Code

Путь навыка (skill) — то, ради чего этот гайд лежит в треке «дизайн через агента»: проектируешь, не выходя из Claude Code. Три шага.

Первый — поставить CLI Superdesign глобально:

npm install -g @superdesign/cli@latest

Второй — добавить сам навык в твоего кодинг-агента:

npx skills add superdesigndev/superdesign-skill

Навык можно поставить на уровень проекта (только в текущем репозитории) или глобально (во всех проектах). Третий шаг — уже внутри Claude Code вызвать его слэш-командой:

/superdesign help me design экран входа

С этого момента у агента появился дизайн-режим: он умеет искать стиль, рисовать варианты на холсте и переносить итог в код. Тот же навык работает и в Cursor, и в других агентах — процесс одинаковый.

Если тебе ближе визуальная панель, а не терминал — есть второй вход: расширение Superdesign для VS Code, Cursor и Windsurf. Ставишь из маркетплейса редактора, открываешь боковую панель Superdesign, пишешь промпт — и смотришь макеты прямо в IDE. Навык и расширение решают одну задачу с разных сторон: навык — для тех, кто уже живёт в Claude Code, расширение — для тех, кто хочет холст перед глазами.

С чего начинается любой дизайн — с дизайн-системы

Первое, что делает Superdesign под капотом, — заводит файл дизайн-системы: .superdesign/design-system.md. В нём цвета, типографика, отступы, тон — единый визуальный язык проекта. Если файла ещё нет, агент сначала соберёт его, и только потом начнёт рисовать. Смысл ровно тот же, что и у DESIGN.md в других инструментах: один задокументированный язык, к которому приводится каждый новый экран, — поэтому варианты выглядят как один продукт, а не как случайные картинки.

Собрать систему можно двумя путями, и Superdesign прямо спросит, каким:

• Извлечь из существующего кода. Агент читает твой проект — токены, типографику, компоненты — и записывает из них дизайн-систему. Полезно, когда UI уже есть и надо проектировать в его стиле.
• Создать новую. Агент подбирает референсы, задаёт тебе несколько точных вопросов про вкус и ограничения — и собирает систему с нуля. Полезно, когда делаешь новый продукт или хочешь сменить облик.

Как проектировать: варианты вместо одного макета

Главная идея Superdesign — «зачем рисовать один вариант, когда можно десять». Ты не получаешь единственный экран, который надо принять или отвергнуть. Агент раскладывает на бесконечном холсте несколько черновиков рядом, и ты выбираешь направление, а не правишь один-единственный.

Практически цикл выглядит так. Ты просишь спроектировать экран или целый флоу. Агент уточняет требования, проверяет дизайн-систему (соберёт, если нет), делает базовый вариант — и от него ветвит несколько направлений. Ветвление задаётся простыми словами-направлениями, детали агент добирает сам:

• Ветвление (branch). Один экран → несколько вариантов сразу: «тёмная тема», «минимализм с воздухом», «смелые градиенты». Каждое слово-направление = отдельный вариант на холсте.
• Замена (replace). Одна линия правок: докручиваешь выбранный вариант на месте, без веера копий.
• Целый поток. Можно спроектировать не один экран, а последовательность — регистрация, оплата, профиль — единым заходом.

Направления держи короткими: «тёмная тема», а не «тёмная тема с бирюзовыми кнопками и тенью 4px». Superdesign — дизайн-эксперт, его работа как раз в том, чтобы наполнить направление деталями; твоя — задать курс.

Замыкание цикла: из холста в твой код

Тут проходит граница между Superdesign и обычными конвертерами. Инструменты вроде Figma-MCP или Anima отдают агенту готовую конвертацию: дизайн уже где-то существует, из него достают код, а донести этот код до проекта — твоя забота. Superdesign замыкает цикл в самом репозитории: агент, который и так пишет твой продукт, сам ведёт холст, создаёт и крутит дизайн вместе с тобой, а потом реализует его компонентами в твоём коде — по твоим соглашениям, а не универсальной сгенерированной вёрсткой.

Одна тонкость, которую полезно понимать. У холста Superdesign нет прямого доступа к твоему коду, поэтому как контекст «текущего состояния» он использует лёгкую HTML-копию нужной страницы — пиксель-в-пиксель повтор того, как UI выглядит сейчас, без правок. На этой копии агент и ветвит новые варианты, чтобы дизайн ложился поверх реального экрана, а не в вакууме.

Частые ошибки

FAQ

Это платно?

Нет. Superdesign — открытый код, бесплатно: можно форкать, дорабатывать, менять промпты и поведение агента. Платишь только за токены той модели, которой пользуется твой агент.

Обязательно ставить расширение, или хватит навыка?

Хватит навыка, если ты работаешь в Claude Code: ставишь CLI, добавляешь skill, вызываешь /superdesign. Расширение — отдельный вход для тех, кому нужен визуальный холст в самом редакторе. Одно другое не требует.

Чем это лучше, чем просто попросить Claude Code сверстать экран?

Голый агент рисует один вариант текстом и без выстроенной дизайн-системы. Superdesign даёт структуру: заводит единый визуальный язык, раскладывает несколько направлений на холсте, ветвит их — и только потом реализует выбранное в коде. Меньше случайности, больше выбора.

Superdesign может переделать уже существующий интерфейс?

Да. Он извлекает дизайн-систему из текущего кода, делает копию нужной страницы как отправную точку и ветвит новые варианты поверх неё — то есть работает не только «с нуля», но и «поверх того, что есть».

Итог

Superdesign — открытый дизайн-агент, который убирает шов между макетом и кодом: он рисует варианты на холсте и тем же движением внедряет выбранный в твой репозиторий по твоим правилам. Подключается к Claude Code одной строкой навыка (или ставится расширением в IDE), опирается на дизайн-систему в .superdesign/design-system.md и работает по принципу «десять вариантов вместо одного». Держи в голове честную рамку: курс задаёшь ты, детали и вёрстку берёт агент — а финальную доводку и вкус по-прежнему проверяешь сам.

А про то, как задать этот единый визуальный язык словами — один файл, которому следует агент, — читай гайд Дизайн-система словами.