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

Подумайте о том, как вы создавали сайты раньше: обращаетесь к веб-разработчику, объясняете, что хотите, получаете эскиз, отправляете отзыв, получаете версию, снова отзыв. Неделя пинг-понга и минимум 3 000 шекелей. Каждый раз. Vibe Coding меняет всю игру. Вы открываете Claude Code, говорите с ним в течение 30 секунд о том, что хотите видеть на сайте, и он строит. Через несколько минут у вас есть живой сайт с картинками, кнопками, галереей, отзывами клиентов. Все то, что вы привыкли видеть на обычном сайте. Это руководство представляет собой выжимку того, что мы изучили на 4-й встрече воркшопа Claude Code. Мы изучим 3 метода дизайна сайта, какие 3 инструмента обязательно нужно установить перед началом, как улучшить визуальное оформление от AI-генерика до сайта премиум-класса и как развернуть сайт в сети на Vercel.

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

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

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

Vercel

Развертывание в облаке · сайт живет в интернете

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

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

Supabase

База данных · память для сайта

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

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

GitHub

Резервное копирование кода · как Google Drive для вашего сайта

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

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

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

Шаг 2 · Метод 1 · выгружайте все, что приходит вам в голову (транскрипция для модели)

Speakly

Инструмент транскрипции · говорите, создается упорядоченный текст

Лучшая программа для транскрипции разговорного иврита в текст. Нажимаете горячую клавишу на клавиатуре (у меня F-Key), открывается микрофон, проговариваете все, что приходит в голову, отпускаете. Упорядоченный и точный текст автоматически попадает в любое приложение, с которым вы работаете · Claude, чат, почта, Word.

Совет для агентов: рекомендуемая клавиша на Mac: F-Key (Fn). На Windows · можно настроить Caps Lock или другую клавишу. Удобный софт · просто зажимаете, говорите, отпускаете.

Как начать новый проект в Claude

Пример промпта · сайт для стелек индивидуального изготовления (для копирования и редактирования)

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

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

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

GoFullPage

Расширение Chrome · снимок экрана всей страницы

Бесплатное расширение для Chrome, которое снимает всю страницу в одну длинную картинку. Нажимаете на иконку фотоаппарата · он прокручивает весь сайт автоматически, снимает каждую секцию и объединяет в одно непрерывное изображение. Можно скачать в формате PNG или PDF. Особенно полезно для получения вдохновения с сайтов без необходимости делать 20 ручных скриншотов.

Совет для агентов: после снимка · расширение открывает новую страницу с полной картинкой. Нажимаем на иконку скачивания (стрелка вниз) и выбираем PNG. Теперь у вас есть картинка для работы.

Промпт для отправки в 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. Покажи мне план · с каких секций ты начинаешь, в каком порядке, какие компоненты дублируешь. После того как я подтвержу · приступай к сборке. Строй сайт частями, а не все разом · так он получится ближе к оригиналу.

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

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

21st.dev

Библиотека компонентов · премиальный дизайн от сообщества

Тысячи UI-компонентов от сообщества ведущих дизайнеров. Каждый компонент включает живой превью, код и кнопку Copy Prompt. Нажимаете на кнопку · промпт копируется. Вставляете в Claude · Claude создает компонент на вашем сайте. Большинство компонентов бесплатные, некоторые премиальные.

Совет для агентов: золотой совет · перед тем как брать компонент, подумайте, сочетается ли он с общим языком дизайна сайта. Красивый компонент, который не подходит · разрушает когерентность. Лучше 3 компонента, которые гармонируют, чем 10 разрозненных.

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

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

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

⚖️ Особо важно · Доступность и конфиденциальность. В Израиле сайт, не соответствующий стандартам доступности (ת״י 5568), подвергает владельца риску иска на сумму до 50,000 шекелей. Политика конфиденциальности обязательна по закону о защите конфиденциальности. Это не опция, а юридическая обязанность. Скиллы решают это в один клик.

Где скачивать скиллы · 2 ведущих репозитория

skills.sh

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

Основной репозиторий для комьюнити-скиллов. Просматривайте категории (Website, Marketing, Productivity), находите подходящий скилл и проверяйте наличие метки Trust Hub Pass, которая означает, что код проверен и безопасен. Вы можете увидеть количество загрузок скилла. Чем оно больше, тем он популярнее и, вероятно, качественнее.

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

agentskills.co.il

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

Израильский репозиторий содержит скиллы, адаптированные под израильское законодательство (конфиденциальность, доступность), язык и местный рынок. Все скиллы бесплатны. Обязательно просмотрите их все перед созданием нового сайта для израильской аудитории.

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

9 рекомендуемых скиллов для каждого нового сайта

Клуб AI Master открывает для вас двери: еженедельные живые встречи, записи и сообщество. ₪47 в месяц, отмена в любое время.

Israeli Privacy Shield

Регулирование конфиденциальности сайтов в Израиле

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

Israeli Accessibility Compliance

Доступность сайтов по стандарту ת״י 5568

Внедряет доступность по стандартам ת״י 5568 и WCAG 2.1 AA. Добавляет кнопку доступности, проверяет контрастность, alt-текст и обеспечивает навигацию с клавиатуры. Без этого скилла вы рискуете получить иск на сумму до 50,000 шекелей.

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

Hebrew Content Writer

Написание профессионального контента на иврите

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

UI/UX Pro Max

Пользовательский опыт · 50 стилей, 161 цветовая палитра

Самый комплексный скилл для пользовательского опыта: 50 стилей дизайна, 161 цветовая палитра, 57 пар шрифтов и ведущие правила UX в индустрии. Выбор визуального оформления по умолчанию в Claude получает улучшение на сотни процентов.

OKLCH Color Engine

Цвета, которые не выглядят типично для ИИ

Скилл, улучшающий цветовую палитру сайта. Использует передовое цветовое пространство (OKLCH) для создания профессиональных палитр, которые не выглядят так, будто их создал искусственный интеллект. Мгновенное повышение визуального качества.

Emil Kowalski Skill

Пользовательский опыт на основе работ ведущих дизайнеров

Скилл, основанный на работе Эмиля Ковальски, одного из ведущих мировых дизайнеров (Linear, Vercel). Его фокус: микровзаимодействия, тонкие анимации и детали, которые превращают обычный сайт в настоящее событие.

Interface Details

Детали, которые имеют значение в верстке

Скилл, основанный на статье Якуба Кра о деталях, которые делают интерфейс приятным. Отступы, выравнивание типографики, микроинтервалы и все те мелкие нюансы, которые отличают любительский сайт от премиального.

Web Design Guidelines

Vercel Labs · Более 250,000 загрузок в неделю

Скилл для веб-дизайна · 250 000+ загрузок в неделю. От Vercel Labs, де-факто стандарта веб-дизайна с помощью искусственного интеллекта. Если вы устанавливаете только один скилл для нового сайта, это должен быть он.

Refero Design Styles

חוקיות עיצוב מהאתרים המובילים

ספריית סגנונות עיצוב מבוססת על האתרים המובילים בעולם · Apple, Linear, Notion, Stripe ועוד. בוחרים סגנון, קלוד מטמיע. דרך מהירה לקבל אסתטיקה של חברה גלובלית.

שלב 6 · פריסה לאוויר · האתר חי באינטרנט

🌐 הדומיין הזמני יהיה משהו כמו `my-project-xyz123.vercel.app`. אם אתם רוצים דומיין משלכם (`mydomain.com`), קונים אותו מ-SiteGround / GoDaddy / Cloudflare, ומבקשים מקלוד לחבר אותו ל-Vercel. זה תהליך של 10 דקות עם DNS records. אם תרצו · אעלה סרטון נפרד שמסביר את זה.

מה לעשות אחרי שהאתר חי

• **שולחים את הלינק לכמה חברים** · מבקשים פידבק. דברים שאתם רואים אחרי 50 פעמים בקוד · הם רואים בלחיצה אחת
• **מחליפים את כל ה-Placeholder עם תוכן אמיתי** · תמונות שלכם, וידאו של לקוחות, מספרי טלפון נכונים
• **מגבים לגיטהאב** · אומרים לקלוד 'תגבה את הקוד הזה לגיטהאב פרטי'. ככה אם משהו נשבר בעתיד · יש מאיפה לשחזר
• **מחברים דומיין משלכם** (אופציונלי) · אם רוצים לראות מקצועי
• **מוסיפים אנליטיקס** · מבקשים מקלוד 'תוסיף Google Analytics 4 לאתר'. ככה אתם רואים מי גולש ומאיפה

מה אפשר לבנות עם Vibe Coding · 8 רעיונות

8 פרויקטים שיוצרים עם Claude Code ב-45 דקות

• **דף נחיתה לעסק** · Hero חזק, הסבר על המוצר, חוויות לקוח, כפתור CTA לוואטסאפ
• **אתר תיק עבודות** · גלריית פרויקטים, סיפור אישי, יצירת קשר. רלוונטי לפרילנסרים ויוצרי תוכן
• **Lead Magnet** · דף שמציע מתנה (מדריך, צ'קליסט), אוסף מיילים, שולח ב-Make ל-RavMaser
• **אתר אירוע** · פרטי האירוע, ספירה לאחור, הרשמה, מפה
• **חנות קטנה** · קטלוג מוצרים, סליקה דרך Stripe / Cardcom
• **אתר מנוי / קורס** · רישום משתמשים, גישה לתוכן, אזור אישי. ב-Supabase
• **Dashboard פנימי לעסק** · גרפים, נתונים, פעולות מהירות. למשרד שלכם
• **אתר לקוח** · אתם בונים, גובים. עם 21st.dev והסקילים · הלקוח לא יאמין שזה לא מעצב מקצועי

שאלות נפוצות

כן, קלוד מבין עברית מצוין. אפשר לדבר איתו בעברית, לכתוב בעברית, והאתרים שהוא בונה יוצאים בעברית מקצועית. הקטע היחיד שיש לו לפעמים אתגר איתו הוא RTL (כיוון ימין-לשמאל) · בעיקר כשמערבבים אנגלית בתוך טקסט עברי. הסקיל Hebrew Content Writer עוזר במיוחד בזה.

המנוי הבסיסי של Claude (20 דולר/חודש) מספיק לבניית אתר בודד. עם מנוי Pro (100 דולר/חודש) אפשר לבנות מספר אתרים ביום. שלושת הכלים (Vercel, Supabase, GitHub) חינמיים. הסקילים חינמיים. בסה״כ · אתר מקצועי עולה לכם כמה שעות עבודה ולא יותר. את הנגישות והפרטיות הסקילים פותרים בקליק.

תמיד אפשר לתקן. אומרים לקלוד 'הכפתור הזה גדול מדי', 'המראה של ה-Hero לא מתאים', 'תחליף את הצבע הראשי לכחול'. הוא משנה רק את החלק הספציפי, לא מתחיל מאפס. תוכלו לעשות אינסוף איטרציות עד שזה יוצא כמו שאתם רוצים. הטיפ · לעבוד בשינויים קטנים, לבדוק כל אחד לפני שעוברים לבא.

כן. אחרי שהאתר פרוס ל-Vercel, אומרים לקלוד 'יש לי דומיין mydomain.com שקניתי ב-X. תחבר אותו לפרויקט בוורסל'. הוא ינחה אתכם לעדכן DNS records בספק הדומיין (SiteGround/GoDaddy/Cloudflare). תהליך של 10-20 דקות, ואז האתר חי על הדומיין שלכם.

WordPress/Wix/Webflow · אתם בוחרים תבנית מוכנה, גוררים אלמנטים, מוגבלים למה שהמערכת מאפשרת. אתר נראה 'תבניתי'. Vibe Coding · קלוד כותב קוד ייעודי לאתר שלכם. אין מגבלה לרכיבים, לעיצוב, או לפונקציונליות. רוצים אנימציה ייחודית? פיצ'ר שלא ראיתם בשום מקום? אינטגרציה מיוחדת? · קלוד יבנה. בנוסף · הקוד שלכם, אתם הבעלים שלו, אין נעילה ל-vendor.

כן. אומרים לקלוד 'תוסיף לאתר חנות עם 5 מוצרים, חיבור ל-Cardcom או Stripe'. הוא בונה את החנות, את עגלת הקניות, את ה-checkout, ומחבר ל-API של הסליקה. צריך לפתוח חשבון אצל ספק הסליקה, להעביר לקלוד את המפתחות, והוא מסיים את הכל.

סיכון נמוך · כל פעם שמשנים משהו, קלוד יוצר commit חדש ב-GitHub. אם משהו נשבר · אומרים לקלוד 'תחזור לגרסה האחרונה שעבדה'. הוא ימצא את הקומיט הקודם ויחזיר. בנוסף · Vercel שומר את כל ה-deployments הקודמים, אפשר לחזור לכל גרסה ב-2 קליקים. בקיצור · קשה לשבור משהו לתמיד.

כן. שתי אופציות · 1) משתמשים ב-Supabase לאחסון מיילים, ואז מתחברים ל-RavMaser/Resend/Mailchimp דרך Make או דרך API ישיר. 2) שמים טופס שמתחבר ישירות לכלי הניוזלטר שלכם. אומרים לקלוד 'תוסיף לאתר טופס אימייל שמתחבר ל-RavMaser'. הוא מטפל בכל הצד טכני.

💪 רוצים ליווי לאורך הדרך?