Specify превращает дизайн-спецификацию в готовое веб-приложение без визуального редактора

Идея родилась из желания замкнуть полный цикл создания продукта на одном человеке. Автор, имеющий основной опыт в продуктовом дизайне, столкнулся с тем, что современная разработка требует глубокого погружения во фронтенд-фреймворки, сборщики и бэкенд с веб-сокетами. Ручной перенос изменений из макетов в код оказался слишком медленным, и три года назад началась работа над собственным генератором приложений.

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

Specify не является ни фреймворком, ни классическим билдером. Это компилятор, который читает YAML-файлы из папки specs и генерирует рабочее SPA-приложение на Svelte. Вся терминология намеренно приближена к Figma: стили сгруппированы по знакомым секциям вроде Auto Layout, Appearance и Typography, а состояния элементов — hover, focus, pressed, disabled — задаются прямо в спецификации вложенными блоками, почти как в CSS.

Компоненты в Specify обладают чёткими границами: у них есть входные props, внутреннее состояние state, глобальные реактивные stores и возможность подключать пользовательский код через logic. Экраны, в свою очередь, оперируют path и params. Это позволяет описывать поведение интерфейса декларативно, не трогая сгенерированный код, и при этом сохранять возможность расширения логики для сложных случаев, вроде кастомного слайдера.

Для управления отображением элементов в спецификации предусмотрены условия cond-if и циклы for, которые перебирают массивы данных. Триггеры событий — on-click, on-mount, on-change и другие — запускают действия: изменение состояния, навигацию между экранами с анимацией, отправку данных или выполнение произвольной функции. Это напоминает систему Interactions из Figma, только описанную текстом.

Из коробки Specify дружит с open‑source бэкенд-платформой Appwrite. Надстройка над её SDK работает как локальная база данных: мгновенно отдаёт закешированные данные и затем обновляет их из сети, не кешируя ответы по отдельности. Appwrite разворачивается на собственном VPS, сам выпускает SSL-сертификаты и, по публичным бенчмаркам, способен держать более миллиона одновременных WebSocket-соединений на одном сервере.

Такой подход к генерации приложений из спецификации напоминает историю проекта DFace, который тоже сразу стал популярным среди жителей Бангладеш и Пакистана. Готовое приложение получает бронебойную автономность за счёт архитектуры PWA. Оно откроется в лифте, на парковке, при белых списках и даже если сервер физически перестанет существовать.

Для дизайнеров, которые не хотят писать спецификацию руками, в проекте есть Skill, позволяющий генерировать её с помощью AI и получать результат, отдалённо напоминающий Google Stitch. Автор подчёркивает, что делал инструмент для себя, но будет рад, если Specify поможет другим командам перестать играть в сломанный телефон между дизайном и разработкой. Любое изменение в YAML-файле мгновенно подхватывается через HMR и отображается в браузере, а IDE помогает автоподстановкой свойств и значений, снижая порог входа.

Сейчас проект существует в виде open‑source решения, которое можно взять и развернуть, не дожидаясь появления визуального редактора. Он уже умеет собирать полноценные экраны с реактивностью, валидацией форм и интеграцией с бэкендом, оставляя пространство для ручного кода ровно там, где декларативного описания недостаточно.