🎯 О чём этот конспект: Пошаговое руководство по созданию современных многостраничных сайтов без использования конструкторов (Framer, WordPress). Разбирается связка инструментов для глубокого исследования аудитории, генерации дизайна, не похожего на «AI-шлак», и финальной сборки через Claude Code.

👤 Кому будет полезно: Вайбкодерам, разработчикам и предпринимателям, которые хотят достичь «цифрового суверенитета», создавая кастомные IT-продукты с минимальными затратами на подписки и сторонние платформы.

✨ Что получите: Методику создания сайта, который оптимизирован сразу под три слоя: для людей (визуал), для AI-агентов (структура) и для LLM (контент). Вы научитесь делегировать дизайн инструменту Variant, а написание кода — агенту Claude Code.

1. Концепция трех слоев видимости в 2026 году

Контекст: Традиционные сайты умирают. Чтобы бренд оставался видимым, он должен быть понятен не только человеку, но и поисковым AI-агентам (как OpenAI Operator) и большим языковым моделям (LLM), которые выдают ответы пользователям в чатах. Автор вводит понятие «цифрового суверенитета» — владение собственным кодом и инфраструктурой без зависимости от ежемесячных оплат конструкторам.

Выгода: Полный контроль над данными, отсутствие привязки к тарифам Framer/Webflow и максимальная индексируемость в ответах ChatGPT, Claude и Perplexity.

Как применить:

• Шаг 1: Исследование аудитории — Brave Brand Intelligence — Пройдите геймифицированный процесс исследования ЦА, чтобы получить JSON-файл с портретом клиента.
• Шаг 2: Генерация смыслов — Brave Brand Copy Coach — Загрузите JSON из первого шага и получите SEO-оптимизированный текст для всех страниц (Hero, Problem, Solution, About, Services).
• Шаг 3: Подготовка структуры — Markdown — Сохраните все тексты в .md файлы, чтобы Claude Code мог легко их прочитать.

Результат: У вас есть фундамент из данных и текстов, готовый к визуализации и кодингу.

2. Дизайн без «AI-шлака» через Variant

Контекст: Главная проблема AI-сайтов — они выглядят однотипно и дешево. Инструмент Variant позволяет генерировать уникальные визуальные компоненты, анимации и макеты, которые выглядят как премиальные работы из галереи Framer. Это позволяет «запереть» визуальный стиль до того, как Claude начнет писать код.

Выгода: Экономия десятков часов на мудбордах и поиске референсов на Dribbble. Получение уникальных анимаций и типографики.

Как применить:

• Шаг 1: Промпт для Hero-секции — Variant — Вставьте текст заголовка и подзаголовка, добавьте описание стиля:

Help me come up with some ideas and designs for my homepage hero section that illustrate the copy really well. It should feel futuristic, modern, and incredibly visually stunning.

• Шаг 2: Итерация и Remix — Variant — Используйте функции "Shuffle layout" или "Vary strong/subtle", пока не найдете идеальный визуал.
• Шаг 3: Создание системы компонентов — Variant — На основе выбранного Hero-блока создайте остальные секции (Problem, Benefits), используя команду:

Following this design system, let's create the next section that lives underneath this hero section. Please use the copy exactly as I'm about to paste it: [ВАШ ТЕКСТ]

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

3. Сборка сайта в Claude Code

Контекст: Claude Code выступает в роли «технического исполнителя», в то время как Variant был «креативным директором». Вместо того чтобы просить Claude придумать дизайн, мы скармливаем ему готовый HTML/CSS из Variant. Это гарантирует, что финальный результат будет соответствовать утвержденному макету.

Выгода: Быстрая сборка многостраничного сайта с корректной версткой и адаптивностью.

Как применить:

• Шаг 1: Инициализация проекта — Терминал — Создайте папку проекта и запустите Claude Code.
• Шаг 2: Перенос дизайна — Claude Code — Скопируйте код компонента из Variant и используйте промпт:

I want to start building the homepage. This is the hero section and the design style that we'll ultimately be following. I want you to build this section by section. I'll be pasting in HTML code based on some designs and exploration we've already done. I want you to fill in and populate the homepage and then we'll refine copy, images and everything afterwards. [ВСТАВИТЬ КОД ИЗ VARIANT]

• Шаг 3: Масштабирование на все страницы — Claude Code — Когда главная готова, дайте Claude доступ к папке с текстами для остальных страниц:

All right, Claude, I want to go ahead and start building the remaining pages one by one. Please ensure that the design style from the homepage is used across the remaining pages, keeping things clean and premium. Use the copy from the provided files.

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

4. Добавление «человеческого фактора» и медиа

Контекст: Чистый код и AI-тексты могут выглядеть сухими. Для вовлечения людей (Human Layer) необходимо добавить качественные изображения, видео и кастомные шрифты. Новая функция превью в Claude Code позволяет кликать на элементы сайта и сразу давать команды на их изменение.

Выгода: Повышение конверсии сайта за счет эмоционального контента и премиального визуала.

Как применить:

• Шаг 1: Замена плейсхолдеров — Claude Code Preview — Используйте функцию выбора элементов в превью, чтобы заменить стандартные блоки на реальные изображения или видео.
• Шаг 2: Интеграция шрифтов — Claude Code — Попросите Claude подключить ваши брендовые шрифты (например, через Google Fonts или локальные файлы).
• Шаг 3: Финализация копирайта — Claude Code — Убедитесь, что Claude использует финальные версии текстов из .md файлов, не сокращая их.

Результат: «Живой» сайт с уникальным характером, который не воспринимается как продукт генерации нейросети.

FAQ

В: Почему нельзя сразу попросить Claude Code сделать дизайн? О: Claude — отличный кодер, но его «дизайнерский вкус» ограничен стандартными паттернами. Использование Variant как прослойки позволяет получить уникальный, «фестивальный» дизайн, который Claude затем просто технически реализует.

В: Как этот сайт поможет в поиске через AI-агентов? О: Сайт строится на чистом коде с правильной семантикой и структурой. AI-агенты (LLM) легче парсят такие сайты, чем тяжелые конструкторы с кучей лишних скриптов, что повышает шансы вашего бренда попасть в ответ нейросети.

В: Что такое «агентский слой» (agentic layer) сайта? О: Это архитектура, при которой AI-агенты могут самостоятельно заходить в код или админку, писать новые посты в блог, обновлять данные и персонализировать контент для посетителей без участия человека.

В: Можно ли использовать свои изображения вместо AI-генераций? О: Да, и автор рекомендует это делать для добавления «эмоционального соуса». Вы можете брать фото из личных архивов, Pinterest или стоков, чтобы разбавить технологичный дизайн.

В: Сколько стоит поддержка такого сайта? О: Практически 0. Вам не нужно платить за подписку на конструктор сайтов. Вы платите только за домен и хостинг (или используете бесплатные решения типа Vercel/Netlify), что и является сутью «цифрового суверенитета».

Конспект создан на основе видео «The End of Websites (as we know it)» канала Brave New World. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/89Fh_Ppw1A8