Процесс создания лендинга с Claude: от позиционирования и референсов до дизайн-системы, вёрстки и ручной проверки результата.
Не нашли ответ?
Эта вики собрана из обсуждений сообщества. Спросите в чате, там помогут.
Открыть чат в TelegramСобрано в Sveska из открытых обсуждений сообщества. Авторы сообщений не указываются.
Обновлено
Красивый лендинг с Claude лучше получается не по запросу «сделай красиво», а при наличии чёткой спецификации, визуальных референсов и собственных компонентов. Claude можно использовать для проработки структуры и вёрстки, но результат требует ручной проверки и доработки.
Собирайте лендинг по слоям:
Сначала с ИИ можно проработать спецификацию, структуру и содержание. Затем собирать дизайн и вёрстку в Claude Design либо переносить в код уже подготовленный дизайн.
Покажите несколько сайтов, которые считаете красивыми, и опишите желаемый результат через конкретные визуальные референсы. Это помогает получить решение, более близкое к выбранному стилю.
Не стоит ограничиваться абстрактной просьбой сделать лендинг «красивым». Полезнее передать Claude конкретные референсы и собственные компоненты.
Для работы с дизайн-системой и сборки страниц из собственных компонентов в обсуждении рекомендуют Claude Design: claude.ai/design.
Чтобы результат выглядел цельнее:
Такой подход уменьшает вероятность полностью шаблонного дизайна.
Да. Если дизайн подготовлен в Figma или другим способом, Claude можно использовать для быстрого переноса дизайна в код и последующего размещения на хостинге. В этом сценарии ИИ выступает прежде всего как инструмент вёрстки, а не самостоятельный дизайнер.
Для генерации фронтенда упоминался frontend-crafter из проекта vibe-tools. По сообщению из обсуждения, с ним удалось получить неплохой результат с первой попытки.
В качестве примера сайта, собранного фабрикой агентов от идеи до сайта и контента, приводился cyadviso.com. При этом техническую часть такого результата постоянно перепроверяют и дорабатывают вручную.
Важно: Claude сам по себе обычно не создаёт качественные и нестандартные графические ассеты. Их нужно заранее подготовить с дизайнером, реализовать в коде или дать Claude конкретный референс с нужной графикой. Без этого сайты, созданные Claude Code, часто выглядят шаблонно и некачественно.
Важно: сгенерированный результат нельзя выпускать без человеческой проверки и доработки. Техническую часть следует постоянно перепроверять, а Claude — давать итеративный фидбек, как джуниору.
Креативные и UI/UX-предложения Claude оценивают неоднозначно: он может помочь в брейншторминге, но не всегда предлагает достаточно хорошие идеи. При ясном понимании нужного результата и последовательном фидбеке его можно использовать в дизайн-процессе как помощника.
Статья собрана по сообщениям за июль 2026 года.