Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Пошаговое руководство по Bolt.new: создание сайтов и приложений через AI-промпты, интеграция Supabase, настройка дизайна и публикация через Netlify.
🎯 О чём этот конспект: Подробное руководство по использованию платформы Bolt.new для генерации современных веб-сайтов и функциональных приложений с помощью AI-промптов. Разбирается процесс от создания простого лендинга до разработки сложных инструментов с анимациями и интеграцией базы данных.
👤 Кому будет полезно: Вайбкодерам, разработчикам на No-code/Low-code, предпринимателям и дизайнерам, которые хотят быстро собирать работающие прототипы и полноценные веб-сервисы без написания кода вручную.
✨ Что получите: Вы научитесь формулировать сложные промпты для Bolt, кастомизировать дизайн через Inspector, внедрять темную тему, создавать интерактивные приложения (например, генераторы писем) и подключать базу данных Supabase для сбора лидов.
Контекст: Для получения качественного результата в Bolt.new недостаточно короткого запроса. Автор предлагает использовать ChatGPT как «архитектора промптов». Сначала нужно убедиться, что ChatGPT знает возможности Bolt, а затем попросить его составить максимально подробное техническое задание. Это исключает галлюцинации нейросети и дает на выходе профессиональный дизайн вместо базового шаблона.
Выгода: Экономия времени на итерациях правки дизайна и получение структуры сайта, которая сразу выглядит как работа дорогого агентства.
Как применить:
bolt.diy Are you familiar with the bolt.new website? It's an AI platform that allows users to create websites and apps via prompts. I want to create a website using bolt.new. Create me a prompt that is very detailed and descriptive for a web design agency. Be as detailed as possible, including sections like hero, featured projects, testimonials, and a modern color palette.Результат: Готовый многосекционный лендинг с релевантным контентом и современной версткой.
Контекст: Bolt.new позволяет редактировать конкретные элементы сайта без изменения всего проекта. Инструмент Inspector работает как Chrome DevTools, но для AI: вы выбираете блок и пишете инструкцию по его изменению. Также в платформу встроена библиотека готовых решений (Prompt Library), которая позволяет в один клик добавлять сложные функции, такие как Dark Mode или SEO-аудит.
Выгода: Возможность довести «сырой» AI-результат до идеала, не перегенерируя весь сайт целиком.
Как применить:
Can you change this to "How to make a WordPress website"? Please keep the colors the same and capitalize the first letter of every word. Use this uploaded image for the featured project section and also show it in the popup.Результат: Уникализированный интерфейс с работающей темной темой и вашим контентом.
Контекст: Bolt — это не только про верстку, но и про логику. Автор демонстрирует создание "Email Lead Generator" — инструмента, который принимает данные от пользователя и выдает готовый текст письма. Ключ к успеху здесь — описание логики работы (input-поля, выпадающие списки, кнопка генерации).
Выгода: Создание работающего MVP (минимально жизнеспособного продукта) за 5-10 минут, который можно монетизировать или использовать для привлечения трафика.
Как применить:
I want to make an app for bolt.new. Create an email generator tool for web designers to generate leads.
Features:
1. Input fields for business type, location, and tone.
2. A "Generate" button that creates a professional email template.
3. A "Copy to clipboard" function.
Modern UI with clean cards. Can you add a drop-down menu for each category instead of text inputs?Результат: Интерактивное веб-приложение с логикой обработки данных на стороне клиента.
Контекст: Чтобы сайт стал полноценным инструментом, он должен уметь сохранять данные (заявки, регистрации). Bolt.new имеет прямую интеграцию с Supabase (PostgreSQL база данных). Это позволяет автоматически создавать таблицы и записывать в них сообщения из контактных форм.
Выгода: Вы получаете полноценный бэкенд без написания SQL-запросов или API-роутов.
Как применить:
Create a contact form with fields: Name, Email, Budget (dropdown), and Message.
Integrate this form with Supabase so all submissions are stored in a table named 'contact_submissions'.Результат: Работающая CRM-система, собирающая лиды с вашего AI-сайта.
Контекст: Финальный этап — вывод проекта в "мир". Bolt позволяет опубликовать сайт в один клик, предоставляя временный URL. Для серьезных проектов автор рекомендует перенос на Netlify для подключения кастомных доменов. Также упоминается возможность связки с n8n для автоматизации (например, отправка уведомления в Telegram при новом лиде).
Выгода: Профессиональный хостинг и возможность встроить сайт в бизнес-процессы.
Как применить:
Результат: Опубликованный проект на кастомном домене с настроенными воронками автоматизации.
В: Можно ли использовать Bolt.new бесплатно? О: Да, у платформы есть бесплатный уровень, который позволяет создавать и тестировать сайты. Однако для сложных проектов и частого использования может потребоваться подписка.
В: Почему мой дизайн выглядит одинаково при разных промптах? О: Это происходит из-за кэширования сессии. Автор настоятельно рекомендует всегда открывать Bolt.new в новой вкладке браузера для каждого нового проекта, чтобы AI начинал с «чистого листа».
В: Как добавить свои изображения на сайт? О: Вы можете загрузить файл прямо в чат Bolt или предоставить прямую ссылку на изображение в интернете. Затем попросите AI использовать этот файл для конкретного блока через Inspector.
В: Можно ли перенести сайт с Bolt на WordPress? О: Напрямую — нет. Bolt генерирует современный код (обычно на React/Vite). Вы можете экспортировать код и хостить его отдельно, но это принципиально другая архитектура, отличная от PHP-движка WordPress.
В: Насколько стабильны такие сайты? О: Сайты на Bolt базируются на современных веб-стандартах. При интеграции с Supabase и Netlify они работают очень быстро и выдерживают высокие нагрузки, превосходя по производительности многие конструкторы типа Wix.
Конспект создан на основе видео «How To Use Bolt AI To Create Stunning Websites (Full Tutorial)» канала Daryl Wilson. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=5zfOitaKfmM