Нейросеть генерирует не просто код, а живую страницу с кнопками.
Представьте ситуацию: вы хотите сделать небольшое веб-приложение. Не обязательно сложное - может, форму для сбора заявок, панель с графиком продаж или простую страницу с кнопками и карточками. Стандартный путь к такому результату выглядит так: либо учить вёрстку самостоятельно - это недели, - либо нанимать специалиста, либо платить подписку конструкторам вроде Webflow или Framer. Цены у них начинаются от 10-14 долларов в месяц, а за серьёзный функционал - значительно больше.
Shadify предлагает выход с другой стороны. Вы открываете браузер, пишете словами, что хотите увидеть на экране - и получаете живую интерактивную страницу. Не картинку, не набросок, не список технических терминов. Страницу, по которой можно кликать, вводить текст, взаимодействовать с элементами прямо здесь и сейчас.
Это проект с открытым кодом от команды CopilotKit - компании, которая разрабатывает инструменты для встраивания ИИ в приложения. Лицензия MIT: код открыт, использовать и изменять можно бесплатно.
[ИЛЛ-2]
Что Shadify делает за вас - и чего не делает
Принцип работы несложный. Вы описываете интерфейс текстом - например: «хочу форму входа с полем для почты, паролем и кнопкой «Войти»». Shadify отправляет этот запрос нейросети, та разбирает, что именно нужно, и возвращает готовую страницу. Буквально за несколько секунд перед вами появляется форма - с полями, кнопкой, отступами на месте.
Если что-то не так - пишете уточнение в чате прямо там же. «Сделай кнопку синей», «добавь поле для имени», «убери логотип» - страница перестраивается под новые требования без перезагрузки. Это разговор с инструментом, а не редактирование файлов.
Есть деталь, которую не сразу замечаешь: агент умеет обращаться к интернету прямо во время генерации. Написали «создай дашборд с актуальным курсом евро» - инструмент найдёт данные сам и встроит их в интерфейс. По описанию проекта, это работает через отдельный поисковый сервис, который агент вызывает автоматически, когда нужна свежая информация извне.
Когда результат устраивает - нажимаете «Экспортировать» и получаете чистый код на React. React - это технология для создания веб-интерфейсов, которой пользуется большинство современных веб-разработчиков. Этот код можно вставить в собственный проект и дорабатывать дальше: стандартный, читаемый, без лишнего мусора.
[ИЛЛ-3]
Компоненты shadcn/ui: стандарт, а не случайный набор кнопок
Shadify генерирует интерфейсы не из абстрактных элементов. В основе - готовый набор компонентов под названием shadcn/ui: кнопки, карточки, таблицы, графики, формы, выпадающие меню, диалоговые окна. Всё это - реальные, проверенные элементы, которые веб-разработчики добавляют в серьёзные проекты вручную.
Почему это принципиально? Нейросеть не придумывает интерфейс с нуля - она составляет его из готовых профессиональных блоков. Как конструктор, где детали уже сделаны качественно, а вы только указываете, что из них собрать. Результат выглядит как у нормального приложения - аккуратно, единообразно, без самодельного ощущения.
Это главное отличие от того, что выдают обычные нейросети, когда просишь их «напиши HTML-страницу»: те делают что попало, Shadify работает в рамках одного проверенного дизайна. Авторы отдельно упоминают, что все компоненты учитывают требования доступности - такой интерфейс корректно работает в том числе для людей с ограничениями зрения или управления.
Мне кажется, это и есть ключевая инженерная идея проекта: не «нейросеть рисует красиво», а «нейросеть собирает из правильных деталей». Разница на выходе - принципиальная.
Shadify - бесплатный инструмент на платном топливе
Сам Shadify - программа с открытым кодом. Никаких платежей за инструмент, никакой регистрации, никаких ежемесячных счётов.
Но работает он не сам по себе. Для генерации интерфейсов нужен ключ доступа к нейросети OpenAI - это платный сервис. Для поиска информации в интернете - ключ к Tavily, тоже платному. У обоих есть бесплатные пробные периоды, но при регулярном использовании придётся платить. Конкретные суммы зависят от количества и сложности запросов.
Иными словами: двигатель бесплатный, а топливо - нет. Это честная и распространённая модель для таких инструментов: сам код открыт, а вычислительная мощность нейросети - это чужой ресурс, который стоит денег.
Если просто хочется посмотреть, как работает - есть живое демо на shadify.copilotkit.ai. Ключи не нужны, регистрация не нужна. Открываете, пишете запрос, смотрите результат. Это разумный первый шаг.
[ИЛЛ-4]
Три сервиса, два ключа и один запрос на русском
Установить Shadify у себя чуть сложнее, чем обычную программу. Инструмент устроен из трёх частей, которые работают вместе: видимый интерфейс в браузере, промежуточный слой для обработки запросов и агент на основе нейросети. Всё это нужно запустить на вашем компьютере.
Для этого понадобится: ключи от OpenAI и Tavily (можно получить на сайтах этих сервисов), а также установленные инструменты для работы с TypeScript - это язык программирования, на котором написан Shadify, - и Node.js, платформа для запуска такого кода на вашем компьютере. Пошаговая инструкция есть на странице проекта по ссылке внизу.
Звучит как много шагов - на деле это примерно 15-20 минут по инструкции, если у вас уже есть ключи. Если никогда не сталкивались с подобным - рассчитывайте на час и несколько гуглений. Разработчики разместили подробное описание процесса на странице проекта.
Попробовать идею без установки можно на демо-сайте - и это, пожалуй, правильное начало. Сначала убедитесь, что задача вам вообще подходит, потом разбирайтесь с запуском.
На странице проекта у Shadify сейчас 118 звёзд и 11 веток с самостоятельными версиями на основе исходного кода - для узкоспециализированного инструмента это признак, что разработчики заметили и взяли в работу. Среди авторов, согласно странице проекта, числится и сам Claude - нейросеть от Anthropic, что звучит как курьёз, но по сути отражает реальность: часть кода в таких проектах пишут ИИ-помощники.
Через несколько лет такие инструменты, вероятно, доберутся до уровня, когда дизайнер и верстальщик нужны будут только для нестандартных задач. Shadify - одна из первых реализаций этого принципа с открытым кодом. Пока это история для разработчиков - но разрыв между «описал словами» и «получил готовое приложение» сокращается быстро.
Как думаете: останется ли ручная вёрстка навыком, за который будут платить через пять лет - или это уже уходящая специализация?
Источник: Shadify
🔔 Подпишитесь на КликХак - здесь без воды: только конкретные инструменты, которые можно скачать и попробовать прямо сейчас.