Переносим дизайн из Figma в AI проект Bolt.new
ฝัง
- เผยแพร่เมื่อ 31 ม.ค. 2025
- 🔥 В этом видео я покажу:
Как шаг за шагом перенести дизайн из Figma в Bolt.New и создать полноценный сайт без кода. Используя возможности Bolt.New и дизайн из Figma, я продемонстрирую, как можно быстро превратить ваш макет в работающий сайт.
💻 Что вы увидите:
Подготовка макета в Figma
Методология переноса дизайна в Bolt
🚀 Для кого это видео:
Дизайнеров, которые хотят оживить свои макеты.
Новичков, ищущих простые способы создания сайтов.
Всех, кто интересуется инструментами no-code и AI.
🔗 Полезные ссылки:
Bolt.New - AI сервис разработки продуктов
t.me/kostyaprodesign - Мой канал в ТГ
📌 Таймкоды:
00:36 Открываем Figma
00:57 Описание промтов
01:34 Переносим фон
04:74 Работам с промтами в Figma
06:50 Переносим меню
10:50 Изменяем кнопку авторизации
11:46 Переносим дизайн главной фотографии
12:43 Перенос дизайн Hero-секции
14:56 Переносим фильтр портфолио
16:31 Создаём сетку портфолио
17:31 Переносим дизайн футера
33:10 Убираем лишние секции
23:56 Кастомизация фильтра
25:35 Кастомизация Hero-секции
28:29 Кастомизация хедера
32:18 Результат
Музыка в видео:
Royalty Free Music: Bensound.com
License code: HPS1KREC9IMUO87X
Royalty Free Music: Bensound.com/royalty-free-music
License code: OEIZRDAMYZNUU1JA
Royalty Free Music: Bensound.com/royalty-free-music
License code: RBAWTNYZY13ODCPB
Music by: bensound.com/free-music-for-videos
License code: 0YUKKYPDA8BQZYOX
Music by Bensound.com/free-music-for-videos
License code: PMCXQKPUN2IVL5ZK
Music: Bensound.com
License code: TEVHGPX48UC8BBCJ
Music I use: bensound.com
License code: TBC5678CNDEG0EEC
Music by Bensound.com
License code: DZFFBD58WHFMWQAF
Добавление фоновой музыки,отличный ход! Спасибо!
Спасибо вам за поддержку!
Респект! Продолжай в том же духе! А вот чтобы ускорить процесс выхода в топы Ютуба придется юзать всякие платные тимы типа ютифай или ютуб адс. Такие ролики как твои должны быть популярны)
Поле Чудес какое-то. А теперь я попрошу нейросеть открыть перррвую букву!
Очень круто и актуально, как раз собрался делать сайт. Спасибо! Жду выпуск про то, как ставить сайт на движок
Расскажите подробнее про движок. Есть какие-то предпочтения или задачи? Возможно вам проще создать движок внутри своего проекта, а как базу данных использовать Firebase или Supabase?
Дружище, подскажи как созданный сайт в болте перелить на свой домен? Делаю экспорт, архив со структурой и всеми файлами сохраняется, запускаю index.html - пустое окно, после заливки на домен - та же картина. Что не так?
Если в двух словах: ваш проект - это не сайт, а приложение, написанное на React и TypeScript. Чтобы запустить его, вам потребуется доступ к серверу через терминал.
1. Зайдите в каталог с проектом.
2. В консоли выполните две команды: npm install и npm run dev.
После этого приложение будет доступно по IP-адресу вашего сервера.
Если вы только начинаете изучать веб-разработку с помощью ИИ, то можете использовать внутренние инструменты для публикации проекта в Netlify. Это бесплатно. Однако рано или поздно вам всё равно придётся научиться развёртывать react-приложения на собственном сервере.
Вообще я попробую снять сегодня видео на тему запуска проектов из болта на своем сервере.
Записал для вас видео: th-cam.com/video/FzpOd9CGE7o/w-d-xo.html
Вы можете привязать домен как к своему хостингу (показал на видео) так и к тому что что дает Netlify. Будут вопросы - пишите. Постараюсь помочь.
@@kostyaprodesign Спасибо!!!
Сколько токенов ушло? Или сколько денег потратилось?
Сейчас сложно сказать, но не больше миллиона