Собираем и выкладываем лендинг

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

— Ты сказал «десятки»? — Тёма немного в шоке. — Значит в трех плагинах под сотню скилов. И это все для улучшения дизайна лендинга? Так почему мы их все не используем?

— Тёма, это не так работает. — Саня как будто смеется. — Скил — это инструмент. Если у тебя уже есть 3 нужных молотка, то сколько ни добавляй лучше не станет.

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 любит подкинуть под настроение. На единственное уцелевшее слово только морщится:

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

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

А следом — ещё пара строк, которые он проматывает по касательной. Что-то про то, что завтра он наконец познакомится поближе с тем, с кем именно всё это время работал. Тёма читает как анонс очередного дня и откладывает телефон — и тут же берёт снова, открывает свою ссылку, чтоб ещё раз увидеть, как разворачивается лендинг там, снаружи, не у него на ноуте.

— С телефона, — говорит он пустой комнате и сам себе ухмыляется.