Как создать веб-сайт и анимацию уровня 10 000 долларов с помощью Claude Code.

От установки дизайнерских навыков, сбора референсных материалов, написания подсказок для сборки до реализации анимации курсора-прожектора, поэтапной проверки и исправления, а затем финальной шлифовки — это полное руководство позволит вам освоить всё даже без опыта программирования. Эта статья основана и переведена из статьи monokern в X.
(Предыстория: Claude Code представил команду /goals: разделение выполнения и оценки, чтобы избежать лени и лжи AI-агентов)
(Дополнительный контекст: Практика: пошаговое руководство по использованию 7 агентов для повышения Vibe Coding до экспертного уровня разработки)

Содержание статьи

Toggle

• Шаг 1: Установка дизайнерских навыков
• Шаг 2: Поиск референсных материалов
• Шаг 3: Написание подсказки для сборки
• Шаг 4: Анимация hero-блока
• Шаг 5: Проверка и исправление
• Шаг 6: Шлифовка
• Результат

Агент берёт 5000 долларов за создание такого качественного сайта-портфолио.

Я сделал свой за 2 часа. Вот полный процесс.

Это настоящая запись реализации, а не шаблонное руководство.

Я использую своё портфолио в качестве примера: референсы, которые я реально использовал, подсказки, которые я реально отправлял, баги, с которыми я реально столкнулся и исправил.

Никакого опыта программирования не требуется.

Шаг 1: Установка дизайнерских навыков

По умолчанию дизайн Claude посредственный. Те же шрифты, та же типографика, тот же плоский вид. Два навыка решают эту проблему.

• Frontend Design — разработан Anthropic, работает в фоне, блокирует чрезмерно используемые шрифты вроде Inter, продвигает более смелую типографику, улучшает качество текста.

Вставьте это в Claude Code:

Install this skill: github.com/anthropics/skills/tree/main/frontend-design

При появлении запроса разрешите изменения, установите глобально.

• UI/UX Pro Max — 57 стилей интерфейса, 95 цветовых схем, 56 пар шрифтов, вы вызываете их напрямую при сборке.

Вставьте это в Claude Code:

Install this plugin using NPM: github.com/nextlevelbuilder/ui-ux-pro-max

Переключите селектор режима в Auto mode, чтобы Claude не спрашивал разрешения на каждом шаге.

Шаг 2: Поиск референсных материалов

Не описывайте идеальный сайт в пустоте — покажите Claude, как вы хотите, чтобы он выглядел.

Моё портфолио использовало «Il Capo Production» с Awwwards в качестве основного референса.

awwwards.com/sites/il-capo-production

Тёмный, кинематографичный стиль — именно то, что я хотел.

Вот как я это сделал на практике:

Я не делал скриншот всей страницы и не говорил «сделай мне так», а вырезал по блокам те части, которые мне нравились:

• 1.png — hero-блок
• 2.png — блок под hero (работы в формате видео + заголовок/описание)
• 6.png — футер и нижняя часть сайта
• 11.png — страница отдельного проекта
• 12.png — экран загрузки

Для страницы портфолио (страница со списком всех работ) у референсного сайта не было подходящего макета. Я нашёл на Pinterest похожий, но другой макет и вырезал его отдельно, назвав 11.png.

Не пытайтесь полностью скопировать один сайт — заимствуйте хорошие части из разных.

Поместите все материалы в папку /reference внутри проекта.

Шаг 3: Написание подсказки для сборки

В начале подсказки используйте /ui-ux-pro-max, чтобы активировать дизайнерские навыки.

Вот точная подсказка, которую я использовал для своего портфолио:

Подсказка для копирования:

/ui-ux-pro-max
Создай высококлассный персональный сайт-портфолио для фронтенд-разработчика. Он должен выглядеть дорого, современно и технически впечатляюще,
с элегантными анимациями, которые плавно загружаются на любом устройстве.
Используй дизайн-референсы из папки reference: 1.png — hero-блок, 2.png — блок под hero
(формат видео + заголовок/описание для работ), 6.png — футер/низ сайта, 7.png — страница портфолио со списком всех работ,
11.png — пример страницы отдельного проекта при нажатии на любую работу из портфолио, 12.png — экран загрузки.
В центре hero-блока размести моё фото, используя me.png.
Для всех placeholder-изображений работ/проектов используй example.png.

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

Последняя строка — ключевая
Claude остановится и задаст 4–6 вопросов о стиле, шрифтах, макете, степени анимации, тоне контента. Твои ответы станут основой всего сайта.

Отвечай конкретно — чем точнее здесь, тем меньше переписки в дальнейшем.

После твоих ответов Claude тратит около 5 минут на планирование, затем около 10 минут на сборку. Первый вывод уже довольно солидный.

Шаг 4: Анимация hero-блока

Разместить обычное фото в центре тёмного hero-блока — скучно.
При движении мыши пользователя должно что-то происходить.

Я придумал идею с прожектором для своего портфолио:

• Весь блок тёмный
• Моё фото по умолчанию почти невидимо
• Курсор работает как фонарик — «освещает» меня
• Второй слой — просто более яркая, тёплая версия того же фото

Я описал эту концепцию Claude и попросил её реализовать:

«В hero-блоке я хочу эффект фонарика/прожектора для курсора. Тёмный фон. Моё фото по умолчанию почти невидимо. Когда курсор движется по блоку, он действует как прожектор — через мягкий круглый маску с размытыми краями, следующую за курсором, открывается более яркая, тёплая версия фото под ним. Радиус 100–150px, мягкое размытие по краям. Реализуй этот эффект.»

Claude сделал это с первой попытки. Эффект полностью соответствует описанию — пользователь двигает курсор, и фото загорается в том месте, куда он указывает.

Шаг 5: Проверка и исправление

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

Мой список после первой сборки:

• Переходы между страницами кажутся резкими — нужны плавные затухания
• Эффект прожектора заметно запаздывает за курсором
• Некоторые элементы выходят за пределы экрана, не адаптируются
• Шрифты не соответствуют референсу — выглядят более универсально, чем эстетика Il Capo

Запишите все проблемы, затем отправьте всё сразу:

«Вот несколько проблем, которые нужно исправить, обработай все:

2. [описание проблемы 1]
3. [описание проблемы 2]
4. [описание проблемы 3]»

Очень важно отправлять все проблемы сразу.

Шаг 6: Шлифовка

После исправления явных багов проведите структурированную проверку качества. Вставьте это в Claude:

«Проверь сайт по следующим критериям и честно укажи, что нужно улучшить:
— Типографика (используем ли мы чрезмерно используемые AI-шрифты вроде Inter?)
— Цвета (цветовая схема сдержанная или хаотичная?)
— Иерархия (правильно ли размер текста направляет взгляд?)
— Анимации (плавные и осмысленные или дерганые и случайные?)
— Мобильная версия (действительно разработана для телефона или просто уменьшенная десктопная версия?)
— Текст (сдержанный и конкретный или универсальный AI-филлер?)»

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

Не исправляйте пункты, с которыми не согласны. Вы знаете свой сайт лучше, чем он.

Результат

В итоге вы получите крепкий сайт. Не идеальный — но достаточно хороший.

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

Отсюда начинайте итерации. Каждый день находите одну вещь для улучшения и исправляйте её.