Claude Web Builder — воркфлоу
Claude Web Builder ведет новичка от нескольких вопросов о бизнесе до лендинга на Next.js с адресом на Vercel без написания кода.
- 295 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент создает проект, ставит зависимости и может публиковать страницу на Vercel.
- Выбор дизайна при ответе «решай сам» остается за агентом.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add workflows/claude-web-builderОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент создает проект, ставит зависимости и может публиковать страницу на Vercel.
- Выбор дизайна при ответе «решай сам» остается за агентом.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Claude Web Builder — проект, который открывают в Claude Code и отвечают на вопросы о бизнесе в четыре коротких раунда: основа, внешний вид, содержание, технические детали. По ответам агент строит одностраничный сайт на Next.js, Tailwind CSS и shadcn/ui. В проект встроены 21 скилл по анимации, дизайну и доступности, которые не дают страницам выглядеть шаблонно. Адаптивная верстка и SEO-метатеги входят в результат. После утверждения плана агент собирает секции, показывает предпросмотр и по желанию публикует страницу на Vercel. Если ответить по-испански, весь процесс пойдет на испанском.
Для кого. Владельцам малого бизнеса и фрилансерам без опыта в программировании, которым нужна страница-визитка или лендинг с живой ссылкой.
Подходит, если
- Булочной или студии нужна страница с контактами и формой за вечер.
- Продуктовую идею надо показать инвесторам на настоящем сайте.
- Фрилансер хочет быстро собрать первый вариант для клиента и поправить его.
- Страница должна быть адаптивной и иметь метатеги для поиска.
Не подходит, если
- Требуется интернет-магазин с корзиной и оплатой: проект собирает лендинги.
- Сайт уже есть, и нужно менять его большую кодовую базу.
- Нужна система управления контентом для редакторов.
Пример запроса к агенту
Собери лендинг для моей пекарни: темная палитра, меню, форма заявки и публикация на Vercel.Ограничения
Проект рассчитан на одностраничные сайты. Нужны Claude Code, Node.js 18 или новее и учетная запись Vercel для публикации. Агент сам выбирает решения, если ответить «решай сам», и результат придется проверить глазами. Скиллы дизайна взяты из других проектов, их источники указаны в `ATTRIBUTION.md`. Бесплатный план Vercel имеет собственные лимиты сборок. Последний коммит датирован октябрем 2026 года.
Как отключить. Удалите склонированную папку. Опубликованную страницу снимите в панели Vercel.
Частые вопросы
Нужно ли уметь программировать?
Нет. Проект ведет по шагам и объясняет, как поставить Node.js и Claude Code, а код пишет агент.
Какой стек у страницы?
Next.js, Tailwind CSS и shadcn/ui. Верстка адаптивная, метатеги для поиска добавляются.
Что значит «решай сам»?
Агент подберет цвета, стиль и структуру. Результат покажут в предпросмотре, и его можно поправить.
Как опубликовать страницу?
В последнем раунде вопросов выберите публикацию. Агент задеплоит страницу на Vercel и вернет ссылку.
Есть ли испанская версия?
Да. Ответьте по-испански, и агент переключится на испанский. В репозитории есть `README.es.md`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ВоркфлоуСтартер Next.js 16 для анимированных лендингов: хранилище правил Obsidian, хуки Claude Code и агенты под секции, SEO и движение
Бесплатный скилл для Claude: пишет ТЗ, подбирает видео и 3D, собирает кинематографичный лендинг и проверяет его скриншотами
Скилл дизайна веб-страниц для Claude Code: сначала спецификация DESIGN.md, потом код по ней
Рабочее место для Claude Code: десять команд ведут от идеи продукта к экранам на React и пакету передачи с готовыми промптами для реализации
Набор скиллов, токенов и правил, который делает из Claude дизайн-архитектора: DTCG-токены, компоненты, доступность и объективные проверки качества
ai-site-cloner превращает Claude Code или Cursor в конвейер копирования сайта в Next.js с замером стилей и сверкой по пикселям.
Коротко о README
README написан для новичков: шаги от установки Claude Code до публикации, список из 21 скилла и описание шести этапов работы.