Specify: открытый генератор веб-приложений из YAML-спецификаций

Specify — это опенсорсный генератор веб-приложений из декларативной спецификации. Он напоминает Framer, но работает без визуального редактора и без «чёрной магии» искусственного интеллекта под капотом. Из коробки инструмент собирает прогрессивные веб-приложения на Svelte с офлайн-режимом: интерфейс открывается даже при потере связи или полном отключении сервера.

Предусмотрена интеграция с опенсорсной бэкенд-платформой Appwrite. Автор проекта — продуктовый дизайнер, который программирует для души, а не по профессии. Около трёх лет назад он решил самостоятельно закрывать весь цикл создания продукта, но быстро понял, что ручная верстка и перенос макетов в код сильно тормозят.

Так началась работа над собственным аналогом Framer: сначала автоматизация переноса дизайна через парсинг JSON, затем понимание, что нужен свой редактор. Полноценного визуального редактора пока нет из-за нехватки ресурсов, поэтому Specify использует возможности IDE для улучшения опыта разработчика. По своей сути Specify не фреймворк и не билдер, а декларативная спецификация и компилятор, который превращает её в код приложения.

Для дизайнеров терминология почти полностью взята из Figma, поэтому порог входа невысок. IDE помогает автоподстановкой свойств и значений, а горячая перезагрузка мгновенно отображает изменения в браузере. Если писать спецификацию вручную не хочется, можно сгенерировать её с помощью ИИ — в проекте для этого предусмотрен отдельный Skill, результат напоминает Google Stitch.

Внутри папки specs лежат файлы tokens.yaml, который выполняет роль Figma Variables, а также YAML-описания компонентов и экранов. У каждого экрана или компонента есть слои: frame, text, image и другие, каждый со своими стилями. Стили сгруппированы по префиксам и почти повторяют свойства Figma: pos отвечает за позиционирование, lay — за Auto Layout, vis — за внешний вид, txt — за типографику, а fill, stroke, shadow и blur используются самостоятельно.

Состояния элементов в Specify устроены как в CSS: hover, focus, pressed, disabled, selected, а также вложенные valid и invalid. Например, для кнопки можно задать цвет заливки в обычном состоянии, при наведении и при нажатии, а для полей ввода — отдельные стили при корректной и некорректной валидации. Это позволяет описывать интерактивные элементы без написания логики вручную.

Компоненты имеют props для входных данных, state для внутреннего состояния, stores для глобальных реактивных переменных, logic для подключения пользовательского кода и data для статичных или динамических данных с бэкенда. У экранов вместо props используются path и params. Пример: компонент кнопки объявляет проп label, а на экране вызывается с конкретным текстом «Нажми на меня».

Такой подход напоминает варианты компонентов в Figma, но сразу генерирует рабочий Svelte-код. Условия и циклы реализованы через cond-if и for. Элемент можно показывать только при выполнении условия, а слои размножать по массиву данных.

В примере со счётчиком лайков кнопки с эмодзи появляются только в допустимых пределах min и max, а в примере с тарифами цена меняется в зависимости от состояния isAnnually — помесячно или за год. События в Specify — аналог Interactions из Figma. Поддерживаются on-click, on-mount, on-unmount, on-change, on-submit и on-keydown.

Они запускают действия: set-state меняет состояние, navigate-to переводит на другой экран или внешнюю ссылку, post-data отправляет данные в Appwrite, run выполняет пользовательский код, submit и reset управляют формами. Пользовательский код подключается через логику и сторы, что позволяет расширять сгенерированное приложение, не трогая его основу. Appwrite — это опенсорсный бэкенд, который разворачивается на собственном VPS не сложнее установки WordPress.

Он дружелюбен к пользователю, сам выпускает SSL для привязанных доменов, быстро развивается, недавно переработал API и добавил MongoDB и PostgreSQL. Публичный бенчмарк показывает, что один сервер держит более миллиона одновременных WebSocket-соединений. По экономике VPS дороже обычного хостинга, но на одном сервере можно вести несколько проектов.

Надстройка get-data поверх Appwrite SDK управляет кешем: мгновенно отвечает данными из кеша и сразу же возвращает актуальные данные с сервера. Она не кеширует ответы по отдельности, а работает как локальная база данных, что ускоряет интерфейс и снижает нагрузку на бэкенд. Для команд, которые устали от разрыва между дизайном и разработкой, Specify предлагает единую спецификацию, понятную обеим сторонам и компилируемую в готовое приложение.