{
  "id": 33,
  "title": "Вайбкодим сайт для бизнеса с Gemini",
  "speaker": "ИИшенка | AI Automation",
  "topic": "Создание профессионального сайта с нуля с помощью Google Gemini (Antigravity)",
  "duration_label": "~23 минуты",
  "theses": [
    {
      "title": "Начинайте с одной Hero-секции, а не с целого сайта",
      "description": "Ключевой принцип: сначала создайте одну идеальную первую секцию (Hero). Нейросеть будет использовать её как эталон стиля для генерации всех остальных секций, обеспечивая визуальную целостность."
    },
    {
      "title": "Референс — фундамент хорошего дизайна",
      "description": "Перед тем как давать нейросети задание, найдите визуальный референс на специализированных сайтах (Superhero, Bent Grids, Mobbin). Референс задаёт структуру, стиль и уровень качества результата."
    },
    {
      "title": "Только HTML, CSS и JavaScript — без фреймворков",
      "description": "Весь сайт строится на чистых веб-технологиях без React, Vue или других фреймворков. Это делает код понятным любому новичку и не создаёт лишних зависимостей."
    },
    {
      "title": "Workflow-файлы экономят время и обеспечивают стабильность",
      "description": "Создайте в папке .agent/workflows набор markdown-инструкций (промптов), которые можно переиспользовать. Это избавляет от необходимости каждый раз писать одни и те же промпты."
    },
    {
      "title": "Структурируйте HTML с первого шага",
      "description": "Отдельные header, main, footer и секции внутри main — обязательное правило. Структуризация на раннем этапе делает макет крепче и предсказуемее при дальнейшем развитии."
    },
    {
      "title": "Иконки — из open-source репозиториев, не из генерации ИИ",
      "description": "Нейросеть часто генерирует некачественные SVG-иконки. Лучше указать в инструкции использовать Iconify или аналогичные репозитории — результат выглядит профессионально."
    },
    {
      "title": "Вайбкодинг — это итеративный процесс",
      "description": "Дизайн сайта строится через диалог с нейросетью: вы просите, она генерирует, вам что-то нравится, что-то нет, вы просите исправить. Каждый промпт — маленький шаг к идеалу."
    },
    {
      "title": "Секции добавляются по одной — от референса к адаптации",
      "description": "Для каждой новой секции (преимущества, прайсинг, футер) ищите отдельный визуальный референс. Нейросеть копирует структуру из референса, но адаптирует стиль под уже существующий дизайн."
    },
    {
      "title": "Анимации должны быть органичными, а не кричащими",
      "description": "Хорошие анимации не забирают внимание на себя — они добавляют плавность и ощущение завершённости. У второстепенных элементов задача — поддерживать настроение, а не отвлекать."
    },
    {
      "title": "Минимализм держится на расстояниях и типографике",
      "description": "В минималистичном дизайне критически важны правильные расстояния между элементами, выбор шрифтов (с засечками, моноширинные) и их иерархия. Не цвета, а пространство создаёт стиль."
    },
    {
      "title": "Google Flow для видеоанимаций",
      "description": "Для создания анимированных элементов (например, анимация продукта) используется Google Flow — инструмент генерации коротких видео. Результат весит менее 1.5 МБ и подходит для веба."
    },
    {
      "title": "Мобильная адаптация проверяется на каждом этапе",
      "description": "Нейросеть автоматически перестраивает секции под мобильный формат. Но проверять адаптивность нужно самостоятельно — иногда слова свисают или элементы смещаются."
    }
  ],
  "exercises": [
    {
      "goal": "Найти референс на Superhero или Bent Grids, скачать скриншот, передать нейросети с инструкцией создать первую секцию для вашего бизнеса на чистом HTML/CSS/JS. Добиться результата, который вас устраивает, за 2-3 итерации.",
      "title": "Создайте Hero-секцию по референсу"
    },
    {
      "goal": "Используя метод «одна секция за раз», создайте полноценный лендинг: Hero, преимущества, экосистема/услуги, прайсинг, футер. Для каждой секции — отдельный референс и отдельный промпт.",
      "title": "Постройте полный лендинг из 4-5 секций"
    },
    {
      "goal": "Создайте папку .agent/workflows с двумя markdown-инструкциями: (1) start — правила создания первой секции, (2) structure — правила структуризации HTML. Проверьте, что нейросеть корректно подхватывает их при вызове через /",
      "title": "Настройте workflow-файлы для повторного использования"
    },
    {
      "goal": "Откройте готовый сайт в мобильном режиме браузера. Найдите минимум 3 проблемы (свисающие слова, некорректные отступы, слишком мелкий текст) и исправьте их через промпты к нейросети.",
      "title": "Проверьте мобильную адаптивность и допилите"
    }
  ],
  "quotes": [
    {
      "text": "Вся эта красота сделана с помощью одной нейронки Gemini от Гугла. И вы можете сделать себе такую же красоту, которая выглядит так, будто вы заплатили профессиональному дизайнеру.",
      "author": "ИИшенка"
    },
    {
      "text": "Когда у нас есть первая секция, у нейронки есть, по сути, пример, на основе которого она генерит всё оставшееся. Нейронка генерирует все последующие секции, основываясь на секции, которая у нас уже есть.",
      "author": "ИИшенка"
    },
    {
      "text": "У второстепенных анимаций никогда нету задачи забирать на себя внимание, а есть задача добавлять плавность и настроение к вашему сайту.",
      "author": "ИИшенка"
    },
    {
      "text": "Часто нейронки сами пытаются придумать иконки и сделать их в SVG — часто это какая-то лажа. Используйте правильные репозитории.",
      "author": "ИИшенка"
    },
    {
      "text": "Можно уже брать это, менять тексты под свои и закидывать себе на домен и пользоваться как своим профессиональным сайтом.",
      "author": "ИИшенка"
    }
  ],
  "full_markdown": "# Вайбкодим профессиональный сайт для бизнеса с Gemini\n\n## О чём этот экстракт\n\nПошаговое руководство по созданию профессионального, минималистичного сайта для бизнеса с помощью Google Gemini (среда разработки Antigravity). Без фреймворков, без навыков программирования — только HTML, CSS, JavaScript и диалог с нейросетью. Автор демонстрирует весь процесс на примере сайта магазина здорового питания «Натура».\n\n## Кому будет полезно\n\n- Предпринимателям, которым нужен сайт, но нет бюджета на дизайнера\n- Начинающим вайбкодерам, которые хотят создавать красивые сайты без знания фреймворков\n- Маркетологам, которые хотят быстро делать лендинги для тестирования гипотез\n- Всем, кто хочет научиться работать с нейросетями в контексте веб-дизайна\n\n## Подготовка к работе\n\n### Что понадобится\n\n1. **Google Antigravity** — среда разработки с встроенной нейросетью Gemini. Бесплатная, с разумным лимитом использования в неделю\n2. **Сайты с референсами** — визуальные примеры секций, которые станут основой дизайна:\n   - **Superhero** — коллекция Hero-секций (первый экран сайта)\n   - **Bent Grids** — секции с нестандартными сетками (тренд, популяризированный Apple)\n   - **Mobbin** — огромная база секций по категориям (бесплатная регистрация)\n3. **Google Flow** — инструмент для создания коротких видеоанимаций (опционально)\n\n### Структура проекта\n\nСоздайте в Antigravity пустую папку и внутри неё:\n\n```\nпроект/\n├── .agent/\n│   └── workflows/\n│       ├── 1-start.md        ← инструкция для создания первой секции\n│       └── 2-structure.md    ← инструкция для структуризации HTML\n├── index.html                ← сюда нейросеть будет писать код\n└── tomato.mp4                ← видеоанимация (если нужна)\n```\n\n**Workflow-файлы** — это ваши сохранённые промпты. Вместо того чтобы каждый раз писать длинную инструкцию, вы вызываете её через `/start` или `/structure` в чате Antigravity.\n\n## Пошаговый процесс создания сайта\n\n### Шаг 1: Найдите референс Hero-секции\n\nHero-секция — это первый экран, на который попадает посетитель. Именно она задаёт стиль всего сайта.\n\nИдём на Superhero и ищем секцию, которая:\n- Соответствует вашему стилю (минимализм, аккуратность, хорошие расстояния)\n- Имеет интересную типографику (шрифты с засечками, моноширинные акценты)\n- Содержит элементы, которые можно адаптировать под ваш бизнес\n\n**Важно:** Вы не копируете секцию один-в-один. Вы берёте её как структурный и стилистический ориентир.\n\n### Шаг 2: Создайте Hero-секцию\n\n1. Вставьте скриншот референса в чат Antigravity\n2. Вызовите workflow `/start`\n3. Инструкция указывает нейросети: создай только одну секцию, используй только HTML/CSS/JS, повтори стиль из картинки\n\nНейросеть создаёт `index.html` с:\n- Подходящими шрифтами (угадывает тип: с засечками, моноширинный)\n- Сгенерированным изображением по референсу\n- Правильной структурой элементов\n- Базовыми анимациями\n\n### Шаг 3: Структурируйте HTML\n\nВызовите workflow `/structure`. Это команда, которая заставляет нейросеть разделить код на чёткие блоки:\n\n```html\n<header>...</header>\n<main>\n    <section class=\"hero\">...</section>\n    <!-- Сюда будут добавляться новые секции -->\n</main>\n<footer>...</footer>\n```\n\nВизуально сайт почти не меняется, но код становится «крепким» — каждая секция на своём месте, общая ширина и отступы зафиксированы. Это критически важно для дальнейшего развития.\n\n### Шаг 4: Адаптируйте тексты\n\nПростой промпт: «Измени тексты на русском языке, тематика — магазин здорового питания. Больше ничего не меняй, только тексты».\n\n**Нюансы:**\n- Если шрифт не поддерживает кириллицу — попросите нейросеть его не менять (оставить латинские декоративные элементы)\n- Проверьте, что точки, запятые и выравнивание не сломались\n- Тексты от нейросети обычно неплохие, но при необходимости можно заменить\n\n### Шаг 5: Добавляйте секции по одной\n\nДля каждой новой секции:\n\n1. **Найдите референс** на Bent Grids, Mobbin или аналогичном сайте\n2. **Скриншот + промпт**: «Добавь новую секцию про [тема]. Структуру скопируй из картинки. Стиль адаптируй под текущий дизайн. Тексты на русском»\n3. **Проверьте результат** и доработайте за 1-2 дополнительных промпта\n\n**Типичные секции лендинга:**\n- Hero (первый экран) — уже готова\n- Преимущества компании (карточки с иконками)\n- Экосистема / как это работает (схема процесса)\n- Прайсинг (тарифные карточки)\n- Футер (контакты, навигация, логотип)\n\n### Шаг 6: Добавьте видеоанимацию (опционально)\n\nДля эффектного Hero-элемента:\n\n1. Откройте Google Flow\n2. Загрузите изображение продукта\n3. Выберите стиль анимации (2-3 итерации для хорошего результата)\n4. Скачайте видео (~1.5 МБ, подходит для веба)\n5. Промпт: «Замени картинку в Hero-секции на это видео MP4»\n\n### Шаг 7: Проверьте мобильную версию\n\nОткройте сайт в мобильном режиме браузера и проверьте:\n- Тексты не свисают за пределы экрана\n- Секции корректно перестраиваются в одну колонку\n- Иконки и анимации на месте\n- Расстояния и отступы выглядят гармонично\n\n## Ключевой принцип: почему это работает\n\nВесь метод строится на одной идее: **первая секция — эталон для всех остальных**.\n\nКогда нейросеть создаёт вторую, третью, четвёртую секцию, она опирается не на абстрактные представления о дизайне, а на конкретный HTML и CSS, который уже существует в вашем файле. Поэтому:\n\n- Шрифты остаются единообразными\n- Цветовая палитра не расползается\n- Отступы и расстояния выдерживаются\n- Анимации стилистически совпадают\n\nЭто превращает хаотичную генерацию в предсказуемый процесс наращивания дизайна.\n\n## Ресурсы и инструменты\n\n| Инструмент | Назначение | Стоимость |\n|------------|-----------|-----------|\n| Google Antigravity | Среда разработки с Gemini | Бесплатно (с лимитами) |\n| Superhero | Референсы Hero-секций | Бесплатно |\n| Bent Grids | Референсы секций с сетками | Бесплатно |\n| Mobbin | База секций по категориям | Бесплатно (с регистрацией) |\n| Google Flow | Генерация видеоанимаций | Бесплатно |\n| Iconify | Open-source иконки | Бесплатно |\n\n## Частые ошибки и как их избежать\n\n1. **Пытаться создать весь сайт за один промпт** — результат будет хаотичным. Всегда по одной секции\n2. **Не давать референс** — без визуального примера нейросеть генерирует шаблонный дизайн\n3. **Использовать фреймворки** — для простого лендинга чистый HTML/CSS/JS проще, понятнее и не ломается\n4. **Игнорировать структуризацию** — без чёткого разделения на header/main/footer секции начинают конфликтовать\n5. **Позволять нейросети генерировать иконки** — SVG от ИИ часто выглядят криво. Указывайте использовать Iconify\n\n## Итог\n\nЗа 23 минуты и ~10 промптов создан полноценный лендинг с:\n- Минималистичным дизайном профессионального уровня\n- Анимациями, которые не раздражают\n- Адаптивной мобильной версией\n- Видеоанимацией продукта\n- Полностью русскоязычным контентом\n\nГлавный вывод: дизайн-навыки нужны не для рисования, а для **выбора референсов и формулирования промптов**. Нейросеть — это инструмент исполнения, а вы — арт-директор.\n",
  "youtube_url": "https://www.youtube.com/watch?v=S3m36N26EP4",
  "url": "https://ekstraktznaniy.ru/workbook/33"
}