Открытый агент-дизайнер от Vercel Labs. Пишешь в чат, какая нужна страница, агент собирает её одним HTML-файлом, а ты правишь словами и скачиваешь любую версию. Ниже - как попробовать на сайте, какие стили есть из коробки, с каких запросов начать, что внутри, как поднять у себя и где пределы.
fx0 выложила Vercel в своём GitHub-аккаунте vercel-labs. Сами авторы называют его лёгким агентом-дизайнером: описываешь страницу, агент пишет её как один HTML-файл. Справа в окне сразу видно, что получается, слева идёт чат.
Заодно это пример приложения на их библиотеке libfx: она отвечает за цикл агента, вызовы инструментов, повторы и за то, чтобы ответ не потерялся, если сервер упал посреди работы. Для тех, кто просто делает страницы, это значит одно: длинная генерация не обрывается на полпути.
Чем fx0 отличается от сборников красивых сайтов, о которых мы писали раньше: это не подборка, а готовое приложение-агент с открытым кодом. Им можно пользоваться на сайте авторов, а можно забрать код и развернуть у себя.
Это наши формулировки, не из README. Работают по простому правилу: назвать, что за страница, перечислить блоки, задать тон и язык текста. Чем конкретнее блоки, тем меньше ходов уйдёт на правки - а бесплатных всего пять.
Лендинг для кофейни у моря. Блоки: первый экран с заголовком и кнопкой «Как добраться», меню из трёх позиций с короткими описаниями, часы работы, адрес и карта-заглушка. Тон тёплый, без рекламных штампов. Весь текст на русском.
Сделай вечернюю версию этой страницы: тёмный фон, тёплый акцент, остальное не трогай.
Агент умеет искать в вебе и открывать страницы для референсов, так что можно сразу дать ссылку на сайт, который нравится, и написать, что из него взять.
Стили - это файлы design.md: описание цветов, шрифтов и вёрстки в духе известного бренда. В fx0 они взяты
из открытой коллекции VoltAgent awesome-design-md
(смотреть удобнее на getdesign.md). Описания ниже - наш перевод подписей из меню fx0.
| Стиль | Как описан в меню |
|---|---|
| Apple | Много воздуха, шрифт SF Pro, кинематографичные картинки |
| Claude | Тёплый терракотовый акцент, чистая журнальная вёрстка |
| Vercel | Чёрно-белая точность, шрифт Geist |
| Notion | Тёплый минимализм, заголовки с засечками, мягкие подложки |
| Airbnb | Тёплый коралловый акцент, упор на фото, скруглённые элементы |
| Linear | Предельный минимализм, точность, фиолетовый акцент |
| Stripe | Фирменные фиолетовые градиенты, тонкое начертание шрифта |
| Figma | Яркие цвета, игриво, но по-деловому |
| BMW M | Чёрный холст, полосы в цветах M, фото на весь экран |
| Coinbase | Чистый синий, ощущение надёжности, строгий тон |
Свой стиль - пункт «upload a design.md…»: загружаешь файл с описанием своего фирменного стиля, и агент держится его.
Код открыт, авторы прямо предлагают его клонировать и переделать под себя. Это задача для разработчика или для Claude Code вместе с тобой. Что нужно по README:
.env.example в .env.local и заполнить, потом три команды ниже.npm ci npm run db:migrate npm run dev
Для выкладки - те же переменные на Vercel, интеграции Neon и Upstash из маркетплейса Vercel заполняют часть сами.
Бесплатные запросы для гостей включаются отдельно: FX0_FREE_PROMPTS=1 и серверный ключ AI Gateway, за запросы гостей тогда платишь ты.
Где лежат инструкции агента и его инструменты, сказано в самом приложении: lib/agent.ts и lib/tools.ts.
Первоисточник: репозиторий fx0 на GitHub.
Мы учим двум вещам: делать AI-видео и работать с Claude так, чтобы он закрывал реальные задачи бизнеса. У меня есть бесплатный разбор на полтора часа - смотреть можно сразу после регистрации.
Смотреть разбор