Почелленджил на специфичной задаче Claude Design и Lovable.
Еще вспоминал про Figma Make, но там кривой импорт .fig файлов, поэтому опустим.
🎯 Задача
Скопировать готовый дизайн лендинга «Мир Штакетника» (аттач) — обычный коммерческий лендинг производителя металлоштакетника. Цыветные кружочки, плитка, всё как положено.
Заход одинаковый:
1️⃣ .fig файл в Claude Design
2️⃣ Figma-файл + скриншот в Lovable Web
3️⃣ MCP Figma в Lovable Desktop
💥 Что получилось
Победителя нет — все справились с косяками. Но Claude единственный пошёл в глубину: вытащил картинки, точные отступы, конфигурации блоков. Даже отказался использовать фотографию забора с артефактом Shutterstock — оставил только фон с домом. Бонусом нарисовал мобильную версию: закреплённая шапка.
Короче Claude Design сделал самую близкую копию.
Lovable в обоих вариантах читал дизайн поверхностно. Тянула отступы, генерировала своё. Получились симпатичные лендинги, но от оригинала далеко.
А ещё есть Figma Make — но туда любой .fig файл не положить, только фреймы и компоненты из Figma Design. Парадокс внутри одного продуктового семейства.
🎨 Фишка, ради которой стоит попробовать
Пока делал копию дизайн системы из фигма файла, то получил такой тиндер из элементов дизайна — ставишь лайк/дизлайк компонентам дизайн-системы. Кнопки, цвета, шрифты выкладываются отдельными карточками с параметрами вроде «pill 40 px, hover lifts to #56C091».
У моего проекта получилось 19 карточек кнопок, 20 цветовых гипотез, 21 типографическая шкала на ревью.
💰 Цена вопроса
Claude Design жрёт лимиты агрессивно: за один проект я сжёг 69% недельной квоты Claude. Lovable потратил 15 кредитов — на тарифе за 20 долларов расход почти не заметен.
🔧 Где что применять
Если задача — скопировать готовый Figma-макет один в один, Claude Design делает аккуратнее всех. Прям очень глубокая проработка. Для генерации сайта с нуля без референса Lovable, Figma Make или Google Stitch отработают дешевле и быстрее.
Кстати, а ведь наверняка типичная задача: преобразовать набросок Фигмы в сверстанные шаблоны? Поделитесь, кто как решает?
----
Поляков считает — AI, код и кейсы
Еще вспоминал про Figma Make, но там кривой импорт .fig файлов, поэтому опустим.
🎯 Задача
Скопировать готовый дизайн лендинга «Мир Штакетника» (аттач) — обычный коммерческий лендинг производителя металлоштакетника. Цыветные кружочки, плитка, всё как положено.
Заход одинаковый:
1️⃣ .fig файл в Claude Design
2️⃣ Figma-файл + скриншот в Lovable Web
3️⃣ MCP Figma в Lovable Desktop
💥 Что получилось
Победителя нет — все справились с косяками. Но Claude единственный пошёл в глубину: вытащил картинки, точные отступы, конфигурации блоков. Даже отказался использовать фотографию забора с артефактом Shutterstock — оставил только фон с домом. Бонусом нарисовал мобильную версию: закреплённая шапка.
Короче Claude Design сделал самую близкую копию.
Lovable в обоих вариантах читал дизайн поверхностно. Тянула отступы, генерировала своё. Получились симпатичные лендинги, но от оригинала далеко.
А ещё есть Figma Make — но туда любой .fig файл не положить, только фреймы и компоненты из Figma Design. Парадокс внутри одного продуктового семейства.
🎨 Фишка, ради которой стоит попробовать
Пока делал копию дизайн системы из фигма файла, то получил такой тиндер из элементов дизайна — ставишь лайк/дизлайк компонентам дизайн-системы. Кнопки, цвета, шрифты выкладываются отдельными карточками с параметрами вроде «pill 40 px, hover lifts to #56C091».
У моего проекта получилось 19 карточек кнопок, 20 цветовых гипотез, 21 типографическая шкала на ревью.
💡 Обычно промпт-дизайн требует описывать стили словами. Здесь собираешь UI-kit как в Tinder: лайк дизлайк. И кстати это удобно.
💰 Цена вопроса
Claude Design жрёт лимиты агрессивно: за один проект я сжёг 69% недельной квоты Claude. Lovable потратил 15 кредитов — на тарифе за 20 долларов расход почти не заметен.
🔧 Где что применять
Если задача — скопировать готовый Figma-макет один в один, Claude Design делает аккуратнее всех. Прям очень глубокая проработка. Для генерации сайта с нуля без референса Lovable, Figma Make или Google Stitch отработают дешевле и быстрее.
Кстати, а ведь наверняка типичная задача: преобразовать набросок Фигмы в сверстанные шаблоны? Поделитесь, кто как решает?
----
Поляков считает — AI, код и кейсы