Как сделать лендинг-визитку с портфолио через Claude Code

Лендинг-визитка — это одна страница, которая рассказывает о тебе: кто ты, что умеешь, примеры работ и как с тобой связаться. Это идеальный второй-третий проект для новичка: сложнее простой странички, но всё ещё закрывается за вечер и приносит реальную пользу — ссылку, которую не стыдно кинуть заказчику. Разберём по шагам, как собрать такую через Claude Code.

Чем визитка отличается от лендинга с формой

Визитка — это про «показать себя»: имя, короткое описание, портфолио, контакты. Её задача — произвести впечатление и дать способ связаться. Лендинг с формой заявки — это уже про «собрать заявки», там центральный элемент это форма, которая отправляет данные. Если тебе нужен именно сбор заявок, посмотри отдельный разбор «Лендинг с формой заявки через Claude Code». Здесь же — про чистую визитку.

Шаг 1. Собери материалы заранее

Прежде чем открывать Claude Code, собери в одном месте всё, что пойдёт на страницу: своё имя и короткое описание себя, 3–6 примеров работ (ссылки или скриншоты), контакты. Когда материалы под рукой, промпт получается конкретным, а результат — точным.

Шаг 2. Опиши задачу первым промптом

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

💡 Пример первого промпта

«Сделай одностраничный сайт-визитку. Сверху — моё имя и подпись "видеооператор". Ниже блок портфолио из четырёх работ с названием и описанием. В конце — кнопки со ссылками на Telegram и почту. Стиль минималистичный, светлый фон.»

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

Шаг 3. Дорабатывай по одному блоку

Получив первый вариант, не переделывай всё сразу. Смотри блок за блоком: сначала доведи шапку, потом портфолио, потом контакты. Одна правка за раз — так проще понять, что улучшилось, а что случайно сломалось.

Шаг 4. Проверь на телефоне

Большинство людей откроют твою визитку с телефона, а не с компьютера. Обязательно попроси ИИ убедиться, что страница нормально смотрится на мобильном: текст не уезжает, кнопки не наезжают друг на друга, картинки влезают в экран. Если что-то поехало — опиши это конкретно, и ИИ поправит.

Шаг 5. Выложи в интернет

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

⚠️ Не усложняй на старте

Красивый собственный домен и аналитика — это потом. Задача первой визитки: получить работающую ссылку, которую не стыдно показать. Всё остальное можно докрутить, когда страница уже живёт.

Итог

Лендинг-визитка собирается за вечер и сразу приносит пользу: у тебя появляется ссылка, которая представляет тебя вместо длинного рассказа. Секрет в подготовке материалов заранее, конкретном промпте и доработке по одному блоку. А проверка на телефоне — то, что отличает визитку, которой можно гордиться, от той, которую стыдно открыть.

Готов пройти весь путь от идеи до опубликованного проекта?