Збираємо й викладаємо лендинг

1. З чого почати збирання і в якому порядку

Тьома повертається за стіл і вперше сідає не слухати, а робити. Перед ним два предмети. Перший — чернетковий index.html, той самий, що валявся недоробленим: відкривається локально, але сирий і далекий від референсу. Другий — скриншот від замовника, чистий і світлий, який треба повторити.

— Льох, з чого мені починати? — Тьома вже не панікує, йому просто потрібен порядок кроків.

— По порядку, — відповідає Льоха. — Спершу доводиш вигляд до картинки — тим самим фокусом зі скриншотом. Потім добиваєш його до дорогого вигляду дизайн-плагіном. І тільки коли сторінка готова, викладаєш її назовні через deploy-інструмент. Три кроки, по одному. Поїхали з першого.

Тьома відкриває сесію поруч із папкою проєкту. Туман розвіявся: ось лендинг, ось зразок, ось три зрозумілі ходи до живого посилання. І тепер він працює вже із Санею — той збирає, Тьома командує.

2. Крок 1 — довести вигляд за референсом

Перший хід — той самий фокус із картинкою з теорії, тільки тепер не на візитці-пустишці, а на бойовому референсі замовника. Тьома перетягує скриншот просто в чат до Сашка й пише рівно те, що підказав Льоха:

Ось референс від замовника [картинка]. Піджени мій лендинг index.html під цей стиль.

Сашко «бачить» картинку — середовище курсу все підключило, перемикати нічого не треба, — і береться правити лендинг. За хвилину Тьома відкриває index.html у себе в браузері. Сторінка помітно підтягнулася до скриншота: фон став світлішим, заголовки — більшими, картки вирівнялися. Не один в один, але напрямок правильний: вигляд став значно ближчим до зразка.

— О, уже схоже, — Тьома клацає між своєю вкладкою і скриншотом. — Я ж його словами не переповідав, просто кинув.

— У цьому й фокус, — пише Сашко. — Картинку я зчитав сам. Твоє діло було — дати зразок і сказати, що з ним робити. Дав. Лендинг змінився. Тільки це перший крок, не фініш: схоже, але ще не «дорого».

— Ближче до референсу, так, — погоджується Тьома, — але все одно ще трохи слабувато.

— Так Льоха й попереджав. Перший крок — прочитати зразок і зрушити до нього. Зрушили. Далі добʼємо красу.

3. Крок 2 — добити до «дорогого» дизайн-плагіном

Лендинг схожий на референс, але «дорогим» ще не виглядає — десь проступає навчальна сірість. Тьома згадує другу річ із теорії — цілий плагін умінь однією командою. Час ставити його не на візитку, а по-справжньому.

У тій самій сесії він підключає каталог плагінів і ставить дизайн-плагін — ті самі чотири рядки, що Льоха показував, тепер під живе завдання:

/plugin marketplace add anthropics/claude-plugins-community    # підключити каталог плагінів
/plugin install design-with-claude@claude-community            # поставити набір дизайн-умінь
/reload-plugins                                                # увімкнути його в цій сесії
/plugin list                                                   # перевірити: плагін у списку

/plugin list показує плагін у списку — встановлений і ввімкнений. Тепер натравити його на лендинг:

Доведи лендинг до акуратного «дорогого» вигляду. Використай design-with-claude:
перевір візуальну ієрархію, типографіку, відступи, кольори, узгодженість
компонентів і доступність. Збережи зміст і структуру сторінки.

Тьома відкриває лендинг — і присвистує. Сашко застосував не одне вміння, а цілу пачку з плагіна разом: відступи, типографіку, акуратність, узгодженість. Сторінка на очах перестала бути навчальною чернеткою — стала звʼязаною і дорогою, такою, які він бачив на чужих красивих скриншотах і думав, що так уміють тільки «справжні».

— Бачив? — Тьома не стримується. — Це ж не я в CSS копирсався. Поставив плагін — і він причесав усе разом.

— У цьому й сила плагінів, — озивається Сашко. — Один навик — одна насадка. Плагін — ціла скринька під тему. Лендинг тепер виглядає як річ. Залишилося головне — він усе ще живе тільки в тебе на ноуті.

— Ти сказав «плагінів»? — Тьома зачепився за слово. — Отже, їх багато. Слухай, Сашко, знайди мені ще пару плагінів з дизайну. Суто для експерименту. Чи це знову до Льохи?

— Не питання. — Сашко сьогодні дивовижно поступливий. — Ось тобі ще парочка. Тільки не переборщуй — кожен плагін містить десятки скілів.

# 1. frontend-design
/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@claude-code-plugins

# 2. ui-ux-pro-max
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

— Ти сказав «десятки»? — Тьома трохи шокований. — Отже, в трьох плагінах під сотню скілів. І це все для покращення дизайну лендингу? Тоді чому ми не використовуємо їх усі?

— Тьома, це так не працює. — Сашко ніби сміється. — Скіл — це інструмент. Якщо в тебе вже є три потрібні молотки, то скільки не додавай — краще не стане.

4. Крок 3 — ставимо інструмент розгортання голосом

Лендинг готовий, і настає саме той рубіж дня — викласти його. Тьома звертається до Льохи:

— Слухай, а викладати-то як? Файли кудись на сервер закидати, ти казав. Це що, у консоль лізти треба?

— Не треба в консоль, — відповідає Льоха. — Головне сьогодні — не просто закинути файли куди-небудь, а через готовий інструмент, той самий, про який я обмовився в теорії. Для викладки статики є skill хостингу — на Tiiny Host.

— Це знову самому писати цей skill? Допоможеш?

— Та не потрібно нічого писати, у ШІ взагалі можна все робити словами. Просто скажи Сашкові «скачай і встанови skill» — і все.

Тьома пише Сашкові звичайне людське прохання — без жодного термінального шаманства:

Сашко, встанови skill для розгортання статики на Tiiny Host (репозиторій Tiiny-Host/skills).

Сашко завантажує і кладе SKILL.md куди слід — у папку проєкту, .claude/skills/tiiny-host/, — і доповідає, що skill на місці. Тьома перевіряє, що інструмент став:

/skills        # tiiny-host має бути в списку

У списку — tiiny-host. Став.

— І все? — Тьома навіть трохи розчарований легкістю. — Я ж раніше думав, викласти сайт — це якась магія для адмінів.

— І все, — озивається Льоха. — Ти щойно поставив собі інструмент розгортання однією фразою. Не впорався б Сашко — можна той самий файлик скопіювати руками, але тобі й не довелося. Тепер ним і викладемо.

— Тобто розгортання — така сама штука, що ставиться, як скіл або плагін, — промовляє Тьома. — Поставив словами — користуєшся. А я думав, викласти сайт — це робота для DevOps.

— Жодних DevOps. Зараз сам усе побачиш.

5. Викладаємо: лендинг живе в інтернеті

Інструмент стоїть. Тьома робить те, чого тиждень раніше не вмів і боявся, — і робить це однією фразою (яку, звісно, підказав Льоха):

Сашко, Задеплой мій лендинг на Tiiny Host анонімно.

Skill береться за діло: збирає папку лендингу і відправляє її назовні, на хостинг, без жодної реєстрації. І повертає рядок — живе посилання виду що-небудь.tiiny.site.

Тьома не відкриває його на ноутбуці — тут лендинг і так лежить, це не рахується. Він бере телефон, перемикає на мобільний інтернет, щоб уже зовсім у бойових умовах, і набиває посилання пальцем. Палець зависає над «перейти», і Тьома швидко тисне: у голові тільки цікавість і азарт.

Секунда. Білий екран.

Ще секунда. Тьома вже майже набрав у голові «ну ясно, знову тільки в мене» — і тут екран наповнюється. Розгортається його лендинг. Той самий, за референсом, причесаний плагіном. На телефоні, який із ноутом не повʼязаний взагалі нічим. Тьома проводить пальцем — сторінка гортається, кнопки натискаються, усе живе.

— Та ну, — видихає він у порожню кімнату і сам собі не вірить. — Було в мене в ноуті. А тепер живе в інтернеті. У всіх.

І першою справою — не Льохі, не Антону. Тьома ловить поглядом Олега через увесь опенспейс і махає телефоном над головою, як перепусткою:

— Дядь Олеже! Підійди, обіцяне! Та сама посилання, памʼятаєш?

І, не чекаючи, котить до нього на стільці, тримаючи телефон із відкритим лендингом перед собою, наче офіціант піднос.

— Зранку обіцяв — до вечора на, — він суне екран Олегу під ніс. — З телефона. Не змійка, а?

Олег неохоче бере телефон двома пальцями, скролить лендинг туди-сюди. Тикає в кнопку — натискається.

— Хм, — видає він нарешті. — Живий. Ну-ну.

І повертається до своєї механічної клавіатури. Більше нічого. Але Тьомі цього «хм» вистачає за очі — за весь день це солодше за будь-який комплімент. Свою ж ставку, яку сам і задрав при свідку, він закрив.

Відкотивши стілець назад, він пише Льосі:

— Льох, вона з телефона відкрилася.

— От тепер у тебе не «працює в мене», а «живе в інтернеті», — озивається Льоха. — Антон відкриє — побачить. Замовник відкриє — побачить. Хто завгодно з будь-якого телефона. Та стрілочка з «локально ≠ назовні» — ти по ній щойно пройшов. Одна обмовка: це анонімне посилання живе недовго, десь годину.

— У сенсі годину? — Тьома прямо осідає. — Я думав, виклав — і все, назавжди висить. А воно через годину здохне?

— Через годину здохне, — спокійно підтверджує Льоха. — Для «побачити, що вийшло» і Антону показати — за очі. Але так, назавжди — це вже окрема історія.

6. Постійне посилання: перший натяк на ключ

— Ну то щоб назавжди — як? — Тьома вже на смаку перемоги й упускати її не хоче.

— Щоб посилання не зникало через годину, потрібен акаунт на цьому хостингу, — відповідає Льоха. — Заводиш акаунт, і тобі дають особистий ключ доступу. З ключем розгортання кладе лендинг уже під постійне посилання.

— А, ну то давай заведемо, — Тьома вже тягнеться. — Отримаю ключ, скину Сашкові, і нехай він…

— Стоп, — Льоха обриває. — Ключ ІІ-агенту в чат не сунуть. Це, вважай, як ключ від квартири на вулиці лишити: хто підібрав — той і зайшов від твого імені. У ключів своє місце — спеціальний файл, не переписка. Але це окрема велика розмова, і сьогодні ми в неї не пірнаємо.

— То як же постійне посилання?

— А ніяк сьогодні. Запамʼятай одне: для постійного потрібен акаунт на хостингу і ключ до нього, а ключ — річ особиста, його не розкидають абияк. Як із ним правильно поводитися, покажу пізніше, коли дійдемо до живих ключів. Сьогодні тобі вистачає й тимчасового: ти довів, що вмієш викладати. Просто скинь посилання Антону зараз, і все.

7. Опис арсеналу

Лендинг викладено — і Тьома першою справою шле посилання Антону. Відповідь прилітає швидко:

— О, відкривається з телефона. Чисто, акуратно, як замовник хотів. Молодець, переслав йому. — І тут же додає: — Слухай, і зроби мені короткий звіт. Що ти там увесь тиждень із цим ІІ робив, що реально вийшло. Не роман, пару абзаців. Я нагору перешлю — нехай бачать, на що тиждень пішов.

— Е-е-е, — Тьома трохи зависає. Здати живий лендинг — це він уже вміє. А от розповісти, що робив, — нове: досі він просто чаклував і радів, а в звіт це не складалося.

— Льох, виручай зі звітом, — пише він. — У мене в голові каша. З чого взагалі почати?

— Почни не зі звіту, — відповідає Льоха. — Почни з опису. Переліч, якими речами ти за тиждень узагалі користувався. Для себе, щоб самому свій арсенал побачити. А з нього вже виберемо, що нагору йде.

І вони пригадують перший тиждень після знайомства. Відкати — коли щось ламалося, Тьома відкочував зміни назад. Скіл — поставив один, під дизайн. Плагін — сьогодні, цілий плагін під красу. Прийом із картинкою — зібрати за зразком. Skill розгортання — ось щойно поставив голосом. Агент, який пише по-людськи. Ігри — Змійка, 2048, Тетріс.

— Слухай, та я за тиждень наче піратський корабель обвішався, — Тьома оглядає список, як полицю з трофеями. — Кілька днів тому від чорного екрана долоні пітніли, а тепер у мене тут цілий арсенал. Дай мені ще місяць — я весь офіс на куражі зроблю.

Він явно собою задоволений — і є з чого. Але Льоха кидає фразу, від якої трохи холоне:

— Навішав пристойно, так. Корисно. Тільки запамʼятай: арсенал — це сила, поки ти памʼятаєш, що в тебе є і навіщо. А просто накопичувати й не розбирати — у якийсь момент стане не силою, а вантажем, у якому сам загубишся.

— Та ну, вантаж, — Тьома відмахується. Сьогодні це звучить занадто занудно, тривоги він у цьому не чує. Опис лежить перед ним як трофей.

8. Звіт нагору: «багато про ігри — переклади»

— Так, опис є, — Тьома дивиться на список. — Із цього Антону звіт-то збереш?

— Зберу, — відповідає Льоха. — Тільки нагору йде не все підряд, а робоча вижимка. Що реально поїхало на задачу.

І за пару хвилин видає акуратний короткий текст: лендинг доведено за референсом замовника, добито дизайн-плагіном до дорогого вигляду, викладено в інтернет через інструмент, посилання відкривається з будь-якого телефона. Плюс окремим абзацом — що за тиждень освоєно: Змійка, 2048, Тетріс як тренування, дизайн-плагін, робота з картинками, перше розгортання.

Тьома пробігає очима — і сам ловить, що звіт не вигаданий, а чесний. Кожен рядок він сьогодні перевірив руками: лендинг за референсом довів, картинку агент прочитав; плагін поставив, вигляд став дорогим; виклав через skill, а не консоллю; посилання відкрилося з телефона, а не лише локально. Усе сходиться.

— Вогонь, — Тьома копіює текст і кидає Антону. — Тримай.

Антон читає — і впирається в один абзац:

— Ось тут добре, а ось тут — стоп. «Змійка, тетріс, 2048» — нагорі це не зрозуміють, подумають, ти тиждень у іграшки грався. А ти на них учився. Переклади на нормальну мову.

— Це як? — не розуміє Тьома. — Льох, і що тепер робити?

— А давай перекладемо на корпоративний, — озивається Льоха. — Ті самі справи, тільки словами, які там читають.

— О, давай, — чіпляється Тьома. — Переклади, а то я в цю їхню мову не вмію.

І Льоха править. Назви ігор із тексту зникають. Замість «Змійки» і «Тетрісу» зʼявляється сухе: тренувальні мініпроєкти, на яких відпрацьовувалися збирання, налагодження і публікація. Сама Змійка перетворюється на безособовий S-проєкт, Тетріс — на T-проєкт. Навчальні задачі, а не розваги.

— Бачиш різницю? — каже Льоха. — Для себе ти збирав Змійку і Тетріс, і це кайф. А нагору йде «відпрацював навик на навчальних проєктах». Та сама тиждень, той самий ти — просто мовою, яку там зрозуміють. І звіт при цьому не бреше: ти справді на них навчався.

Тьома перечитує і ловить думку, яка раніше в голову не приходила: одне й те саме можна розповісти двома мовами. Собі — азартно, про Змійку і магію. Нагору — по ділу, про задачі й результат. Він знову кидає текст Антону. Цього разу той відповідає коротко:

— От тепер годиться. Переслав.

І все. Усі задоволені: замовник отримав лендинг, Антон — звіт, нагорі зрозуміють, на що пішов тиждень.

9. Красивий фасад і що за ним

Робота зроблена — і лише тепер Тьома дозволяє собі солодке. Тим самим прийомом, що й лендинг, викочує назовні ігрову вітрину: Змійку, 2048, Тетріс. І один із друзів, відкривши посилання, реагує фразою, солодшою за яку сьогодні не придумаєш:

— О, круто! Зроби і мені щось таке.

Тьома перечитує двічі. Не «прикольно», не «молодець» — а людина захотіла собі таке саме. І десь у голові проскакує: за таке ж і грошей брати не соромно. Він відганяє думку — сьогодні й так день перемог. Але вона чіпка, такі в нього просто так не йдуть.

Увечері Артем2036 ставить крапку в дні своєю звичною манерою: перемогу не чіпає, моралей не читає. У чат падає картинка.

Тьома пирхає в кулак. Фасад-то красивий, усе працює, посилання живе — він зчитує передусім це, а палиці приймає за звичайний жарт, який Артем2036 любить підкидати під настрій. На єдине вціліле слово лише морщиться:

— «Авторство», — читає він уголос. — Яке ще авторство? Діду, ти там не перегрівся часом? Я лендинг виклав, а не книжку написав.

Слово висить абсурдом посеред затертої каші. Тьома знизує плечима, згортає картинку і більше до неї не повертається.

А слідом — ще пара рядків, які він просто промотує по дотичній. Щось про те, що завтра він нарешті познайомиться ближче з тим, з ким саме увесь цей час працював. Тьома читає це як анонс чергового дня і відкладає телефон — і тут же бере знову, відкриває своє посилання, щоб ще раз побачити, як розгортається лендинг там, назовні, не в нього на ноуті.

— З телефона, — каже він порожній кімнаті й сам собі посміхається.