Как сделать сайт-портфолио: от контента до своего домена
Как собрать свой сайт с помощью нейросети, без кода и конструкторов: контент, референсы, промты, мобильная версия и публикация на свой домен.
1. Введение
Behance и Dprofile — удобные площадки, но там ваши работы всегда живут в чужой сетке, рядом с чужими кейсами. Свой сайт — это витрина, которая выглядит как ваш бренд: ваши шрифты, ваш цвет, ваша подача. Раньше для этого нужен был разработчик или конструктор с шаблонами, сейчас хватит нейросети Claude: она пишет код, а вы ставите задачи и правите результат, как арт-директор.
В этой статье разберём весь путь по шагам: от сбора контента до сайта на своём домене. На каждом шаге — готовый промт, который достаточно скопировать в Claude.
Для примера покажу, как я делал свой сайт ivankaras.ru:
2. Подготовка
2.1 Что понадобится
| Инструмент | Зачем | Цена |
|---|---|---|
| Claude | Собирает сайт. Работайте в приложении Claude в режиме Cowork: так нейросеть видит папку на компьютере, создаёт файлы и проверяет результат в браузере | подписка |
| GitHub + GitHub Desktop | Облачное хранилище сайта и программа, чтобы отправлять туда обновления двумя кнопками | бесплатно |
| Timeweb Cloud | Хостинг App Platform — место, откуда открывается сайт | от 1 ₽/мес |
| Домен .ru | Адрес сайта, покупается там же, в Timeweb | ≈ 200 ₽/год |
| Figma | По желанию: если какой-то кусок сайта проще нарисовать руками | бесплатно |
По деньгам: около 200 ₽ в первый год плюс подписка на Claude. Всё остальное бесплатно.
2.2 Универсальный промт
Чтобы не собирать задачу по кусочкам, я подготовил универсальный промт. В нём заложены все этапы статьи: вопросы о вас, контент, первая версия, доработка, мобильная версия, GitHub, хостинг Timeweb Cloud App Platform и домен. Claude сам расспросит вас и проведёт по шагам.
Универсальный промт для ClaudeОтправьте его одним сообщением в новый чат Claude с подключённой папкой — и процесс запустится.
Скачать промт ↓Ниже разберём каждый этап подробнее. Отдельные промты пригодятся, если хотите пройти шаги по одному или застряли на каком-то из них.
План работы
3. Контент
Начинайте не с дизайна, а с контента. Пока его нет, вы рисуете пустые рамки и не понимаете, сколько у вас проектов и сколько текста. Соберите в одну папку:
| Раздел | Что подготовить | Совет |
|---|---|---|
| Проекты | Обложка, 5–15 слайдов, название, подзаголовок в одну строку, год, клиент, теги | Обложки — в одной пропорции |
| О себе | Пара абзацев, фото, список услуг, контакты | Пишите так, как говорите с клиентом |
| Отдельные работы | Плакаты, иллюстрации — картинки в одном формате, название, серия | Нужны, если хотите отдельную галерею |
Если проекты уже лежат на Behance или Dprofile, вручную ничего переносить не нужно — Claude заберёт их по ссылке.
Мои проекты лежат здесь: (ссылка на Behance / Dprofile). Забери тексты и картинки всех проектов и разложи их в папке сайта: у каждого проекта — обложка, слайды, название, подзаголовок, год, клиент, теги. Обложки приведи к одной пропорции. Потом покажи список: чего не хватает.
Важно! Обложки в одной пропорции — это не прихоть. Иначе сетка проектов поедет, а часть картинок обрежется.
Как это было у меня
Проекты со всеми слайдами Claude забрал с Dprofile, статьи — из Telegraph. Руками я ничего не копировал.
4. Референсы
Референсы — самая важная часть задачи для нейросети. Просьба «хочу, чтобы работы красиво листались» почти всегда превращается в обычный слайдер. Скриншот и одна фраза о том, что из него взять, работают в разы лучше.
Главный референс — ваш собственный бренд: логотип, фирменные цвета и несколько работ. Соберите их в один фрейм — из него нейросеть возьмёт характер для всего интерфейса. Остальные референсы — это механики: как листаются работы, как устроен первый экран.
| Тип референса | Что берём | Пример у меня |
|---|---|---|
| Бренд | Цвета, шрифты, графические элементы | Фрейм с логотипом и плакатами |
| Механика | Как работы листаются и двигаются | 3D-стопка, круговая карусель |
| Композиция | Как разложены блоки на экране | Сетка проектов по две в ряд |
| Настроение | Свет, фактура, подача | Фонарик на тёмной сцене |
Берите 3–5 референсов, не больше, и к каждому пишите, что именно из него взять. Референс — это не «сделай копию»: всё должно быть в вашем стиле.
Прикрепляю фрейм с логотипом и моими работами — это мой стиль: цвета, шрифты, графические элементы. Интерфейс сайта должен его продолжать.
Ещё прикрепляю референсы. Из первого возьми (механику / композицию / настроение: что именно), из второго — (что именно), из третьего — (что именно). Не копируй их, а адаптируй под мой стиль.
Как это было у меня
Первым делом я отправил Claude фрейм с логотипом и плакатами. Из него на сайт перешли лайм, серые плашки, звезда и плотный шрифт в заголовках.
Для галереи плакатов я показал 3D-стопку карточек, которую листаешь колесом мыши, а для телефона — круговую карусель:
5. Первая версия
Когда контент и референсы готовы, отправляем Claude стартовую задачу. Если вы используете универсальный промт — этот шаг он сделает сам. Если хотите начать вручную:
Помоги мне сделать сайт-портфолио. Я (профессия) из (город), мой бренд — (название). Разделы: главная (первый экран, избранные проекты, обо мне, контакты), все проекты, страница проекта.
Стиль: (3–5 слов про бренд). Цвета: (коды). Шрифты: (названия). Референсы и контент — в папке.
Сайт должен быть простым: обычные страницы на HTML, CSS и JavaScript без конструкторов, чтобы его можно было бесплатно разместить в интернете. Нужна мобильная версия. Новые проекты я хочу добавлять сам, не трогая дизайн. Сначала покажи план, потом сделай первую версию и покажи скриншоты на компьютере и телефоне.
Важно! Первая версия будет далека от идеала, и это нормально. Нейросеть соберёт рабочий сайт, но вкус, детали и характер — это ваша работа на следующем шаге. Не расстраивайтесь и не начинайте заново: дорабатывайте то, что есть.
Как это было у меня
Сначала главная встречала коллажем из работ под «фонариком». К столу с реальными предметами я пришёл только после десятков правок.
6. Доработка
Дальше работа похожа на переписку с разработчиком, только он отвечает за минуту. Чтобы правки срабатывали с первого раза:
| Как не надо | Как надо | |
|---|---|---|
| Показ | Длинное описание словами | Скриншот с пометкой: «вот тут» |
| Список | Всё одним абзацем | «1. Шапка… 2. Проекты… 3. Плакаты…» |
| Суть | «Сделай отступ 24 px и шрифт 18» | «Заголовок тесно прилип к шапке» — решение нейросеть найдёт сама |
| Откат | Терпеть неудачный вариант | «Стоп, верни как было» |
Посмотри скриншот. Что не так: (1. …, 2. …, 3. …). Исправь, затем сам открой страницу на компьютере и на телефоне и проверь, что ничего не поехало. Если решение спорное — предложи два варианта.
Как это было у меня
Вот так звучали мои правки — коротко и по делу:
В шапке не нравятся кнопки. Навигация и правые кнопки выглядят одинаково, хотя у них разная логика и смысл.
Слишком много акцентного зелёного. На обложках теги лучше перекрасить в фирменный серый.
6.1 Живой первый экран
Первый экран — лицо сайта, и здесь стоит выделиться. Если какую-то сцену проще нарисовать, соберите её в Figma и отправьте Claude ссылку на фрейм.
Вот ссылка на фрейм в Figma: (ссылка). Перенеси его на первый экран сайта: каждый объект — отдельная картинка с прозрачным фоном, расположение как в макете. Экран должен закрывать окно целиком на любом размере. Предложи, как его оживить: (ваша идея).
Важно! Экспортируйте объекты из Figma по отдельности, с прозрачным фоном и запасом по краям. Иначе тени обрежутся, а фон придётся переделывать.
Как это было у меня
Свой стол с предметами я собрал в Figma, а Claude перенёс его на сайт и сделал так, что предметы можно двигать мышкой. Брелоки получились с третьей попытки: сначала они гнулись как желе, потом крутились как спиннер.
7. Мобильная версия
Большинство откроет ваше портфолио с телефона, по ссылке из мессенджера. Проверяйте сайт на своём телефоне, а не в узком окне браузера.
| Элемент | На компьютере | На телефоне |
|---|---|---|
| Шапка | Логотип, разделы, кнопки | Логотип слева, кнопка меню справа, остальное — в меню |
| Проекты | 3–4 в ряд | 2 в ряд, обложки без обрезки |
| Первый экран | Можно сложный и интерактивный | Плюс кнопка «вниз», чтобы его было легко пролистать |
| Карусели | Колесо мыши, стрелки | Свайп влево-вправо, вертикальный — прокрутка страницы |
| Кнопки | Любого размера | Не меньше пальца |
Проверь сайт на ширине телефона и исправь по списку: шапка, проекты по две в ряд, кнопка «вниз» на первом экране, свайп в каруселях, крупные кнопки. Покажи скриншоты до и после.
Если делаете светлую тему, проверьте её отдельно: яркий акцентный цвет на светлом фоне часто не читается.
Проверь все страницы в светлой теме. Акцентный цвет (код) на светлом фоне не используй: заливки сделай тёмными, акцентный текст и линии — тёмными. Покажи список мест и исправь.
Как это было у меня
На реальном iPhone кнопки прилипли к логотипу, а первый экран было тяжело пролистать. В окне браузера на компьютере я этого не видел.
8. Публикация
Сначала разберёмся, как сайт попадает в интернет. Схема простая, и настраивается она один раз:
8.1 Подготовка
Перед выкладкой нужны мелочи, без которых сайт выглядит недоделанным: картинка-превью для ссылки в мессенджерах, иконка во вкладке браузера и страница «404» на случай неправильной ссылки.
Подготовь сайт к публикации на домене (адрес): превью для соцсетей и Telegram на всех страницах, иконка сайта, страница 404, sitemap.xml и robots.txt. Напиши скрипт, который собирает чистую копию сайта для публикации — без черновиков и служебных файлов.
8.2 GitHub
- Зарегистрируйтесь на github.com.
- Создайте публичный репозиторий — это папка проекта в облаке.
- Установите GitHub Desktop и войдите в аккаунт.
- Скопируйте репозиторий к себе на компьютер (кнопка Clone).
- Соберите в эту папку сайт и нажмите в GitHub Desktop Commit, затем Push.
Я зарегистрировался на GitHub и установил GitHub Desktop. Проведи меня по шагам: как создать репозиторий для сайта, куда его склонировать, как собрать туда сайт и отправить его кнопками Commit и Push.
8.3 Хостинг
App Platform в Timeweb Cloud сам забирает сайт с GitHub и выкладывает его в интернет. Нажали Push — через минуту сайт обновился.
- В панели Timeweb Cloud откройте App Platform → Добавить → GitHub.
- Разрешите доступ только к репозиторию с сайтом (Only select repositories).
- Тип — Frontend, фреймворк — HTML/CSS/JS, регион — Москва, тариф — минимальный.
- Дождитесь статуса «Успешно» и откройте технический адрес вида что-то.twc1.net.
Помоги разместить сайт на Timeweb Cloud App Platform из моего репозитория GitHub (название). Проведи по шагам: какие настройки выбрать, как включить автодеплой. Если деплой упадёт — я пришлю скриншот логов, разберись.
8.4 Домен
- Найдите свободный домен и оплатите — удобнее там же, в Timeweb. Для .ru понадобятся паспортные данные.
- В настройках приложения добавьте домен.
- Включите бесплатный SSL-сертификат, чтобы сайт открывался по https.
Я купил домен (адрес). Помоги привязать его к приложению в Timeweb App Platform и выпустить SSL. Если сайт не открывается — проверь по порядку: деплой, технический адрес, DNS, SSL — и скажи, где проблема.
Важно! Новый домен начинает открываться не сразу: от 15 минут до нескольких часов. У меня ушло около полутора часов — не паникуйте раньше времени.
Если прошло несколько часов, а сайт так и не открылся, проверьте по порядку:
| Что проверить | Где | Если не так |
|---|---|---|
| Деплой | Timeweb → App Platform → Деплой | Статус не «Успешно» — пришлите Claude скриншот логов |
| Технический адрес | Ссылка вида что-то.twc1.net | Не открывается — проблема на стороне хостинга, пишите в поддержку |
| Домен | Настройки приложения → домены | Домен не привязан — добавьте его |
| SSL | Там же, рядом с доменом | Сертификат не выпущен — выпустите заново |
8.5 Как обновлять сайт
↺ и так каждый раз
Добавь новый проект: папка (название), название (…), подзаголовок (…), год (…), теги (…). Затем собери сайт для публикации — я нажму Commit и Push.
Если на телефоне видна старая версия — закройте вкладку и откройте сайт заново.
9. Вывод
Свой сайт больше не требует знания кода или бюджета студии. Нужны собранный контент, хорошие референсы и терпение на десятки правок. Код берёт на себя нейросеть, выкладку — GitHub и Timeweb, а за вами остаётся главное: вкус и арт-дирекшн.
- Начинайте с контента, а не с красоты.
- Показывайте референсы и скриншоты вместо длинных описаний.
- Первая версия всегда сырая — дорабатывайте, а не начинайте заново.
- Проверяйте сайт на реальном телефоне.
Универсальный промт для ClaudeВсе этапы из статьи в одном сообщении.
Скачать промт ↓Что получилось у меня: ivankaras.ru.
Ресурсы
- Claude — нейросеть, которая собирает сайт
- GitHub и GitHub Desktop — хранение и обновление сайта
- Timeweb Cloud App Platform — хостинг и домен
- Figma — если нужен нарисованный первый экран