Итоговый проект: сайт-портфолио

Простой сайт сегодня есть у кого угодно — от репетитора до пекарни на дому. Им не обязательно разбираться в типографике и сетках, а тебе — обязательно. Дизайнеру платят за вкус, качество и удобство. Единственное место, где все три вещи видны без посредников, — его собственный адрес в интернете.

Если ты ищешь заказы или работу, правило ещё жёстче. Первое, что сделает клиент или рекрутер после твоего сообщения, — вобьёт имя в поиск. Что он там найдёт, решаешь ты, и решаешь сейчас.

Behance и Dribbble нужны: там тебя находят. Но там ты один из тысяч в одинаковых карточках, а правила площадки меняются без тебя. Свой сайт — это адрес для резюме, подписи и био, и выглядит он так, как решил ты.

Для дизайнера, который прошёл раздел про вайбкодинг, сайт — ещё и лучшее доказательство навыка. Он сам показывает, что ты умеешь довести продукт от идеи до продакшена. Как внутри него презентовать проекты с ИИ, разобрано в теме «Портфолио». Здесь — как сайт собрать, выложить и привязать домен.

Что будет на руках к концу:

• Публичный репозиторий на GitHub с кодом сайта и историей изменений
• Сайт на бесплатном хостинге, который пересобирается сам после каждого коммита
• Свой домен с HTTPS
• ИИ-агент (Claude или Codex), подключённый к репозиторию: любую правку делаешь одной фразой, хоть с телефона

Маршрут: контент → референсы → инструмент → GitHub → первая версия → деплой → домен → финальные штрихи. Если идёшь впервые, заложи вечер на подготовку и два-три вечера на сборку.

В начале почти все открывают агента и пишут «сделай мне портфолио». Агент сделает: три одинаковые карточки, «Hi, I'm a designer» и lorem ipsum. Сайт без контента — это макет. Дальше ты будешь подгонять под него реальные тексты, хотя должно быть наоборот.

Собери в одну папку до первого промпта:

• 3–6 проектов. Для каждого: название, одна строка «что это и для кого», твоя роль, 3–8 картинок или видео, один-три абзаца про задачу и результат. Больше шести никто не смотрит.
• «Обо мне» в три предложения. Кто ты, что делаешь, где находишься, чем хочешь заниматься дальше. Биография здесь не нужна.
• Контакты. Почта и одна-две ссылки: LinkedIn, Telegram, Behance.
• Фото или аватар. По желанию, но реши сейчас, пока hero ещё не свёрстан.
• Файлы в вебных форматах. Картинки — WebP или JPG до 300–500 КБ каждая. Видео — MP4 до 10–15 МБ или ссылка на Vimeo и YouTube. Сжать можно в Squoosh или попросить агента написать скрипт.

Структура типичного портфолио — одна страница или несколько:

1. Главная: имя, чем занимаешься, 3–6 проектов, контакты.
2. Страницы кейсов, по одной на проект — если есть что рассказать про процесс.
3. «Обо мне» отдельной страницей — только если главная перегружена.

Для первой версии хватит одной страницы со списком проектов и ссылками наружу: на Behance, Figma, живой продукт. Кейсы добавишь вторым заходом, когда сайт уже живёт на домене.

Запиши всё это в текстовый файл content.md: заголовки, тексты, подписи к картинкам, имена файлов. Потом этот файл целиком уйдёт агенту. Так он соберёт сайт из твоих слов, а не из своих.

Промпт для подготовки текстов (в любой чат):

Вот сырые описания моих проектов: [вставь]. Для каждого напиши: заголовок до 6 слов, строку-описание до 15 слов, абзац «задача — решение — результат» до 60 слов. Тон — спокойный, от первого лица, без слов «уникальный», «инновационный» и «передовой». Верни как markdown с заголовками второго уровня, чтобы я вставил в content.md.

Как убрать из текстов ощущение «это написал ИИ», разобрано в теме «Нейрослоп». Что именно показывать в кейсах с ИИ — в теме «Портфолио».

ИИ помогает с контентом, а не только с кодом

Сверстать портфолио легко. Трудно вспомнить и сформулировать, что ты сделал в проекте два года назад и чем это кончилось. Здесь ИИ работает как редактор и интервьюер. Свали в чат всё, что есть по проекту: бриф, переписки с заказчиком, заметки с созвонов, скриншоты макетов до и после, цифры из отчётов.

Вот все материалы по проекту [название]: бриф, заметки, скриншоты до/после. Собери из них описание кейса по структуре: контекст и задача (2–3 предложения), моя роль, что было не так до, ключевые решения и почему именно такие, результат в цифрах или фактах. Где данных не хватает — не придумывай, а задай мне вопрос списком в конце. Потом сделай вывод в одно предложение: чему я научился или что сделал бы иначе.

Если результат нечем измерить, попроси: «предложи пять способов описать результат без метрик: что изменилось для пользователя, для команды, для бизнеса». ИИ хорошо вытаскивает из сырых заметок то, что тебе кажется очевидным и поэтому не попадает в кейс. Факты проверяй сам: цифры и даты в кейсе должны быть твоими, а не правдоподобными.

Ещё два приёма. Запиши голосом десять минут рассказа про проект, как другу, и отдай транскрипт. Живая речь даёт текст лучше, чем попытка писать «правильно». И попроси ИИ сыграть скептичного арт-директора: «прочитай кейс и скажи, какие три вопроса ты задал бы мне на собеседовании и на какие из них текст не отвечает».

Смотри портфолио людей твоей специальности с похожим объёмом работ. Просто «красивые сайты» тут мало помогут. У моушн-дизайнера, продуктового дизайнера и иллюстратора разные сайты, и референс из чужой дисциплины уведёт не туда.

Codrops

Codrops много лет пишет про креативный фронтенд: эффекты, анимации, разборы сайтов. Для вайбкодинга это идеальный источник. Почти к каждой публикации приложен код, и его можно отдать агенту как ТЗ.

• Webzibition — их галерея хорошо сделанных сайтов, около 2 400 работ, обновляется каждую неделю. Много персональных сайтов и портфолио.
• Creative Hub — оригинальные демо: hover-эффекты, переходы между страницами, скролл-анимации, текстовые эффекты. Демо выходят под лицензией MIT, их можно брать в личные и коммерческие проекты (условия).
• Tutorials — пошаговые разборы эффектов с кодом. Ссылку на туториал можно вставить в промпт: «сделай так, адаптируй под мою разметку».
• Case studies — как сделаны конкретные сайты. Например, разбор портфолио ULTRAGRID. Дизайнер из Копенгагена построил сайт вокруг 3D-модели своего рабочего стола: прошлое портфолио «не показывало его самого». В разборе — почему шейдеры оказались сложнее геометрии и как он оптимизировал сцену.
• Designer Spotlight и Developer Spotlight — интервью с людьми об их сайтах и работе. Полезно, когда нужна логика сайта, а не картинка.

Галереи сайтов

• Recent.design (бывший Godly) — отборные сайты, много персональных. Есть фильтр по типу.
• Minimal Gallery — минимализм, если твоё портфолио про работы, а не про сайт.
• Siteinspire — большая база с фильтром Portfolio.
• Awwwards — награды. Смотри Site of the Day с фильтром Portfolio: там же видно, что сейчас считается «слишком».
• httpster — сайты, которые не похожи на шаблон.
• Dark Mode Design — если хочешь тёмный.
• Land-book — в основном лендинги, но есть категория Portfolio.

Только портфолио

• Bestfolios — UX, продукт, графика, моушн; плюс резюме и кейсы.
• Pafolios — фильтр по дисциплине, высокие превью.
• Portfolio Project — курируемые портфолио дизайнеров и разработчиков.
• Killer Portfolio — с комментарием, почему каждое портфолио работает.
• Personal Sites — личные сайты людей, без студий.
• Prettyfolio — красивые портфолио дизайнеров со всего мира.

Мудборд собирай в Savee, Cosmos или Are.na. Mobbin — для UI-паттернов внутри продуктов, для портфолио он не нужен.

Как смотреть

1. Открой 20–30 сайтов за вечер, сохрани 5–7.
2. По каждому запиши одной фразой, что именно нравится: сетка, типографика, темп прокрутки, подача картинок. Слово «вайб» не считается.
3. Выбери один сайт как референс структуры и один-два — как референс настроения. Больше трёх референсов в промпте — и агент сделает кашу.
4. Сделай скриншоты выбранных, они пойдут в промпт. Картинки агент понимает лучше, чем описания.

Не копируй сайт целиком. Это портфолио дизайнера, и первое, что по нему оценят, — твой вкус. Как превращать референс в задачу агенту, подробно разобрано в теме «Вайбкодинг: сайты», раздел «Референсы вокруг».

Для портфолио бери терминального или десктопного агента — Claude Code или Codex. У портфолио нет бэкенда, это статичные файлы. Важнее всего прямой доступ к репозиторию и свобода выбора хостинга и домена. Три дороги из темы «Вайбкодинг: сайты» в применении к этому проекту:

Если уже собрал что-то в Lovable или v0, не выбрасывай. Синхронизируй проект с GitHub: у Lovable это двусторонняя синхронизация одной ветки (документация). Дальше работай с репозиторием, как описано ниже. Деплоить и привязывать домен можно уже мимо их платформы.

Стек: чем проще, тем лучше

• Чистый HTML + CSS + немного JS. Один index.html, никакой сборки, деплоится куда угодно, открывается двойным кликом. Для одностраничного портфолио это лучший вариант. Агенту проще править, тебе проще читать.
• Astro. Если нужны отдельные страницы кейсов, контент в markdown и автоматическая оптимизация картинок. На выходе всё равно статичный HTML. Искра сама сделана на Astro. Готовые стартовые шаблоны — в astro.build/themes и на GitHub по тегу portfolio-template.
• Next.js, React и прочее. Для портфолио избыточно. Агент предложит их первыми, потому что их больше в обучающих данных. Отказывайся.
• Framer, Webflow, Figma Sites. Это не вайбкодинг, но честный вариант, если ты про анимации и не хочешь кода вообще. Дальше тема не про них.

Скажи агенту прямо в первом промпте: «статичный сайт, без бэкенда, без базы данных, без логинов, без фреймворков». Иначе получишь Next.js с API-роутами и будешь разбираться, почему сборка упала на хостинге.

Как поставить терминальных агентов, разобрано в теме «CLI и терминальные ИИ-агенты». Как настроить их под себя через CLAUDE.md и AGENTS.md — в теме «Терминальные агенты: настройка под себя». Для портфолио хватит короткого CLAUDE.md (для Codex — AGENTS.md) в корне проекта. В нём 5–10 строк: стек, где лежит контент, чего не делать, как коммитить.

GitHub — сервис, где код проекта хранится в виде репозитория: папки с историей всех изменений. Внутри работает Git, система версий, а GitHub — сайт вокруг неё. Для портфолио он нужен по четырём причинам:

1. История и резервная копия. Любая версия сайта восстанавливается. Агент сломал вёрстку — откатил одной фразой.
2. Деплой. Vercel, Netlify, Cloudflare и GitHub Pages подключаются к репозиторию и пересобирают сайт сами после каждого изменения. Без GitHub деплой превращается в ручную загрузку файлов.
3. Агенты. Claude Code и Codex в облаке работают только с репозиториями: клонируют, правят, отдают изменения на проверку. Значит, править сайт можно с телефона.
4. Портфолио как код. Публичный репозиторий сам по себе — строчка в резюме дизайнера, который вайбкодит.

Словарь на один экран

• Репозиторий (repo) — проект с историей.
• Коммит — сохранённое изменение с подписью: «добавил кейс про банк».
• Ветка (branch) — параллельная версия проекта. main — основная, с неё публикуется сайт.
• Pull request (PR) — предложение влить ветку в main. Внутри видно diff, то есть что именно поменялось.
• Clone — скачать репозиторий на компьютер. Push — отправить коммиты на GitHub. Pull — забрать чужие или агентские коммиты себе.
• README — текст на главной репозитория: что это и как запустить.

Больше слов — в теме «Технический фундамент веб-приложения для дизайнера».

Создать аккаунт и репозиторий

1. github.com → Sign up. Логин станет частью адреса логин.github.io, если понадобится GitHub Pages. Бери его без цифр и дефисов. Бесплатного плана хватит.
2. Справа сверху + → New repository. Имя — portfolio или фамилия-site. Public. Отметь Add a README file. Нажми Create repository.
3. Всё. Пустой репозиторий есть, дальше с ним будет работать агент.

Если сайт будет на GitHub Pages без своего домена, назови репозиторий логин.github.io. Тогда сайт откроется по корню адреса, а не по логин.github.io/portfolio.

Git-команды учить не надо

Агент коммитит и пушит сам, если попросить: «закоммить с понятным сообщением и запушь в main». Сломалось — «покажи последние пять коммитов и откати к тому, где сетка ещё была цела». Если хочется кнопок вместо слов, поставь GitHub Desktop. Скачал, вошёл, нажал Clone — и папка на диске синхронизируется с GitHub через интерфейс.

Одно правило запомни сам: в публичный репозиторий не попадают пароли, ключи API и файл .env. В статичном портфолио их и не будет. Если подключишь форму или аналитику, загляни в тему «Безопасность вайбкодинг-проекта».

Агент работает с репозиторием в одном из двух режимов. Локально — в папке на твоём компьютере. В облаке — на серверах Anthropic или OpenAI. Подключение у них разное. Для портфолио минимум — локальный режим. Облако пригодится, когда захочешь править сайт с телефона.

Локально: агент в папке на компьютере

Claude Code, Codex CLI, Claude Desktop (вкладка Code) и приложение Codex открывают папку проекта. Если папка — клон репозитория, агент сам видит git и делает коммиты. Один раз надо:

1. Проверить Git. В терминале git --version. На Mac он обычно есть, на Windows ставится с git-scm.com.
2. Поставить GitHub CLI. cli.github.com, затем gh auth login → GitHub.com → HTTPS → Login with a web browser. После этого агент может пушить и создавать PR от твоего имени, а Claude Desktop — следить за статусом PR.
3. Клонировать репозиторий. Скажи агенту «клонируй github.com/логин/portfolio в папку Sites» или выполни сам gh repo clone логин/portfolio.

В Claude Desktop: вкладка Code → + New session → среда Local → выбрать папку. Рядом с чатом открывается превью сайта. Claude сам запускает локальный сервер и проверяет свои правки в браузере. Документация: Claude Code Desktop. В приложении Codex всё так же: открыл папку проекта и пишешь.

В облаке: агент на чужом сервере

Здесь GitHub обязателен. Агент клонирует репозиторий в свою виртуальную машину, правит, пушит ветку, а ты смотришь diff и создаёшь PR. Ноутбук можно закрыть, сессия продолжится.

Claude Code в облаке (claude.ai/code, тарифы Pro, Max, Team):

1. Зайди на claude.ai/code → Sign in with GitHub → разреши доступ.
2. Установи Claude GitHub App на свой аккаунт. Публичные репозитории видны и без него, приватные — только с ним. Он же включает автоисправление PR, если сборка упала.
3. Среда Default создастся сама. Под строкой ввода выбери репозиторий и ветку, напиши задачу, нажми Enter.
4. Когда готово, открой diff (показатель вида +42 −18), оставь комментарии к строкам, нажми Create PR. Сессия жива и после PR: можно просить правки дальше.

То же самое работает из Claude Desktop (среда Cloud вместо Local) и из мобильного приложения Claude (вкладка Code). Из терминала команда /web-setup передаст токен gh в облако, дальше — claude --cloud. Пошагово — в быстром старте.

Codex в облаке (chatgpt.com/codex). Облачный Codex есть на тарифах ChatGPT от Plus и выше, на бесплатном — только локальный. Облачные задачи тратят лимит быстрее локальных.

1. chatgpt.com/codex → подключи GitHub → разреши Codex GitHub App доступ к репозиторию.
2. Создай Environment: выбери репозиторий. Setup-команды для статичного сайта не нужны.
3. Поставь задачу. Codex работает в своём контейнере и отдаёт PR.
4. Для ревью включи репозиторий в настройках Code review. Тогда в любом PR комментарий @codex review вернёт разбор проблем. Документация: Codex cloud, Codex + GitHub.

@claude и @codex прямо в GitHub

Можно вообще не открывать агента. В терминале Claude Code в папке проекта введи /install-github-app. Он установит приложение, создаст секрет с доступом к твоей подписке и откроет PR с файлом workflow. Сливаешь этот PR — и дальше пишешь в любом issue или PR: «@claude поправь выравнивание карточек на мобильных». Claude отвечает комментарием и присылает коммит. Тратятся минуты GitHub Actions и лимиты подписки. Бесплатного лимита Actions для публичного репозитория хватает. Документация: Claude Code GitHub Actions.

У Codex после подключения облака @codex работает в комментариях к PR и issue (ревью и правки) без отдельного workflow. Это функция платных тарифов.

GitHub в обычном чате Claude

В claude.ai нажми + → Add from GitHub → выбери файлы репозитория. Так агент только читает код, без правки. Можно спросить «объясни, что делает этот файл» или «перепиши текст hero короче» и забрать результат вручную. В Projects репозиторий добавляется в знания проекта и обновляется кнопкой Sync (инструкция). Удобно писать тексты кейсов, видя текущую структуру сайта.

Пять промптов ниже — весь маршрут от пустой папки до сайта в main. Они написаны для Claude Code, но в Codex работают без изменений, только CLAUDE.md называй AGENTS.md. Каждый собран из тех же пяти частей, что в теме «Фундамент»: роль, контекст, задача, формат ответа и ограничения.

Промпт 1. Интервью: агент собирает требования сам

Быстрее всего не забыть ничего, если вопросы задаёт агент, а ты отвечаешь. Открой агента в папке с content.md и картинками:

Ты — арт-директор и фронтенд-разработчик. Я дизайнер, собираю сайт-портфолио. Прочитай content.md и посмотри папку images.

Задай мне вопросы, которых не хватает для сборки: по одному, не больше десяти всего. Спрашивай про цель (кто будет смотреть и что должен сделать после), структуру (одна страница или кейсы), визуальный тон, шрифты, цвета, анимации, что точно нельзя. Не спрашивай то, что уже есть в файлах. Если я отвечаю «не знаю» — предложи два варианта и свою рекомендацию.

В конце собери ответы в файл SPEC.md: цель, аудитория, карта страниц, блоки каждой страницы сверху вниз, типографика, палитра, поведение на мобильных, список «не делать». Ничего не кодируй, пока я не скажу «спека ок».

Десять ответов займут пятнадцать минут. SPEC.md остаётся в репозитории. В любой следующей сессии агент прочитает его и не будет переспрашивать. В Plan-режиме (Shift+Tab в Claude Code, режим Plan в Desktop) агент физически не сможет начать кодить раньше времени.

Промпт 2. Правила проекта

Создай CLAUDE.md в корне проекта на 5–10 строк: это статичный сайт-портфолио без фреймворков и сборки; контент берётся из content.md, требования — из SPEC.md; картинки лежат в /images и не переименовываются; не добавлять библиотеки без спроса; не трогать тексты, которые я не просил менять; после каждой задачи проверять сайт в браузере на ширине 390 и 1440 px; коммитить только когда я скажу, сообщения коммитов — по-русски, коротко, по сути.

Этот файл агент читает в начале каждой сессии. Без него через неделю ты будешь объяснять всё заново. Подробнее — в теме «Терминальные агенты: настройка под себя».

Промпт 3. Первая версия

Спека ок. Собери первую версию по SPEC.md и content.md.

Файлы: index.html, styles.css, script.js, /images. Без сборки и без библиотек.

Референсы: ref-structure.png — бери сетку и иерархию; ref-mood.png — бери настроение и работу с цветом. Не копируй ни один.

Ограничения: шрифт один, с Google Fonts, подключён с preconnect; два цвета плюс чёрный и белый; картинки через <img loading="lazy"> с осмысленным alt и заданными width/height; адаптив от 360 px; одна анимация — появление карточек при скролле, с уважением prefers-reduced-motion; никаких каруселей, прелоадеров и курсоров; HTML без картинок весит до 100 КБ.

Закончив — запусти локальный сервер, открой сайт на 390 и 1440 px, исправь что сломано, покажи мне скриншоты обеих ширин. Не коммить.

Агент сам открывает браузер и смотрит на результат. В Claude Desktop это встроено, в терминале попроси поставить Playwright. Просьба «покажи скриншоты» экономит половину итераций: ты видишь проблему раньше, чем сам открыл сайт.

Промпт 4. Итерации

Одна правка — одно сообщение. Скриншот с обводкой лучше трёх абзацев. Шаблоны, которые работают:

• «На 390 px заголовок наезжает на картинку, см. скриншот. Исправь только это, остальное не трогай.»
• «Увеличь вертикальные отступы между секциями до 120 px на десктопе и 64 px на мобильных» — вместо «сделай воздушнее».
• «Предложи три типографические шкалы для этого сайта и покажи их на одной тестовой странице typo.html, не меняя index.html.» Так варианты сравниваются рядом, а не по памяти.
• «Сделай hover на карточках как в этом демо Codrops: [ссылка]. Прочитай их код, возьми принцип, адаптируй под мою разметку без новых библиотек.»
• «Почему страница грузится три секунды? Объясни, потом предложи исправление, не делай сразу.» Когда непонятно, сначала разберись (тема «Чтение и отладка кода агента»).
• «Верни как было до последнего изменения» — если агент «заодно улучшил» то, что не просили.
• «Закоммить: кейсы — добавлены подписи к картинкам» — после каждой удачной итерации. Следующая сломает — будет куда откатиться.

Если делаешь кейсы отдельными страницами: «Создай шаблон страницы кейса case.html по блокам из SPEC.md, собери по нему первый кейс из content.md и покажи. Остальные соберём после моего ок». На Astro то же делается коллекцией markdown-файлов: «кейсы — в src/content/projects, страница на кейс генерируется автоматически».

Промпт 5. Проверка перед публикацией

Пройди по сайту как ревьюер и дай список проблем с приоритетами, пока ничего не исправляй: остатки плейсхолдеров и lorem ipsum; битые ссылки и картинки; картинки тяжелее 500 КБ; горизонтальный скролл на 360–430 px; контраст текста ниже 4.5:1; картинки без alt; несколько h1; нет title, description, og:image, favicon; ссылки наружу без rel="noopener". Потом исправь то, что я отмечу.

На чём спотыкаются в первом портфолио

• Картинки по 5 МБ. Промпт: «Сожми все картинки в /images в WebP до 1600 px по длинной стороне скриптом, оригиналы перенеси в /images-src и добавь её в .gitignore».
• Анимации везде. Одна хорошая лучше десяти. Агент сам не остановится, останови его ты.
• «John Doe» и «Lorem ipsum» в футере спустя месяц. Промпт 5 ловит это.
• Нет мобильной версии. Половина людей откроет ссылку из мессенджера с телефона.
• Агент переписал твои тексты «покрасивее». Строка «не трогать тексты» в CLAUDE.md существует именно для этого.

Деплой — это публикация сайта по реальному адресу. Для статичного портфолио он бесплатный и занимает пять минут. Все четыре сервиса ниже работают одинаково: подключаешь репозиторий GitHub, и каждый push в main становится новой версией сайта. HTTPS везде включается сам.

Источники лимитов: Vercel Hobby, Netlify Pricing, Cloudflare Pages Limits, GitHub Pages Limits. Данные на октябрь 2026, тарифы меняются.

Vercel за пять шагов

1. vercel.com → Sign Up → Continue with GitHub. Один аккаунт на всё, никаких паролей.
2. Add New… → Project → Import напротив репозитория portfolio. Если список пустой, разреши Vercel доступ к репозиторию в GitHub.
3. Framework Preset: для чистого HTML — Other, ничего не меняй. Astro и Next.js Vercel определит сам. Нажми Deploy.
4. Через минуту появится адрес вида portfolio-xyz.vercel.app. Открой его на телефоне.
5. Дальше ничего нажимать не надо. Каждый push в main — новая версия сайта. Каждая другая ветка и PR получают отдельную превью-ссылку, её можно показать другу до публикации.

Агент может сделать то же из терминала: «поставь Vercel CLI, залогинь меня и задеплой проект». Но подключение через сайт надёжнее. Деплой будет автоматическим и не будет зависеть от того, открыт ли у тебя терминал.

GitHub Pages за три шага

1. В репозитории: Settings → Pages.
2. Source: Deploy from a branch → ветка main, папка / (root) → Save.
3. Через пару минут сайт откроется по логин.github.io/portfolio или по корню, если репозиторий назван логин.github.io. Для Astro нужен шаг сборки. Попроси агента: «настрой деплой Astro на GitHub Pages через GitHub Actions».

Если сборка упала

На хостинге горит красный Failed? Лог сам не читай. Скопируй его целиком агенту: «деплой на Vercel упал, вот лог — объясни причину и исправь». Девять раз из десяти это одно из трёх. Регистр в имени файла: Hero.png против hero.png на Mac работает, на сервере нет. Неверная папка сборки. Версия Node. Если подключён Claude GitHub App, Claude в облаке сам предложит исправление прямо в PR.

Домен — имя, которое ты арендуешь на год и продлеваешь. Хостинг (Vercel) и домен (регистратор) — два разных сервиса. Их связывает DNS-запись, которая говорит: «за этим именем — вот тот сервер».

Как выбрать имя

• Имя и фамилия — самый долгоживущий вариант. Он не привязан к студии, нише и городу: annapetrova.com, petrova.design.
• Зона. .com понятен всем и дешёв при продлении. .design, .studio, .me, .dev читаются профессионально, но смотри на цену продления, а не первого года. На Porkbun .design стоит около $11 за первый год и около $47 за каждый следующий, .studio — $12 и $42, .dev — $9 и $13.
• Проверь вслух. Имя должно диктоваться по телефону без «через дефис» и «две н». Без цифр, без дефисов, без транслита с двойным прочтением (yu/iu, kh/h).
• Проверь соседей. Свободен ли тот же ник в Instagram, Telegram, GitHub? Одинаковое имя везде запоминается лучше.

Где купить

Цены на .com с бесплатной защитой WHOIS, в долларах. Точные цены — из прайса Porkbun, у остальных — ориентир, точную цену смотри на сайте регистратора:

Есть путь вообще без настройки DNS: купить домен прямо у Vercel (vercel.com/domains). Дороже, зато к проекту он привязывается одним кликом.

Домен арендуется, а не покупается навсегда. Включи автопродление и держи рабочую карту в аккаунте. Пропустишь платёж — и имя с твоей фамилией уйдёт перекупщикам. Брать на пять лет вперёд не обязательно, а на два — разумно.

Подключить к Vercel

1. В Vercel: проект → Settings → Domains → Add Domain → введи annapetrova.com. Vercel предложит заодно добавить www — соглашайся, один из двух будет редиректить на другой.
2. Vercel покажет записи, которые надо добавить у регистратора. Для корня — A-запись, обычно на 76.76.21.21, но у нового проекта в карточке домена может стоять другой адрес — бери его. Для www — CNAME на адрес вида xxxx.vercel-dns-017.com, у каждого проекта свой. Копируй значения со своего экрана, а не из статей.
3. У регистратора открой раздел DNS (у Porkbun — DNS Records рядом с доменом). Добавь обе записи. Удали старые A и CNAME на парковочную страницу регистратора, если они были.
4. Через время от 5 минут до пары часов статус в Vercel станет зелёным, сертификат HTTPS Vercel выпустит сам. Документация: Adding a Custom Domain.

Другой вариант — отдать Vercel весь DNS: сменить у регистратора nameservers на ns1.vercel-dns.com и ns2.vercel-dns.com. Тогда записи ставятся сами. Но и почта на домене, если она появится, настраивается там же.

Подключить к GitHub Pages

Settings → Pages → Custom domain → введи домен → Save. У регистратора добавь четыре A-записи на 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153 и CNAME www на логин.github.io. Когда галочка Enforce HTTPS станет активной (это до суток), поставь её. Инструкция GitHub.

Если запутался, агент знает интерфейсы регистраторов: «Домен куплен на Porkbun, сайт на Vercel, вот скриншот страницы Domains в Vercel и скриншот DNS у Porkbun. Скажи, какие записи добавить и какие удалить». Проверить, что записи разошлись по миру, можно на dnschecker.org.

Всё ниже агент делает за один-два промпта, но без просьбы не сделает. Именно эти мелочи отличают «сделал сайт» от «сделал продукт».

• Заголовок и описание страницы. <title> и <meta name="description"> на каждой странице: «Анна Петрова — продуктовый дизайнер, Дубай». По этому тексту тебя найдут в Google по имени.
• Open Graph. og:title, og:description, og:image размером 1200×630. Это картинка, которая появляется, когда ссылку кидают в Telegram, LinkedIn или iMessage. Без неё превью пустое, и портфолио дизайнера выглядит как спам. Проверь на opengraph.xyz или отправь ссылку себе в «Избранное» в Telegram.
• Favicon. SVG для браузеров и PNG 180×180 для iPhone. realfavicongenerator.net сделает весь набор из одной картинки.
• Скорость. PageSpeed Insights: цель — 90+ на мобильном. Два главных врага — несжатые картинки и тяжёлые шрифты. Отдай агенту ссылку на отчёт: «вот результат PageSpeed, исправь всё красное и оранжевое, не меняя внешний вид».
• Доступность. alt у картинок, контраст текста от 4.5:1, видимый фокус на ссылках, один h1. Промпт: «проверь сайт по WCAG AA и исправь, что найдёшь, списком отчитайся». Для дизайнера это ещё и вопрос репутации.
• Ссылки наружу. Все с target="_blank" rel="noopener". «Пройди по всем ссылкам сайта и проверь, что каждая открывается» — агент сделает это за минуту.
• Форма контакта не нужна. mailto: и ссылка на Telegram работают лучше и не ломаются. Если очень хочется форму, возьми Formspree или Netlify Forms, без своего бэкенда.
• robots.txt и sitemap.xml. Агент их сгенерирует. Потом добавь сайт в Google Search Console. Через неделю увидишь, по каким запросам тебя находят.

Аналитика и как ИИ помогает её читать

Самый простой вариант — Vercel Web Analytics. Одна галочка в проекте, 50 000 событий в месяц на Hobby, без cookie-баннера. Альтернативы без cookies — Plausible (платный) и Umami (есть бесплатный облачный план). Google Analytics 4 для портфолио избыточен. Но если он уже стоит или нужен для рекламы, это нормально: агент поставит тег по твоему ID за один промпт.

Смотреть в аналитику самому скучно и непонятно, особенно в GA4. Здесь ИИ работает аналитиком. Выгрузи отчёт за месяц в CSV: в GA4 открой отчёт → справа сверху Share this report → Download File → CSV или Google Sheets (инструкция Google). Или сделай скриншоты вкладок «Источники трафика», «Страницы», «Демография», «Устройства». Всё это отдай в чат:

Вот выгрузка Google Analytics по моему портфолио за месяц. Объясни без жаргона: откуда приходят люди (LinkedIn, Behance, поиск, мессенджеры), из каких стран и с каких устройств, какие кейсы открывают чаще и дочитывают ли, где уходят. Потом сделай три вывода и предложи три изменения на сайте, которые из этого следуют. Если данных мало для вывода — так и скажи, не натягивай.

Типичные открытия выглядят так. 70% трафика с телефонов — значит, мобильная версия основная. Один кейс смотрят в пять раз чаще остальных — поставь его первым. Половина людей приходит из одного поста в LinkedIn — пиши ещё. Аналитика превращает портфолио из визитки в продукт, который ты развиваешь по данным. Это само по себе хороший кейс для разговора на собеседовании.

Проект сдан, когда отмечены все пункты. Половину из них проверяет промпт 5 из раздела про вайбкодинг.

• Контент: 3–6 проектов с картинками и текстами, «обо мне», контакты — ни одного плейсхолдера
• Репозиторий на GitHub: main — рабочая версия, коммиты с понятными сообщениями, в корне — CLAUDE.md или AGENTS.md, SPEC.md, README
• Агент подключён к репозиторию (локально через gh или в облаке), и хотя бы одна правка прошла путь «задача → PR → сайт»
• Сайт на хостинге и пересобирается сам после push
• Свой домен, HTTPS работает, www и корень ведут на одну версию, автопродление включено
• Открывается на телефоне (360–430 px) без горизонтального скролла и наездов
• PageSpeed на мобильном — 90 и выше, картинки сжаты
• title, description, OG-картинка: превью в Telegram показывает картинку и твоё имя
• Favicon виден во вкладке
• Все ссылки работают, почта открывается по клику
• Аналитика подключена и считает хотя бы твои собственные визиты
• Ссылка на сайт стоит в био LinkedIn, Behance, Telegram и в подписи почты

Как понять, что проект закончен: отправь ссылку трём людям в мессенджере. Никто не спросил «а где посмотреть работы?» и «а почему у меня не открывается?» — готово. Если кто-то сказал «о, сам сделал?», это и была цель.

Вдохновение

• Codrops: главная · Webzibition · Creative Hub · Tutorials · Case studies · Designer Spotlight · лицензия демо
• Галереи: Recent.design · Minimal Gallery · Siteinspire · Awwwards · httpster · Dark Mode Design · Land-book
• Только портфолио: Bestfolios · Pafolios · Portfolio Project · Killer Portfolio · Personal Sites · Prettyfolio
• Мудборды: Savee · Cosmos · Are.na

Инструменты и GitHub

• GitHub · GitHub Desktop · GitHub CLI · Git · Hello World от GitHub
• Claude: Claude Code в облаке — быстрый старт · Claude Code Desktop · GitHub Actions и @claude · Claude GitHub App · GitHub в чате claude.ai
• Codex: Codex cloud · Codex + GitHub · chatgpt.com/codex
• Стек: Astro themes · Astro portfolio templates на GitHub · Lovable ↔ GitHub

Деплой и домен

• Vercel · лимиты Hobby · подключение домена
• Netlify · Cloudflare Pages · GitHub Pages · домен для GitHub Pages
• Регистраторы: Porkbun · Cloudflare Registrar · Spaceship · Namecheap · сравнение цен · dnschecker.org

Финальные штрихи

• Squoosh — сжать картинки · realfavicongenerator.net · opengraph.xyz · PageSpeed Insights · Google Search Console · Plausible · Umami · Formspree

Связанные темы материала

• «Технический фундамент веб-приложения для дизайнера» · «Вайбкодинг: сайты» · «CLI и терминальные ИИ-агенты» · «Терминальные агенты: настройка под себя» · «Чтение и отладка кода агента» · «Безопасность вайбкодинг-проекта» · «Нейрослоп» · «Портфолио: как презентовать проекты с ИИ» · «Пет-проект»