Claude Design! Адекватное решение для AI вёрстки пользовательских интерфейсов.
Протестировал 🤖 Claude Design прямиком на рабочем проекте, без подготовки и предварительного изучения инструмента. Сразу кинул в бой, и задача была выполнена.
ℹ️ Задача: продумать и сверстать внешний вид CRM системы при наличии готового бекенда и сырого фронта, вся логика и нужные поля/переменны/кнопки выводятся, но вид совершенно не проработан, лишь набор элементов на белом фоне.
В роли технического задания был сам проект - я дал папку с ним в контекст (локальная папка через "Link code folder", если удаленно - можем подключить github репозиторий). Ну и легкий промпт "вот проект, хочу сверстать под него production-ready фронт, изучи текущую реализацию, разбери что и как должно выглядеть, предложи варианты, обсудим".
Агент прочитал проект, детально разобрал каждый раздел, его функционал, продумал что и где будет располагаться, предложил на выходе 3 стиля (сверстал по одному экрану на каждый из стилей). Я выбрал и просто ждал, пока он закончит, что-то около часа. С первого же прохода он мне собрал цельную верстку . Но не все кнопки выполняли действие, не все фильтры работали, некоторые мелочи пришлось чуть переосмыслить, чтобы лучше соответствовать финальной задумке.
В целом, считаю что на 85% клод заваншотил задачу. Уверен, что если бы я ему дал изначально больше деталей касаемо всего функционала (я не мог сразу это сделать, так как мне нужна была какая-то база, от чего оттолкнуться, чтобы посмотреть как это будет выглядеть, и уже по потом вносить вносить правки) то мог бы и легко и добрать до 95% готовности.
Приятно, что интерфейс собирался реально нацеленным на финальный вид, заглушек и непродуманных решений было по минимуму (как я и говорил, скорее из-за недостатка контекста). Агент старался реально отталкиваться от имеющегося бекенда и сырого фронта, продумал как это должно выглядеть на финише, и дал мне почти готовое решение. С версткой через claude code cli я бы достигал такого результата наверное 3-4 дня часов по 15 работы, с GPT так вообще неделя бы ушла в таком темпе наверное. Тут я посчитал точное время, у меня вышло ровно 20 часов от первого промпта "посмотри что там за проект" до запуска проекта с уже перенесённой версткой. Соотношение такое: 15-20% времени это подготовка и первый проход агента, а остальное время это уже точечные правки и детализация интерфейса и некоторого функционала, включая перенос на проект. И это не тот результат, что я потом закидываю в CLI и дорабатываю по каждой мелочи, тут уже всё готово.
Попутно протестировал и /goal режим. Когда дал клоду верстку и сказал перенести это на наш фронт, он заспавнил 11 сбагентов (на каждый из разделов CRM по сабагенту) и дал им одинаковый промпт но с разным референсом под каждый из разделов, у оркестратора ушло 200 тыс контекста и у каждого сабагента примерно по 200-250 тыс токенов на выполнение задачи. Отработали параллельно, ушло ориентировочно полтора часа на перенос. И темная, и светлая тема тоже была учтена, мобильный вид соответственно.
Итог.
Claude Design можно брать на вооружение, за 2 дня по 10 часов мы получаем готовое решение которое можно смело отправлять в работу.
Интересно, что я ни разу не упёрся в лимит. Или удачно попал под сброс лимитов, или промежутки между заходами были достаточными, чтобы он не кончился. По факту Claude Design это всё тот же Claude Code Cli, просто с чуть лучшей обвязкой и промптами, нацеленными не на верстку 1 экрана, а на полноценное приложение и следование дизайн системе.
Теперь мой воркфлоу при сборе проектов следующий:
1️⃣ Спецификации
2️⃣ Сборка бекенда и сырого фронта на GPT
3️⃣ Проверяем работу базового функционала, выводим все кнопки, переменные, поля, блоки, логику на фронт, просим нейронку специально не использовать какие-то фреймворки и темы, достаточно просто разбивки по экранам, где и что будет ориентировочно.
4️⃣ Через Claude Design отправляю локальный проект в контекст агенту, обсуждаем варианты стиля, верстаем итоговое решение.
5️⃣ Переносим вёрстку через Claude Code в /goal режиме, и идем смотреть результат.
