Я учился на веб-разработчика, но сайт себе собрал с 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 это превратил |
|---|---|
| Насмотренность и референсы | Структуру главной (bento-grid) |
| Фирменный стиль (логотип + палитра) | Дизайн-токены, единый визуальный язык |
| Свои данные (отзывы, статьи, видео) | JSON-файлы → готовые карточки |
| Тексты на двух языках | Система i18n и переключатель RU/EN |
Правила проекта в CLAUDE.md | Консистентность между сессиями |
| Декомпозицию на блоки | Сборку по частям без хаоса |
Разберу каждый пункт.
Кит первый: стиль придумал не ИИ
Дизайнер из меня, прямо скажем, как из топора балалайка (вёрстке-то учили, а вот рисовать — нет). Поэтому за фирменный стиль отвечал не я: логотип и айдентику OnlyAnalyst нарисовала дизайнер Анна Чет — вот её разбор работы над логотипом. Моя задача была проще, но не менее важная: собрать готовый стиль в бриф и скормить его Claude в виде конкретных значений — логотип, палитра, варианты иконок на разных фонах. Не «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 в шапке. Если бы я начал с одного языка, а английский попросил «прикрутить потом» — переделок было бы втрое больше, я это по работе знаю. А так — один раз подготовил, и всё встало само.
Реальный выигрыш не в самом переключателе. Тексты теперь живут отдельно от вёрстки: поменять формулировку или добавить третий язык — это правка в одном словаре, а не охота за строками по всему коду. И вычитку можно отдать кому угодно, не пугая человека вёрсткой.
Кит четвёртый: правила, которые Claude читает каждый раз
У любого проекта есть негласные правила: на чём пишем, чего не делаем, каким тоном говорим с пользователем. Держать их в голове бесполезно — Claude про них не знает и в каждой новой сессии изобретает велосипед заново. Поэтому правила я вынес в отдельный файл, CLAUDE.md. Claude читает его в начале работы — как бриф для нового сотрудника.
Туда легло всё, что иначе пришлось бы повторять по двадцать раз: стек и ограничения («Next.js, Tailwind; картинки только локальные»), тон текстов («на „ты", без канцелярита»), запреты («не меняй палитру, не добавляй аналитику без спросу»).
Эффект простой: меньше переспросов, никаких «а на чём у нас фронт?» на третий день, поведение не плавает от сессии к сессии. Это та же документация проекта — только адресованная не коллеге, а машине.
Кит пятый: не «сделай сайт», а сборка по блокам
И снова сработал аналитик. Большую задачу я не вываливал на Claude целиком — «сделай мне сайт» возвращает кашу, в которой потом ничего не поправить. Я резал её на блоки, как режут пайплайн: сначала шапка и hero, потом сетка проектов, потом отзывы, потом блог. Каждый кусок — отдельный, понятный, легко проверить и переделать, не задев остальное.
Это тот же приём, что и в работе с данными: не «построй мне аналитику», а «вот шаг, вот следующий». На маленьких чётких задачах ИИ ошибается куда реже, а ты в любой момент видишь, где именно что-то пошло не так.
(Да, китов в итоге пять, а не три — мир оказался чуть сложнее поговорки. Зато каждый честно тащит свой кусок.)
Что в итоге получилось
Когда у ИИ на руках есть стиль, данные, тексты, правила проекта и задача, разбитая на понятные куски — он перестаёт угадывать и начинает собирать по спецификации. Меньше итераций, попадание в бренд почти с первого захода, никакого зоопарка из разных оттенков голубого.
А уже потом, на готовом сайте, я полез в оптимизацию — и вот там словил весь набор граблей, от невалидной микроразметки до дважды упавшего деплоя. Но это отдельная история — её я разобрал в отдельной статье.
Так умирает ли профессия фронтендера?
Скажу честно и, возможно, непопулярно: на мой взгляд — да, потихоньку умирает. По крайней мере в том виде, в каком я застал её на курсах в 2021-м. То, на что раньше у верстальщика уходило пару недель, я — аналитик, забывший фронтенд, — накидал за вечер. Над тем учебным React-проектом из начала статьи я когда-то сидел неделями — а этот сайт, что побольше и поживее, собрал за пару вечеров. И качество вышло выше.
Вот, кстати, тот самый учебный проект — Mesto: мини-соцсеть, где добавляешь карточки с фото по ссылке, ставишь лайки и удаляешь. Ванильный JS, ООП-классы, Webpack, вёрстка по БЭМ — около 2000 строк кода. Я собирал его полтора месяца.
Ради интереса прикинул, во что обошёлся бы такой проект в Claude Code сегодня. Не «пара тысяч токенов», конечно — один только код это десятки тысяч токенов на выходе, плюс чтение файлов и отладка, итого сотни тысяч за сессию. Но в деньгах — смешно:
| Модель | Цена (вход / выход за 1M токенов) | Оценка на Mesto |
|---|---|---|
Haiku 4.5 (claude-haiku-4-5) | $1 / $5 | ~$0,5–1 |
Sonnet 4.6 (claude-sonnet-4-6) | $3 / $15 | ~$1,5–3 |
Opus 4.8 (claude-opus-4-8) | $15 / $75 | ~$7–15 |
С таким объёмом и чёткой спецификацией справится даже Haiku — проект простой и шаблонный. Итого: меньше доллара на младшей модели, до полутора десятков на старшей с итерациями, и примерно час работы. Полтора месяца против часа и пары долларов — вот, собственно, и весь разговор о профессии.
Но «профессия умирает» — это не «всё делает кнопка „сгенерировать"». Чтобы из ИИ вышло что-то приличное, а не шаблон, по моему опыту нужны три вещи:
- Контекст. То, с чего началась эта статья: стиль, данные, тексты, правила в
CLAUDE.md. Без брифа ИИ выдаёт среднее по интернету. Garbage in — garbage out. - Бенчмарки. Объективные проверки вместо «вроде норм»: спидтесты PageSpeed, валидаторы разметки Google и Яндекса, тесты доступности. Цифры, а не ощущения.
- Понятная обратная связь. Ты должен уметь прочитать результат бенчмарка и объяснить ИИ, что конкретно не так. Иначе он будет ходить по кругу.
Контекст я разобрал в этой статье. А про бенчмарки и обратную связь — как я гонял сайт через PageSpeed, ловил ошибки микроразметки и доступности — подробно рассказал в следующей статье.
Поэтому, как мне кажется, главный навык ближайших лет — это не «уметь промптить» (промпт сегодня и пятиклассник напишет). Навык — собрать контекст, поставить бенчмарк и внятно объяснить машине, чего ты хочешь. Ровно то, чему аналитиков, в общем-то, и учат.
Кстати, один из инструментов «контекста» — файл CLAUDE.md, инструкция по проекту, которую Claude читает в начале работы. Базовый шаблон для веб-проекта я отдаю бесплатно — напиши мне в Telegram, скину.
А если хочешь научиться собирать контекст и встраивать Claude в реальные рабочие задачи (не только сайты — в первую очередь в аналитику) — я как раз собираю об этом курс. Записаться в лист ожидания →
А ты как считаешь — умирает профессия фронтендера или мне это только кажется? Расскажи в комментариях, особенно если сам недавно собирал что-то с ИИ.
Частые вопросы
Можно ли собрать сайт с Claude Code без знания вёрстки?
Да. Я аналитик, фронтенд подзабыл со времён курсов 2021 года — и собрал этот сайт за пару вечеров, почти не касаясь кода. Но «без знания вёрстки» не значит «без работы»: всю ценность дала подготовка контекста, а не само написание кода.
Что нужно подготовить до начала работы с ИИ над сайтом?
Насмотренность и референсы, фирменный стиль (логотип и конкретную палитру), свои данные в структурированном виде, готовые тексты, правила проекта в файле CLAUDE.md и разбивку задачи на блоки. Чем конкретнее заготовки, тем меньше итераций.
Что такое CLAUDE.md и зачем он нужен?
Это файл с правилами проекта, который Claude читает в начале каждой сессии: стек и ограничения, тон текстов, что нельзя трогать. Без него ИИ в каждой новой сессии изобретает велосипед заново и плывёт от ответа к ответу. С ним — меньше переспросов и стабильное поведение.
Как ставить задачу ИИ, чтобы не получить кашу?
Не «сделай мне сайт» целиком, а по блокам: сначала шапка, потом сетка проектов, потом отзывы. Каждый кусок легко проверить и переделать, не задев остальное. На маленьких чётких задачах ИИ ошибается заметно реже — тот же принцип, что и в работе с данными.
Зачем задавать цвета через дизайн-токены Tailwind?
Токены — единый источник правды по цветам. Claude переиспользует brand-sky и brand-orange вместо подбора оттенка «на глаз» в каждом блоке. Сайт остаётся консистентным, даже когда генерируется по кусочкам в разные дни.
Умирает ли профессия фронтендера из-за ИИ?
На мой взгляд — да, потихоньку, в том виде, в каком она была в 2021-м. То, на что у верстальщика уходили недели, аналитик с забытым фронтендом накидывает за вечер, и качество выходит выше. Но «умирает» не значит «всё делает кнопка»: нужны контекст, бенчмарки и умение читать результат.