Я учился на веб-разработчика, но сайт себе собрал с Claude Code. Рассказываю, что реально решило дело
Привет! Меня зовут Алексей, я Team Lead дата-аналитики в Яндексе. Но в IT я начинал не с аналитики: когда-то я учился на веб-разработчика в Яндекс Практикуме. Потом вкатился в данные — и фронтенд за эти годы основательно подзабыл. Уровень «помню, что есть HTML, CSS и что-то там про React». Если не веришь — вот мой учебный проект тех лет, над которым я в своё время сидел неделями. Это 2021-й, не суди строго.
И вот недавно мне понадобился свой сайт. Можно было месяц вспоминать вёрстку — или собрать его с Claude Code за пару вечеров. Я выбрал второе. Вот этот самый сайт, на котором ты сейчас читаешь статью, я и собрал — почти не касаясь клавиатуры руками.
Но собрать сайт с ИИ — это совсем не «нажал кнопку и готово». Расскажу, что я на самом деле сделал до того, как Claude написал первую строчку. Потому что именно это, а не магия нейросетей, и есть вся работа.
ИИ — не телепат
Давай сразу разрушу главную иллюзию. Открываешь ты Claude Code на пустом проекте, пишешь «сделай мне крутое портфолио аналитика» — и получаешь... ну, нечто. Серое, безликое, со стоковым человечком и текстом «We create amazing solutions».
ИИ не знает ни твоего бренда, ни твоих данных, ни как ты разговариваешь. Он закроет пустоту самым усреднённым решением из всего, что видел. Garbage in — garbage out, привет из мира аналитики.
Разница между «шаблоном из коробки» и сайтом, который выглядит как твой, — это бриф. Перед стартом я насмотрелся референсов чужих портфолио и лендингов — выписал, что нравится, а что нет. Больше всего зацепил формат bento-grid: та самая плиточная раскладка из блоков разного размера, как на презентациях Apple. Его и взял за основу главной.
А кроме насмотренности у меня к старту было три вещи, и вот их я считаю настоящей работой:
| Что я подготовил | Во что Claude это превратил |
|---|---|
| Фирменный стиль (логотип + палитра) | Дизайн-токены, единый визуальный язык |
| Свои данные (отзывы, статьи, видео) | JSON-файлы → готовые карточки |
| Тексты на двух языках | Система i18n и переключатель RU/EN |
Разберу каждый пункт.
Кит первый: стиль придумал не ИИ
Дизайнер из меня, прямо скажем, как из топора балалайка (вёрстке-то учили, а вот рисовать — нет). Поэтому стилем я озаботился заранее — отдельно, до всякого кода. Логотип, палитра, варианты иконок на разных фонах. Не «Claude, придумай мне цвета», а конкретные значения.
И вот эти конкретные цвета я скормил Claude, а он зашил их в дизайн-токены Tailwind. Чтобы весь сайт говорил на одном языке:
// tailwind.config.ts — один источник правды по цветам
brand: {
sky: '#4FACEA', // фон героя, фирменный голубой
blue: '#3E8AC9', // основной синий, ссылки
pale: '#CAE6F9', // светлые тинты, границы
orange: '#FF4D00', // CTA-кнопки, акценты
}
Звучит как мелочь, но это ключ. Когда цвета заданы токенами, Claude не подбирает оттенок «на глаз» в каждом новом блоке — он переиспользует brand-sky и brand-orange. И сайт остаётся консистентным, даже когда генерируется по кусочкам в разные дни.
Без этого было бы как с тем самым шаблоном: тут голубой одного оттенка, там — другого, и всё выглядит так, будто собрано из трёх разных сайтов.
Кит второй: данные, а не «насочиняй отзывов»
Вот тут включается аналитик внутри меня.
Я не просил Claude «придумай отзывы учеников» или «набросай список моих статей». Во-первых, это враньё. Во-вторых — и это важнее — у меня всё это уже было, просто валялось в разных местах. Я собрал данные в нормальный структурированный вид. В JSON.
Отзывы:
[
{ "author": "@maraqesh1", "text": "Хочу оставить отзыв-благодарность Алексею за работу и мотивацию...", "link": "https://t.me/..." }
]
Видео:
[
{ "id": "ZbbQCdfm5-w", "title": "Как стать аналитиком данных за 6 месяцев?", "url": "https://...", "platform": "youtube" }
]
А дальше уже работа Claude: он сам спроектировал карточки под эту структуру, сетку отзывов, грид с превью видео. Я дал данные — он сделал витрину. Захочу добавить новый отзыв — просто дописываю объект в JSON, пересобирать ничего не надо.
Тут всплывает ровно тот навык, за который мне платят на основной работе: сначала приводим данные в порядок, потом строим на них дашборд. Сначала структура — потом красота. С сайтом оказалось абсолютно так же.
Кит третий: два языка сразу, а не «переведи потом»
Сайт у меня двуязычный. И тексты я подготовил заранее — не «Claude, переведи как-нибудь на английский», а два параллельных словаря с одинаковыми ключами:
messages/
ru.json # nav, hero, about, stats, community, career, stack...
en.json # те же ключи, английские значения
Claude по этим файлам встроил систему i18n и переключатель RU/EN в шапке. Если бы я начал с одного языка, а английский попросил «прикрутить потом» — переделок было бы втрое больше, я это по работе знаю. А так — один раз подготовил, и всё встало само.
Что в итоге получилось
Когда у ИИ на руках есть стиль, данные и тексты — он перестаёт угадывать и начинает собирать по спецификации. Меньше итераций, попадание в бренд почти с первого захода, никакого зоопарка из разных оттенков голубого.
А уже потом, на готовом сайте, я полез в оптимизацию — и вот там словил весь набор граблей, от невалидной микроразметки до дважды упавшего деплоя. Но это отдельная история — её разберу в следующей статье, она уже на подходе.
Так умирает ли профессия фронтендера?
Скажу честно и, возможно, непопулярно: на мой взгляд — да, потихоньку умирает. По крайней мере в том виде, в каком я застал её на курсах в 2021-м. То, на что раньше у верстальщика уходило пару недель, я — аналитик, забывший фронтенд, — накидал за вечер. Над тем учебным React-проектом из начала статьи я когда-то сидел неделями — а этот сайт, что побольше и поживее, собрал за пару вечеров. И качество вышло выше.
Но «профессия умирает» — это не «всё делает кнопка „сгенерировать"». Чтобы из ИИ вышло что-то приличное, а не шаблон, по моему опыту нужны три вещи:
- Контекст. То, с чего началась эта статья: стиль, данные, тексты, правила в
CLAUDE.md. Без брифа ИИ выдаёт среднее по интернету. Garbage in — garbage out. - Бенчмарки. Объективные проверки вместо «вроде норм»: спидтесты PageSpeed, валидаторы разметки Google и Яндекса, тесты доступности. Цифры, а не ощущения.
- Понятная обратная связь. Ты должен уметь прочитать результат бенчмарка и объяснить ИИ, что конкретно не так. Иначе он будет ходить по кругу.
Контекст я разобрал в этой статье. А про бенчмарки и обратную связь — как я гонял сайт через PageSpeed, ловил ошибки микроразметки и доступности — подробно расскажу в следующей статье.
Поэтому, как мне кажется, главный навык ближайших лет — это не «уметь промптить» (промпт сегодня и пятиклассник напишет). Навык — собрать контекст, поставить бенчмарк и внятно объяснить машине, чего ты хочешь. Ровно то, чему аналитиков, в общем-то, и учат.
Кстати, один из инструментов «контекста» — файл CLAUDE.md, инструкция по проекту, которую Claude читает в начале работы. Базовый шаблон для веб-проекта я отдаю бесплатно — напиши мне в Telegram, скину.
А если хочешь научиться собирать контекст и встраивать Claude в реальные рабочие задачи (не только сайты — в первую очередь в аналитику) — я как раз собираю об этом курс. Записаться в лист ожидания →
А ты как считаешь — умирает профессия фронтендера или мне это только кажется? Расскажи в комментариях, особенно если сам недавно собирал что-то с ИИ.
Алексей Гаврилов — Team Lead Data Analyst, работаю с LLM в Яндекс Поиске. Веду сообщество @onlyanalystgroup для тех, кто разбирается в данных и инструментах.