Урок 4: Свой сайт через Claude Design — КП, дизайн из референса и шаблоны

Главный инструмент урока, Claude Design. Это дизайнер от Anthropic внутри claude.ai (иконка-палитра в левом меню): вы словами описываете, что хотите, а он рисует готовый продукт. Сайты, презентации, баннеры, без навыков дизайна и кода.

Четыре типа проектов (выбираете при создании): Prototype, макет сайта или приложения. Slide deck, презентация. From template, старт с готового шаблона. Other, всё остальное, лендинги, баннеры, инфографика.

Два режима качества. Wireframe, серый набросок только со структурой, где меню, где кнопки. High fidelity, готовый дизайн с цветами и картинками. Правило: сначала структура, потом красота.

Дизайн-система. Загружаете один раз логотип, цвета и шрифты бренда, и все проекты выходят в едином фирменном стиле. Claude может подтянуть бренд и из вашего сайта или кодовой базы.

Начнём с лёгкого, с презентации. Освоите инструмент за пару минут, а потом теми же кнопками соберём сайт.

Вы освоили инструмент на презентации. Логика та же, переходим к сайту. Создаёте новый проект, тип Prototype, режим High fidelity.

Референс, ваш главный приём. Нашли в интернете красивый сайт, который вам нравится, сделали скриншот. В Claude Design жмёте Add screenshot и загружаете картинку. Важно: он принимает изображение, не ссылку (можно также перетащить Figma-файл). Claude разберёт чужой дизайн и соберёт такой же стиль под ваш продукт.

Claude работает как живой дизайнер. Перед тем как рисовать, он анализирует референс, описывает, что видит, задаёт уточняющие вопросы, и только потом делает.

Доводка без кода. После генерации в панели Tweaks двигаете мышкой слайдеры отступов, цветов, размеров прямо в браузере. А режим Edit даёт править текст инлайн прямо на макете (плюс Comment, приколоть замечание, и Draw, набросать поверх).

Дизайн-система снова в деле. Подключили логотип и цвета бренда, весь сайт сразу в вашем стиле.

Макет в Claude Design красивый, но это пока дизайн. Чтобы он стал работающим сайтом, переносим его в Claude Code через Handoff.

Handoff. В Claude Design жмёте Export, выбираете Handoff to Claude Code, и дальше один из двух вариантов: Send to local coding agent, это ваш Claude Code на компьютере, или Send to Claude Code Web.

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

Результат. Claude Code собирает рабочий сайт точно по вашему макету, а не выдумывает с нуля, и запускает его локально. Дальше доводите словами.

Если не хотите идти от референса, есть второй путь: взять готовый топовый блок. Вот три витрины уровня 2026.

21st.dev. Маркетплейс из тысячи готовых блоков. Там есть Interactive 3D Character, 3D-персонаж, который следит за курсором. Magnetic Cursor, кнопки магнитятся к мышке. Container Scroll, картинка вращается при прокрутке. Копируете блок, Claude вставляет.

React Bits. Параллакс-карточки с 3D-глубиной за курсором, живые 3D-модели, 3D-галерея. Полностью бесплатный, с открытым кодом.

Aceternity. Бесплатные премиум-секции: Hero Parallax, картинки плывут с разной скоростью при скролле, Sticky Scroll как у Apple, Lamp и Spotlight эффекты.

Логика простая: зашли на витрину, выбрали блок, скопировали код, Claude встроил и переделал под вас. Никто ничего не верстает руками.

Маленькая оговорка: у каждой витрины есть платный Pro-уровень с премиум-шаблонами. Все названные блоки бесплатны, так что не пугайтесь кнопки Pro, берите из бесплатной части.

Вы освоили навык, за который платят. Лендинг под ключ на рынке стоит от 30 до 150 тысяч рублей, а себестоимость у вас почти нулевая.

Как продавать. Соберите черновик за вечер, покажите клиенту превью-ссылкой Vercel до оплаты, внесите правки по той же ссылке. После оплаты передаёте проект и помогаете подключить его домен.

Из чего складывается цена. Простой лендинг 30-50 тысяч. С анимациями, 3D и формой заявок 60-120 тысяч. Со своим доменом и доработками под клиента до 150 тысяч.

Что впереди. Это был финал второго модуля. Дальше Модуль 3, самый серьёзный. Там вы перестаёте собирать отдельные кусочки и создаёте свой полноценный продукт: от проектирования и кодовой базы до финализации, тестов и запуска. И мы ведём вас шаг за шагом, чтобы на выходе был рабочий инструмент, а не любительская поделка. Чтобы стартовать сразу с проектирования, в домашке вы подключите сервисы для серьёзных проектов. Это уровень, на котором запускают бизнесы.