Як створити веб-сайт та анімаційні ефекти рівня 10 000 доларів за допомогою Claude Code

Від встановлення навичок дизайну, збору референсних матеріалів, написання підказок, до реалізації анімації курсора-прожектора, поступового перегляду та виправлення, а потім фінального шліфування – цей повний посібник допоможе навіть без досвіду програмування. Стаття упорядкована та перекладена з monokern X.
(Передумови: Claude Code впроваджує нову команду /goals: розділення виконання та оцінки, щоб уникнути лінощів і брехні AI-агентів)
(Додатковий контекст: Практика: покрокове керівництво з використання 7 агентів для підвищення Vibe Coding до експертного рівня розробки)

Зміст статті

Toggle

• Крок 1: Встановлення навичок дизайну
• Крок 2: Пошук референсних матеріалів
• Крок 3: Написання підказки для створення
• Крок 4: Анімація герой-блоку
• Крок 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 — герой-блок
• 2.png — блок під героєм (роботи у форматі відео + заголовок/опис)
• 6.png — підвал та низ сайту
• 11.png — сторінка окремого проекту
• 12.png — екран завантаження

Щодо сторінки портфоліо (сторінка з усіма роботами), референсний сайт не мав відповідного макету. Я пішов на Pinterest, знайшов інший макет у схожому стилі та зробив окремий скріншот, назвавши його 11.png.

Не намагайтеся повністю скопіювати один сайт – запозичуйте хороші частини з різних сайтів.

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

Крок 3: Написання підказки для створення

На початку підказки використовуйте /ui-ux-pro-max, щоб активувати навички дизайну.

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

Підказка для копіювання:

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

Перед початком створення задай мені будь-які питання, які потребують уточнення.

Останній рядок критичний
Claude зупиниться і поставить 4-6 запитань про стиль, шрифти, макет, рівень анімації, тон контенту. Ваші відповіді стануть основою всього сайту.

Відповідайте конкретно – чим точніше ви тут, тим менше уточнень знадобиться пізніше.

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

Крок 4: Анімація герой-блоку

Розмістити звичайне фото в центрі темного герой-блоку – нудно
Коли користувач рухає мишею, має щось відбуватися.

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

• Весь блок темний
• Моє фото за замовчуванням майже невидиме
• Курсор діє як ліхтарик – «освітлює» мене
• Другий шар – це просто яскравіша, тепліша версія того самого фото

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

«У герой-блоці я хочу ефект ліхтарика/прожектора, що слідує за курсором. Темний фон. Моє фото за замовчуванням майже невидиме. Коли курсор рухається по блоку, він стає прожектором – через м'яке кругове маскування, що слідує за курсором, розкривається яскравіша, тепліша версія фото під ним. Радіус 100-150px, м'які розмиті краї. Будь ласка, реалізуй цей ефект.»

Claude зробив це з першого разу. Ефект точно такий, як описано – коли користувач рухає курсором, фото засвічується в тому місці, куди він вказує.

Крок 5: Перегляд та виправлення

Перед офіційною перевіркою якості спочатку самостійно прокрутіть сайт і запишіть усе, що здається не так.

Мій список після першої збірки:

• Переходи між сторінками здаються різкими – потрібне плавне згасання/поява
• Ефект прожектора має помітну затримку, не встигає за курсором
• Деякі елементи виходять за межі екрану, не адаптуються до розміру
• Шрифти не відповідають референсному сайту – виглядають більш узагальнено, ніж естетика Il Capo

Запишіть усі проблеми, а потім надішліть їх одним повідомленням:

«Ось кілька проблем, які потрібно виправити. Будь ласка, обробіть усі:

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

Надсилання всіх проблем одним повідомленням дуже важливе.

Крок 6: Фінальне шліфування

Після виправлення очевидних помилок проведіть структуровану перевірку якості. Вставте це в Claude:

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

Claude оцінить кожен пункт. Прочитавши, погодьтеся або не погодьтеся з кожним пунктом, потім зберіть проблеми, які хочете виправити, в одну підказку та надішліть її одним повідомленням.

Не виправляйте те, з чим не погоджуєтеся. Ви знаєте свій сайт краще.

Результат

Ви отримаєте хороший сайт. Не ідеальний – але достатньо хороший.

Під час першої збірки деякі речі не будуть ідеальними: можливо, мобільна версія потребує ще одного проходу, або якась анімація трохи не така. Це нормально.

Починайте ітерації звідси. Щодня знаходьте одну річ для вдосконалення та виправляйте її.