Создать сайт-портфолио с Claude без единой строки кода
Введение
Сколько раз вы откладывали создание своего сайта-портфолио? Неделю? Месяц? Год? Причина всегда одна: «Я не умею программировать». Между вами и профессиональным сайтом стоит стена из HTML, CSS, JavaScript и непонятных терминов типа «деплой» и «хостинг».
А между тем портфолио — это не роскошь. Это необходимость. Дизайнеру нужно показать работы, фотографу — портретную серию, копирайтеру — лучшие статьи, HR-специалисту — кейсы подбора. Ссылка на Behance или PDF-презентация уже не впечатляют. Нужен свой сайт. Персональный. Профессиональный. Который можно отправить клиенту или работодателю.
Раньше для этого нужен был либо программист (дорого), либо конструктор сайтов (ограниченно), либо месяцы обучения (долго). Теперь есть третий путь: Claude создаст сайт за вас, а вы просто опишете, что хотите видеть.
Что умеет Claude в этой задаче
Claude — это не просто чат-бот, который даёт советы. Это полноценный разработчик, который пишет код. Вы описываете желаемый сайт обычными словами («хочу минималистичное портфолио с галереей работ и формой контакта»), а Claude генерирует готовый HTML, CSS и JavaScript.
Ключевое отличие от конструкторов: полная кастомизация. Не нравится цвет кнопки? Скажите. Хотите другой шрифт? Попросите. Нужна анимация при прокрутке? Claude добавит. Вы общаетесь на человеческом языке, Claude думает на языке программирования.
В этой задаче Claude использует режим Extended Thinking — «расширенное мышление». Это значит, что перед генерацией кода Claude анализирует вашу задачу глубже: продумывает структуру сайта, оптимальное расположение элементов, адаптивность под мобильные устройства. Вы получаете не просто страницу, а продуманное решение.
Финальный штрих — Claude объясняет, как разместить сайт в интернете. Без технического жаргона, шаг за шагом. От файла на компьютере до живой ссылки, которую можно отправлять.
Пошаговая инструкция
Шаг 1: Сформулируйте запрос
Откройте диалог с Claude и опишите, какой сайт вам нужен. Чем детальнее описание, тем точнее результат. Включите в запрос:
- Цель сайта: портфолио дизайнера, личный блог, резюме-сайт, витрина фото-работ
- Желаемые разделы: «Обо мне», «Проекты», «Контакты», «Резюме для скачивания»
- Стиль: минимализм, яркие цвета, тёмная тема, корпоративный стиль, креативный дизайн
- Особые пожелания: галерея изображений, форма обратной связи, кнопки соцсетей, анимации
Пример запроса:
Помоги создать сайт-портфолио для моих дизайн-проектов. Хочу минималистичный стиль с белым фоном, три раздела: краткое описание обо мне, галерея работ (6-9 проектов с изображениями) и контакты. Акцентный цвет — тёмно-синий. Чтобы красиво выглядело на телефоне.
Шаг 2: Получите код и просмотрите результат
Claude сгенерирует HTML-файл (иногда с отдельными CSS и JS файлами). Код появится в Artifacts — специальной панели Claude для работы с документами и кодом.
Вы увидите:
- Готовую HTML-разметку страницы
- CSS-стили для дизайна
- При необходимости JavaScript для интерактивности
.html (например, portfolio.html)
4. Дважды кликните по файлу — откроется в браузере
Теперь вы видите свой сайт. Прокрутите, проверьте на телефоне (откройте файл на смартфоне), оцените дизайн.
Шаг 3: Улучшите и адаптируйте
Редко получается идеально с первого раза. Это нормально. Теперь начинается итерация — вы просите изменения, Claude вносит правки.
Примеры типичных правок:
Сделай заголовок крупнее и измени шрифт на что-то более современное
Галерея выглядит скучно — добавь эффект увеличения при наведении мыши
Контактную форму замени на кнопки с иконками соцсетей: Telegram, Instagram, email
На телефоне текст слишком мелкий, увеличь размер шрифта для мобильных
Claude обновит код, вы снова сохраняете и проверяете. Повторяйте, пока не будете довольны.
Шаг 4: Запустите сайт в интернет
У вас есть готовый HTML-файл, но он пока только на вашем компьютере. Чтобы отправлять ссылку клиентам, сайт нужно разместить в интернете. Claude объяснит несколько вариантов деплоя:
Вариант 1: GitHub Pages (бесплатно, просто)
- Подходит для статичных сайтов-портфолио
- Требует регистрации на GitHub
- Claude пошагово объяснит: создать репозиторий, загрузить файлы, активировать Pages
- Результат: ссылка вида
ваше-имя.github.io
- Перетащите папку с файлами в интерфейс Netlify
- Сайт опубликуется автоматически
- Можно подключить своё доменное имя
- Аналогичны Netlify
- Claude подскажет, какая подойдёт под ваши задачи
Объясни, как разместить этот сайт на Netlify. Пошагово, я раньше этого не делал
Claude выдаст инструкцию с номерами шагов, скриншотами (если нужно) и пояснениями.
Пример из практики
Контекст: Фотограф хочет создать портфолио для свадебных съёмок
Промпт:
Создай сайт-портфолио для свадебного фотографа. Нужны разделы: приветствие с моей фотографией, галерея лучших работ (сетка из 9 фото), информация о съёмках (цены, что входит), контакты с формой заявки. Стиль — элегантный, нежные тона (беж, золотистый), с акцентом на фотографии. Обязательно адаптивность под смартфоны.
Результат — что получил фотограф:
| Раздел | Что реализовано | Технические детали |
|---|---|---|
| Главный экран | Полноэкранное фото + имя фотографа + слоган | Адаптивный фоновый image, текст по центру |
| Галерея работ | Сетка 3×3 с hover-эффектом увеличения | CSS Grid, transition на масштаб |
| О съёмках | Три пакета услуг в карточках | Flexbox-раскладка, иконки |
| Контакты | Форма (имя, email, дата, сообщение) + кнопки соцсетей | HTML5 form с validation, ссылки на Instagram/WhatsApp |
| Мобильная версия | Все элементы адаптируются под экран 320px+ | Media queries, flexible images |
Когда это особенно полезно
| Ситуация | Почему Claude поможет |
|---|---|
| Ищете работу и нужно резюме-сайт | Профессиональная подача лучше PDF. Claude создаст сайт с вашими навыками, опытом, проектами — работодатели оценят |
| Фрилансер без портфолио | Клиенты доверяют тем, у кого есть сайт. Claude сделает витрину ваших услуг за 20 минут вместо недель разработки |
| Креативщик (дизайнер, фотограф, иллюстратор) | Behance и Instagram — хорошо, но свой сайт — уровень выше. Claude создаст галерею, адаптированную под ваш стиль |
| Нужен лендинг для проекта | Онлайн-курс, книга, мероприятие — Claude сверстает страницу с описанием, формой регистрации, отзывами |
| Хотите научиться веб-разработке | Claude генерирует код с комментариями. Изучая его правки, вы понимаете, как работают HTML/CSS |
Где это сделать
| Инструмент | Подходит? | Как использовать |
|---|---|---|
| Claude.ai | ✅ Идеально | Artifacts позволяет видеть код и превью сайта. Скачивайте готовый HTML и размещайте в интернете |
| Claude в Chrome | ⚠️ Ограниченно | Можно генерировать код, но нет Artifacts для удобного просмотра. Используйте для быстрых правок уже готового сайта |
| Claude Code (CLI) | ✅ Подходит | Для продвинутых: Claude создаёт файлы локально, можно сразу редактировать и деплоить через Git |
FAQ
Нужен ли платный аккаунт?
Нет, бесплатная версия Claude справится с созданием сайта-портфолио. Ограничение — количество сообщений в день. Если планируете много итераций и правок, платный Claude Pro снимет лимиты. Но для одного сайта хватит и бесплатного.
Я совсем не программист. Смогу разместить сайт в интернете?
Да. Claude объяснит процесс простым языком. Платформы типа Netlify или GitHub Pages не требуют знания кода — вы загружаете файлы через интерфейс браузера. Это как прикрепить файл к письму, только результат — живой сайт.
Можно ли подключить своё доменное имя (например, ivan-ivanov.ru)?
Да. После размещения на Netlify/GitHub Pages можно купить домен (около 500-1000₽ в год) и привязать его. Claude подскажет инструкцию для выбранного регистратора доменов (Reg.ru, Timeweb и др.).
Будет ли сайт выглядеть профессионально?
Да, если вы дадите чёткие указания по стилю. Claude использует современные практики веб-дизайна: адаптивная вёрстка, чистая типографика, продуманные отступы. Для вдохновения покажите Claude примеры сайтов, которые вам нравятся — он воспроизведёт похожий стиль.
Что делать, если нужно обновить сайт через месяц?
Вернитесь в диалог с Claude (или начните новый) и попросите изменения. Можете загрузить текущий HTML-файл и сказать: «Добавь новый проект в галерею» или «Измени контактный email». Claude обновит код, вы замените файл на хостинге.
А если я хочу блог с новыми статьями каждую неделю?
Для динамического контента (блог, магазин, база данных) понадобится более сложная система (например, WordPress или статический генератор типа Jekyll). Claude может помочь настроить такое решение, но это выходит за рамки «простого сайта-портфолио». Для статичного портфолио с редкими обновлениями HTML-файл — идеальный вариант.
Комментарий Claude
Люди думают, что сайт — это про код. На самом деле сайт — это про то, что вы хотите сказать миру. Я просто перевожу ваши слова в пиксели. Магия не в HTML, магия в том, что вы больше не ищете оправдания, почему у вас до сих пор нет портфолио.
— Claude
Заключение
Создать профессиональный сайт-портфолио без знания программирования — реально. Claude берёт на себя всю техническую часть: генерирует код, подсказывает улучшения, объясняет, как запустить сайт в интернет. Вы остаётесь в роли арт-директора: описываете идею, даёте обратную связь, получаете результат.
Весь процесс — от первого промпта до живой ссылки — занимает от 30 минут до 2 часов (в зависимости от сложности). Это быстрее, чем разбираться в конструкторе сайтов, и бесконечно быстрее, чем учить HTML самостоятельно.
Не откладывайте. Откройте Claude.ai прямо сейчас и напишите: «Помоги создать сайт-портфолио». Через час у вас будет то, что вы годами откладывали на потом. Попробуйте — первый диалог бесплатный.
Источник: Оригинал на claude.com
.png)
