Как создать веб-сайт с помощью Claude и Figma за 2 часа

Вы можете превратить дизайн Figma в живой, развёрнутый веб-сайт за один день, используя Claude — опыт кодирования не требуется. Рабочий процесс прост: дизайн в Figma, экспортируйте или опишите дизайн Claude, сгенерируйте код, развёртывайте на Vercel или Netlify. Всё это стоит $0, если вы используете бесплатные версии.

Люди публикуют клипы «Сайт за $5000 за 2 часа» в X, но большинство из них пропускают реальные шаги. Это руководство заполняет этот пробел. Каждый промпт включён, каждая точка решения объяснена, и компромиссы честны.

Почему это работает сейчас (и не работало год назад)

Год назад преобразование дизайна в код с помощью AI означало вставку скриншота и получение грубого приближения, которое требовало часов доработки. Сегодня контекстное окно Claude в 1 млн токенов позволяет подать ему всю систему дизайна — цвета, типографию, отступы, детали компонентов — и получить обратно код производственного качества, который хорошо соответствует вашему дизайну с первой попытки.

Ключевой вывод: качество полученного результата зависит почти исключительно от того, как хорошо вы описываете дизайн. Расплывчатые описания дают расплывчатые веб-сайты. Конкретные, структурированные описания дают конкретные, отполированные веб-сайты.

Что вам нужно

Три инструмента, все с бесплатными версиями:

Figma — для вашего дизайна. Бесплатная версия работает хорошо. Если у вас нет дизайна, возьмите бесплатный шаблон из Figma Community и настройте его.

Claude — для генерации кода. Бесплатная версия даёт вам Sonnet, которая хорошо справляется с этой задачей. Pro ($20/мес) даёт вам Opus 4.7 для более сложных сайтов.

Vercel или Netlify — для развёртывания. Обе имеют бесплатные версии. Подключите ваш репозиторий GitHub, запушьте код, сайт живой.

Шаг 1: Подготовьте ваш дизайн Figma

Прежде чем привлекать Claude, организуйте свой файл Figma. Этот шаг определяет качество всего остального.

Ваш дизайн должен иметь чётко определённые страницы (Главная, О нас, Контакты и т.д.), согласованное расстояние и выравнивание, видимую палитру цветов (отметьте точные значения hex), определённые шрифты и адаптивные точки разрыва для рабочего стола и мобильного устройства, если возможно.

Не беспокойтесь о пиксельной точности. Claude хорошо справляется с деталями реализации. Важно то, что ваш дизайн ясно передаёт структуру, иерархию и визуальный стиль.

Совет профессионала: Назовите слои Figma значимо. «Hero Section», «Feature Cards», «Pricing Table» гораздо полезнее вам при написании промптов, чем «Frame 247».

Шаг 2: Экспортируйте информацию вашего дизайна

Claude не может читать файл Figma напрямую, поэтому вам нужно перевести ваш дизайн в информацию, с которой может работать Claude. У вас есть три подхода, от самого простого к самому точному:

Подход A: Скриншот + описание. Сделайте полнострочные скриншоты каждой страницы вашего дизайна. Загрузите их в Claude вместе с письменным описанием макета, цветов и взаимодействий. Это самый быстрый подход и работает удивительно хорошо.

Подход B: Экспорт Figma Dev Mode. Если у вас есть платный план Figma, используйте Dev Mode для экспорта значений CSS, токенов расстояния и спецификаций компонентов. Предоставьте их Claude вместе со скриншотами для более точного результата.

Подход C: Письменная спецификация дизайна. Напишите подробное описание каждого раздела — заголовок, героя, функции, отзывы, подвал — включая цвета, шрифты, размеры и макет. Это займет больше времени, но даст вам наибольший контроль над результатом. Если вы строите без дизайна Figma, это ваш путь.

Шаг 3: Напишите ваш начальный промпт

Это то место, где большинство людей допускает ошибки. Они пишут «построй мне сайт, который выглядит как этот скриншот» и получают универсальный результат. Вот структура промпта, которая постоянно дает качественные результаты:

Чем конкретнее вы описываете то, что видит пользователь, тем лучше результат. Не описывайте код — описывайте опыт. Если вам нужна помощь в улучшении этого промпта перед отправкой, наш бесплатный оптимизатор промптов может помочь структурировать его для лучших результатов.

Шаг 4: Проверьте и повторите

Первый выход Claude обычно захватывает 60–80% вашего дизайна. Оставшиеся 20–40% поступают из итерации. Это шаг, где заканчиваются большинство уроков по «вайб-кодированию», но это то место, где происходит реальное качество.

Проверьте результат, проверив три вещи: соответствует ли макет вашему дизайну? Выглядят ли цвета и типография правильно? Хорошо ли это выглядит на мобильном?

Затем повторите с конкретной обратной связью. Не говорите «сделай лучше». Говорите:

• «Героическому разделу нужен больший вертикальный отступ — добавь 120px сверху и снизу»
• «Карточки функций должны быть в сетке из 3 столбцов на рабочем столе, один столбец на мобильном»
• «Кнопка CTA должна иметь эффект наведения — затемни фон на 10% и слегка масштабируй»
• «Ссылки подвала должны быть расположены в 4 столбцах: Product, Company, Resources, Legal»

Каждый раунд обратной связи должен решить 3–5 конкретных проблем. Три раунда обычно доводят вас до 95% вашего дизайна.

Шаг 5: Добавьте реальное содержимое и изображения

Замените текст-заполнитель вашей актуальной копией. Замените div-ы изображений-заполнителей реальными изображениями. Если вам нужна помощь в написании копии веб-сайта, Claude отлично подходит для этого — предоставьте ему описание вашего бренда и попросите копию домашней страницы, которая соответствует вашему тону.

Для изображений используйте бесплатные ресурсы с Unsplash или Pexels или генерируйте пользовательские изображения с помощью инструмента генерации изображений AI. Поместите файлы изображений в папку /public вашего проекта и обновите атрибуты src.

Шаг 6: Развёртывайте в один клик

Если вы использовали Next.js (рекомендуется), развёртывание на Vercel занимает 60 секунд:

1. Запушьте ваш код в репозиторий GitHub
2. Перейдите на vercel.com и войдите с помощью GitHub
3. Нажмите «Import Project» и выберите ваш репозиторий
4. Vercel автоматически обнаружит Next.js и настроит всё
5. Нажмите «Deploy»

Ваш сайт в сети с URL .vercel.app. Подключите пользовательский домен в настройках Vercel, если у вас есть.

Netlify работает почти идентично — импортируйте из GitHub, автоматически обнаружьте фреймворк, развёртывайте. Обе платформы автоматически обрабатывают SSL, CDN и непрерывное развёртывание. Каждый раз, когда вы запускаете в GitHub, ваш сайт обновляется.

Не уверены, какую платформу развёртывания использовать? Мы написали полное сравнение: Где вы развёртываете после вайб-кодирования?

Распространённые ошибки, которые людей подводят

1. Передача Claude скриншота без письменного контекста. Скриншоты помогают, но Claude нуждается в письменных описаниях цветов, шрифтов, расстояния и макета для получения точного кода. Скриншот — это справка — текст — это инструкция.

2. Попытка построить всё в одном промпте. 6-страничный веб-сайт с анимациями, формами и CMS — это слишком много за один раз. Строить по страницам, по разделам. Начните с главной страницы, сделайте это правильно, затем переходите на следующую страницу.

3. Пропуск адаптивности для мобильных устройств. Если вы не упомянете мобильный в своем промпте, Claude построит макет, поддерживающий только рабочий стол. Всегда включайте «адаптивный для мобильных устройств» в ваши технические требования и тестируйте результат при ширине 375px.

4. Отсутствие тестирования взаимодействий. Нажимайте каждую кнопку, заполняйте каждую форму, прокручивайте каждую страницу. Сгенерированный AI код часто выглядит правильно, но имеет разорванные ссылки, неработающие формы или отсутствующие состояния наведения. Тестируйте перед развёртыванием.

5. Перфекционизм до развёртывания. Отправьте на 90% и повторите. Ваше первое развёртывание не должно быть идеальным — оно должно быть в сети. Вы можете отправлять обновления за секунды.

Строите для клиентов? Прочитайте наше руководство по 5 ошибок безопасности, которые допускает каждый вайб-кодер перед доставкой.

Суть

Рабочий процесс Figma-to-Claude-to-deploy — это самый быстрый способ превратить дизайн в работающий веб-сайт без написания кода самостоятельно. Качество зависит от конкретности ваших промптов, а не от навыков кодирования. Три раунда итерации обычно доводят вас от черновика к готовому к продакшену.

Начните с простого проекта — портфолио или лендинга — и пройдите через весь цикл один раз. Второй раз займёт половину времени, потому что вы будете точно знать, как структурировать ваши промпты.

Не уверены, какой AI инструмент лучше всего для вашего рабочего процесса? Пройдите нашу 60-секундную викторину Model Picker, чтобы узнать, или смотрите полное сравнение State of AI Models.

Раскрытие: Некоторые ссылки в этой статье являются партнёрскими ссылками. Мы рекомендуем только инструменты, которые мы личного тестировали и используем регулярно. Смотрите нашу полную политику раскрытия информации.