Как создать сайт с помощью Claude Code · Практическое руководство на иврите.

До сегодняшнего дня для создания сайта у вас было два варианта: нанять программиста и заплатить тысячи шекелей или бороться с громоздким конструктором сайтов и получить в итоге что-то похожее на шаблон. Claude Code меняет всю эту игру. Вы открываете Claude, общаетесь с ним 30 секунд о том, что вы хотите видеть на сайте, и он строит. Всего за несколько минут у вас появляется живой сайт с картинками, кнопками, галереей, формой обратной связи и кнопкой WhatsApp · без написания ни одной строки кода. Это руководство отвечает ровно на вопрос 'Как создать сайт с помощью Claude Code' · от первой установки до живого сайта в интернете. Мы разберем 3 метода дизайна, скиллы, превращающие обычный сайт в премиальный, и деплой в облако. На русском языке, шаг за шагом.

Что у вас будет в конце руководства

• Живой сайт в интернете · с временным адресом Vercel (позже можно подключить собственный домен)
• Четкий рабочий процесс с Claude Code · умение давать промпты, работать в режиме Plan Mode и знать, когда подтверждать
• Методы дизайна в вашем арсенале · свободный текстовый запрос к Claude, вдохновение с существующего сайта и компоненты из 21st.dev
• Скиллы, установленные в Claude · сайт с доступностью, конфиденциальностью и премиальным дизайном, а не шаблонным ИИ-видом
• Полный бэкап кода на GitHub · если что-то сломалось, можно вернуться назад в один клик
• Готовая инфраструктура базы данных в Supabase · если вы захотите собирать емейлы, заказы или любые другие данные

Что такое Claude Code и почему он превосходит любой конструктор сайтов

Шаг 1 · 3 инструмента, которые нужно установить перед началом

Vercel

Деплой в облако · Сайт живет в интернете

Это инструмент по умолчанию для деплоя сайтов. Без Vercel сайт, который построит вам Claude, будет находиться только на вашем компьютере по адресу localhost:3000 · никто другой его не увидит. Как только вы говорите Claude 'разверни на Vercel', он выгружает код, делает деплой в облако и возвращает вам публичный адрес, которым можно поделиться.

Совет для агентов: после регистрации вернитесь в Claude → Customize → Connectors → Browse Connectors → Vercel → Connect. Так Claude сможет развертывать сайты в один клик.

Supabase

База данных · Память для вашего сайта

Postgres + Auth + Storage. Вместо запуска сервера для сохранения емейлов, заказов или любых данных · Supabase дает вам все это в один клик. Если вам нужна форма обратной связи, сохраняющая все запросы, список рассылки или небольшой магазин · за сохранение данных отвечает именно эта программа.

Совет для агентов: как и с Vercel · подключаем коннектор в Customize → Connectors. Имя коннектора: Supabase. Бесплатного аккаунта хватает для 99% личных проектов.

GitHub

Бэкап кода · Как Google Диск для вашего сайта

В GitHub весь код сайта хранится онлайн. Если что-то сломалось, если Claude совершил ошибку, которую нельзя отменить, или если вы хотите поработать над сайтом с другого компьютера · GitHub сохраняет всю историю. Когда захотите · скажите Claude 'сделай бэкап на GitHub', и он выгрузит последнюю версию.

Совет для агентов: репозитории по умолчанию сохраняются как Private (частные) · доступ есть только у вас. Если вы захотите поделиться кодом с другим разработчиком · можно перейти на Public в один клик.

💡 Все три инструмента вместе · стоят ноль шекелей для новичков. Только если вам понадобится сайт с высоким трафиком (тысячи пользователей в день) или особо крупная база данных · тогда есть платные тарифы. Для 99% личных и небольших бизнес-проектов · бесплатной версии вполне достаточно.

Шаг 2 · Как открыть новый проект в Claude

Хотите научиться управлять Claude Code с нуля?

Это руководство дало вам базу. На полноценном воркшопе по Claude Code мы строим всё вместе шаг за шагом: установка, CLAUDE.md, скиллы, агенты и живой сайт в сети. 4 записанных занятия, пожизненный доступ.

Шаг 3 · Метод 1 · Вывалите в Claude всё, что приходит вам в голову

Пример промпта для Claude Code (для копирования и редактирования)

Я хочу создать сайт, который подойдет для ортопедических стелек для обуви. Я хочу, чтобы сайт был в моем стиле · футуристичный, «дышащий», с четкими шрифтами и очень явным контрастом. Цветовая гамма: монохром · белый, черный, серый. Футуристичный синий акцент. Как можно меньше визуального мусора. Мне нужны изображения бегающих спортсменов и военных, чтобы люди сразу понимали направление. Я хочу отзывы клиентов · людей, которые ставят оценки в Google и рекомендуют продукт. Если у меня этого нет · просто оставь пустые плейсхолдеры, я заполню их сам. Я хочу плавающую кнопку WhatsApp, чтобы можно было связаться с представителем как можно быстрее. В зоне Hero · я хочу картинку парящей в пространстве стельки. Если ты не можешь создать такую картинку · составь промпт для генератора изображений. Работай в режиме Plan Mode. Покажи мне план. После моего одобрения · приступай к созданию.

🎯 Важно · всегда начинайте с режима Plan Mode (кнопка внизу Claude). Это экономит массу токенов · Claude показывает рабочий план перед тем, как броситься строить, и вы можете внести исправления до того, как он потратит усилия. В режиме Plan Mode видны все цвета, шрифты и порядок секций · и только после этого вы даете добро.

Шаг 4 · Метод 2 · Вдохновение с существующего сайта

Промпт для отправки в Claude вместе с картинкой для вдохновения и ссылкой (для копирования)

Check deeply the elements, DOM, sources. Then start to create section by section, one by one, in all aspects · HTML, CSS, JS. Reference site: [сюда вставляем ссылку на сайт-вдохновение] [вдобавок · перетаскиваем картинку Full Page в Claude] Работай в режиме Plan Mode. Покажи мне план · с каких секций ты начинаешь, в каком порядке, какие компоненты дублируешь. После моего одобрения · приступай к созданию. Строй сайт частями, а не всё разом · так он получится ближе к оригиналу.

⚠️ Это вдохновение · а не копирование. Мы берем визуальное оформление и структуру, но заменяем контент, картинки и продукты на ваши. Цвета и шрифты тоже можно заменить. Так сайт будет выглядеть профессионально, как тот, который вам понравился · но он будет вашим.

Шаг 5 · Метод 3 · Компоненты из 21st.dev (метод Франкенштейна)

Рабочий процесс с 21st.dev

• Заходим на 21st.dev и регистрируемся через Google (5 секунд)
• Просматриваем категории · Hero, Buttons, Cards, Galleries, Animations
• Находим понравившийся компонент · видим живой превью на странице
• Нажимаем на синюю кнопку CopyPrompt вверху
• Возвращаемся в Claude, вставляем и нажимаем Enter
• Claude строит компонент на сайте · проверяем в localhost:3000, что он выглядит так же, как показывал 21st

Полноценный воркшоп по Claude Code объединяет всё в одном месте: установка, скиллы, агенты и создание сайтов. 4 записанных занятия с пожизненным доступом.

Шаг 6 · Скиллы · Разница между шаблонным ИИ-сайтом и премиальным сайтом

⚖️ Особенно важно · доступность и конфиденциальность. Сайт, не соответствующий стандартам доступности, подвергает владельца риску иска. Политика конфиденциальности обязательна по закону. Это не 'опция', а юридическое требование. Скиллы решают это в один клик.

agentskills.co.il

Репозиторий скиллов

Репозиторий скиллов · скиллы, адаптированные под регулирование (конфиденциальность, доступность), язык и местный рынок. Все скиллы бесплатны. Стоит изучить их все перед созданием нового сайта · особенно Israeli Privacy Shield, Israeli Accessibility Compliance и Hebrew Content Writer.

Совет для агентов: копируете черную команду установки со страницы скилла, вставляете в Claude, и Claude ее устанавливает. Скилл появляется позже в Customize → Skills.

skills.sh

Официальный репозиторий Anthropic · Тысячи скиллов

Главный репозиторий скиллов от сообщества. Вы просматриваете категории (Website, Marketing, Productivity), находите скилл и проверяете наличие метки Trust Hub Pass (код проверен и безопасен). Особенно примечателен скилл UI/UX Pro Max · 50 стилей дизайна, 161 палитра цветов и 57 пар шрифтов.

Совет для агентов: всегда проверяйте метку Trust Hub Pass перед установкой · так вы не скачаете скилл, который может выполнить нежелательные действия на компьютере.

Шаг 7 · Развертывание в сети · Сайт в интернете

Хотите освоить Claude Code с нуля?

Это руководство дало вам базу. На полноценном воркшопе по Claude Code мы строим все вместе шаг за шагом: установка, CLAUDE.md, скиллы, агенты и живой сайт в сети. 4 записанных занятия, пожизненный доступ.

✅ Готово · У вас есть работающий сайт в интернете, созданный с помощью Claude Code без написания единой строки кода. Отсюда можно продолжать улучшения · добавлять страницы, подключать лид-форму к Supabase или добавить блог. Любое изменение · вы просто говорите Клоду, и он выполняет его и развертывает заново.

Полезные инструменты и ссылки

Все необходимое для создания сайта с помощью Claude Code · в одном месте

Углубленное руководство · 3 метода дизайна, 9 рекомендуемых скиллов и пошаговое развертывание в облаке

Полное руководство по установке Claude Code · отправная точка, если вы еще ничего не установили

Развертывание сайта в сети · публичный адрес в один клик. Бесплатно для начинающих

База данных для сайта · формы, лиды и заказы. Бесплатно для большинства проектов

Библиотека компонентов премиум-дизайна с готовым промптом для каждого элемента

Израильский репозиторий скиллов · доступность, конфиденциальность и тексты на иврите

Часто задаваемые вопросы · как создать сайт с помощью Claude Code

Да, и в этом вся идея. Claude Code пишет весь код за кулисами · вы просто описываете на обычном языке, что хотите видеть на сайте. Не нужны технические знания, изучение языков программирования или понимание того, как устроены сайты. Если вы умеете описать то, что хотите · вы можете создать сайт.

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

Необходимые инструменты (Vercel, Supabase, GitHub) бесплатны для начинающих и подходят для 99% личных и малых бизнес-проектов. Единственные затраты · это подписка на Claude и, при необходимости, платный домен (несколько десятков шекелей в год). Это по сравнению с тысячами шекелей, которые берет программист за сайт.

В конструкторе сайтов вы ограничены шаблонами и компонентами, которые предоставляет система. С Claude Code нет ограничений · любую функцию, которую вы видели на ведущих сайтах, можно запросить, и Клод ее построит, а сайт остается полностью вашим (код резервируется на GitHub). Кроме того, контроль над дизайном гораздо точнее · любую деталь можно изменить в обычном диалоге.

Только если это добавить. Израильский сайт должен соответствовать стандарту доступности ТИ 5568 и закону о защите конфиденциальности, иначе есть риск исков на сумму до 50 000 шекелей. Решение заключается в установке специализированных скиллов (таких как Israeli Accessibility Compliance и Israeli Privacy Shield из репозитория agentskills.co.il) · Клод автоматически внедряет доступность, политику конфиденциальности и баннер для файлов cookie.

Именно для этого используется бэкап на GitHub. Каждый раз, когда что-то работает хорошо, вы говорите Клоду 'сделай бэкап на GitHub'. Если в дальнейшем Клод совершит ошибку, которую не получается исправить · можно вернуться к предыдущей версии, сохраненной на GitHub, в один клик. Это страховочная сетка, позволяющая экспериментировать без страха.