Как навайбкодить сайт с админкой с нуля за час (Claude + VS Code)
Пошагово собираю сайт аренды авто с квизом, админкой и базой данных в Claude Code и выкладываю его на хостинг. Без программирования.
Если видео выше не открывается, оно есть и во ВКонтакте:
Чек-лист: как стать вайбкодером
- Скачайте бесплатный редактор VS Code и найдите в расширениях официальный плагин Claude Code от Anthropic.
- Нажмите на иконку Claude, затем Log in, и привяжите аккаунт Claude.ai. Для серьёзных проектов нужна подписка Pro ($20 в месяц): бесплатные лимиты закончатся за пару промптов, код активно расходует токены.
- В чате расширения выберите Claude Sonnet. Opus для такой работы слишком задумчивый и дорогой, а Sonnet даёт идеальный баланс скорости и «интеллекта».
- Опишите задачу обычным человеческим языком.
- Дальше просто сидите с чашкой кофе и нажимайте «Approve», пока Claude сам создаёт структуру, пишет код и подтягивает нужные библиотеки.
Сайт из видео: auto.yason.studio
Полезные ссылки
- Среда разработки: VS Code
- Claude: claude.ai и приложение для компьютера
- Мой Telegram: t.me/yasonstudio
- Хостинг, которым я пользуюсь (реферальная ссылка): Hostinger
Таймкоды
- 0:00 Как сделать сайт на чистом коде без программирования
- 0:48 Что нужно для работы: Claude.ai и Visual Studio Code
- 1:46 Установка и настройка расширения Claude в VS Code
- 2:22 Подготовка папки проекта и загрузка картинок
- 3:19 Запуск Claude Code и правила простого промптинга
- 4:15 Пишем первое ТЗ: сайт аренды авто, фильтры и админка
- 5:41 Передаём референсы дизайна скриншотами (стиль Porsche)
- 7:03 Как нейросеть пишет код в реальном времени
- 7:59 Как запустить готовый сайт локально
- 9:13 Первая проверка интерфейса, адаптива и поиск багов
- 10:41 Промпт на исправление ошибок и редизайн в стиле Apple
- 11:42 Тестируем обновлённую админку и форму заявок
- 14:22 Как развивать проект и вносить осознанные правки
- 15:13 Новый блок: квиз для сбора заявок
- 16:04 Почему чистый код от AI лучше конструкторов
- 17:17 Ловим и чиним баги с отправкой данных из квиза
- 18:29 Закрываем очевидные дыры: базовая безопасность админки
- 19:08 Рефакторинг: переносим данные из JSON в MySQL
- 21:58 Выгрузка файлов сайта на хостинг (Hostinger или Reg.ru)
- 22:50 Подключение базы данных на сервере и запуск
- 23:58 Как обновлять сайт после публикации и тест на телефоне
- 25:13 Итоги: зачем учить архитектуру в эпоху AI
