Все ищут клиентов в чатах, на фрилансе, в холодных рассылках. Тратят недели на нетворкинг, сотни долларов на рекламу. А я открыл 2GIS, набрал "гостиницы Алматы" и за 10 минут нашёл 50 потенциальных клиентов, которым прямо сейчас нужен сайт.
Не "может быть когда-нибудь нужен". А нужен сегодня. Потому что у них либо нет сайта вообще, либо он выглядит так, будто его делали в 2008 году. И это видно прямо в отзывах: "не нашёл цены", "нет сайта", "непонятно что за место".
Дальше — дело техники. Берёшь Claude Code, подключаешь 21st.dev MCP, один мега-промпт — и через пару часов у тебя готовый premium лендинг с анимациями, WhatsApp-интеграцией и интерактивной картой. Деплоишь на Vercel за 2 минуты. Отправляешь владельцу гостиницы в WhatsApp. Готово.
Не жди клиентов. Найди тех, кому ты уже нужен. Данные лежат в открытом доступе — нужно просто посмотреть.
Проблема: бизнесы без сайтов — это норма
По данным исследования 2025 года, 27% малых бизнесов до сих пор не имеют сайта. В Казахстане эта цифра ещё выше — особенно в сфере гостеприимства, общепита и услуг.
81% потребителей ищут бизнес онлайн перед покупкой. Бизнес без сайта теряет 20-35% потенциальных клиентов на этапе "проверки". Человек нашёл гостиницу на 2GIS, хочет посмотреть фото номеров, цены, условия — а сайта нет. Уходит к конкуренту.
Я открыл 2GIS Алматы и набрал "гостиницы". Нашлось 500+ результатов. Начал листать. Картина удручающая: у половины нет сайта вообще, у трети — страница на Booking.com и всё. Собственного лендинга с ценами, фото и WhatsApp — нет.
Гостиницы Алматы без нормального сайта (по рейтингу)
Метод: как находить клиентов через данные
Это не теория. Это конкретный алгоритм, который я использую. Работает для любой ниши: гостиницы, барбершопы, кафе, автосервисы, стоматологии. Везде, где есть локальный бизнес и 2GIS или Google Maps.
Инструменты: Claude Code + 21st.dev MCP
Стек предельно простой. Всё, что нужно — это Claude Code VS Code extension и 21st.dev Magic MCP server.
Claude Code — это AI-агент прямо в твоём редакторе. Он читает файлы, создаёт новые, запускает команды, устанавливает пакеты. По сути, это junior-разработчик, который выполняет инструкции мгновенно. Уже 2 миллиона разработчиков используют его.
21st.dev MCP — это Magic Component Platform. Когда Claude Code получает промпт "сделай карусель отзывов", он через MCP обращается к 21st.dev и получает готовый, красивый, протестированный компонент. Не генерирует с нуля — берёт из библиотеки.
Сгенерированный сайт использует Next.js + Tailwind CSS + Motion для анимаций. Это не шаблон с Tilda. Это полноценный код, который ты контролируешь.
Время создания сайта: традиционный подход vs AI
| Параметр | Фриланс / Студия | AI подход |
|---|---|---|
| Время | 2-6 недель | 2-4 часа |
| Стоимость | 300,000-2,000,000 ₸ | ~20,000 ₸ (подписка Claude) |
| Дизайн | Зависит от дизайнера | Premium из коробки (21st.dev) |
| Анимации | Доп. оплата | Включены (Motion) |
| Адаптивность | Зависит от верстальщика | Mobile-first по умолчанию |
| Нужно просить отдельно | Встроен в промпт | |
| Деплой | Нужен хостинг + настройка | Vercel за 2 минуты |
| Правки | Платно, по ТЗ | Новый промпт — мгновенно |
Мега-промпт: один запрос = весь сайт
Вот суть подхода. Ты не пишешь 20 маленьких промптов. Ты составляешь один детальный мега-промпт, который описывает весь сайт целиком: дизайн-систему, каждую секцию, анимации, мобильную адаптацию, SEO, интеграции.
Claude Code читает этот промпт и генерирует все файлы за один проход. Подключённый 21st.dev MCP подтягивает готовые компоненты: карусели, карточки, навбары, футеры. На выходе — не прототип, а production-ready код.
1You are an expert full-stack developer and UI/UX designer. Build a complete, premium, production-ready hotel landing page for "Grand Hotel Almaty".2 3## Tech Stack4- Next.js 15 (App Router)5- TypeScript6- Tailwind CSS 47- Motion (motion/react) for animations8- 21st.dev components via MCP (use /ui command for each component)9 10## Design System11- Dark theme primary: zinc-950 background, zinc-100 text12- Accent: amber-500 / gold for luxury feel13- Font: Inter for body, Playfair Display for headings14- Border radius: rounded-2xl for cards, rounded-full for buttons15- Glassmorphism: backdrop-blur-xl bg-white/5 border-white/1016 17## Sections (in order)18 19### 1. Hero20- Full-screen with parallax background image21- Hotel name + tagline with stagger animation22- "Забронировать" CTA button (links to WhatsApp)23- Rating badge: 4.2 stars, 847 reviews (from 2GIS)24- Floating price tag: "от 15,000 ₸/ночь"25 26### 2. About27- 2-column: text left, image grid right (2x2 masonry)28- Key stats: founded year, rooms count, star rating29- Smooth scroll-triggered entrance animations30 31### 3. Rooms & Pricing32- 3 cards: Standard, Deluxe, Suite33- Each card: image, price, amenities list, "Забронировать" button34- Hover: scale + shadow transition35- Prices in KZT (тенге)36 37### 4. Amenities38- Icon grid (4x3): WiFi, parking, restaurant, pool, spa, gym, airport transfer, concierge, room service, laundry, meeting rooms, bar39- Use Lucide icons40- Subtle fade-in animation on scroll41 42### 5. Reviews43- Carousel of real reviews from 2GIS44- Star rating display45- Author name + date46- Auto-scroll with pause on hover47 48### 6. Location & Map49- Interactive map embed (Google Maps or 2GIS widget)50- Address, phone, email51- "Как добраться" section with landmarks52- Distance to airport, city center, Medeu53 54### 7. Gallery55- Lightbox image gallery (3-column grid)56- Hover zoom effect57- At least 8 placeholder images58 59### 8. Booking CTA60- Full-width section with gradient background61- WhatsApp direct link: https://wa.me/77001234567?text=Хочу забронировать номер62- Phone number63- Email64 65### 9. Footer66- Hotel logo + address67- Social links68- Copyright69- "Сайт создан с помощью AI" badge70 71## Mobile Requirements72- Fully responsive (mobile-first)73- Hamburger menu on mobile74- Touch-friendly gallery75- Sticky WhatsApp button (fixed bottom-right)76 77## Animations78- Use motion/react (NOT framer-motion)79- Hero: fade + slide up with stagger80- Cards: scale on hover, fade-in on scroll81- Numbers: count-up animation for stats82- Smooth scroll between sections83 84## WhatsApp Integration85- Floating WhatsApp button (bottom-right, always visible)86- Pre-filled message: "Здравствуйте! Хочу узнать о номерах в Grand Hotel Almaty"87- Green brand color (#25D366)88 89## SEO90- Meta title, description, keywords91- Open Graph tags92- Schema.org HotelRoom markup93- Alt text for all images94 95Generate ALL files needed for a complete working app. Include placeholder images from picsum.photos. Make it deployable with `vercel --prod` immediately.Этот промпт содержит всё: стек технологий, дизайн-систему (цвета, шрифты, скругления, glassmorphism), 9 секций с детальными описаниями, требования к мобильной адаптации, анимации через Motion, WhatsApp-интеграцию и SEO-разметку.
Скопируй его, открой Claude Code в VS Code, вставь — и наблюдай, как AI создаёт полноценный сайт прямо на твоих глазах.
Пошаговая установка: от нуля до рабочего проекта
Никогда не писал код? Не страшно. Вот инструкция буквально для новичков — каждый шаг максимально подробно. Понадобится около 30 минут на настройку, а дальше Claude Code сделает всё за тебя.
Зайти на code.visualstudio.com, скачать версию для своей ОС (Windows / Mac / Linux), установить — просто жать next-next-finish. Это бесплатный редактор кода от Microsoft, стандарт индустрии.
Открой VS Code → нажми на иконку Extensions слева (или Ctrl+Shift+X) → в поиске напиши Claude → найди расширение Claude от Anthropic → нажми Install. После установки появится иконка Claude в боковой панели — нажми на неё и авторизуйся. Нужна подписка Claude Pro ($20/мес).
В VS Code открой терминал: Ctrl+` (или меню Terminal → New Terminal). Вставь команду:
$ npx create-next-app@latest my-site --typescript --tailwind --eslint --app --src-dir
$ cd my-site
На вопросы просто жми Enter — дефолтные настройки подходят.
В Claude панели VS Code найди раздел MCP Servers → добавь 21st.dev Magic MCP. Это даёт Claude доступ к библиотеке из тысяч premium UI-компонентов — вместо того чтобы писать их с нуля, Claude берёт готовые, красивые, протестированные блоки. Карусели, карточки, навбары — всё из коробки.
# В настройках Claude extension добавь MCP:
"21st-dev-magic": { "command": "npx", "args": ["-y", "@21st-dev/magic@latest"] }
Открой Claude панель в VS Code. Скопируй мега-промпт из раздела выше — замени название гостиницы, адрес, цены и телефон на реальные данные из 2GIS. Вставь в чат к Claude. Нажми Enter.
Claude начнёт создавать файлы — нажимай Approve на каждый запрос разрешения (или один раз выбери "Approve All"). Жди 15-30 минут — это нормально, сайт генерируется полностью.
Когда Claude закончит — запусти сайт локально:
$ npm run dev
Открой браузер: http://localhost:3000 — сайт готов! Пройдись по всем секциям, проверь на мобильном (DevTools → Ctrl+Shift+M).
Vercel — бесплатный хостинг для Next.js. Зарегистрируйся (можно через GitHub), а потом в терминале:
$ npm i -g vercel
$ vercel --prod
# Войди в аккаунт, подтверди деплой → готово
Через 60 секунд получишь ссылку вида my-site.vercel.app — отправляй клиенту!
Результат: что получается на выходе
Через 2-4 часа работы Claude Code ты получаешь готовый сайт. Не макет в Figma. Не прототип. Рабочий, задеплоенный сайт с реальными данными бизнеса. Вот что входит:
Тёмная тема, glassmorphism, amber/gold акценты. Выглядит как сайт пятизвёздочного отеля, а не шаблон с конструктора.
Parallax-герой, fade-in секции, hover-эффекты на карточках, count-up для цифр. Всё через Motion.
Плавающая кнопка WhatsApp с предзаполненным сообщением. Кнопки "Забронировать" ведут прямо в чат с гостиницей. Конверсия максимальная.
Карусель с отзывами прямо из 2GIS. Рейтинг, имя, дата. Социальное доказательство из коробки.
Embed Google Maps с точным адресом. Расстояние до аэропорта, центра, Медеу.
Адаптивность из коробки. Бургер-меню, touch-friendly галерея, sticky WhatsApp. 70% трафика гостиниц — мобильный.
Реальный сайт гостиницы, собранный по методу из этой статьи. Premium дизайн, анимации, WhatsApp-интеграция, адаптивность — всё сгенерировано с помощью Claude Code + 21st.dev MCP за один день.
Когда владелец гостиницы видит готовый сайт с его названием, фотографиями и отзывами — это не продажа. Это факт. Сайт уже существует. Вопрос только в том, хочет ли он им пользоваться.
Деплой на Vercel за 2 минуты
Vercel — это хостинг от создателей Next.js. Бесплатный план достаточен для лендинга. Деплой занимает буквально 2 минуты.
$ npx create-next-app@latest hotel-landing
# Claude Code сгенерировал файлы в эту папку
$ cd hotel-landing
$ npm i
$ npx vercel --prod
# Готово! Сайт доступен по ссылке .vercel.app
Действуй: алгоритм на сегодня
Хватит читать статьи о том, как найти клиентов. Вот конкретный план на сегодня:
Открой 2GIS. Выбери нишу. Найди 10 бизнесов без сайтов.
Выбери лучший из 10. Собери данные: фото, отзывы, цены, адрес.
Адаптируй мега-промпт. Замени название, цены, телефон.
Запусти Claude Code. Подожди 1-2 часа.
Проверь результат. Сделай мелкие правки промптом.
Задеплой на Vercel. Сделай скриншоты.
Отправь ссылку владельцу в WhatsApp. Жди ответа.
Не жди клиентов. Найди тех, кому ты уже нужен.
Данные о том, кому нужен сайт, лежат в открытом доступе. В каждом городе Казахстана на 2GIS сотни бизнесов без нормального онлайн-присутствия. А у тебя есть AI, который делает сайты за часы. Математика простая.
Средняя цена лендинга для малого бизнеса в Казахстане — 300,000-500,000 ₸. Твои затраты — пара часов и подписка на Claude ($20/мес). Делай выводы.