Сайт-портфолио с ИИ

Начало

Что получится и что нужно

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

Понадобится

• телефон или компьютер — с компьютером быстрее, но всё реально сделать и с телефона;
• аккаунт в ИИ-ассистенте: я делала в Claude (claude.ai), но подойдут и ChatGPT, и Gemini;
• ваши материалы: тексты, цифры, фото, видео;
• немного терпения на шаге с доменом.

Шаг 1

Соберите материалы

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

• О себе: имя по-русски и латиницей, кто вы в одной фразе, где живёте и работаете.
• Услуги и форматы: список того, что вы делаете для клиентов.
• Проекты: 3–8 кейсов — название, ваша роль, что сделали, какой результат.
• Цифры: просмотры, рост, выручка, число клиентов. Только то, что сможете подтвердить.
• Скриншоты статистики: страница канала, превью видео с просмотрами.
• Фото и видео: портрет для аватарки и контактов, кадры со съёмок, записи экрана с лучшими моментами.
• Ссылки: каналы, выпуски, статьи о вас.
• Контакты: почта, телефоны, соцсети — проверьте, что ссылки работают.
• Цены и форматы работы, если хотите их показать.

Шаг 2

Найдите референс и решите про языки

Найдите один-два сайта, которые нравятся по стилю, и дайте ИИ ссылку или скриншот. Так быстрее, чем объяснять словами «хочу стильно и минималистично».

• Ищите сайты людей из вашей сферы или чуть выше уровнем.
• Опишите, что именно нравится: шрифты, цвета, как стоят фото, как поданы цифры.
• Референс — пример стиля, а не шаблон. Чужие тексты, фото и логотипы не переносите.

Одна версия или несколько

Если работаете и с российскими, и с иностранными клиентами, лучше сделать два отдельных сайта, а не переключатель языков. Наполнение разное: для России важны VK, Rutube и цены в рублях, для заграницы — другие площадки, валюта и контакты.

Шаг 3

Соберите сайт с ИИ

Сайт собирается в обычном чате: вы отправляете материалы и промпт, ИИ делает страницу, которую можно сразу посмотреть. В конце вы получите один файл index.html — это и есть весь сайт.

1. Откройте новый чат. Удобнее завести под сайт отдельный проект, чтобы всё было в одном месте.
2. Загрузите фото, скриншоты и видео.
3. Скопируйте стартовый промпт и замените квадратные скобки на свои данные.
4. Смотрите результат с телефона — большинство клиентов откроют сайт именно так.

Сделай мне сайт-портфолио в виде одного файла index.html, чтобы я могла разместить его на хостинге. Все фото и гифки встрой прямо в файл.

Кто я: [имя, профессия, город].
Для кого сайт: [кто мои клиенты и что они должны сделать после просмотра — например, написать мне].
Стиль: как на сайте [ссылка], нравится [что именно].

Структура:
1. Первый экран: фото, имя, кто я, с чем работаю.
2. Проекты: у каждого заголовок, одна строка с главной цифрой, фото и гифки, подробный текст под раскрывающейся стрелкой.
3. Услуги и цены.
4. Контакты: почта, телефон, круглые иконки соцсетей.
Вверху меню «Проекты / Контакты».

Материалы по проектам: [тексты и цифры из шага 1].
Контакты: [почта, телефоны, ссылки на соцсети].

Тексты пиши от моего имени, коротко и тепло, без канцелярита. Не придумывай цифры и факты, которых нет в материалах. Сайт должен хорошо смотреться на телефоне.

Из этого видео сделай гифку для блока [название проекта]: фрагмент с [секунда] по [секунда], без вспышек и пустых кадров в конце. Обрежь интерфейс телефона и чужие водяные знаки. Сожми, чтобы сайт быстро грузился.

Шаг 4

Доведите сайт правками

Первая версия — черновик. Хороший сайт получается после 20–40 мелких правок, и это нормально.

• Одна правка — одно сообщение, или нумеруйте списком.
• Указывайте место: «в блоке про канал X, второй абзац». Ещё проще — скриншот, на котором обведено нужное место.
• Сомневаетесь — просите варианты: «предложи 3 варианта заголовка с номерами».
• Не бойтесь отката: «шаг назад, верни как было» работает.
• Проверяйте факты сами: перечитайте каждое имя, фамилию и цифру.
• Покажите кому-то со стороны: свежий взгляд сразу видит, где много текста.

Проанализируй весь текст сайта глазами заказчика. Что лишнее, что непонятно, чего не хватает? Сначала покажи список, ничего не меняй.

Сократи текст в блоке [название], убери воду. Цифры и факты оставь.

Сделай из цифр в блоке [название] инфографику в одну строку: крупная цифра и подпись под ней.

Спрячь длинные описания проектов под раскрывающуюся стрелку с плавной анимацией. Картинки и главная цифра пусть остаются на виду.

Сделай версию сайта на английском отдельным файлом. Имя пиши так: [ваше имя латиницей]. Убери всё, что важно только для России: [например, российский номер, VK, цены в рублях].

Шаг 5

Выберите, где разместить сайт

Хостинг — место, где лежит ваш файл и откуда его видят посетители. Я выбрала Cloudflare Pages: бесплатно, без рекламных плашек, загрузка прямо с телефона.

Как загрузить на Cloudflare Pages

1. Зарегистрируйтесь на dash.cloudflare.com, тариф Free.
2. Меню → Compute → Workers & Pages → Create.
3. Внизу экрана нажмите маленькую ссылку Continue to Pages.
4. Drag and drop your files → Get started → имя проекта латиницей.
5. Загрузите папку с index.html или zip-архив → Deploy site.
6. Откройте адрес вида imya.pages.dev и проверьте.

Если клиенты в основном в России, попросите пару знакомых открыть сайт после запуска. Цены и условия хостингов меняются — проверяйте их перед оплатой.

Шаг 6

Купите домен

Домен — адрес сайта вроде imya.ru. Без него сайт тоже работает, но по техническому адресу imya.pages.dev, а это выглядит менее солидно.

Какой выбрать

• Идеально — имя или фамилия латиницей, как в соцсетях.
• .ru — для российской аудитории.
• .com, .pro, .me — для международной; .pro хорошо подходит специалистам, если .com занят.
• Без дефисов, цифр и сложных сочетаний букв.

Где купить

Шаг 7

Подключите домен к сайту

Самая «техническая» часть, но на неё уходит четверть часа и немного терпения. Ниже путь для домена из Рег.ру. Если домен куплен в Cloudflare, начинайте с пункта 6.

1. Добавьте домен в Cloudflare: Domains → Add domain → ваш домен → тариф Free.
2. Удалите старые записи. Cloudflare покажет записи от регистратора — обычно заглушки типа A с чужим IP. Удалите их (карандаш → Delete). На окно «Add records later» нажимайте Confirm.
3. Скопируйте два DNS-сервера вида имя.ns.cloudflare.com.
4. Впишите их в Рег.ру: Домены и услуги → ваш домен → DNS-серверы → карандаш → Свой список DNS-серверов → вместо ns1.reg.ru и ns2.reg.ru → сохранить. В Cloudflare нажмите I updated my nameservers.
5. Ждите. Обычно от получаса до нескольких часов, иногда до суток. Всё это время будет красное «Invalid nameservers» — это нормально. Когда станет зелёное Active, придёт письмо.
6. Привяжите домен: Workers & Pages → ваш проект → Custom domains → Set up a custom domain → домен → Activate domain. Повторите для www.
7. Если просит «Complete DNS setup»: домен → DNS → Records → удалите лишнее → Add record: CNAME, имя @ (или www), цель имя.pages.dev → Save → Check DNS records.
8. Проверьте через 5–10 минут в приватной вкладке. Замочек в адресной строке — всё готово.

Шаг 8

Как обновлять сайт потом

Домен больше трогать не нужно — просто загружаете новую версию файла.

1. Внесите правки в том же чате с ИИ и попросите новый index.html или zip.
2. Сохраните его: «Поделиться» → «Сохранить в Файлы». Имя должно остаться index.html.
3. Cloudflare → Workers & Pages → проект → Deployments → Create deployment → загрузите файл.
4. Через минуту проверьте сайт в приватной вкладке.

Шаг 9

Подводные камни

Всё это случилось со мной, пока я делала свой сайт. Нажмите на проблему, чтобы увидеть решение.

Шаг 10

Юридические мелочи

Указывать цены и услуги на личном сайте можно, но кое о чём стоит подумать заранее. Это не юридическая консультация: если принимаете оплату через сайт или собираете данные клиентов, покажите сайт юристу или бухгалтеру.

• Цены и оферта. Чтобы цену не сочли обязательством оказать услугу любому, добавьте мелко: «цены указаны для ориентира и не являются публичной офертой». Можно писать «от 10 000 ₽».
• Валюта. Указывайте цены только в той валюте, в которой реально можете принять оплату. Если вы принимаете только рубли, цены в долларах или евро на международной версии не пишите — лучше «стоимость по запросу».
• Реквизиты. Работаете через ИП — внизу сайта можно указать название и регистрационные номера, например ИНН или ОГРНИП. Паспортные данные и домашний адрес не выкладывайте никогда.
• Формы и анкеты. Имена и телефоны из формы (например, Tally, см. бонус) — это персональные данные. В России для их сбора нужны политика обработки и согласие человека; уточните требования у юриста. Простой вариант — не собирать данные на сайте, а дать кнопки «написать в Telegram» и почту.
• Чужие лица и материалы. Если в кейсе есть люди с именами и фото или кадры из чужих шоу, спросите у них или у продакшена, не против ли они, и честно опишите свою роль.
• Налоги. Оплату за услуги принимайте официально: через ИП или самозанятость.

Шаг 11

Чек-лист перед запуском

Пройдитесь по списку перед тем, как рассылать ссылку.

• Открыла сайт на телефоне и компьютере, всё читается и ничего не обрезано
• Перечитала все имена, фамилии, названия и цифры
• Проверила каждую ссылку: соцсети, каналы, почта, телефон
• Сайт грузится быстро, гифки не тормозят
• На фото нет случайных людей и чужих водяных знаков
• Есть пометка про оферту, если указаны цены
• Домен открывается с замочком — и с www, и без
• 2–3 знакомых открыли сайт со своих телефонов, в том числе из России
• Сохранила у себя последний файл index.html
• Включила автопродление домена
• Добавила ссылку на сайт в шапку профиля в соцсетях

Готово. Теперь у вас есть адрес, который можно отправить любому клиенту вместо длинного рассказа о себе.

Бонус

Анкеты и заявки через Tally

Если хотите собирать заявки на консультацию или запись прямо с сайта, делайте анкету в Tally. По интерфейсу она в разы удобнее и лаконичнее, чем Google Формы или Яндекс Формы: один вопрос на экране, аккуратный дизайн, хорошо смотрится с телефона. У меня Tally и Cloudflare открывались из России без жалоб.

Почему Tally

• Чистый современный вид, который не портит стиль вашего сайта.
• Все заявки собираются в одном месте, и можно получать уведомления на почту.
• Базовых возможностей бесплатного тарифа обычно хватает для анкеты на консультацию.
• Форму можно собрать прямо из чата с Claude.

Как собрать анкету через Claude

1. Зарегистрируйтесь на tally.so.
2. В настройках Claude подключите Tally — его можно найти среди коннекторов и навыков.
3. Попросите Claude сделать анкету — промпт ниже.
4. Проверьте форму в Tally и опубликуйте её. Вы получите ссылку вида tally.so/r/…
5. Попросите ИИ добавить на сайт кнопку, которая ведёт на эту ссылку.

Создай в Tally анкету для записи на [консультацию / услугу]. Поля: имя, как связаться (Telegram или телефон), ссылка на ваш проект или соцсети, что хотите разобрать, удобные даты. В конце — текст «Спасибо! Я свяжусь с вами, чтобы договориться о дате и формате». Добавь согласие на обработку персональных данных.

Добавь в блок [название] маленькую кнопку «заполнить анкету →», которая открывает [ссылка на форму Tally] в новой вкладке. Кнопка в стиле сайта, сразу после текста.