qvib.pro
EN

Claude Design: UI по одному промпту

Claude Design от Anthropic (claude.ai/design): по промпту рисует UI, прототипы и слайды, а готовый пакет отдаёт в Claude Code. Входит в подписку Pro/Max.

Anthropic Labs, research preview (релиз 17 апр 2026): на Claude Opus 4.7, вход в Pro/Max/Team/Enterprise, хендофф в Claude Code (офиц. анонс) проверено 2026-07-14

Открыть источник ↗

«Опиши экран словами — получи готовый интерфейс». Обычно это реклама. Claude Design от Anthropic реально так и делает. 🎨

Что это и кому

Claude Design — продукт Anthropic Labs в статусе research preview (релиз 17 апреля 2026): ты описываешь словами интерфейс, прототип, слайды или лендинг, а Claude собирает визуал и правит его прямо в диалоге. Под капотом — Claude Opus 4.7, по формулировке Anthropic «самая сильная vision-модель». Кому: вайб-кодерам, продактам, фаундерам и дизайнерам, кому нужен приличный UI или кликабельный прототип без Figma и без ручной вёрстки. Главная фишка — не «текст → картинка», а мост дизайн→код: готовый макет одним движением уезжает в Claude Code.

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

  • По промпту: дизайны, интерактивные прототипы, вайрфреймы, мокапы, слайды, one-pager'ы, маркетинг-материалы.
  • Прототипы с кодом внутри — голос, видео, шейдеры, 3D, а не статичная картинка.
  • Дизайн-система из твоего кода: на онбординге Claude читает кодовую базу и дизайн-файлы и наследует бренд — цвета, шрифты, компоненты.
  • Правки словами и руками: инлайн-комменты к элементу, прямое редактирование текста, «ручки» для спейсинга/цвета/лейаута — и «примени по всему макету».
  • Совместная работа: доступ view-only / комментирование / edit, шаринг в пределах организации.
  • Экспорт: внутренняя ссылка, папка, .zip, PDF, PPTX, Canva, standalone HTML; интеграции с Gamma, Miro, Replit, Vercel, Lovable, Wix, Adobe.
  • Хендофф в код: «Send to Claude Code Web» или локальному агенту — Claude пакует всё в handoff-бандл, который Claude Code собирает по одной команде.

Как начать за 5 минут

  1. Открой claude.ai/design (или иконку в сайдбаре Claude Desktop) под аккаунтом с планом Pro/Max/Team.
  2. Опиши экран словами — Claude соберёт первый вариант; догоняй правками: комменты, «ручки», прямое редактирование текста.
  3. Когда нравится — жми хендофф в Claude Code (или экспорт в PDF/PPTX/Canva/HTML) и достраивай логику.

Когда брать, а когда нет

✅ Бери, если сидишь в экосистеме Claude (Pro/Max) и хочешь UI + прототип + хендофф в Claude Code без второго инструмента и без копипаста. ✅ Бери, если нужен приличный дизайн по референсу или бренду без Figma и без дизайнера. ❌ Не бери → лучше «Google Stitch», если нужен бесплатный дизайн-инструмент и мост в агента через MCP, а платить за подписку Claude не хочешь. ❌ Не бери → лучше «Figma», если команда живёт в Figma и нужна точная ручная работа с макетом, а не ИИ-генерация. ❌ Не бери → лучше «v0» или «Lovable», если сразу нужен рабочий React-код в проекте, а не дизайн с последующим хендоффом.

Цена по-честному

Отдельной платы за Claude Design нет — он входит в подписки Claude Pro, Max, Team и Enterprise (у Enterprise по умолчанию выключен, включает админ). Бесплатного тарифа нет: без платной подписки не зайдёшь. Важный нюанс: расход берётся из общего пула лимитов, который ты уже тратишь на чат, Claude Code и Cowork — отдельной квоты под дизайн нет. Упрёшься в лимит — Claude Design недоступен до сброса; можно докупить extra usage. Тег: paid. Точные суммы и лимиты — у Anthropic, меняются.

Подводные камни

  • Research preview Anthropic Labs: фичи, лимиты и доступ могут меняться или отвалиться без предупреждения.
  • Общий пул лимитов: активная работа в дизайне «съедает» тот же бюджет, что и Claude Code с чатом — на длинных итерациях кончается быстро.
  • Нужна платная подписка — бесплатно попробовать нельзя.
  • Дизайн-система из кода — это онбординг по твоему репозиторию: если базы нет, наследование бренда слабее.
  • Красивый макет ≠ рабочее приложение: handoff-бандл — это старт, финальную логику и данные всё равно доводит Claude Code и ты.
  • Код и дизайн-файлы уходят в облако Anthropic — не кидай туда критично-секретное без оглядки на политику.

🤖 Промт-ускоритель

«Собери в Claude Design <ТИП ЭКРАНА: дашборд / лендинг / онбординг> для <ПРОДУКТ> и аудитории <КТО>. Стиль: <РЕФЕРЕНС / бренд-цвета / шрифт>. Структура: <СПИСОК блоков и экранов>. Сделай кликабельный прототип с состояниями <ПУСТО / ЗАГРУЗКА / ОШИБКА>. Потом собери handoff-бандл и подготовь одну команду для Claude Code, чтобы он построил фронт на <React+Tailwind> строго по макету — те же цвета, отступы и компоненты.»