Дизайн-мышление до кода: разговорные UI-инструменты

Результат здесь — дизайн-канвас, а не одна картинка. На одном pan/zoom-холсте лежат несколько артбордов (экранов, вариантов, отдельных постеров), их можно листать и сравнивать целиком. По устройству это ближе к рабочей доске в Figma, чем к обычной переписке с чат-ботом. Внутри каждого артборда можно кликом выбрать любой элемент и подправить его через панель свойств, отредактировать текст прямо на месте и откатить правку через undo/redo. Описывать изменение словами заново необязательно. Сохранение фиксирует версию; поделиться ссылкой — отдельное действие, по умолчанию дизайн приватный. Экспорт готового дизайна — в PDF, PPTX или HTML.

Отсюда следует то, что часто упускают: Claude Design годится не только для экранов интерфейса. Тем же инструментом собираются лендинги, маркетинговая графика и графика для соцсетей. Печатные форматы (постеры, флаеры, брошюры) оформляются как отдельные одностраничные артборды на том же холсте. Memo или отчёт — как один цельный артборд без разбивки на страницы.

Рядом стоит Google Stitch — по назначению близкий конкурент, ориентированный именно на экраны приложений. Канвас у него менее детализирован: нет такого же уровня ручной правки элемента через панель свойств. Зато Stitch — эксперимент Google Labs, и войти в него можно с обычным Google-аккаунтом. Он умеет экспортировать код и отдавать экраны агентам через MCP. Если платного Claude нет, начинай со Stitch.

Отдельно разведём эту тему и paper.design из темы «Вайбкодинг: сайты». Оба дают холст с живым интерактивным результатом, а не голый чат, но масштаб и назначение разные. Claude Design ведёт через уточняющие вопросы и держит несколько связанных артбордов одной системой: экраны одного флоу, несколько вариантов макета, набор постеров одной кампании. Paper.design — про более свободное, менее структурированное рисование на одном холсте, ближе по ощущению к чистому листу в Figma. На практике оба занимают один и тот же шаг в цепочке, до вайбкодинга (когда речь об интерфейсе). Выбор между ними — дело удобства под конкретную задачу, а не принципа.

Генератор изображений (тема «Генерация изображений») выдаёт плоский PNG. Выглядит красиво, но это иллюстрация интерфейса, а не интерфейс. Текст на кнопках может быть нечитаемым, отступы — «нарисованными на глаз», а не системными. Полноценный вайбкодинг-инструмент (тема «Вайбкодинг: сайты») сразу собирает рабочий код на реальном стеке. Это уже финальная стадия с осознанным выбором технологий. Разговорные UI-инструменты — посередине. Результат уже настоящая структура интерфейса: реальные компоненты, реальный текст, реальная логика состояний. С ней можно вести диалог так же, как с обычным чат-ботом. Но она ещё не привязана намертво к конкретному продакшен-стеку и не обязана сразу быть безупречной с инженерной точки зрения.

До

Генератор картинок: выглядит как экран, но это пиксели. Счётчик и удаление есть только у одной позиции, «1 шт» у джинсов написано дважды.

После

Claude Design: артборд из настоящих элементов. У каждой позиции одинаковый набор контролов, любой блок можно выделить и поправить.

Промпт

Мне нужен экран корзины для интернет-магазина одежды: список товаров, промокод, итоговая сумма, кнопка оформления — накидай структуру, я буду поправлять

Ещё один смежный, но не разговорный сценарий — Uizard (принадлежит Miro). Фотографируешь нарисованный от руки скетч экрана (на бумаге, доске, салфетке с воркшопа) и получаешь распознанные прямоугольники, кнопки и текстовые поля уже как цифровые слои, с которыми можно работать дальше. В отличие от Claude Design/Google Stitch, здесь отправная точка — уже нарисованная рукой композиция, а не текстовый бриф. Инструмент не придумывает структуру, а оцифровывает то, что уже придумал человек на бумаге. Полезно на ранних воркшопах и брейнштормах с клиентом (тема «Брейншторминг с ИИ»). Там рисовать от руки на встрече быстрее, чем открывать Figma при всех, а результат всё равно нужно довести до презентабельного вида после.

Промпт

Overhead photo of a hand-drawn mobile app wireframe on a paper napkin, black marker: boxes, circles and squiggly lines instead of words, a coffee cup at the edge, workshop table

• Бриф в разговорном стиле, а не промпт-командой. Вместо «сгенерируй лендинг с хиро-секцией» опиши задачу так, как описал бы человеку: «мне нужен экран онбординга для приложения-трекера привычек, три шага, дружелюбный тон». Инструмент сам уточнит детали, если их не хватает.
• Редирект вместо повторного промпта с нуля. Если результат почти подходит, но не то, переписывать весь запрос заново не нужно. Достаточно поправки в диалоге: «оставь структуру, но сделай акцентный цвет теплее». Инструмент держит контекст предыдущего результата, как в обычном чате.
• Когда начинать заново, а не редиректить. Если после 2–3 правок результат всё ещё структурно не туда, выгоднее явно попросить начать с чистого листа с уточнённым брифом. Точечно подкручивать неверную основу невыгодно: мелкие правки накапливают несостыковки быстрее, чем кажется.

Для экрана интерфейса результат из такого инструмента — хорошая отправная точка для вайбкодинга, а не финал сам по себе. Дальше передай его в полноценный агент (v0, bolt.new, Claude Code — тема «Вайбкодинг: сайты») с явной пометкой: «вот утверждённая структура экрана, собери её на нашем стеке с нашими токенами». Пересказывать идею словами с нуля не нужно. Это ровно тот же принцип, что и в теме «Мета-промптинг»: не делать всё одним инструментом от начала до конца, а передавать результат по цепочке, каждому инструменту — то, в чём он сильнее.

Для постера, брошюры, графики для соцсетей или memo сценарий другой. Артборд из Claude Design тут часто и есть финальный деливерабл, а не полуфабрикат для вайбкодинга. Дальнейший шаг — просто экспорт готового артборда в PDF и отправка клиенту. Для печати финал доводится в Figma или Illustrator: точный формат в миллиметрах, 300 dpi и CMYK надёжнее выставить там.

Мне нужен экран корзины для интернет-магазина одежды: список товаров, промокод, итоговая сумма, кнопка оформления — накидай структуру, я буду поправлять

Оставь структуру как есть, но сделай карточки товаров крупнее и добавь миниатюры вместо текстовых названий

Вот два результата на один и тот же запрос: из разговорного UI-инструмента (приложить скриншот) и из генератора изображений (приложить картинку). Сравни, в чём разница по итоговой пользе для дальнейшей сборки

Вот утверждённый макет экрана из разговорного UI-инструмента (описать/вставить) — оформи его в чёткое ТЗ для агента-вайбкодера: разделы, компоненты, состояния

Вот скриншот экрана из Uizard после распознавания скетча (приложить) и список имён его слоёв (вставить). Предложи новые имена по смыслу таблицей „старое → новое“, чтобы передать экран дальше в вайбкодинг

Собери на одном канвасе 3 варианта афиши для мероприятия: минималистичный, яркий и премиальный — вертикальный формат с пропорциями A3, место под логотип внизу