Эта инструкция поможет стать вайбкодером даже вашей маме

Если вам кажется, что у всех вокруг получается создавать продукты, не будучи при этом разработчиками, то вам не кажется. Я решил подготовить инструкцию, которая позволит вам начать работать с этим инструментом уже завтра и добиваться результатов.

Что можно сделать с вайбкодингом?

Почти все что угодно. Но с разным уровнем качества.

Например, если вчера, чтобы сделать средней руки Landing Page, мне нужно было вовлечь в это небольшую рабочую группу, то сегодня с этим справляется маркетолог с минимальной помощью дизайнера за 2 часа.

Наверное, первые мысли Frontend-разработчика в этот момент примерно такие: “это будет некрасиво и неаккуратно”, “все сразу поймут что это AI”, “это будет невозможно обновлять”. И он будет неправ!Уже сейчас вы можете за пару часов с нуля построить веб-сайт, который будет выглядеть красиво, выполнит свою функцию и будет работать абсолютно стабильно, также как и любой другой веб-сайт.

Пример сайта созданного за несколько часов мной с Claude Code: https://atlanticboatshipping.atlanticprojectcargo.com/

  • Он построен на современном стеке NextJS + NodeJS
  • Готов к индексации по SEO
  • Имеет интегрированную i18next библиотеку с поддержкой мультиязычности (кстати контент и переводы тоже были сделаны AI)
  • Имеет 2 формы с логированием и отправкой веб-хука в CRM
  • Подключен виджет карты
  • Сохраняется и пробрасывается UTM-метка в форме в CRM и лог
  • Стабильно работает мобильная и планшетная версия (не без проблем, но работает)
  • Desktop PSI (PageSpeed Insights) 93 на мобильных устройствах и 72 на компьютере

Скорее всего, если вы увидите этот сайт в поисковой выдаче где-нибудь в США, то он будет выглядеть гораздо лучше, чем 90% сайтов конкурентов в данной нише. И уж вы точно не подумаете, что это было сделано полностью с AI скромным продактом в течении одного вечера.

Эта инструкция поможет стать вайбкодером даже вашей маме

Но почему тогда все не делают такие сайты и не обновляют то, что есть сейчас?

Почему еще не разорились все агентства по разработке и не уволили всех программистов?

Давайте разбираться!

Инвентарь для путешествия в мир вайбкодинга

Чтобы достичь результата - нужно иметь ресурсы для его достижения. И я думаю, что будет честно сказать, что я 12 лет в IT, имел опыт во frontend-разработке, владел собственной веб-студией, потом строил карьеру в маркетинге в международных компаниях и последние несколько лет работаю на стыке управления в продуктах, разработке, маркетинге и инвестициях.

Сейчас я Head of Product в сфере логистики и Supply Chain, а также консультирую разные стартапы в сфере Product & Marketing через собственное агентство и инвестирую в стартапы. Поэтому сказать, что я что-то создаю с нуля без навыков и знаний - будет неправильно. Я начинал верстать сайты еще в Notepad в 2012 году и то что происходит сейчас - это невероятная революция, но все-таки совсем без навыков и опыта это будет тяжело сделать.

Также, вам обязательно понадобится сетап. Я использую:

  • ChatGPT Pro-версии ($200) для выполнения глубокого ресерча. Пока на рынке нет похожего решения, и это очень сильно помогает, если нужно проанализировать результаты, например, крупного маркетингового исследования или имеющихся в проекте материалов за несколько лет. С ним я анализирую сотни логистических контрактов за 25-30 минут не будучи логистом и могу на основе этого, например, придумать структуру будущей базы данных.
  • Claude Max ($100) для работы с кодом и Cowork-режимом. Пока это лучшая версия модели для взаимодействия с кодом. Я также планирую на этих выходных тестировать новый Codex от GPT, но с Opus 4.6 Claude Code по моим ощущениям еще круче!
  • Cursor Pro ($20) в качестве IDE. Claude Code покрывает 90% задач, но когда мне нужно писать самостоятельно код, мне становится проще перейти в Cursor и уже работать там до достижения лимитов (чтобы не тратить токены с наценкой которые уже включены в Claude Code подписку)
  • Gemini 3 Pro в рамках расширенной подписки Google Workspace для работы с генерацией контента и документированием кода. Это лучшая модель, в которую можно загрузить старый репозиторий и попросить описать, что в нем происходит, мне нравится больше чем Claude Code. Также мне очень нравятся модели Google генерирующие графику и видео.
  • Figma Make и Figma в целом для работы с дизайн-ассетами и быстрого прототипирования, в рамках корпоративной подписки.
  • n8n Claud ($20) для создания автоматизированных Flow когда выполнение некоторых операций должно быть регулярным. Например, когда нужно обогатить контент внутри платформы или выполнять сложные многоступенчатые операции каждый день. В последнее время мне не хватает их допустимых использований их же AI для построения воронок, но не настолько чтобы платить за это больше.

Я также пробовал практически все популярные модели для генерации текста, фото, графики и видео контента, а также в последнее время экспериментирую Lucidchart на замену FigJam и Miro, потому что они сделали прикольный функционал для описания бизнес-логики по описанию в схему (который, пока что, работает так себе).

Как вы можете подсчитать, чтобы реально разрабатывать продукты с нуля, нужно иметь не только опыт и экспертизу, но и быть готовым тратить от $300 в месяц. Я думаю, что в данном сетапе вайбкодер мог бы сократить подписку на GPT и пользоваться, например, Gemini вместо него, а Claude оплачивать только по стартовой подписке, но для себя я вижу реальную ценность и огромную экономию бюджетов и времени на ресерчах.

Почему у вас не получилось вайбкодить

Если вы пробовали и у вас не получилось (или не пробовали в целом), то скорее всего у вас был неправильный подход к этой задаче.

Я знаю многих очень умных людей и инженеров, которые попробовали выполнить что-либо с AI не потому, что они именно этого хотели сделать продукт, а потому что хотели успокоить себя что еще не все потеряно и они умеют делать лучше.

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

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

Шаг первый: ресерч и подготовка ассетов

Когда вы забиваете в Lovable что-то вроде “сделай красивый dashboard для моего продукта” это конечно вызывает вау-эффект (быстро, интересно, без больших вложений), но стартовый результат, как правило, не имеет никакого практического применения. Это как иллюзия результата работы, но которую в реальности использовать нельзя. Скорее подойдет для курсовой работы на 3 курсе ВУЗа с IT-направлением.

Поэтому если вы без подготовки пойдете в Claude Code и сделаете то же самое - он конечно тоже что-нибудь для вас разработает, но в реальном бизнесе “что-нибудь” не прокатывает. Скорее всего “что-нибудь” будет действительно слишком поверхностным и не детализированным, чтобы действительно заработать.

Например, вы хотите сделать какой-нибудь продукт и проверить на него спрос. Допустим, маркетплейс цифровых товаров или агрегатор предложений от перевозчиков.

Первое, с чего стоит начать: это поиск похожих решений и конкурентов.

  • Сформулируйте конкретно проблему, которую вы хотите решить этим продуктом и решение, которое вы видите;
  • С GPT Pro или Deep Research на обычной платной версии найдите примеры продуктов, которые в вашей нише и на вашем рынке уже решают данную проблему или предлагают данную услугу;
  • Соберите информацию о сайтах и приложениях ваших конкурентах, проанализируйте их маркетинговые показатели (с каких рынков и с откуда они получают клиентов); Для этого можно использовать SemRush или аналоги.
  • Выделите ключевые параметры продукта или услуги которые могут быть основой для MVP.

Для большинства услуг (доставки, клининга, локального производства) вам в целом не требуется разрабатывать какой-либо продукт и для проверки спроса достаточно одного Landing Page. Для некоторых достаточно простого личного кабинета с историей покупок и возможностью приобрести что-нибудь / сделать обмен / выполнить одно ключевое действие.

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

Вчера, например, мне потребовалось API для удаления Watermarks. Я посчитал, что на мое количество любой готовый сервис будет стоит $500-800 за один пак фотографий (20-30 тысяч штук). Я попросил Claude натренировать для меня LaMa модель чтобы она нейросетевым подходом определяля изображение и удаляла его. И он прекрасно справился без предварительных ассетов и дизайна, потому что это был внутренний инструмент, который можно развернуть как микросервис и отправлять в него запросы из системы для управления инвентарем.

Эта инструкция поможет стать вайбкодером даже вашей маме

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

Это не только логотип, но и шрифт, иллюстрации, изображения, которые будут размещены на вашем сайте. Это структура страниц, описание контента, формулировки вашего бизнеса, его tone-of-voice.

Как правило, это можно уложить в промпте в несколько сотен строк, и если у вас уже, например, был сделан дизайн, то основные данные уже должны хранится в Figma Tokens.

Эта инструкция поможет стать вайбкодером даже вашей маме

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

Предварительно (до создания мастер-промпта) вы можете сгенерировать контент и сгенерировать отдельно иллюстрации.

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

Эта инструкция поможет стать вайбкодером даже вашей маме

Пример того, как выглядят структурированные ассеты для сайта.

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

Поэтому если вы хотите получать качественный результат, то подготовка этих материалов - один из самых важных этапов.

Кроме этого, один из видов ассетов - это MD-файлы. В них можно передавать в Claude Code весь необходимый контекст в виде инструкций для LLM.

Один из примеров такого MD-файла с правилами для размышлений:

<default_to_action> By default, implement changes rather than only suggesting them. If the user’s intent is unclear, infer the most useful likely action and proceed, using tools to discover any missing details instead of guessing.
</default_to_action>
<use_parallel_tool_calls> If you intend to call multiple tools and there are no dependencies between the tool calls, make all of the independent tool calls in parallel. </use_parallel_tool_calls>
<investigate_before_answering> Never speculate about code you have not opened. If the user references a specific file, you MUST read the file before answering. </investigate_before_answering>

Вы можете просто скопировать этот текст и поместить его в .md файл и положить в папку проекта.

Шаг второй: подготовка к вайбкодингу

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

Локально вы сможете банально создать папку на вашем устройстве, и он учтет все в качестве контекста.

Также многим нравится работать через терминал (чувствуешь себя немного хакером), но лично мне больше нравится обычный интерфейс приложения.

Эта инструкция поможет стать вайбкодером даже вашей маме

Когда вы создали папку вам необходимо загрузить в нее необходимые для вайб-кодинга ассеты: MD-файлы в формате Claude, логотипы, иллюстрации и, например, стартовый код вашей библиотеки.

Эта инструкция поможет стать вайбкодером даже вашей маме

Следующим шагом вы можете подключить необходимые MCP-интеграции. Я надеюсь, что вы тоже задумывались о том, что наши “кожаные” языки общения, вроде бесчисленных рекламных текстов и посадочных страниц для LLM, неэффективны и являются простой тратой токенов. Поэтому все крупные продукты общаются с LLM через MCP сервер, подробнее можно прочитать здесь: https://portkey.ai/blog/what-are-mcp-connectors/

Когда все приготовления сделаны - пора приступать к мастер-промпту!

Шаг третий: создание мастер-промпта

Это условное обозначение для промпта, который сформирует в Claude шаги до решения первой части задачи.

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

Многие думают, что LLM может только с нуля что-то сгенерировать, но это не так. Вы можете выбрать любой фреймворк (например https://payloadcms.com/ или https://strapi.io/ или Laravel) и работать с чем-то готовым.

Я рекомендую использовать NextJS для части Frontend и NodeJS для Backend-части, потому что на мой взгляд именно в этом стеке Claude Code работает эффективнее всего. Конечно, иногда для ваших задач может потребоваться другой стек и он может работать с ним, это уже вопрос вашей архитектуры.

Также, не бойтесь на этапе MVP делать неправильный выбор. Когда ваш бизнес начнет генерировать выручку вы всегда можете привлечь CTO и пересобрать архитектуру так, как вам захочется.

И так, к делу!

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

Я приведу вам пример промпта который я использовал:

Project Overview

Create a premium, conversion-focused Landing Page for Atlantic Project Cargo's Yachts & Boats logistics division. This is a dedicated vertical for yacht sourcing, transport, and international shipping services.

Company: Atlantic Project Cargo (https://atlanticprojectcargo.com/)Parent Company: Atlantic Express Corp.Industry: International logistics, freight forwarding, project cargo

Assets Setup

Before starting, create the following directory structure and place assets:

/project-root/

├── public/

│ └── assets/

│ ├── images/

│ │ ├── yacht-1.jpg # Hero yacht image (cruising)

│ │ ├── yacht-2.jpg # Luxury superyacht at dock

│ │ ├── yacht-3.jpg # Superyacht at sea

│ │ └── logo-blue.svg # APC logo (primary blue #222572)

│ └── icons/

│ └── [generated SVG icons]

├── src/

│ ├── components/

│ ├── pages/

│ ├── locales/

│ │ ├── en.json

│ │ ├── es.json

│ │ └── pt.json

│ └── lib/

│ └── db/

│ └── schema.sql

└── ...

Image Assets (Licensed, already purchased)

The client has provided the following licensed images. Download/copy them from the assets folder:

  1. yacht-1.jpg - White motor yacht cruising near waterfront at dusk with blue sky
  2. yacht-2.jpg - Large luxury superyacht docked at Mediterranean marina (Monaco-style)
  3. yacht-3.jpg - Dark-hulled superyacht with white superstructure at sea

Logo Asset

Blue_Logo.svg - Atlantic Project Cargo official logo in primary brand color (#222572)

  • Dimensions: 1174x166 viewBox
  • Contains wordmark "ATLANTIC" + "PROJECT CARGO" + geometric icon

Brand Guidelines

Typography

Font Family: Montserrat (Google Fonts)

  • All weights used: 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
  • Primary headings: 700 (Bold)
  • Subheadings: 600 (SemiBold)
  • Body text: 400 (Regular)
  • Captions/small: 300 (Light)

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {

--font-primary: 'Montserrat', sans-serif;

}

Color Palette

:root {

/* Primary Colors */

--color-primary: #222572; /* Deep Navy Blue - Primary brand color */

--color-primary-light: #282AAB; /* Lighter blue for hover states */

--color-primary-accent: #343899; /* Accent blue for highlights */

/* Neutral Colors */

--color-black: #000000;

--color-white: #FFFFFF;

--color-gray-light: #EEEEEE; /* Light backgrounds */

--color-gray: #D6D6D6; /* Borders, dividers */

--color-gray-bg: #F4F4FE; /* Very light blue-gray background */

/* Functional Colors */

--color-success: #10B981; /* Form success states */

--color-error: #EF4444; /* Form error states */

--color-warning: #F59E0B; /* Warning states */

}

Design Principles

  1. Clean & Premium - Minimalist luxury aesthetic like Framer/Webflow templates
  2. Trust & Authority - Emphasize NVOCC licensing, 100K+ projects, 20+ years experience
  3. Conversion-Focused - Clear CTAs, prominent forms, easy contact options
  4. Mobile-First - Responsive design, optimized for all devices
  5. Subtle Animations - Smooth scroll reveals, hover effects, form interactions

Page Structure & Sections

1. Header / Navigation

[Logo] [Services] [About] [Case Studies] [FAQ] [Contact] [EN ▼] [Get a Quote →]

  • Sticky header with blur backdrop on scroll
  • Logo links to atlanticprojectcargo.com
  • Language switcher: EN (default), ES, PT
  • Primary CTA button: "Get a Quote" → scrolls to quote form
  • Mobile: hamburger menu with full-screen overlay

2. Hero Section

Layout: Full-width hero with yacht-1.jpg as background (with gradient overlay)

Content:

  • Badge: "Licensed NVOCC • FMC Approved • IATA Member"
  • Headline: "Buy and Ship Yachts & Boats Internationally"
  • Subheadline: "Full-cycle yacht logistics from sourcing to delivery. Trusted by buyers worldwide with 100,000+ completed shipments and dedicated warehouses across the USA."
  • CTA Buttons:
  • Primary: "Get Shipping Quote" → scroll to formSecondary: "Source a Yacht" → scroll to sourcing form tab
  • Trust Indicators (horizontal):
  • ✓ 100K+ Projects Completed✓ 20+ Years Experience✓ 11 US Warehouses✓ Cargo Insurance Included

Visual:

  • Parallax effect on background image
  • Animated gradient overlay (subtle movement)
  • Floating yacht silhouette animation (optional)

3. Services Section

Section Title: "Our Yacht & Boat Services"Subtitle: "End-to-end solutions for yacht buyers, sellers, and owners"

Service Cards (5 cards in responsive grid):

  1. Yacht & Boat Sourcing
  2. Icon: Ship search iconItems:Access to trusted sellers and verified inventoryOn-site pre-purchase inspectionsSupport negotiating price, terms, and contracts
  3. Transport Options
  4. Icon: Globe/shipping iconItems:Ocean freight: Lift-on-Lift-off, Container, RoRoDomestic and cross-border trucking for trailerable boatsDoor-to-door pickup and delivery from marina, private dock, or storage facility
  5. Loading & Disassembly
  6. Icon: Crane/tools iconItems:Partial disassembly for oversized yachts and boatsOptimized load plans
  7. Washing & Compliance
  8. Icon: Checkmark/shield iconItems:Fumigation & ISPM-15 certified wood packagingHigh-pressure washing for export complianceFuel and fluids management to meet transport regulations
  9. Insurance & Documentation
  10. Icon: Document/shield iconItems:Domestic shipment coverage up to $1,000,000Cargo insuranceFull documentation and claims assistance

Design:

  • Cards with subtle shadow, rounded corners (12px)
  • Icon in brand primary color (#222572)
  • Hover: slight lift (transform: translateY(-4px)) + shadow increase
  • Optional: small relevant image in each card or at section background

4. Quote Request Form Section

Section Background: Light gray (#F4F4FE) or subtle wave pattern

Layout: Two-column on desktop, tabs on mobile

Tab 1: Shipping QuoteForm fields:

  • Make & Model (text input, required) - tooltip: "e.g., Sea Ray 320 Sundancer"
  • Origin (dropdown with search - countries/cities database) - required
  • Destination (dropdown with search) - required
  • Email Address (email input with validation) - required
  • Phone Number (tel input with international format mask) - required
  • Additional Notes (textarea, optional)
  • Checkbox: "I consent to processing my data per the Privacy Policy" (link)
  • Submit Button: "Request Quote"

Tab 2: Yacht & Boat SourcingForm fields:

  • Boat Type (dropdown) - Options: Motor Yacht, Sailing Yacht, Catamaran, Center Console, Sportfish, Pontoon, Jet Ski, Other
  • Budget Range (dropdown) - Options: Under $50K, $50K-$100K, $100K-$250K, $250K-$500K, $500K-$1M, Over $1M
  • Delivery Country (dropdown with search) - required
  • Email Address (email input) - required
  • Phone Number (tel input with mask) - required
  • Special Requirements (textarea, optional)
  • Consent checkbox
  • Submit Button: "Find My Yacht"

Contact Card (sidebar on desktop, below form on mobile):

Your Dedicated Specialist

[Photo placeholder or avatar icon]

Olena Bondarenko

Yacht & Boat Development & Operations Manager

Available Mon-Fri, 9AM-5PM EST

Form Technical Requirements:

  1. Client-side validation with real-time feedback
  2. Phone mask: international format (+1 (XXX) XXX-XXXX for US, adaptive for others)
  3. SQLite logging of submissions (see schema below)
  4. Email confirmation to user on submission
  5. Webhook-ready for KommoCRM integration (placeholder)
  6. Redirect to /success page after submission

5. Why Choose Us Section

Section Title: "Why Choose Atlantic Project Cargo"

4 Feature Cards (horizontal on desktop, 2x2 on tablet, stack on mobile):

  1. Full-Cycle Logistics
  2. Icon: Ship/cycle iconDescription: "Full-cycle logistics for yachts & boats from anywhere in the world to any destination"
  3. Documentation Support
  4. Icon: Documents iconDescription: "Complete support with sourcing, documentation, customs clearance, and compliance"
  5. Fast & Flexible
  6. Icon: Lightning/clock iconDescription: "Fast delivery timelines, verified sellers network, and flexible financing options available"
  7. Global Expertise
  8. Icon: Globe/pin iconDescription: "Experienced team with 20+ years in worldwide logistics and a network of 1,000+ trusted partners"

Design: Clean card design, icon above text, centered alignment

6. Case Studies / Success Stories

Section Title: "Recent Yacht Deliveries"Subtitle: "See how we've helped clients ship their vessels safely across the globe"

Case Study Cards (3 cards, horizontal scroll on mobile):

Card Layout:

[Image - yacht in transport/loading]

Route Badge: "Miami, FL → São Paulo, Brazil"

Title: "62ft Motor Yacht International Delivery"

Description: "Container shipping with full disassembly and compliance preparation"

Timeline Badge: "Delivered in 28 days"

Example Cases:

  1. Miami, FL → Cancún, Mexico - 45ft Sailing Yacht
  2. Fort Lauderdale, FL → São Paulo, Brazil - 62ft Motor Yacht
  3. Los Angeles, CA → Sydney, Australia - 38ft Catamaran

Note: Use placeholder images or yacht-2.jpg / yacht-3.jpg with different crops

7. Map & Contact Section

Layout: Split - map on left (60%), contact info on right (40%)

Map:

  • Embedded Google Maps centered on: 2920 NE 207th St #1010, Aventura, FL 33180
  • Custom marker with APC logo or brand color pin
  • Zoom level showing South Florida area

Contact Information:

Get in Touch

[Request a Callback →]

8. CTA Banner Section

Background: Gradient using brand colors or yacht-3.jpg with overlay

Content:

Ready to Ship Your Yacht?

Get a free, no-obligation quote in minutes. Our specialists are standing by to help.

9. FAQ Section

Section Title: "Frequently Asked Questions"

Accordion FAQ Items:

  1. How much does it cost to ship a yacht internationally?Answer: "Shipping costs depend on the yacht's size, origin, destination, and transport method. Small boats (under 25ft) typically range from $3,000-$8,000 for container shipping. Larger yachts may require Lift-on-Lift-off or RoRo service. Contact us for a personalized quote."
  2. What shipping methods are available for yachts?Answer: "We offer multiple transport options: Container shipping (FCL) for smaller boats, Lift-on-Lift-off (Lo-Lo) for larger yachts, Roll-on-Roll-off (RoRo), Float-on-Float-off (Flo-Flo) for superyachts, and domestic trucking using flatbed, step-deck, or RGN trailers."
  3. How long does international yacht shipping take?Answer: "Transit times vary by route. US to Caribbean: 1-2 weeks. US to Europe: 3-4 weeks. US to Australia: 5-6 weeks. Domestic US transport typically takes 3-10 days depending on distance."
  4. Do you provide cargo insurance?Answer: "Yes, we offer comprehensive cargo insurance with domestic coverage up to $1,000,000. Additional coverage is available for high-value vessels. Our insurance covers damage during loading, transit, and unloading."
  5. Can you help me buy a yacht from the USA?Answer: "Absolutely! Our Yacht Sourcing service connects you with verified sellers, arranges pre-purchase inspections, assists with price negotiations, and handles the complete purchase and shipping process door-to-door."
  6. What documentation is required for yacht export?Answer: "Required documents typically include: Bill of Sale, Title/Registration, Bill of Lading, Commercial Invoice, and destination country import permits. We handle all documentation and customs clearance on your behalf."
  7. Do you ship to all countries?Answer: "We ship to most destinations worldwide through our network of 1,000+ partners. Some countries have import restrictions on used vessels. Contact us to verify shipping availability to your specific destination."
  8. What preparation is needed before shipping my yacht?Answer: "We handle most preparation including: draining fuel/fluids, disconnecting batteries, securing loose items, partial disassembly if needed, and USDA-compliant washing. Our team provides a complete checklist before pickup."

10. Footer

Layout: Multi-column footer with brand elements

[APC Logo] [Social Icons]

Atlantic Project Cargo Quick Links Services Contact

Global freight forwarding Home Ocean Freight

for yachts, boats, and About Us RoRo Shipping project@atlanticexpresscorp.com

heavy equipment. Services Yacht Transport

Projects Customs Brokerage 2920 NE 207TH ST #1010

Part of Atlantic Express Corp. Contact Cargo Insurance AVENTURA, FL 33180, USA

────────────────────────────────────────────────────────────────────────────────────────────────────

2026 © Atlantic Project Cargo - Global Freight Forwarder Privacy Policy | Terms of Service | Cookie Policy

Social Links:

Technical Implementation

Tech Stack (Recommended)

  • Framework: Next.js 14+ (App Router) or Astro 4+
  • Styling: Tailwind CSS with custom theme config
  • Animations: Framer Motion or GSAP
  • Forms: React Hook Form + Zod validation
  • Database: SQLite (better-sqlite3 or Turso)
  • Email: Nodemailer or Resend
  • i18n: next-intl or astro-i18n

Database Schema (SQLite)

-- Create leads table for form submissions

CREATE TABLE IF NOT EXISTS leads (

id INTEGER PRIMARY KEY AUTOINCREMENT,

form_type TEXT NOT NULL CHECK (form_type IN ('shipping_quote', 'yacht_sourcing')),

-- Common fields

email TEXT NOT NULL,

phone TEXT NOT NULL,

-- Shipping Quote fields

make_model TEXT,

origin_country TEXT,

origin_city TEXT,

destination_country TEXT,

destination_city TEXT,

-- Yacht Sourcing fields

boat_type TEXT,

budget_range TEXT,

delivery_country TEXT,

-- Optional fields

additional_notes TEXT,

special_requirements TEXT,

-- Consent and tracking

privacy_consent BOOLEAN NOT NULL DEFAULT 0,

marketing_consent BOOLEAN NOT NULL DEFAULT 0,

-- Metadata

created_at DATETIME DEFAULT CURRENT_TIMESTAMP,

ip_address TEXT,

user_agent TEXT,

locale TEXT DEFAULT 'en',

-- CRM integration

kommo_lead_id TEXT,

kommo_synced_at DATETIME,

-- Email tracking

confirmation_sent BOOLEAN DEFAULT 0,

confirmation_sent_at DATETIME

);

-- Index for faster queries

CREATE INDEX idx_leads_email ON leads(email);

CREATE INDEX idx_leads_created_at ON leads(created_at);

CREATE INDEX idx_leads_form_type ON leads(form_type);

API Routes

POST /api/leads/shipping-quote

POST /api/leads/yacht-sourcing

GET /api/leads (admin only, protected)

Form Submission Flow

  1. Client validates form (real-time)
  2. Submit to API endpoint
  3. Server validates + sanitizes
  4. Insert into SQLite
  5. Send confirmation email to user
  6. (Future) Send to KommoCRM webhook
  7. Return success response
  8. Redirect client to /success

Email Templates

Shipping Quote Confirmation:

Subject: We've Received Your Yacht Shipping Quote Request | Atlantic Project Cargo

Dear [Name/Email],

Thank you for your inquiry about shipping your yacht/boat. We've received your request for a quote.

Your Request Details:

- Vessel: [Make & Model]

- From: [Origin]

- To: [Destination]

What's Next?

Our yacht logistics specialist, Olena Bondarenko, will review your request and contact you within 24 business hours with a detailed quote.

Need immediate assistance?

Best regards,

Atlantic Project Cargo Team

---

2920 NE 207TH ST #1010, AVENTURA, FL 33180, USA

www.atlanticprojectcargo.com

i18n Translations

Create locale files for:

  • en.json - English (US) - default
  • es.json - Spanish (Latin America)
  • pt.json - Portuguese (Brazil)

All user-facing content must be translated including:

  • Navigation
  • Headings & body text
  • Form labels, placeholders, errors
  • CTAs and buttons
  • Footer content
  • Success/error messages
  • Email templates

SEO Requirements

Meta Tags (per page):

Structured Data (JSON-LD):

{

"@context": "https://schema.org",

"@type": "LocalBusiness",

"name": "Atlantic Project Cargo - Yacht Shipping",

"description": "International yacht and boat shipping services",

"url": "https://yachts.atlanticprojectcargo.com",

"telephone": "+1-305-224-1975",

"email": "project@atlanticexpresscorp.com",

"address": {

"@type": "PostalAddress",

"streetAddress": "2920 NE 207TH ST #1010",

"addressLocality": "Aventura",

"addressRegion": "FL",

"postalCode": "33180",

"addressCountry": "US"

},

"geo": {

"@type": "GeoCoordinates",

"latitude": "25.9584",

"longitude": "-80.1418"

},

"openingHours": "Mo-Fr 09:00-17:00",

"priceRange": "$$",

"image": "/assets/images/yacht-1.jpg",

"sameAs": [

"https://www.instagram.com/atlanticprojectcargo/",

"https://www.facebook.com/atlanticexpressprojectcargo",

"https://www.linkedin.com/company/atlanticprojectcargo/",

"https://www.youtube.com/@AtlanticProjectCargo"

]

}

Additional Pages

1. /success - Thank You Page

✓ Request Received Successfully

Thank you for your inquiry!

Our yacht logistics specialist will contact you within 24 business hours with a personalized quote.

What happens next?

1. We review your request details

2. Our team prepares a custom quote

3. You receive an email with options and pricing

Questions? Call us now: (305) 224-1975

[Return to Home]

2. /404 - Not Found Page

404

Oops! This page has sailed away.

The page you're looking for doesn't exist or has been moved.

[Go to Homepage] [Request a Quote]

Animation Guidelines

Scroll Animations (IntersectionObserver or Framer Motion)

  • Fade-in-up: Default for text content, stagger delay 0.1s
  • Fade-in-scale: For cards and images, scale from 0.95 to 1
  • Slide-in-left/right: For alternating content blocks

Hover Effects

  • Buttons: Scale 1.02, shadow increase, background color shift
  • Cards: TranslateY -4px, shadow increase
  • Links: Underline animation or color shift

Page Transitions

  • Smooth scroll behavior for anchor links
  • Form tab switching with horizontal slide
  • Accordion FAQ with height animation

Performance Requirements

  • Lighthouse Score: 90+ (Performance, Accessibility, Best Practices, SEO)
  • Core Web Vitals: Pass all metrics
  • Image Optimization: WebP/AVIF with srcset, lazy loading
  • Font Loading: display=swap, preload critical fonts
  • Critical CSS: Inline above-the-fold styles
  • JavaScript: Code-split by route, defer non-critical

Deliverables Checklist

  • Complete landing page with all sections
  • Mobile responsive design (375px - 1920px+)
  • Language switcher with EN/ES/PT
  • Working quote form with validation
  • SQLite database integration
  • Email confirmation system
  • Success page (/success)
  • 404 page
  • SEO meta tags + structured data
  • Sitemap.xml
  • robots.txt
  • All content translated to 3 languages
  • KommoCRM webhook placeholder (ready for integration)

Future Integrations (Not in Initial Scope)

  1. KommoCRM Integration
  2. Webhook endpoint: /api/webhooks/kommoLead syncing on form submissionStatus tracking
  3. Analytics
  4. Google Analytics 4Meta PixelConversion tracking
  5. Live Chat
  6. Intercom or Tawk.to widget

Notes for Claude Code

all assets already in apc_boats_lb: images and translation filesplease, find additional photos and illustration or generate if you need to other blocks

Initialize project

npm create next-app@latest apc-yachts-landing --typescript --tailwind --eslint --app

Install dependencies

npm install framer-motion react-hook-form zod @hookform/resolvers better-sqlite3 next-intl

Run development server

npm run dev

Build for production

npm run build

Согласитесь, что это достаточно подробно?

И это при использовании референсов и MD-файлов внутри локально используемого проекта.

Я думаю, что если мне нужно было бы одним промптом заложить инфраструктуру для большого продукта, то он был бы в полтора-два раза объемнее, а объем ассетов был бы в 6-8 папках с разным уровнем вложенности внутри.

Более того, помимо ассетов с контекстом вашего проекта - вы можете передавать контекст по правильному стилю программирования.Например, Vercel недавно выпустила набор MD-файлов с React Best Practices: https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices Используйте их, и ваш код будет на уровне синьора, который в голове способен удержать огромный контекст и быть максимально вовлеченным в вашу работу, работать параллельно (!) и круглосуточно.Шаг четвертый: создание продукта

Когда Claude Code начнет работу - ваша задача регулярно тестировать результаты и доводить продукт до нужного состояния.

Если вы работаете над большим продуктом, то начинайте с общей архитектуры и главной страницы (это может быть даже заглушка) > Далее регистрация, авторизация и ролевая система при наличии > Далее ключевая функция > Подключение интеграций > Доработка страниц и контента > Тестирование.

Процессы, которые приняты в продуктовых командах (разработка бизнес логики > проектирование > дизайн > разработка > тестирование) никуда не делись, просто они ускоряются в сотни раз за счет использования AI-инструментов.

Вам нужно быть одновременно и тестировщиком и разработчиком и овнером задачи, чтобы проверить все возможные сценарии, проблемы продукта и достаточно точно описать, что конкретно Claude должен исправить.

Это может занимать несколько часов, а иногда и несколько дней в случае с большим продуктом.

Первое время при развертывании проекта для просмотра вы можете использовать Localhost (локально на вашем компьютере), но я рекомендую закрывать проекты от индексации и использовать Vercel. Кстати, он легко интегрируется с вашим Claude Code, и вы можете опубликовать любой проект в 1 промпт, предварительно авторизовавшись в аккаунте.

Кстати, все готовые проекты в репозитории я передаю разработчику для проверки и возможной доработки в случае, если с чем-либо Claude не может справится быстро, и мне проще передать это специалисту для финализации.

Но если ваша задача это простой Landing Page - у вас все получится!

Вы не поверите, какое количество раз Claude Code может за сессию работы сломать все, потом вернуть обратно, а потом сломать снова! И для того чтобы работать в уже существующем продукте требуется уже более сложный подход, когда внутри вашего репозитория Claude является только одним из участников процесса, который может по задаче написать код, но реальный разработчик проводит код-ревью перед тем, как задеплоить результат в ветку.

И это еще мы не учитываем то, что развернуть проект на Vercel не равно поднять полный CI/CD и настроить AWS - это разные по сложности задачи, которые могут потребовать участия DevOps для настройки окружения для некоторых инфраструктур. Хотя в целом Claude справляется с настройкой окружения не хуже DevOps, просто морально пока страшновато доверять ему инструменты полностью, которые могут слить с карты тысячи долларов (кстати DevOps даже опытные тоже могут слить лимиты, поэтому не вижу большой разницы, опыт был разный).

Шаг пятый: доведение продукта до релиза

И это самая сложная часть сегодня!

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

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

Вы можете сделать за вечер мобильное приложение, но потом будете 3 недели ожидать его принятия модераторами AppStore и вносить еще кучу правок.

И я искренне верю, что в ближайший год будут появляться полностью AI-Native компании, в которых процессы внутри подстроены под наличие агентов, и у них значительная часть функционала будет также сделана с помощью AI. Но если мы говорим про реальную задачу бизнеса, сегодня нельзя просто взять и сгенерировать его за 1 вечер: иначе мы бы уже видели значительные изменения в картине рынка и движения внутри.

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

Вы уже можете генерировать и локализовывать контент с AI, вы можете сделать ассистента технической поддержки, можете настроить индивидуализированные триггерные сообщения.

Но дело в том, что все это удержать в голове одного человека и иметь понимание всех правильных процессов достаточно сложно.

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

Когда вайбкодить, а когда делать с людьми?

Вайбкодинг однозначно заменяет Junior-специалистов. И не только вайб-кодинг, а AI в целом полностью меняет подход к решению когнитивных задач. Если вы сегодня учитесь на первом курсе, я бы сильно озаботился своей рабочей практикой уже сейчас и начал например с практических тестов этой инструкции.

Но вайбкодингом вы до сих пор не можете:

  • Сделать действительно уникальный дизайн высокого уровня детализации. Я очень жду прогресса в WebFlow AI функционале, но пока без дизайнера сделать ассеты сложно и сайты все равно получаются “топорные”, хотя гораздо лучше, чем раньше.
  • Понять, какая архитектура действительно подходит вашему продукту. Разные модели предложат вам разные решения. Но стоит сказать, что даже многие CTO ошибаются. Поэтому стоит ли переживать из-за ошибки AI? Просто не ставьте на эти решения слишком много, код без пользователей ничего не стоит.
  • Разрабатывать продукты с высоким уровнем Legacy или со сложной многоуровневой архитектурой. Для этого по-прежнему нужна команда. Команда должна использовать в работе AI. Но уволить всех программистов пока не получится. И более того, даже в AI Native компаниях продолжается активный найм сильных людей (на замену слабым). Потому что AI в руках умных людей дает действительный прирост в эффективности и наоборот вредит в руках глупых (об этом есть исследования).
  • Разрабатывать решения в сложных или непопулярных стеках по-прежнему тяжело, на ревью кода уходит больше времени, чем на его написание. Есть исследования, что в некоторых случаях AI не ускоряет разработчиков, а (!!) замедляет их.
  • Самое главное, на мой взгляд: вы не можете создать бизнес или автоматизировать процессы, которых нет. Если вы не понимаете, как вести бизнес, и не можете перевести бизнес-логику в промпт - пока что агент за вас это не сделает. А когда сможет сделать, вы уже будете ему не нужны.

И самое главное, я хочу постараться ответить на вопрос, почему до сих пор все студии разработки не закрылись!

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

В этом кроется то, что для собственника бизнеса очень важно лично согласовать каждую страницу своего сайта или приложения сделанного именно так, как лично он представляет у себя в голове.

AI же в разработке и дизайне если он действительно экономит время, то он в своем подходе дает недетерминированный результат. Это значит что если вы без готового дизайна загрузите в Claude описания Landing Page, то он сгенерирует его, но возможно не ровно то что хочет владелец бизнеса.

В этом нюансе заключается главная заквоздка.

Если нам нужно сделать Wireframe чтобы согласовать с собственником контент, а потом сделат дизайн чтобы согласовать тень на каждой кнопочке, а затем сделать разработку в том же стеке в котором хочет технический директор руководителя, а потом по каждому компоненту вносить правку, то в мире корпоративных процессов это затягивается на месяцы и стоит десятки и сотни тысяч долларов.

Для своего проекта или для своей идей в которой я основной Owner задачи и я полностью понимаю продукт я могу сделать его очень быстро. Но если мне нужно согласовывать каждый шаг с менеджерами с собственным видением которые они считают финально верным основная стоимость разработки ПО или марктинга сводится к времени затраченному на обсуждения, согласования и бесчисленные Zoom-звонки.

Вы спросите, разве топ-менеджеры не готовы пожертвовать этим ради значительной экономии? И я вам скажу, что нет. По крайней мере из моего опыта.

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

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

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

Что конкретно вы можете прямо сейчас:

  • Отправьте эту инструкцию вашему маркетологу. Если в вашей компании собрать лендинг или небольшое MVP это 2-3 недели и пару тысяч долларов - вы можете сильно улучшить эти процессы.
  • Если у вас давно была идея своего небольшого сервиса - берите инструкцию и пробуйте. Лучше сделать и пожалеть, чем не попробовать и не сделать.

И, конечно, я уверен, что большинство не станут читать эту статью и что-то пробовать, Просто добавят в сохраненные материалы на будущее, как и миллион таких же материалов. Но если вам этот материал окажется полезным - я буду рад.

Для партнерских предложений и консультаций TG: @bashkiroffcom

Мой канал: @bashkirovtalks

7
1 комментарий