AI Cube

Что это и что это НЕ

Это перенос структуры проверенного лендинга на твой бренд: раскладка, иерархия блоков, логика секций. Не воровство контента и не копирование текстов — берёшь скелет, который конвертит, и наполняешь своим.

✓ Это можно

Раскладка и иерархия секций
Логика блоков, которая конвертит
Сетка, ритм, расположение CTA

✕ Это НЕ

Копирование текстов и офферов
Изображения бренда-донора
Чужие логотипы и айдентика

Шаг 1: Открой режим прототипа

Зайди в Claude в режим дизайна/прототипа (claude.ai · Design / Artifacts) и выбери «Прототип». Та же пара кликов, что и обычно, но задача — собрать макет.

Клон сайта за 3 шага: прототип, ссылка, пересборка

Где это? Режим Design / Artifacts доступен прямо в чате Claude. Просто попроси собрать прототип страницы — модель сама развернёт визуальный холст с макетом.

Шаг 2: Вставь ссылку как референс раскладки

Дай ссылку на публичный сайт и короткий бриф под свой бренд. Чем конкретнее бриф — тем меньше итераций потом. Хороший бриф закрывает четыре вещи: палитру, типографику, тон и какие секции оставить, а какие выкинуть.

◆ PROMPT

Возьми структуру этой страницы как референс раскладки.
Пересобери под мой бренд:
— палитра: сине-лаймовая
— шрифт: гротеск
— тон: чистый минимал
Контент пиши свой, копировать тексты не нужно.

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

◆ PROMPT

Используй раскладку этой страницы как скелет, но не копируй тексты и картинки.
Бренд:
— палитра: #0B5FFF (основной), #C6FF3D (акцент), почти-белый фон
— типографика: крупный гротеск в заголовках, читаемый sans в тексте
— тон голоса: уверенный, без воды, для B2B-аудитории
Секции:
— ОСТАВЬ: hero, блок «как это работает», соцдоказательство, цены, FAQ
— УБЕРИ: блок с командой и баннер кук
— ДОБАВЬ: одну секцию сравнения «до / после»
Все тексты сгенерируй с нуля под мой оффер: [короткое описание продукта].

Бриф = договор с моделью. Если не задать палитру и шрифт, Claude уйдёт в дефолт (Inter + светлый фон + карточки) и макет будет похож на любой другой AI-лендинг. Задаёшь направление словами — получаешь свой стиль, а не усреднённый.

Шаг 3: Смотри как пересобирает

Claude выдаёт макет в реальном времени. Сравниваешь до/после, правишь голосом:

Правки голосом

«сделай hero выше»

«убери третий блок»

«поменяй кнопки на лаймовые»

Правки формулируй как живому дизайнеру — короткими адресными командами, по одной мысли за раз. Так модель не ломает остальной макет:

◆ PROMPT

— сделай hero выше и подними заголовок крупнее
— убери третий блок, он лишний
— между ценами и FAQ добавь секцию отзывов в две колонки
— кнопки сделай лаймовыми, скругление поменьше
— на мобильном собери всё в одну колонку

Когда макет устраивает — экспортируй и передавай дальше. Варианты хендоффа:

Код

Попроси отдать готовый HTML/CSS или React-компонент — вставляешь в проект.

Скриншот

Сохрани превью макета как референс для дизайнера или разработчика.

Бриф для команды

Структуру + бренд-правила оформи как ТЗ — команда доводит детали.

Готово за ~30 секунд на первый макет, дальше экспортируешь или отдаёшь команде на финальную доводку.

Частые ошибки

Девять из десяти провалов — из-за этих трёх:

✕Копируешь тексты вместо структуры

Берёшь чужие заголовки и офферы дословно. Это уже не референс, а плагиат — и звучит фальшиво под твой продукт. Тащи только скелет, тексты пиши с нуля.

✕Не задаёшь бренд-бриф

Просишь «пересобери под меня» без палитры, шрифта и тона. Claude уходит в дефолт, и макет выглядит как любой AI-лендинг. Бренд задаётся словами в брифе.

✕Берёшь чужие изображения и логотипы

Фирменные иллюстрации, фото и лого бренда-донора — не твои. Это и юридический риск, и потеря узнаваемости. Ставишь свои визуалы или плейсхолдеры.

3 шага кратко

Весь процесс укладывается в три действия:

1Открой прототипРежим дизайна

claude.ai · Design

2Вставь ссылку+ бриф под бренд

любой публичный сайт как референс структуры

3Жди пересборку~30 секунд

правишь голосом и экспортишь

Важно про этику

Граница между референсом и воровством простая. Держи её:

Копируем структуру и логику, не тексты и не изображения бренда-донора. Свой контент, свои офферы, своя айдентика. Чужие логотипы и фирменные иллюстрации не тащим — только скелет раскладки.

Почему это работает

Раньше на просьбу «собери лендинг» модель выдавала один и тот же усреднённый макет — светлый фон, шрифт Inter, три карточки, фиолетовый градиент. Сейчас вокруг Claude выросла целая экосистема дизайн-скиллов, которые задают модели явное визуальное направление до того, как она напишет первую строку кода. Именно поэтому пересборка «сначала макет, потом наполнение» выходит чистой.

Главный пример — официальный скилл frontend-design от Anthropic. По сути это набор правил: перед генерацией UI Claude сначала фиксирует эстетику — типографику, палитру, ритм отступов, тон — и только потом кодит. Без таких рамок модель тянется к самому частому и безопасному варианту из обучающих данных, поэтому страницы у всех получаются похожими. Жёсткий бриф выталкивает её из «центра вероятностей» к краю, где появляется характер.

Из обсуждений в соцсетях

Разработчик @sitinme пересказывает суть скилла так: frontend-design — это не новая модель и не отдельный инструмент, а по сути один файл с правилами. До того как Claude начнёт писать код, ему подкладывают набор дизайн-ограничений: реже использовать заезженные дефолтные шрифты, сначала определить общий стиль, смелее работать с типографикой и цветом — и заранее «забанить» шаблон «фиолетовый градиент + белый фон + три карточки».

Источник: x.com/sitinme →

Тот же принцип лежит и за другими дизайн-скиллами — например, наборами для компонентов в духе shadcn UI: они дают модели готовый словарь интерфейсных элементов и правил композиции. Когда у Claude есть и направление (стиль), и проверенный скелет (раскладка из референса), пересборка под твой бренд получается аккуратной с первого захода, а не превращается в борьбу с дефолтным «AI-видом».

Если делаешь это в Claude Code, дизайн-скилл можно поставить отдельно (через установку скиллов) — тогда правила оформления применяются автоматически к каждой сборке. В режиме Design / Artifacts роль такого «скилла» играет твой бриф из Шага 2.

С чего начать

Четыре шага — и первый макет у тебя на руках. Занимает меньше 10 минут.

1Найди референсыСмотри на раскладку

2-3 лендинга в своей нише с хорошей структурой

2Собери макет в ClaudeРежим Design

по брифу из шага 2 выше

3Наполни своимТексты — твои

свой контент и бренд поверх скелета

4ЭкспортируйФинальная доводка

и допили детали

Клонирование раскладки через Claude — это способ не изобретать структуру с нуля, а опереться на то, что уже доказало конверсию. Дальше всё за тобой: контент, офферы, бренд.