БЕРЕЗЕНЬ 2026 · АКТУАЛЬНО

Claude Code для
веб-розробки

Курс створено групою IT-компаній FRACTAL для українських підприємців та продуктових команд

Від ідеї до живого сайту за 30 хвилин. Skills, MCP, Figma, WordPress, Cloudflare — все в одному курсі.

Почати курс

уроків

модулів

30хв

перший сайт

Skills MCP Figma WordPress Cloudflare Playwright

1.1 Що таке Claude Code

Модуль 1 · Основи

Цілі уроку

Зрозуміти, що таке Claude Code і чим він відрізняється від звичайного чату
Дізнатися, де Claude Code працює (CLI, Web, IDE, Desktop)
Вивчити ключові терміни: Skills, MCP, CLAUDE.md, Agent Teams, Deploy
Зрозуміти, що можна побудувати вже сьогодні

Claude Code -- це не чат-бот

Claude Code -- це agentic coding tool від Anthropic. На відміну від звичайного чату з AI, Claude Code має доступ до вашого комп'ютера: він може створювати файли, запускати команди в терміналі, працювати з git, розгортати сайти на хостингу -- все через одне вікно.

Уявіть: замість того щоб копіювати код із ChatGPT і вставляти у VS Code, ви просто кажете: "Створи landing page для кав'ярні з темною темою і анімаціями" -- і Claude Code робить все сам.

Де працює Claude Code

Платформа	Опис	Для кого
CLI (Terminal)	Команда `claude` у терміналі	Досвідчені розробники
claude.ai (Web)	Браузерна версія з усіма можливостями	Всі -- найпростіший старт
VS Code / Cursor	Розширення для IDE	Ті, хто вже працює в IDE
Desktop App	Окремий додаток (Mac/Windows)	Зручна альтернатива CLI

Що може Claude Code для веб-розробки

Можливості

Створити сайт з нуля -- landing page, портфоліо, блог, магазин
Редагувати існуючий код -- "зроби кнопку більше" або "зміни колір на синій"
Підключити Figma -- перетворити макет на робочий код
Задеплоїти -- опублікувати сайт на Cloudflare/Vercel/Netlify
Тестувати -- перевірити, чи все працює на різних пристроях
Оптимізувати -- SEO, швидкість, доступність

Ключові терміни

Термін	Що це	Аналогія
Skills	Спеціалізовані інструкції, що завантажуються на вимогу (~400 токенів)	Як плагіни у Photoshop
MCP	Model Context Protocol -- стандарт підключення зовнішніх сервісів	Як USB-порт для AI
CLAUDE.md	Файл-бриф для AI: хто ви, що будуєте, які правила	Як ТЗ для фрілансера
Agent Teams	Кілька AI-агентів, що працюють паралельно	Як команда розробників
Deploy	Публікація сайту в інтернет	Як натиснути "Опублікувати" в WordPress

Важливо

Claude Code потребує підписку Claude Pro ($20/міс) або Claude Max ($100-200/міс). Безкоштовний план не підтримує Agent mode та Skills.

1. Чим Claude Code відрізняється від звичайного чату з AI?

Нічим, це той самий чат Claude Code має доступ до файлової системи, терміналу і може деплоїти Claude Code працює тільки з Python

2. Що таке MCP?

Мова програмування Model Context Protocol -- стандарт підключення зовнішніх сервісів Формат зображень

3. Де найпростіше почати працювати з Claude Code?

Тільки в терміналі Linux Тільки у VS Code У браузері на claude.ai

Практика: Перший промпт

Відкрийте claude.ai та напишіть промпт: "Створи простий HTML-файл з заголовком 'Привіт, світ!' та темним фоном". Подивіться, що згенерує Claude. Скопіюйте код у файл index.html і відкрийте у браузері.

Claude створить HTML-файл з <body style="background:#111;color:#fff"> та заголовком <h1>. Збережіть його як index.html, двічі клікніть на файл -- він відкриється у браузері. Це ваш перший сайт, створений за допомогою AI!

1.2 Екосистема: Skills + MCP + CLI

Модуль 1 · Основи

Цілі уроку

Зрозуміти повний пайплайн від ідеї до живого сайту
Навчитися використовувати Skills для дизайну та розробки
Зрозуміти, як MCP розширює можливості Claude Code
Дізнатися про CLI-інструменти, що доступні Claude Code

Пайплайн: від ідеї до сайту

Ось як працює повний цикл створення сайту з Claude Code:

Idea → Skills → Code → MCP → Deploy → Live

Idea -- ви описуєте, що хочете побудувати
Skills -- Claude завантажує спеціалізовані інструкції для дизайну
Code -- Claude пише HTML/CSS/JS (або React/Svelte/тощо)
MCP -- підключає зовнішні сервіси (Figma, Cloudflare, тощо)
Deploy -- публікує на хостинг через CLI
Live -- ваш сайт доступний всьому світу

Skills -- спеціалізовані інструкції

Skills -- це невеликі пакети інструкцій (~400 токенів), які Claude завантажує на вимогу. Станом на березень 2026 року є сотні Skills для різних задач. Для веб-розробки найважливіші:

frontend-design -- перетворює Claude на дизайнера (277K+ установок)
theme-factory -- генерує готові теми з палітрами кольорів
web-artifacts-builder -- React + Tailwind + shadcn компоненти

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

MCP -- Model Context Protocol

MCP -- це відкритий стандарт, який дозволяє Claude Code підключатися до зовнішніх сервісів. Станом на березень 2026 року існує 1000+ MCP-серверів.

Кожен MCP-сервер дає Claude нові "суперсили":

MCP-сервер	Що дає
Figma MCP	Читає макети з Figma, перетворює на код
Cloudflare MCP	Деплоїть сайти, створює бази даних, KV-сховища
Playwright MCP	Автоматичне тестування у браузері
Context7 MCP	Актуальна документація бібліотек
WordPress MCP	Створення та редагування WordPress-сайтів

CLI -- командний рядок

Claude Code має доступ до командного рядка (терміналу) і може запускати будь-які інструменти:

npm/pnpm -- встановлення JavaScript-бібліотек
git -- контроль версій коду
firebase -- деплой на Firebase Hosting
wrangler -- деплой на Cloudflare Pages/Workers
gcloud -- Google Cloud Platform

Вам не потрібно знати ці команди -- Claude виконає їх самостійно. Але розуміння того, що вони існують, допоможе ставити правильні запити.

Ключовий принцип

Claude Code -- це не просто генератор коду. Це повноцінний розробник, який вміє проектувати, писати код, тестувати і деплоїти. Ваша роль -- бути продакт-менеджером: описувати, що потрібно, і давати фідбек.

1. Скільки MCP-серверів існує станом на 2026 рік?

Близько 50 Близько 1000+ Рівно 10

2. Що таке Skills у контексті Claude Code?

Навички програміста Спеціалізовані інструкції (~400 токенів), що завантажуються на вимогу Платні плагіни

Практика: Дослідження MCP

Зайдіть на github.com/modelcontextprotocol/servers і знайдіть три MCP-сервери, які були б корисні для вашої роботи (наприклад, Notion MCP для контенту, Stripe MCP для платежів). Запишіть їхні назви.

Популярні MCP-сервери для веб-розробки: Figma (дизайн), Cloudflare (деплой), Playwright (тестування), Netlify (альтернативний деплой), Notion (контент), Supabase (бекенд/база даних). Вибір залежить від вашого стеку.

1.3 CLAUDE.md -- бриф для AI

Модуль 1 · Основи

Цілі уроку

Зрозуміти, що таке CLAUDE.md і навіщо він потрібен
Навчитися структурувати файл CLAUDE.md для веб-проекту
Написати свій перший CLAUDE.md

Що таке CLAUDE.md

CLAUDE.md -- це спеціальний файл, який Claude Code читає автоматично на початку кожної сесії. Він містить контекст вашого проекту: що ви будуєте, для кого, в якому стилі, які технології використовуєте.

Без CLAUDE.md Claude Code працює "наосліп" -- він не знає вашого бренду, не розуміє стиль, може вибрати не ті технології. З CLAUDE.md -- він стає вашим особистим розробником, який знає проект зсередини.

Де розміщувати CLAUDE.md

Файл CLAUDE.md розміщується в кореневій директорії проекту:

my-website/ ├── CLAUDE.md <-- тут! ├── index.html ├── style.css └── images/

Claude Code автоматично знаходить і читає цей файл. Не потрібно нічого налаштовувати.

Структура CLAUDE.md для веб-проекту

Ідеальний CLAUDE.md для сайту складається з 4 блоків:

Brand -- назва, місія, тон комунікації, аудиторія
Design Direction -- кольори, шрифти, стиль, настрій
Tech -- технології, фреймворки, хостинг
Sections -- структура сайту, які секції потрібні

Приклад: CLAUDE.md для кав'ярні

# CLAUDE.md -- Зерно Coffee Shop ## Brand - Назва: Зерно - Місія: Щоденна кава, що надихає - Тон: теплий, мінімалістичний, крафтовий - Аудиторія: молоді професіонали 25-40 років - Мова: українська ## Design Direction - Стиль: мінімалізм з теплими акцентами - Палітра: #1a1a1a (фон), #f5e6d3 (крем), #8b6914 (золото), #2d5016 (зелень) - Шрифти: Playfair Display (заголовки), Inter (текст) - Настрій: затишно, по-домашньому, якісно - Без стокових фото. Використовувати абстрактні форми та ілюстрації. ## Tech - Чистий HTML/CSS/JS (без фреймворків) - Мобільний перший (mobile-first) - Деплой: Cloudflare Pages - Оптимізація: Lighthouse 90+ ## Sections 1. Hero -- повноекранний з назвою та одним реченням 2. Меню -- 3 категорії (еспресо, фільтр, десерти) 3. Про нас -- історія в 2-3 реченнях 4. Локація -- адреса, години роботи, карта 5. Footer -- соцмережі, копірайт

Як Claude використовує CLAUDE.md

Коли ви пишете "Створи hero-секцію", Claude вже знає:

Назва бренду -- "Зерно"
Палітра кольорів -- темний фон, кремові акценти
Шрифт заголовків -- Playfair Display
Тон -- теплий, мінімалістичний
Що hero має бути повноекранним

Без CLAUDE.md ви б мусили описувати все це в кожному промпті.

Типові помилки

Занадто загально -- "красивий сайт" не дає Claude конкретної інформації
Занадто детально -- не потрібно описувати кожен піксель, Claude має свободу для творчості
Забули шрифти -- без вказівки шрифтів Claude обере Inter або Roboto (типовий AI slop)
Немає прикладів -- якщо є референси, додайте їх

1. Де розміщується файл CLAUDE.md?

У папці .claude/ У кореневій директорії проекту На сервері Anthropic

2. Які 4 основні блоки має CLAUDE.md для веб-проекту?

HTML, CSS, JS, Deploy Brand, Design Direction, Tech, Sections Header, Body, Footer, Scripts

Практика: Напишіть CLAUDE.md

Виберіть реальний або вигаданий бізнес (перукарня, піцерія, фотостудія -- будь-що) і напишіть для нього CLAUDE.md з усіма 4 блоками: Brand, Design Direction, Tech, Sections. Мінімум 15 рядків.

Перевірте свій CLAUDE.md за чеклістом: (1) Є назва бренду і місія? (2) Вказані конкретні кольори (hex-коди)? (3) Вказані конкретні шрифти (не "красивий")? (4) Визначені секції сайту? (5) Обрана технологія і хостинг? Якщо все є -- вітаємо, ваш CLAUDE.md готовий!

1.4 Встановлення та перший запуск

Модуль 1 · Основи

Цілі уроку

Встановити Claude Code на свій комп'ютер (CLI або Desktop)
Налаштувати робочу директорію для першого проекту
Виконати перший запуск і зрозуміти інтерфейс

Варіант 1: claude.ai (без встановлення)

Найпростіший спосіб -- працювати прямо в браузері на claude.ai. Потрібна тільки підписка Claude Pro або Max.

Відкрийте claude.ai
Виберіть режим Agent (іконка кола зі стрілками)
Почніть писати промпти -- Claude створюватиме файли прямо у веб-інтерфейсі

Варіант 2: CLI (Terminal)

Для повного контролю встановіть CLI-версію:

# macOS / Linux npm install -g @anthropic-ai/claude-code # Перевірка claude --version # Перший запуск у папці проекту mkdir my-website && cd my-website claude

Варіант 3: VS Code Extension

# У VS Code: # 1. Cmd+Shift+X (розширення) # 2. Пошук "Claude Code" # 3. Встановити # 4. Cmd+Shift+P → "Claude: Open"

Структура робочої директорії

Claude Code працює в контексті поточної папки. Створіть окрему папку для кожного проекту:

projects/ ├── my-coffee-shop/ ← окремий проект │ ├── CLAUDE.md │ ├── index.html │ └── style.css ├── my-portfolio/ ← інший проект │ ├── CLAUDE.md │ └── ... └── client-landing/ ← ще один ├── CLAUDE.md └── ...

Перший запуск -- що побачите

Коли ви запускаєте Claude Code вперше в новій папці, він:

Перевіряє наявність CLAUDE.md (і читає його, якщо є)
Аналізує структуру файлів у папці
Чекає на ваш перший промпт

Просто напишіть: "Створи простий landing page з темною темою" -- і Claude почне працювати.

Часті проблеми при встановленні

npm not found -- встановіть Node.js з nodejs.org
Permission denied -- на Mac/Linux додайте sudo або налаштуйте npm prefix
Claude не бачить файли -- переконайтесь, що ви в правильній директорії

1. Який найпростіший спосіб почати працювати з Claude Code?

Встановити CLI через npm Відкрити claude.ai у браузері і вибрати Agent mode Встановити VS Code Extension

2. Що Claude Code робить першим при запуску у новій папці?

Створює index.html автоматично Перевіряє наявність CLAUDE.md і аналізує структуру файлів Підключається до GitHub

Практика: Перший запуск

Створіть нову папку "test-project", відкрийте Claude Code (у браузері або CLI) і напишіть: "Покажи мою поточну структуру файлів і створи файл hello.html з заголовком 'Hello World' та темним фоном". Перевірте, що файл створився.

Claude створить hello.html зі стандартною HTML-структурою. У CLI ви побачите, як він виконує команди (mkdir, створення файлу). У веб-версії (claude.ai) файл з'явиться в артифактах. Відкрийте файл у браузері, щоб побачити результат.

1.5 Промпт-інженерія для веб-розробки

Модуль 1 · Основи

Цілі уроку

Навчитися формулювати промпти, що дають передбачуваний результат
Зрозуміти різницю між поганим і хорошим промптом
Вивчити формулу ефективного промпту для веб-розробки

Погані промпти vs хороші промпти

Поганий промпт	Хороший промпт
"Зроби красивий сайт"	"Створи hero-секцію з темним фоном #0a0a0f, заголовком шрифтом Playfair Display 800, та CTA-кнопкою кольору #0163FF"
"Зміни дизайн"	"Зміни padding секції features з 40px на 80px і додай бордер-bottom 1px solid #2a2a3d між секціями"
"Додай анімацію"	"Додай staggered reveal: кожен елемент hero з'являється з opacity 0→1 і translateY 20px→0, delay між елементами 150ms"
"Зроби під мобільний"	"На @media (max-width: 768px): grid 1 колонка замість 3, font-size h1 1.5rem замість 3rem, padding 20px замість 60px"

Формула ефективного промпту

Що + Де + Як + Стиль

Що -- яку секцію/елемент створити або змінити
Де -- в якому файлі, після якої секції
Як -- конкретні CSS-значення (кольори, розміри, шрифти)
Стиль -- настрій, референс, естетика

# Приклад за формулою: # ЩО: hero-секцію з заголовком, підзаголовком і CTA # ДЕ: на початку index.html # ЯК: 100vh висота, шрифт Crimson Pro 900 для h1, 4rem # СТИЛЬ: натхненний editorial-журналами, багато повітря Створи hero-секцію на початку index.html. Висота 100vh, центрований контент. Заголовок: "Мистецтво кави" -- Crimson Pro 900 4rem, колір #faf5ef. Підзаголовок: "Щоранку нова історія" -- Jost 300 1.2rem, колір #999. CTA: "Переглянути меню" -- фон #c4960c, текст #1a1410, border-radius 4px. Фон: linear-gradient(180deg, #1a1410, #0d0a06). Стиль: editorial, мінімалістичний, як NYT Cooking.

Прийоми ітерації

Корисні фрази для фідбеку

"Збережи все, але зміни тільки..." -- мінімальні зміни без переробки
"Покажи 2 варіанти: A з... та B з..." -- порівняння
"Як у попередньому, але..." -- інкрементальне покращення
"Відкати до версії перед останньою зміною" -- undo через git
"Це виглядає занадто [корпоративно/нудно/перевантажено]" -- емоційний фідбек

Ланцюжок промптів для landing page

# Промпт 1: Фундамент "Створи index.html з базовою HTML-структурою. Підключи шрифти Playfair Display та Jost з Google Fonts. Визнач CSS custom properties з палітрою: --bg: #1a1410, --cream: #f5e6d3, --gold: #c4960c." # Промпт 2: Hero "Додай hero-секцію з заголовком, підзаголовком та CTA." # Промпт 3: Фідбек "Заголовок занадто маленький, збільш до 5rem. Додай text-shadow для глибини. CTA має бути ширшою -- padding 16px 48px." # Промпт 4: Наступна секція "Тепер додай секцію меню під hero. 3 колонки: Еспресо, Фільтр, Десерти."

1. З чого складається формула ефективного промпту?

HTML + CSS + JS + Deploy Що + Де + Як + Стиль Просто "зроби красиво"

2. Який промпт дасть кращий результат?

"Зроби кнопку більше" "Збільш padding CTA-кнопки до 16px 48px і font-size до 1.1rem" "Зміни дизайн кнопки"

Практика: Промпт за формулою

Виберіть будь-яку секцію сайту (hero, features, pricing) і напишіть промпт за формулою "Що + Де + Як + Стиль". Включіть мінімум: 2 конкретні CSS-значення (hex-кольори або px-розміри), назву шрифту і один стилістичний референс.

Приклад: "Створи pricing-секцію (ЩО) після features в index.html (ДЕ). 3 картки з border 1px solid #2a2a3d, padding 32px, border-radius 12px (ЯК). Середня картка виділена border-color #0163FF. Стиль: як у stripe.com/pricing -- чистий, з акцентом на рекомендований план (СТИЛЬ)."

2.1 Дизайн-скіли: перетвори Claude на дизайнера

Модуль 2 · Дизайн без дизайнера

Цілі уроку

Дізнатися про ключові Skills для дизайну
Зрозуміти, як комбінувати Skills для максимальної якості
Вивчити "quality pipeline" від базового UI до production-ready

Головні Skills для веб-дизайну

frontend-design (277K+ інсталяцій)

Найпопулярніший Skill для фронтенд-дизайну. Перетворює Claude на досвідченого UI/UX-дизайнера з розумінням типографії, кольорових палітр, spacing, та responsive дизайну.

Що робить: додає системний промпт з правилами якісного дизайну, уникаючи "AI slop" -- типового, нудного вигляду, характерного для AI-генерованих інтерфейсів.

theme-factory

Генерує готові теми з палітрами кольорів, що поєднуються між собою. Включає CSS-змінні, які можна одразу використовувати.

web-artifacts-builder

Для React-проектів. Створює компоненти з Tailwind CSS та shadcn/ui -- готові до production.

Community Skills

Окрім офіційних Skills, спільнота створює власні. Ось найкращі для веб-розробки:

UI/UX Pro Max

Монстр-skill з 50+ стилів, 97 палітр, 57 пар шрифтів. Включає готові рішення для будь-якого стилю -- від brutalist до editorial.

Інші корисні Skills

brand-guidelines -- генерація повного брендбуку
canvas-design -- дизайн маркетингових матеріалів
UI Skills pack -- набір UI-патернів
Vercel web-design-guidelines -- best practices від Vercel

Quality Pipeline -- від базового до ідеального

Для максимальної якості використовуйте кілька Skills послідовно:

1. frontend-design → базовий якісний UI 2. baseline-ui → перевірка консистентності 3. accessibility → WCAG-перевірка (контраст, alt-текст, aria) 4. motion-performance → анімації + оптимізація швидкості

Порада

Не потрібно використовувати всі Skills одночасно. Почніть з frontend-design -- це покриє 80% потреб. Додавайте інші за необхідністю.

1. Який Skill для веб-дизайну найпопулярніший (277K+ інсталяцій)?

theme-factory frontend-design web-artifacts-builder

2. Який правильний порядок quality pipeline?

accessibility → motion → design → baseline frontend-design → baseline-ui → accessibility → motion-performance motion → design → accessibility → baseline

Практика: Skill-driven дизайн

Спробуйте написати промпт для Claude: "Використовуючи frontend-design skill, створи hero-секцію для фітнес-студії. Темна тема, енергійний стиль, помаранчеві акценти." Порівняйте результат з тим, що Claude генерує без згадки про skill.

З frontend-design Skill результат зазвичай має: (1) нестандартний шрифт (не Inter), (2) продуману типографічну ієрархію, (3) цілісну палітру, (4) анімації при завантаженні. Без Skill -- типовий "AI look" з Inter, фіолетовим градієнтом і стандартними відступами.

2.2 Боротьба з AI slop

Модуль 2 · Дизайн без дизайнера

Цілі уроку -- КЛЮЧОВИЙ УРОК КУРСУ

Зрозуміти проблему "AI slop" -- чому AI-генеровані сайти виглядають однаково
Вивчити офіційний термін Anthropic: "distributional convergence"
Отримати реальні промпти для боротьби з AI slop
Навчитися перевіряти свій дизайн за 7-пунктним чеклістом

Проблема: "distributional convergence"

Anthropic офіційно визнає цю проблему і називає її "distributional convergence" -- тенденція AI-моделей генерувати "середні" результати, що сходяться до одного стилю.

Як це виглядає на практиці:

Типовий "AI slop" дизайн

Шрифт: Inter або Roboto (безликі, "безпечні")
Кольори: фіолетовий градієнт на білому фоні
Layout: hero з великим текстом, 3 картки "features", CTA
Кнопки: заокруглені, з градієнтом
Анімації: відсутні або мінімальні fade-in
Загальне відчуття: "ще один SaaS landing"

Рішення #1: DISTILLED_AESTHETICS_PROMPT

Це офіційний промпт з Claude Cookbook. Додайте його у ваш CLAUDE.md або використовуйте як системний промпт:

<frontend_aesthetics> You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight. Focus on: Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics. Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration. Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic. Avoid generic AI-generated aesthetics: - Overused font families (Inter, Roboto, Arial, system fonts) - Cliched color schemes (particularly purple gradients on white backgrounds) - Predictable layouts and component patterns - Cookie-cutter design that lacks context-specific character Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box! </frontend_aesthetics>

Рішення #2: TYPOGRAPHY_PROMPT

Типографіка -- це 50% дизайну. Цей промпт змусить Claude обирати цікаві шрифти замість Inter:

<use_interesting_fonts> Typography instantly signals quality. Avoid using boring, generic fonts. **Never use:** Inter, Roboto, Open Sans, Lato, default system fonts **Impact choices:** - Code aesthetic: JetBrains Mono, Fira Code, Space Grotesk - Editorial: Playfair Display, Crimson Pro, Fraunces - Startup: Clash Display, Satoshi, Cabinet Grotesk - Technical: IBM Plex family, Source Sans 3 - Distinctive: Bricolage Grotesque, Obviously, Newsreader **Pairing principle:** High contrast = interesting. Display + monospace, serif + geometric sans, variable font across weights. **Use extremes:** 100/200 weight vs 800/900, not 400 vs 600. Size jumps of 3x+, not 1.5x. Pick one distinctive font, use it decisively. Load from Google Fonts. State your choice before coding. </use_interesting_fonts>

Категорії шрифтів

Категорія	Шрифти	Для чого
Code aesthetic	JetBrains Mono, Fira Code, Space Grotesk	Технічні продукти, devtools
Editorial	Playfair Display, Crimson Pro, Fraunces	Журнали, блоги, luxury
Startup	Clash Display, Satoshi, Cabinet Grotesk	SaaS, стартапи, tech
Technical	IBM Plex family, Source Sans 3	Документація, дашборди
Distinctive	Bricolage Grotesque, Obviously, Newsreader	Портфоліо, унікальні проекти

Дизайн-токени з одного кольору бренду

Замість того щоб давати Claude вільний вибір кольорів, визначте один brand color і побудуйте з нього 11-ступеневу шкалу:

--brand-50: #f0f7ff /* найсвітліший, фони */ --brand-100: #dbeafe --brand-200: #bfdbfe --brand-300: #93c5fd --brand-400: #60a5fa --brand-500: #3b82f6 /* базовий brand color */ --brand-600: #2563eb --brand-700: #1d4ed8 --brand-800: #1e40af --brand-900: #1e3a8a --brand-950: #172554 /* найтемніший, текст на світлому фоні */

Додайте цю шкалу у CLAUDE.md, і Claude буде використовувати правильні відтінки для фонів, кнопок, тексту та бордерів.

7-пунктний чеклист: "Чи це AI slop?"

Перевірте свій дизайн

Шрифт -- чи це Inter, Roboto або системний шрифт? Якщо так -- це slop.
Кольори -- чи є фіолетовий градієнт на білому? Якщо так -- це slop.
Layout -- чи це "hero + 3 картки + CTA"? Якщо точно такий -- це slop.
Анімації -- чи є хоча б одна значуща анімація (не просто fade-in)?
Фон -- чи це просто solid color, чи є градієнт/текстура/паттерн?
Контраст ваги -- чи є різкий перехід між 200/800 weight, а не 400/600?
Характер -- чи відчувається сайт як унікальний для цього бренду, а не "ще один landing"?

Якщо 4+ пункти негативні -- переробляйте.

1. Як Anthropic офіційно називає проблему AI slop?

Distributional convergence Neural degradation Model entropy

2. Яких шрифтів слід уникати за TYPOGRAPHY_PROMPT?

Playfair Display, JetBrains Mono Inter, Roboto, Open Sans, Lato, системні шрифти Clash Display, Satoshi

3. Який принцип ваги шрифтів рекомендований?

400 vs 600 -- ледь помітна різниця 100/200 vs 800/900 -- екстремальний контраст Всі тексти однаковою вагою 400

Практика: До і після

Попросіть Claude створити hero-секцію БЕЗ антиslop-промпту, збережіть результат. Потім додайте DISTILLED_AESTHETICS_PROMPT та TYPOGRAPHY_PROMPT і попросіть те саме. Порівняйте два результати -- різниця буде разючою.

Без промптів: Inter, стандартні кольори, простий fade-in. З промптами: унікальний шрифт (наприклад, Crimson Pro або Clash Display), продумана палітра з одним домінантним кольором, staggered reveal анімація, текстурний фон. Різниця -- як між "студентським проектом" і "професійним дизайном".

2.3 8 тем-блоків для CLAUDE.md

Модуль 2 · Дизайн без дизайнера

Цілі уроку

Отримати 8 готових тем-блоків для CLAUDE.md
Навчитися вибирати тему під бренд клієнта
Зрозуміти, як кожна тема впливає на сприйняття

Нижче -- 8 готових тем-блоків, які можна скопіювати і вставити у ваш CLAUDE.md. Кожен блок визначає кольори, шрифти, ефекти і настрій.

1. Cyberpunk

Розгорнути тему Cyberpunk

## Design Direction: Cyberpunk - Background: #0a0a0a (pure dark) with subtle noise texture - Primary: #00ff88 (neon green), Accent: #ff0066 (hot pink) - Font: JetBrains Mono for everything (monospace aesthetic) - Effects: text-shadow glow on headings, scanline overlay - Borders: 1px solid rgba(0,255,136,0.2) - Buttons: outlined with glow on hover, no fill - Glitch effect on hero title (CSS @keyframes) - Terminal-style cursor blinking on CTAs - Grid pattern background with low opacity

Для кого: tech-стартапи, геймінг, криптопроекти, хакатони

2. Editorial / Magazine

Розгорнути тему Editorial

## Design Direction: Editorial / Magazine - Background: #faf8f5 (warm cream) - Text: #1a1a1a (almost black), Accent: #c41e3a (editorial red) - Heading font: Playfair Display 900 - Body font: Crimson Pro 400/300 - Huge typography: hero h1 at 6-8rem, body at 1.1rem - Pull quotes with oversized quotation marks - Thin horizontal rules between sections - Generous white space (padding 120px+ between sections) - Two-column layout for text-heavy sections - Drop caps on first paragraph of each section

Для кого: медіа, блоги, журнали, видавництва, luxury бренди

3. Art Deco / Luxury

Розгорнути тему Art Deco

## Design Direction: Art Deco / Luxury - Background: #0d0d0d (deep black) - Primary: #d4af37 (gold), Accent: #1a1a2e (midnight blue) - Font heading: Cormorant Garamond 700, uppercase, letter-spacing: 0.15em - Font body: Jost 300 (light weight for elegance) - Geometric patterns: chevrons, fans, sunbursts as section dividers - Border style: double lines, gold on black - Buttons: gold outlined, uppercase, wide letter-spacing - Subtle gold gradient on hover states - Ornamental dividers between sections (SVG art deco patterns) - Maximum 2-3 colors on any screen

Для кого: ювелірні бренди, готелі, ресторани haute cuisine, fashion

4. Solarpunk

Розгорнути тему Solarpunk

## Design Direction: Solarpunk <theme_instructions> Create a Solarpunk-themed frontend that embodies optimistic, ecological futurism. This aesthetic merges natural forms with clean technology, emphasizing community, sustainability, and harmony with nature. **Color Palette:** - Primary: Deep forest green #2d5016 to fresh leaf #4a7c59 - Accent: Warm solar gold #f9a620 to amber #e8960c - Background: Soft cream #f5f0e8 transitioning to warm white #fefcf7 - Text: Rich earth brown #2c1810 for body, deep green #1a3a0a for headings - Supporting: Sky blue #7eb8d0, terracotta #c4724e, moss #6b8f3c **Typography:** - Headings: A rounded, friendly serif like Fraunces with variable weight - Body: Clean humanist sans like Source Sans 3 **Visual Elements:** - Organic, flowing shapes instead of sharp rectangles - Leaf and vine motifs as decorative elements - Rounded corners (16px+) on all containers - Subtle paper-like texture on backgrounds - Solar/botanical SVG illustrations - Soft, warm shadows (no harsh drop shadows) **Animation:** - Gentle swaying motion on decorative plant elements - Smooth scroll-triggered reveals - Warm fade-ins (not cold, mechanical transitions) **Layout:** - Asymmetric grids that feel organic, not rigid - Generous whitespace suggesting openness - Cards with subtle leaf-pattern borders </theme_instructions>

Для кого: eco-бренди, стійкий розвиток, органічні продукти, wellness

5. Brutalist

Розгорнути тему Brutalist

## Design Direction: Brutalist - Background: #ffffff (pure white) or #000000 (pure black) - Text: opposite of background, no grays - Font: Space Grotesk 900 (bold, raw) or Archivo Black - NO border-radius anywhere -- all sharp 0px corners - NO gradients -- solid colors only - NO shadows -- flat design pushed to extreme - Borders: 3px solid black, visible and intentional - Typography: enormous (8-12rem headings), tightly tracked - Layout: deliberately asymmetric, elements overlapping - Hover effects: background-color swap (black/white instant toggle) - Scrolling text marquees for emphasis - Visible grid lines as design elements

Для кого: арт-галереї, дизайн-студії, музичні лейбли, авангардні бренди

6. Dark OLED

Розгорнути тему Dark OLED

## Design Direction: Dark OLED - Background: #000000 (pure black for OLED screens) - Text: #e0e0e0 (never pure white -- too harsh) - Single accent color: pick ONE (e.g., #0ea5e9 sky blue) - Font heading: Inter Tight 200 (ultra-thin) - Font body: Inter 300 (light) - Glassmorphism cards: background rgba(255,255,255,0.03), backdrop-filter blur(20px) - Borders: 1px solid rgba(255,255,255,0.06) - Minimal UI: maximum 3 elements visible at any time - Generous negative space (50%+ of viewport empty) - Accent color used ONLY for interactive elements - Subtle glow on accent elements: box-shadow 0 0 30px rgba(accent,0.1) - Typography hierarchy through weight (200 vs 700), not size

Для кого: tech-продукти, мобільні додатки, портфоліо розробників, premium SaaS

7. Retro-Futuristic

Розгорнути тему Retro-Futuristic

## Design Direction: Retro-Futuristic (80s/90s Sci-Fi) - Background: #0a0020 (deep purple-black) - Primary: #ff6ec7 (hot pink), Secondary: #7b4dff (electric purple) - Gradient: linear-gradient(135deg, #7b4dff, #ff6ec7, #ff8c00) - Font heading: Orbitron 700 (space-age geometric) - Font body: Rajdhani 400 (technical, futuristic) - Chrome/metallic text effects via linear-gradient + background-clip - Grid lines overlay: 1px rgba(255,255,255,0.03) every 60px - Neon glow: text-shadow 0 0 10px currentColor - CRT scanline effect via repeating-linear-gradient - Retro computer terminal cursor animations - Geometric shapes: triangles, hexagons as decorative elements - VHS tracking distortion on hover (CSS clip-path)

Для кого: ігрові проекти, музичні івенти, synthwave/retrowave бренди

8. Maximalist

Розгорнути тему Maximalist

## Design Direction: Maximalist - Background: layered -- base color + gradient + pattern + texture - Colors: 5-7 colors, NOT matching -- deliberate clashes - Font mix: 3-4 different fonts on one page (serif + sans + mono + display) - No consistent grid -- deliberately broken layouts - Overlapping elements with z-index play - Mixed media: patterns, textures, gradients, solid colors - text-decoration: underline on random words for emphasis - Rotating/tilted elements (transform: rotate(-3deg)) - Stickers/badges overlaid on content - Scroll-triggered parallax at different speeds - Borders: mix of solid, dashed, dotted, double - Everything is intentional -- chaotic but controlled

Для кого: креативні агенції, фестивалі, youth-бренди, artistic проекти

1. Яка тема використовує pure black (#000000) фон для OLED-екранів?

Cyberpunk Dark OLED Brutalist

2. Яка тема забороняє border-radius і градієнти?

Art Deco Editorial Brutalist

Практика: Тема для клієнта

Уявіть: до вас прийшов власник веганського ресторану "Зелений Лист". Яку з 8 тем ви б обрали? Скопіюйте її у CLAUDE.md і адаптуйте кольори/шрифти під бренд ресторану.

Найкраще підходить Solarpunk -- органічні форми, теплі зелені тони, відчуття стійкого розвитку. Адаптація: замініть #4a7c59 на фірмовий зелений ресторану, додайте фото їжі у Brand-блок, вкажіть секції: Menu, Philosophy, Farm Partners, Booking.

2.4 Referens-driven дизайн

Модуль 2 · Дизайн без дизайнера

Цілі уроку

Навчитися використовувати реальні сайти як джерело натхнення
Зрозуміти підхід "screenshot-driven development"
Складати промпти, що комбінують елементи з різних сайтів

Чому реальні сайти -- найкращий референс

Замість абстрактних описів ("зроби красиво"), покажіть Claude конкретні приклади. Це дає в 3-5 разів точніший результат, ніж текстовий опис.

Техніка: Комбінований референс

Замість того щоб копіювати один сайт, візьміть різні елементи з різних джерел:

Створи landing page з таким стилем: - Тон і атмосфера: як у stripe.com (чистий, професійний) - Типографіка: як у nytimes.com (serif заголовки, контраст ваги) - Колірна палітра: як у linear.app (фіолетові акценти на темному) - Анімації: як у vercel.com (subtle, швидкі, element-by-element reveal) - Layout: як у notion.so (generous whitespace, centered content)

Screenshot-driven підхід

Якщо ви працюєте з Claude Code через Desktop або Web, можете надіслати скріншот:

Зробіть скріншот сайту, що вам подобається
Відправте його Claude з промптом: "Надихнися цим дизайном, але адаптуй для бренду X"
Claude проаналізує: палітру, типографіку, spacing, layout
Створить код, натхненний референсом, але не скопійований

Приклад промпту з референсами

Створи hero-секцію для SaaS-продукту "TaskFlow". Референси: - Загальний тон: linear.app -- мінімалізм, технічність - Типографіка: использати Satoshi для заголовків (800 weight, 4rem), Inter для body (400 weight, 1rem) - Кольори: темний фон #0a0a0f, акцент #6366f1 (indigo) - Анімація: staggered reveal при завантаженні сторінки, кожен елемент з'являється з delay 100ms - Hero має містити: tagline, heading, subheading, 2 CTA buttons, preview image з glassmorphism frame

Помилки референс-підходу

"Зроби як Apple" -- занадто широко, Apple має сотні різних сторінок
Копіювання один-в-один -- Claude має створити щось нове, натхненне, а не скопійоване
Конфліктні референси -- "як brutalist.dev, але з rounded corners" -- суперечність

Де шукати натхнення

Ресурс	Опис
awwwards.com	Нагороджені сайти, авангардний дизайн
dribbble.com	UI/UX шоти, концепти
godly.website	Курована колекція найкращих сайтів
land-book.com	Landing pages з фільтрами по стилю
screenlane.com	Мобільні UI-патерни

1. Чому комбінований референс краще за одне посилання на "зроби як Apple"?

Тому що Apple має погану верстку Тому що конкретні елементи з різних джерел дають точніший результат Тому що Claude не знає сайт Apple

2. Що таке screenshot-driven підхід?

Робити скріншоти свого сайту для тестування Надсилати Claude скріншот як візуальний референс для дизайну Використовувати тільки зображення замість коду

Практика: Комбінований референс

Знайдіть 3 сайти з різними елементами, які вам подобаються (типографіка з одного, кольори з іншого, layout з третього). Складіть промпт для Claude у стилі "комбінованого референсу" для landing page вашого проекту.

Хороший приклад: "Типографіка як у medium.com (serif + sans), палітра як у spotify.com (зелений акцент на темному), layout як у notion.so (центрований, з великими відступами), анімації як у stripe.com (smooth gradient shifts)". Чим конкретніші елементи -- тим кращий результат.

3.1 Figma MCP -- двосторонній міст

Модуль 3 · MCP-інтеграції

Цілі уроку

Зрозуміти, як Figma MCP працює (читає структуру, не скріншоти)
Навчитися налаштовувати Figma MCP
Дізнатися про Code→Figma (зворотний міст, анонс Feb 17 2026)
Вивчити Code Connect для мапінгу компонентів

Як працює Figma MCP

Figma MCP -- це двосторонній міст між Figma та Claude Code. Ключове розуміння: MCP читає структуру дизайну (дерево компонентів, spacing, кольори, типографіку), а не робить скріншоти.

Це означає, що Claude розуміє ваш макет як дизайнер, а не як людина, що дивиться на картинку.

Figma → Code (основний напрямок)

Функція get_design_context читає структуру макету з Figma і передає Claude Code:

Ієрархію шарів і компонентів
Кольори, шрифти, розміри
Відступи та spacing
Auto layout правила
Стилі тексту та ефекти

Code → Figma (анонсовано Feb 17 2026)

Зворотний напрямок: Claude Code може пушити результат назад у Figma як редаговані фрейми. Це дозволяє дизайнерам перевіряти та дороблювати код-генерований дизайн.

Налаштування

claude mcp add --transport http figma https://mcp.figma.com/mcp

Вимоги

Figma Desktop -- MCP працює тільки з desktop-версією
Dev або Full seat -- потрібна платна ліцензія Figma
Файл має бути відкритий у Figma під час роботи

Code Connect

Code Connect -- це мапінг між Figma-компонентами і вашими кодовими компонентами. Наприклад, коли дизайнер використовує компонент "Button/Primary" у Figma, Claude Code знає, що це ваш <Button variant="primary">.

Три сценарії використання

Сценарій 1: Pixel-perfect верстка

Подивись макет "Homepage" у Figma і створи HTML/CSS, що точно відповідає дизайну. Використовуй CSS Grid для layout і CSS Custom Properties для кольорів.

Сценарій 2: Компонентна бібліотека

Прочитай дизайн-систему з Figma (сторінка "Components") і створи React-компоненти з TypeScript та Storybook stories для кожного компонента.

Сценарій 3: Дизайн-ревю

Порівняй мій поточний код з макетом у Figma. Знайди відмінності у spacing, кольорах та типографіці. Покажи список розбіжностей.

Посилання:

Figma: Claude Code integration guide

1. Що саме читає Figma MCP з макету?

Робить скріншот і аналізує зображення Структуру дизайну: компоненти, кольори, spacing, шрифти Тільки кольори та шрифти

2. Що потрібно для роботи Figma MCP?

Будь-яка версія Figma (навіть безкоштовна) Figma Desktop + Dev або Full seat Тільки Figma у браузері

Практика: Figma-промпт

Навіть без Figma MCP, спробуйте описати простий макет текстом для Claude: "У мене є Figma-макет з hero-секцією: фон #0f172a, заголовок 'Launch your idea' шрифтом Clash Display 800 56px білим, підзаголовок 18px #94a3b8, кнопка CTA #3b82f6 з border-radius 8px". Подивіться, як точно Claude відтворить такий опис.

Claude відтворить макет із ~90% точністю за таким текстовим описом. Figma MCP автоматизує цей процес -- замість ручного опису, він зчитує параметри автоматично. Але навіть текстовий опис з конкретними значеннями (hex, px, weight) працює добре.

3.2 WordPress MCP

Модуль 3 · MCP-інтеграції

Цілі уроку

Дізнатися про три способи підключення WordPress до Claude Code
Зрозуміти різницю між WordPress.com Connector, MCP Adapter і Claude Cowork Plugin
Вибрати правильний варіант для свого випадку

Три варіанти WordPress + Claude Code

Варіант 1: WordPress.com Connector (найпростіший)

Офіційний конектор від WordPress.com. Працює через OAuth, не потребує технічних знань.

Для кого: сайти на WordPress.com
Що може: створювати/редагувати пости, сторінки, медіа
Налаштування: авторизація через WordPress.com OAuth

Посилання: wordpress.com/blog/2026/02/05/claude-connector/

Варіант 2: WordPress MCP Adapter (self-hosted)

Для self-hosted WordPress-сайтів. Працює через WP-CLI та HTTP API.

# Встановлення npm install -g @anthropic/wp-mcp-adapter # Підключення claude mcp add wordpress-local \ --url http://localhost:8080 \ --auth wp-cli

Для кого: розробники з self-hosted WordPress
Що може: повний контроль -- теми, плагіни, WooCommerce, custom fields
Вимоги: WP-CLI на сервері

Посилання: developer.wordpress.org -- WordPress MCP Adapter

Варіант 3: Claude Cowork Plugin (full autopilot)

WordPress-плагін, що дає Claude Code повний доступ до адмін-панелі WordPress.

Для кого: ті, хто хоче максимальну автоматизацію
Що може: все, що може адмін WordPress -- встановлювати плагіни, змінювати теми, редагувати PHP
Ризики: дає AI повний доступ -- використовуйте обережно

Порівняння

Параметр	WP.com Connector	MCP Adapter	Cowork Plugin
Складність	Легко	Середньо	Середньо
Self-hosted	Ні	Так	Так
Рівень контролю	Контент	Повний	Повний+
Безпека	OAuth	WP-CLI	Повний доступ

1. Який варіант найпростіший для WordPress.com?

WordPress.com Connector MCP Adapter Claude Cowork Plugin

2. Що потрібно для WordPress MCP Adapter?

Тільки WordPress.com акаунт Self-hosted WordPress з WP-CLI Спеціальний WordPress-плагін

Практика: WordPress промпт

Напишіть промпт для Claude Code, який би створив нову сторінку "Про нас" на WordPress з такою структурою: hero-блок з фото команди, секція "Наша місія" (2 колонки), секція "Команда" (картки з фото та описом), CTA "Зв'яжіться з нами".

Промпт: "Створи сторінку 'Про нас' на WordPress з блоками Gutenberg: 1) Cover block з заголовком 'Наша команда' і фоновим зображенням. 2) Columns block (50/50): ліва колонка -- текст місії, права -- список цінностей. 3) Gallery block з карточками команди (ім'я, посада, фото). 4) Buttons block з CTA 'Зв'яжіться'. Використовуй brand-кольори з CLAUDE.md."

3.3 Cloudflare MCP -- деплой одним промптом

Модуль 3 · MCP-інтеграції

Цілі уроку

Зрозуміти можливості Cloudflare MCP
Навчитися деплоїти сайт через Claude Code одним промптом
Дізнатися про безкоштовний план Cloudflare

Що дає Cloudflare MCP

Cloudflare MCP дозволяє керувати всією інфраструктурою Cloudflare через природну мову:

Workers -- serverless функції (API, redirects, middleware)
Pages -- статичний хостинг (ваш HTML/CSS/JS сайт)
KV -- key-value сховище (налаштування, кеш)
D1 -- SQL база даних (SQLite на edge)
R2 -- об'єктне сховище (зображення, файли)

Безкоштовний план

Cloudflare Free Tier

500 збірок на місяць (Pages)
100K запитів на день (Workers)
Кастомний домен + SSL -- безкоштовно!
CDN -- глобальна мережа кешування
Для більшості landing pages -- більш ніж достатньо

Деплой за 2 хвилини

# Промпт для Claude Code: Задеплой мій сайт (папка ./dist) на Cloudflare Pages. Назви проект "zerno-coffee". Підключи домен zerno.coffee якщо можливо.

Claude Code виконає:

Перевірить, чи є wrangler CLI
Авторизується в Cloudflare (якщо потрібно)
Створить проект на Cloudflare Pages
Завантажить файли
Поверне URL вашого живого сайту

Приклад повного воркфлоу

# 1. Створюємо сайт Створи landing page для кав'ярні "Зерно" з темною темою. # 2. Деплоїмо Задеплой на Cloudflare Pages як "zerno-coffee". # 3. Результат: # ✓ https://zerno-coffee.pages.dev -- ваш живий сайт!

Посилання: developers.cloudflare.com -- MCP Servers for Cloudflare

1. Скільки збірок на місяць дає безкоштовний план Cloudflare?

50 500 5000

2. Чи включає безкоштовний план кастомний домен та SSL?

Ні, потрібен Pro-план Так, безкоштовно Тільки SSL, домен платний

Практика: План деплою

Складіть план деплою для свого проекту: (1) назва проекту на Cloudflare, (2) чи потрібен кастомний домен, (3) чи потрібна база даних (D1) або сховище файлів (R2), (4) напишіть промпт для Claude Code, який задеплоїть ваш сайт.

Приклад: Проект: "my-portfolio". Домен: portfolio.myname.dev. БД: не потрібна (статичний сайт). Промпт: "Задеплой папку ./build на Cloudflare Pages як 'my-portfolio'. Підключи домен portfolio.myname.dev. Налаштуй redirect з www на non-www."

3.4 Інші MCP: Playwright, Excalidraw, Context7

Модуль 3 · MCP-інтеграції

Цілі уроку

Дізнатися про Playwright MCP для тестування
Зрозуміти Excalidraw MCP для вайрфреймів
Вивчити Context7 для актуальної документації
Порівняти платформи деплою

Playwright MCP -- автоматичне тестування

Playwright MCP дозволяє Claude Code відкривати ваш сайт у реальному браузері, перевіряти елементи і знаходити проблеми.

Ключові можливості

Accessibility tree snapshots -- перевірка доступності без скріншотів
Навігація по сторінках -- перехід за посиланнями, клік на кнопки
Перевірка responsive -- тестування на різних розмірах екрану
Консольні помилки -- виявлення JavaScript-помилок
Мережеві запити -- перевірка, що всі ресурси завантажуються

# Промпт для тестування: Відкрий мій сайт localhost:3000 у Playwright. Перевір на трьох розмірах: 375px (mobile), 768px (tablet), 1440px (desktop). Знайди: зламані елементи, проблеми з overflow, невидимий текст.

Excalidraw MCP -- швидкі вайрфрейми

Excalidraw MCP дозволяє Claude Code створювати вайрфрейми і діаграми. Корисно для:

Швидкого скетчу layout перед кодингом
Візуалізації user flow
Архітектурних діаграм

Context7 MCP -- актуальна документація

Claude Code має знання до дати навчання, але бібліотеки оновлюються щодня. Context7 підтягує актуальну документацію будь-якої бібліотеки в реальному часі.

# Промпт: Використовуючи Context7, знайди актуальну документацію Next.js 15 для App Router і створи сторінку з Server Components.

Netlify MCP

Альтернатива Cloudflare для деплою. Netlify MCP підтримує: деплой, форми, серверless функції, split-testing.

Посилання: docs.netlify.com -- Netlify MCP Server

Порівняння платформ деплою

Платформа	Free tier	MCP	Найкраще для
Cloudflare Pages	500 збірок/міс, SSL, CDN	Так	Статичні сайти, Workers
Netlify	100GB bandwidth, 300 build min/міс	Так	JAMstack, форми
Vercel	100GB bandwidth, безлім деплоїв	Ні (CLI)	Next.js, React
Firebase Hosting	10GB storage, 360MB/day	Ні (CLI)	Firebase екосистема
GitHub Pages	Безлімітно для публічних репо	Ні (CLI)	Документація, портфоліо

1. Що перевіряє Playwright MCP на вашому сайті?

Тільки швидкість завантаження Accessibility, responsive, JS-помилки, мережеві запити у реальному браузері Тільки HTML-валідацію

2. Для чого потрібен Context7 MCP?

Для деплою на 7 платформ одночасно Для підтягування актуальної документації бібліотек Для створення 7 копій сайту

Практика: Вибір стеку MCP

Для проекту "Портфоліо фотографа" виберіть набір MCP-серверів: (1) Figma або скріншоти для дизайну? (2) Cloudflare, Netlify або Vercel для деплою? (3) Потрібен Playwright для тестування? Обґрунтуйте кожен вибір.

Рекомендація для портфоліо фотографа: (1) Скріншоти -- портфоліо зазвичай не має складної дизайн-системи, скріншотів достатньо. (2) Cloudflare Pages -- безкоштовний CDN важливий для важких зображень, R2 для зберігання фото. (3) Playwright -- так, щоб перевірити responsive на мобільних (фотографи часто діляться портфоліо з телефону).

4.1 Від ідеї до живого сайту за 30 хвилин

Модуль 4 · Повний воркфлоу

Цілі уроку

Пройти повний цикл від ідеї до деплою
Навчитися розподіляти час правильно
Створити реальний CLAUDE.md з прикладу

Розклад на 30 хвилин

Крок	Час	Що робимо
1. Папка + CLAUDE.md	5 хв	Створити папку, написати бриф
2. Контент	5 хв	Тексти, структура секцій
3. Посекційна розробка	15 хв	Hero → Features → CTA, 2-3 ітерації кожна
4. Тестування	3 хв	Mobile/tablet/desktop перевірка
5. Деплой	2 хв	Cloudflare Pages → живий URL

Крок 1: Створити папку + CLAUDE.md (5 хв)

mkdir zerno-coffee cd zerno-coffee

Повний приклад CLAUDE.md для кав'ярні "Зерно"

# CLAUDE.md -- Зерно Coffee Shop Landing Page ## Brand - Назва: Зерно - Слоган: "Кожна чашка -- це історія" - Тон: теплий, автентичний, крафтовий - Аудиторія: міські професіонали 25-40, цінують якість - Мова: українська - Не використовувати: стокові фрази, корпоративний тон ## Design Direction - Естетика: мінімалізм з теплими акцентами, натхненний скандинавськими кав'ярнями - Палітра: --bg: #1a1410 (темно-коричневий) --bg2: #231c15 (фон карток) --cream: #f5e6d3 (кремовий, основний акцент) --gold: #c4960c (золотий, CTA) --text: #d4c5b0 (теплий сірий) --white: #faf5ef (теплий білий) - Шрифти: Заголовки: Playfair Display 800 (serif, елегантний) Текст: Jost 300 (легкий, сучасний) Акценти: JetBrains Mono (ціни, адреса) - Анімації: staggered reveal при scroll, subtle parallax на hero - Без стокових фото. Використовувати CSS-арт і emoji. ## Tech - Чистий HTML + CSS + мінімальний JS - Mobile-first responsive - CSS custom properties для всіх кольорів - Деплой: Cloudflare Pages ## Sections 1. Hero -- повноекранний, назва + слоган + CTA "Переглянути меню" 2. Меню -- 3 категорії (Еспресо, Фільтр, Десерти), по 4 позиції 3. Історія -- "Про нас" в 2-3 абзаци, з фото-заглушкою 4. Розташування -- адреса, години роботи, мінімалістична карта 5. Footer -- Instagram, Telegram, копірайт ## Anti-slop Rules <frontend_aesthetics> Typography: use Playfair Display and Jost, NEVER Inter or Roboto. Color: warm dark palette, no purple gradients. Motion: staggered reveals on scroll, parallax on hero. Background: subtle noise texture overlay, not solid colors. </frontend_aesthetics>

Крок 2: Контент (5 хв)

# Промпт для Claude: На основі CLAUDE.md, створи контент для всіх секцій: - Hero: заголовок (3-5 слів) + підзаголовок (1 речення) - Меню: 12 позицій (по 4 в 3 категоріях) з цінами - Історія: 2 абзаци автентичного тексту - Розташування: вигадана адреса у Львові, години 8:00-20:00

Крок 3: Посекційна розробка (15 хв)

# Промпт 1: Hero (5 хв, 2-3 ітерації) Створи hero-секцію з контентом. Повноекранна, з CSS noise texture. # Промпт 2: Меню (5 хв) Тепер секцію меню. 3 колонки на desktop, 1 на mobile. Ціни моноширинним шрифтом. # Промпт 3: Решта (5 хв) Додай секції Історія, Розташування та Footer. Зроби плавні переходи між секціями.

Крок 4-5: Тестування + Деплой (5 хв)

# Тестування: Перевір сайт на 375px, 768px та 1440px. Виправ проблеми. # Деплой: Задеплой на Cloudflare Pages як "zerno-coffee".

1. Скільки часу потрібно на CLAUDE.md за планом?

15 хвилин 5 хвилин 30 хвилин

2. Чому посекційна розробка краще за "зроби весь сайт одразу"?

Тому що Claude не може створити більше однієї секції Тому що 2-3 ітерації на секцію дають 80-90% якості Тому що це дешевше

Практика: 30-хвилинний челенж

Поставте таймер на 30 хвилин і створіть landing page для будь-якого бізнесу за планом з цього уроку. Використовуйте CLAUDE.md з прикладу або напишіть свій. Мета -- мати живий URL через 30 хвилин.

Підказки для успіху: (1) Не витрачайте більше 5 хвилин на CLAUDE.md -- краще посередній бриф, ніж ідеальний через 20 хвилин. (2) На кроці 3 не намагайтеся зробити ідеально з першого разу -- 2 ітерації достатньо. (3) Для деплою використовуйте Cloudflare Pages (найшвидший). Якщо не встигаєте -- пропустіть footer, його можна додати пізніше.

4.2 Посекційна розробка

Модуль 4 · Повний воркфлоу

Цілі уроку

Зрозуміти, чому section-by-section краще за "make whole site"
Отримати промпт-шаблони для кожної типової секції
Навчитися ітерувати правильно

Чому секція за секцією?

Коли ви просите Claude "зроби весь сайт", він намагається зробити все одразу. Результат: поверхневий дизайн, однакові секції, мінімальна увага до деталей.

Коли ви просите "зроби тільки hero", Claude вкладає всю увагу в одну секцію. Після 2-3 ітерацій якість досягає 80-90% від ідеалу.

Формула якості

1 секція x 3 ітерації = 90% якості

5 секцій x 1 ітерація = 50% якості

Завжди обирайте перший варіант.

Промпт-шаблони для типових секцій

Hero

Створи hero-секцію для [бренд]. - Повноекранна (100vh), з фоновим ефектом [тип: gradient/noise/pattern] - Заголовок: "[текст]" -- шрифт [назва] [weight] [size] - Підзаголовок: "[текст]" -- шрифт [назва] [weight] - CTA кнопка: "[текст]" -- колір [hex], hover-ефект [тип] - Анімація: staggered reveal -- заголовок (0ms), підзаголовок (200ms), CTA (400ms)

Features / Benefits

Створи секцію "Переваги" з [3/4/6] картками. - Layout: CSS Grid, [2/3] колонки на desktop, 1 на mobile - Кожна картка: іконка (emoji або SVG), заголовок, опис (1-2 речення) - Ефект hover: [підняття тіні / зміна бордеру / scale] - Scroll-triggered анімація: картки з'являються по одній з delay 100ms

Pricing

Створи секцію тарифів з [2/3] планами. - Один план виділений як "Популярний" (інший фон/бордер) - Кожен план: назва, ціна/міс, список фіч (чеклист), CTA кнопка - Перемикач "Місячно / Річно" зі знижкою [X]% - Mobile: горизонтальний scroll або вертикальний стек

CTA (Call to Action)

Створи фінальну CTA-секцію перед footer. - Фоновий градієнт або виділений колір - Великий заголовок: "[текст]" -- 2-3rem - Підтекст: "[текст]" -- 1rem, muted - Кнопка: велика, контрастна, з hover-анімацією - Мінімум елементів -- фокус на одну дію

Техніки ітерації

Як давати фідбек Claude

Конкретно: "Збільш відступ між заголовком і підзаголовком на 20px" -- замість "зроби більше відступу"
Візуально: "Кнопка має бути вдвічі ширшою" -- замість "зроби кнопку більше"
Порівняльно: "Зроби як в попередньому варіанті, але з золотим акцентом замість синього"
Емоційно: "Секція виглядає занадто корпоративно, додай теплоти" -- Claude розуміє настрій

1. Скільки ітерацій на секцію оптимально?

1 ітерація -- і переходимо далі 2-3 ітерації -- 80-90% якості 10+ ітерацій до ідеалу

2. Яка формула якості правильна?

5 секцій x 1 ітерація = краще 1 секція x 3 ітерації = краще Різниці немає

Практика: Ітерація hero-секції

Попросіть Claude створити hero-секцію (будь-яку). Потім дайте 3 рунди фідбеку: (1) змініть кольори, (2) покращіть анімацію, (3) адаптуйте під мобільний. Збережіть всі 4 версії і порівняйте першу з останньою.

Різниця між 1-ю і 4-ю версією зазвичай вражаюча: (1) Кольори стають більш цілісними. (2) Анімації -- більш зваженими (не всюди, а де потрібно). (3) Mobile-версія працює не як "стиснутий desktop", а як окремий дизайн. Це і є сила ітеративного підходу.

4.3 Тестування та оптимізація

Модуль 4 · Повний воркфлоу

Цілі уроку

Навчитися тестувати responsive на 3 розмірах
Зрозуміти Lighthouse-оцінки та як їх покращити
Вивчити базове SEO для landing pages
Перевірити WCAG-доступність

Responsive тестування

Кожен сайт повинен працювати на 3 основних розмірах:

Пристрій	Ширина	На що дивитися
Mobile	375px	Overflow, розмір тексту, CTA-кнопки (мін 44px), навігація
Tablet	768px	Grid-колонки (2 замість 3), sidebar, spacing
Desktop	1440px	Max-width контенту, надто великі відступи, пусті зони

# Промпт для Playwright MCP: Відкрий index.html на localhost:5000. Зроби скріншоти на: 375px, 768px, 1440px. Знайди проблеми: горизонтальний scroll, текст що вилазить, кнопки менше 44px, зображення без alt.

Lighthouse -- Performance, SEO, Accessibility

Lighthouse -- це інструмент від Google для аудиту сайтів. Мінімальні цілі:

Цільові оцінки Lighthouse

Категорія	Мінімум	Ідеал
Performance	80	95+
Accessibility	90	100
Best Practices	90	100
SEO	90	100

# Промпт для оптимізації: Запусти Lighthouse аудит мого сайту. Покращи Performance до 90+ (оптимізуй зображення, мінімізуй CSS). Покращ Accessibility до 100 (alt тексти, контраст, aria-labels). Покращ SEO до 100 (meta tags, OpenGraph, schema.org).

SEO-мінімум для landing page

<title>Зерно -- Крафтова кав'ярня у Львові</title> <meta name="description" content="Крафтова кава...">  <meta property="og:title" content="Зерно"> <meta property="og:description" content="..."> <meta property="og:image" content="https://..."> <meta property="og:url" content="https://zerno.coffee">  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "CafeOrCoffeeShop", "name": "Зерно", "address": {...} } </script>

WCAG Accessibility

Мінімальний чеклист доступності

Контраст -- мінімум 4.5:1 для тексту, 3:1 для великого тексту
Alt-тексти -- кожне зображення має alt
Фокус -- всі інтерактивні елементи мають видимий focus state
Семантика -- правильна ієрархія h1-h6, nav, main, footer
Клавіатура -- всі дії доступні без миші

1. Яка мінімальна ширина для мобільного тестування?

320px 375px 480px

2. Який мінімальний контраст тексту за WCAG?

2:1 4.5:1 7:1

Практика: Аудит свого сайту

Відкрийте Chrome DevTools (F12) → Lighthouse → Generate report для будь-якого вашого проекту або свого улюбленого сайту. Запишіть 4 оцінки. Потім попросіть Claude виправити найнижчу з них.

Типові проблеми: (Performance) великі зображення без WebP/AVIF, render-blocking CSS. (Accessibility) відсутні alt-тексти, низький контраст. (SEO) відсутній meta description, відсутній og:image. Claude може виправити все це за один промпт: "Покращ Lighthouse до 90+ у всіх категоріях".

5.1 Agent Teams та паралельна розробка

Модуль 5 · Просунуте

Цілі уроку

Зрозуміти концепцію Agent Teams (Opus 4.6)
Навчитися розподіляти задачі між агентами
Дізнатися про worktrees для ізоляції

Що таке Agent Teams

Agent Teams -- це можливість Claude Code (доступна з Opus 4.6) запускати кілька AI-агентів паралельно. Кожен агент працює над своєю задачею, і результати об'єднуються.

Уявіть: замість одного розробника, у вас є команда:

Типовий розподіл Agent Team

Агент	Роль	Задачі
Researcher	Дослідник	Аналіз конкурентів, збір контенту, SEO-аналіз
Designer	Дизайнер	Палітра, типографіка, mockups
Developer	Розробник	HTML/CSS/JS, responsive, анімації
Reviewer	Рев'юер	Lighthouse, accessibility, code quality

Worktrees для ізоляції

Кожен агент працює у своєму worktree -- ізольованій копії проекту. Це дозволяє:

Паралельну роботу без конфліктів
Легке об'єднання результатів через git merge
Відкат змін окремого агента без впливу на інших

Приклад: Паралельна розробка сайту

# Промпт для Agent Teams: Створи команду агентів для розробки сайту "TechConf 2026": Agent 1 (Research): Знайди 5 прикладів сайтів техно-конференцій. Виділи найкращі практики для hero, speakers, schedule секцій. Agent 2 (Design): На основі результатів Agent 1, створи палітру кольорів, обери шрифти, визнач spacing-систему. Запиши у design-tokens.css. Agent 3 (Dev): На основі design-tokens.css, збудуй сайт секція за секцією. Agent 4 (QA): Протестуй результат Agent 3 через Playwright на 3 розмірах. Знайди і виправ проблеми.

Обмеження

Agent Teams доступні тільки на Claude Max ($100-200/міс)
Паралельна робота витрачає більше токенів
Для простих landing pages Agent Teams -- overkill, достатньо одного агента
Найкраще підходить для складних проектів з 5+ сторінками

Subagent-driven розробка

Навіть без Agent Teams, можна використовувати subagent-підхід -- давати Claude різні ролі послідовно:

# Крок 1: "Ти -- дизайнер. Створи design tokens для бренду X." # Крок 2: "Ти -- розробник. Використовуючи ці tokens, збудуй hero." # Крок 3: "Ти -- QA-інженер. Протестуй цей код на accessibility."

1. Що забезпечують worktrees в Agent Teams?

Швидший інтернет Ізоляцію: кожен агент працює в своїй копії проекту Автоматичне тестування

2. Для якого плану доступні Agent Teams?

Безкоштовний план Claude Pro ($20/міс) Claude Max ($100-200/міс)

Практика: Subagent-підхід

Без Agent Teams, спробуйте subagent-підхід: (1) Попросіть Claude бути "дизайнером" і створити design tokens для будь-якого бренду. (2) Потім попросіть його бути "розробником" і використати ці tokens для hero-секції. Порівняйте з результатом одного промпту без розподілу ролей.

Subagent-підхід зазвичай дає кращі design tokens (більш системні, з варіаціями) і більш консистентний код (бо tokens вже визначені). Результат одного промпту часто має "ad hoc" кольори, що не утворюють систему.

5.2 Чеклист та ресурси

Модуль 5 · Просунуте

Цілі уроку

Отримати три набори інструментів (мінімальний, стандартний, повний)
Вивчити 7 типових помилок і як їх уникнути
Зберегти всі корисні посилання

Три набори інструментів

Мінімальний набір (для початківців)

Claude Pro -- базовий доступ до Claude Code
CLAUDE.md -- один файл-бриф
frontend-design Skill -- якісний UI
Cloudflare Pages -- безкоштовний деплой

Вистачить для: landing page, портфоліо, промо-сторінки

Стандартний набір (для фрілансерів)

Все з мінімального +
Figma MCP -- робота з макетами клієнтів
Playwright MCP -- автоматичне тестування
Context7 MCP -- актуальна документація
DISTILLED_AESTHETICS_PROMPT + TYPOGRAPHY_PROMPT
Git -- контроль версій

Вистачить для: клієнтські проекти, бізнес-сайти, SaaS лендінги

Повний набір (для агенцій/команд)

Все зі стандартного +
Claude Max -- для Agent Teams
Agent Teams -- паралельна розробка
WordPress MCP або Netlify MCP
Excalidraw MCP -- вайрфрейми
UI/UX Pro Max Skill -- 50+ стилів
CI/CD pipeline -- автоматичний деплой

Вистачить для: багатосторінкові сайти, web apps, складні проекти

7 типових помилок

Уникайте цього

"Зроби красивий сайт" -- занадто абстрактно. Вкажіть шрифти, кольори, стиль.
Без CLAUDE.md -- кожен промпт починається з нуля, без контексту бренду.
"Зроби весь сайт одразу" -- секція за секцією завжди краще.
Ігнорування mobile -- 60%+ трафіку з мобільних. Тестуйте на 375px.
Inter та фіолетовий градієнт -- класичний AI slop. Використовуйте антиslop-промпти.
Без тестування перед деплоєм -- 3 хвилини Playwright знаходять проблеми, які клієнт побачить першим.
Copy-paste з ChatGPT -- Claude Code робить все сам, не потрібно копіювати код вручну.

Всі корисні посилання

Ресурс	Опис
Claude Cookbook: Frontend Aesthetics	Офіційний гайд по боротьбі з AI slop
Frontend Design Toolkit (GitHub)	Набір інструментів для фронтенд-дизайну
frontend-design Skill	Найпопулярніший Skill для UI/UX
Figma + Claude Code	Офіційний гайд Figma MCP
Cloudflare MCP	Деплой через Claude Code
WordPress MCP Adapter	WordPress + Claude Code
Netlify MCP Server	Альтернативний деплой
Claude Code for Landing Pages	Практичний гайд з прикладами
Claude Code for Designers (Builder.io)	Дизайнерський підхід
Improving Frontend Design through Skills	Офіційний блог Anthropic
Building Websites with Claude Code	Покроковий туторіал

Фінальний чеклист проекту

Перед деплоєм перевірте

☑ CLAUDE.md є і актуальний
☑ Антиslop-промпти використані (шрифти не Inter/Roboto)
☑ Responsive: 375px, 768px, 1440px
☑ Lighthouse: Performance 80+, Accessibility 90+, SEO 90+
☑ Meta tags: title, description, og:image
☑ Alt-тексти на всіх зображеннях
☑ Favicon є
☑ HTTPS (автоматично на Cloudflare/Netlify/Vercel)
☑ Немає console.log() в production
☑ Завантаження менше 3 секунд

1. Який набір інструментів підходить для landing page?

Мінімальний: Claude Pro + CLAUDE.md + frontend-design + Cloudflare Повний: Agent Teams + всі MCP Тільки ChatGPT без додаткових інструментів

2. Яка типова помилка #1 при роботі з Claude Code для веб-розробки?

Занадто конкретний промпт Занадто абстрактний промпт ("зроби красивий сайт") без деталей Використання CLAUDE.md

Практика: Ваш перший реальний проект

Тепер ви маєте всі знання. Створіть landing page для реального проекту -- свого бізнесу, портфоліо або side project. Використовуйте повний воркфлоу: CLAUDE.md → антиslop-промпти → посекційна розробка → Playwright тестування → Cloudflare деплой. Цільовий час: 1 година.

Чеклист вашого проекту: (1) CLAUDE.md з Brand, Design Direction (з антиslop-промптами), Tech, Sections. (2) Hero -- 3 ітерації. (3) Мінімум 3 секції. (4) Lighthouse 80+. (5) Живий URL на Cloudflare Pages. Поділіться результатом!

Курс завершено!

Ви пройшли 18 уроків, 5 модулів. Тепер ви знаєте:

Що таке Claude Code і як працює його екосистема
Як писати CLAUDE.md, що перетворює AI на вашого дизайнера
Як боротися з AI slop за допомогою офіційних промптів Anthropic
Як підключати Figma, WordPress, Cloudflare через MCP
Як створити і задеплоїти сайт за 30 хвилин
Як тестувати і оптимізувати
Як використовувати Agent Teams для складних проектів

Головне правило: найкращий спосіб навчитися -- побудувати щось реальне. Почніть з простого landing page і ускладнюйте з кожним проектом.

Claude Code длявеб-розробки

1.1 Що таке Claude Code

Claude Code -- це не чат-бот

Де працює Claude Code

Що може Claude Code для веб-розробки

Ключові терміни

1.2 Екосистема: Skills + MCP + CLI

Пайплайн: від ідеї до сайту

Skills -- спеціалізовані інструкції

MCP -- Model Context Protocol

CLI -- командний рядок

1.3 CLAUDE.md -- бриф для AI

Що таке CLAUDE.md

Де розміщувати CLAUDE.md

Структура CLAUDE.md для веб-проекту

Приклад: CLAUDE.md для кав'ярні

1.4 Встановлення та перший запуск

Варіант 1: claude.ai (без встановлення)

Варіант 2: CLI (Terminal)

Варіант 3: VS Code Extension

Структура робочої директорії

1.5 Промпт-інженерія для веб-розробки

Погані промпти vs хороші промпти

Формула ефективного промпту

Прийоми ітерації

Ланцюжок промптів для landing page

2.1 Дизайн-скіли: перетвори Claude на дизайнера

Головні Skills для веб-дизайну

Community Skills

Quality Pipeline -- від базового до ідеального

2.2 Боротьба з AI slop

Проблема: "distributional convergence"

Рішення #1: DISTILLED_AESTHETICS_PROMPT

Рішення #2: TYPOGRAPHY_PROMPT

Категорії шрифтів

Дизайн-токени з одного кольору бренду

7-пунктний чеклист: "Чи це AI slop?"

2.3 8 тем-блоків для CLAUDE.md

1. Cyberpunk

2. Editorial / Magazine

3. Art Deco / Luxury

4. Solarpunk

5. Brutalist

6. Dark OLED

7. Retro-Futuristic

8. Maximalist

2.4 Referens-driven дизайн

Чому реальні сайти -- найкращий референс

Техніка: Комбінований референс

Screenshot-driven підхід

Де шукати натхнення

3.1 Figma MCP -- двосторонній міст

Як працює Figma MCP

Figma → Code (основний напрямок)

Code → Figma (анонсовано Feb 17 2026)

Налаштування

Code Connect

Три сценарії використання

3.2 WordPress MCP

Три варіанти WordPress + Claude Code

Порівняння

3.3 Cloudflare MCP -- деплой одним промптом

Що дає Cloudflare MCP

Безкоштовний план

Деплой за 2 хвилини

Приклад повного воркфлоу

3.4 Інші MCP: Playwright, Excalidraw, Context7

Playwright MCP -- автоматичне тестування

Excalidraw MCP -- швидкі вайрфрейми

Context7 MCP -- актуальна документація

Netlify MCP

Порівняння платформ деплою

4.1 Від ідеї до живого сайту за 30 хвилин

Розклад на 30 хвилин

Крок 1: Створити папку + CLAUDE.md (5 хв)

Повний приклад CLAUDE.md для кав'ярні "Зерно"

Крок 2: Контент (5 хв)

Крок 3: Посекційна розробка (15 хв)

Крок 4-5: Тестування + Деплой (5 хв)

4.2 Посекційна розробка

Claude Code для
веб-розробки