31 Claude: корисні підключення й команди
Поліпшимо меню копії сайту за допомогою плагіна Claude Code і перевіримо результат. Орієнтовний час — 45–60 хвилин. Додатково розглянемо конектори для пошуку власних матеріалів і роботи з обкладинкою та створимо коротку інструкцію для проєкту.
Для практикуму потрібні Windows, Claude Desktop із доступною вкладкою Code та папка Documents\AI-practice\personal-site з уроку 12. Для Code офіційна інструкція вказує підписку Pro, Max, Team або Enterprise. Звичайний чат Claude та вкладка Code — різні місця роботи. [B301]
На занятті
Викладач покаже вибір локальної копії та перевірку дозволу на CSS-правку. Разом порівняємо зміни файлу з виглядом меню й вирішимо, які перевірки виконати вручну.
Три інструменти для трьох завдань
frontend-design — плагін Claude Code з навичкою оформлення інтерфейсів. Він є в офіційному каталозі Anthropic. За наявності доступу до Code й локальних файлів він допоможе змінити відступи та розташування елементів. Нижче встановимо його й перевіримо одну CSS-правку; окремий сервіс дизайну не потрібний. [B304]
Google Drive — конектор до файлів вашого Google-акаунта. Офіційний конектор Google у каталозі Claude вміє знаходити й читати документи; серед його інструментів є також запис. Для нашої вправи потрібні підключений акаунт і власний документ Olena-video-brief. Запит: «Знайди в Google Drive Olena-video-brief. Випиши тему, тривалість і всі кадри з посиланням на документ. Нічого не змінюй». Результат перевіряйте за відкритим оригіналом: чи справді йдеться про порядок на столі та 30–45 секунд? [B305]
Canva — конектор для макетів, а не CSS-плагін. Він працює з дизайнами Canva й потребує входу в цей сервіс. Canva повідомляє про доступність конектора, зокрема на Free; окремі функції залежать від плану. Для першої вправи достатньо вже створеної власної обкладинки: «Знайди мій дизайн Desk-video-cover. Прочитай напис і запропонуй коротшу назву українською. Дизайн поки не змінюй». Очікуємо посилання на правильний макет, його фактичний напис і окрему пропозицію. Відкрийте макет та звірте текст. [B306][B307]
Drive і Canva — необов’язкові вправи з уже наявними матеріалами. Olena-video-brief та Desk-video-cover — умовні назви: у запитах замініть їх назвами власного сценарію у Drive та власної обкладинки в Canva. Попередні уроки не створювали файлів із цими назвами. Якщо таких матеріалів немає, пропустіть ці дві вправи й почніть із локального сайту.
Оформлення меню → змінений styles.css
Пошук брифу → посилання й перевірені факти
Власна обкладинка → прочитаний напис і пропозиція
Практикум: зробіть навігацію зручнішою
1. Підготуйте окрему копію
У Провіднику відкрийте Documents\AI-practice. Скопіюйте personal-site через Ctrl+C, Ctrl+V; назвіть копію personal-site-claude. Якщо така назва зайнята, додайте -2. Відкрийте її index.html у браузері й знайдіть три посилання меню. Саме цю копію редагуватимемо. Опублікований сайт поки не зміниться.
У Claude Desktop відкрийте Code і нову сесію. Під полем запиту виберіть середовище з групи Local, далі елемент вибору папки → Open folder…. Вкажіть створену копію. Переконайтеся, що шлях веде саме до вашої копії — personal-site-claude або personal-site-claude-2. [B301]
Виберіть Manual у перемикачі дозволів: ви оглядатимете запропоновані зміни перед застосуванням. Для цієї звичайної папки не вмикайте Worktree — окрему робочу копію Git. Ми вже створили потрібну навчальну копію в Провіднику. [B302]
2. Установіть офіційний плагін
Натисніть + біля поля → Add plugins. Якщо меню показує Plugins, виберіть Plugins → Browse plugins. Знайдіть frontend-design, відкрийте картку й звірте офіційний каталог claude-plugins-official. Перегляньте склад пакета, виберіть встановлення для себе, тобто область user, та підтвердьте встановлення. [B303][B304]
Дочекайтеся завершення. У полі сесії введіть /, знайдіть навичку frontend-design і виберіть її зі списку. Після вибраної навички вставте запит нижче в Code. «Селектори» в запиті — позначення, за якими CSS знаходить елементи меню. [B302]
Натисніть Enter, щоб надіслати запит. Перше очікування — Claude прочитає файли й назве наявні елементи меню. Якщо він описує файли іншого проєкту, зупиніть роботу кнопкою зупинки та перевірте вибрану папку. [B302]
3. Порівняйте зміни й сторінку
У запиті дозволу перевірте шлях до styles.css та запропоновану зміну. Тут padding означає внутрішній простір між текстом посилання та краєм його ділянки. Збільшення цього простору має полегшити натискання. Погодьте зміну, яка відповідає завданню. Після виконання натисніть лічильник доданих і вилучених рядків: відкриється diff, тобто порівняння старого й нового вмісту. [B301]
У diff перевірте, що HTML не змінився й нових бібліотек немає.
У браузері оновіть сторінку зі створеної копії personal-site-claude або її варіанта з номером. Навколо тексту посилань має побільшати простору. Натисніть «Проєкти»: адреса має завершитися #projects. Звузьте вікно: усі три пункти повинні залишитися доступними. Натискайте Tab: кожне посилання має отримувати видиму рамку. У Блокноті створіть review.txt у цій копії та запишіть фактичні результати трьох перевірок.
4. Вимкніть те, що більше не потрібно
У + → Plugins → Manage plugins знайдіть установлений пакет і вимкніть або видаліть його. Це припиняє використання плагіна; уже відредагований CSS залишається у файлі. Для повернення початкового вигляду скопіюйте styles.css з незміненої основної папки в навчальну копію й оновіть браузер. [B302]
Залиште проєкту коротку пам’ятку
Щоб у новій сесії не пояснювати обмеження заново, створіть у Блокноті файл CLAUDE.md поруч із index.html у навчальній копії. Натисніть Ctrl+Shift+S («Зберегти як»), укажіть ім’я CLAUDE.md, тип Усі файли та кодування UTF-8, потім натисніть Зберегти. Це звичайні проєктні інструкції, а не встановлення плагіна. Claude Code читає такий файл під час початку сесії. [B311]
Це навчальний сайт Олени.
Зміст: index.html. Оформлення: styles.css.
Зберігай мову й три розділи сторінки.
Не додавай бібліотек або публікації.
Після правки вкажи назву зміненого файла та одну ручну перевірку.Почніть нову сесію в цій папці. Надішліть: «Прочитай CLAUDE.md. Назви файли сайту й одну перевірку меню; поки нічого не змінюй». Звірте відповідь із реальною папкою. Якщо додасте інший файл пізніше, оновіть і пам’ятку. Вона допомагає орієнтуватися, але не замінює дозволів середовища.
Як підключити Drive або Canva
Для двох необов’язкових вправ використайте звичайний чат Claude Desktop. У розділі підключень знайдіть сервіс, відкрийте його картку, виберіть Connect або Install, увійдіть у потрібний акаунт і перегляньте доступи. Потім увімкніть сервіс для розмови й надішліть відповідний запит із початку уроку. В організації конектор може спочатку потребувати дозволу адміністратора. [B308]
Станом на 30.10.2026 назви меню змінюються: з 29 жовтня почалося поступове об’єднання в Plugins. Якщо його ще немає, відкрийте Customize → Connectors; у новому вигляді використайте фільтр конекторів. Після вправи від’єднайте сервіс на його картці. Видалення пакета плагіна не обов’язково від’єднує конектор усередині — перевірте його стан окремо. [B312]
Якщо пошук не знаходить вашого брифу, звірте акаунт і назву документа у Drive. Якщо Canva показує інший макет, додайте посилання на правильний до уточнення.
Команди для читача з установленим CLI
Цей довідник необов’язковий. CLI — Claude Code у терміналі; Desktop не встановлює команду claude для PowerShell. Якщо CLI вже налаштовано, відкрийте навчальну папку в Провіднику, введіть powershell у його адресному рядку й натисніть Enter. У PowerShell введіть claude, натисніть Enter. Наступні рядки вводять уже в полі Claude Code CLI, по одному, з Enter. [B301]
| Де | Введіть | Що перевірити |
|---|---|---|
| Code CLI | /help | Відкрилася довідка. |
| Code CLI | /context | Видно використання контексту. |
| Code CLI | /compact Збережи мету й перевірки | Розмова стисло підсумована. |
| Code CLI | /plan Перевір меню без змін | Підготовлено план. |
| Code CLI | /diff | Видно доступні зміни робочих файлів. |
| Code CLI | /plugin | Відкрився каталог плагінів. |
| Code CLI | /mcp | Видно стан MCP-підключень. |
| Code CLI | /permissions | Видно правила дозволів. |
| Code CLI | /goal | Видно стан поточної цілі. |
| Code CLI | /goal clear | Активну ціль прибрано. |
Назви звірено з офіційним довідником. Якщо команда невідома, перевірте версію й /help; не переносіть її автоматично у звичайний вебчат. /diff потребує доступного порівняння; копія без історії Git не завжди матиме потрібну базу. [B309]
Щоб задати ціль, після /goal пишуть умову, наприклад: «Перевір три посилання меню в index.html. Для кожного покажи href і відповідний id. Файли не змінюй. Заверши після звіту або двох ходів». Команда починає роботу; оцінювач перевіряє досягнення умови між ходами. Вона не додає дозволів, а обмеження ходів у тексті не є жорстким бюджетом витрат. Для припинення приберіть ціль через /goal clear; уже виконані зміни це не скасовує. [B310]
Практика вдома
- Візьміть текст обкладинки свого відео. Якщо Canva вже підключена, попросіть Claude прочитати напис із посиланням на дизайн і запропонувати два коротші варіанти до п’яти слів без редагування.
- Альтернатива без підключень: у Блокноті запишіть «Як я прибираю свій робочий стіл перед навчанням» і самостійно придумайте два коротші варіанти до п’яти слів.
- Збережіть вихідний напис, варіанти й обраний заголовок у
Documents\AI-practice\cover-home.txt. Поясніть вибір одним реченням. Критерій — заголовок коротший і зберігає тему прибирання столу; макет не змінено.
Самотест
- Потрібно прочитати документ Google Drive, але встановлено лише frontend-design. Чого бракує?
- Плагін вимкнено, а меню лишилося більшим. Чи це помилка і як повернути попередній вигляд?
- Claude навів тему й тривалість відео. Що ще треба звірити, щоб підтвердити використання потрібного брифу?
Терміни
- Область встановлення — де діє плагін: для користувача на цьому комп’ютері чи певного проєкту.
- Навичка — інструкції для повторюваного виду роботи.
- Diff — порівняння старого й нового вмісту.
- CLAUDE.md — файл постійних інструкцій проєкту для Claude Code.
- Окремого конектора до потрібного Google-акаунта та дозволу на доступ. Навичка оформлення сама цього доступу не надає.
- Ні. Вимкнення плагіна не скасовує CSS-правку. Поверніть попередній `styles.css` із незміненої копії та оновіть сторінку.
- Відкрити посилання на документ і порівняти з ним тему, тривалість та всі кадри.