Figma → Код
Вставьте ссылку на Figma или загрузите скриншот для генерации готового кода
Перетащите скриншот сюда или
PNG, JPG, WebP — до 10МБ
Настройки FLS Start 4
SCSS функции
JS Модули — Layout 14
JS Модули — Effects 14
JS Модули — Forms 13
Изображения и оптимизация
%
%
Шаблоны
Сборка (settings.scss)
Сервер
Стили (CSS/SCSS)
Шрифты (сборка)
JS настройки
Навигационная панель
SendMail (SMTP)
Telegram
Команды сборки
Валидация сборки
Генерация вёрстки
0%Запуск конвейера...
Figma API
Загрузка данных файла
Ожидание
▸
Analysis Pipeline
21 процессор
Ожидание
▸
Assets Export
Изображения, иконки, скриншоты
Ожидание
▸
Claude AI
Генерация кода (Sonnet)
Ожидание
▸
Output Format
HTML + CSS
Ожидание
▸
Аудит качества
PageSpeed, WCAG, SEO
Ожидание
▸
Сборка превью
Создание превью
Ожидание
▸
Выберите элемент
Тип сайта
—
Индустрия
—
Высота
—
Fold
—
Режим
—
Нажмите «Анализ структуры» для загрузки блоков
JS Функционал
Обнаруженные интерактивные элементы и анимации
Запустите «Анализ структуры» для обнаружения JS-функционала
Анимации секций
Анимации будут настроены после анализа структуры
Шаблоны слайдеров
Шаблоны форм
UI Kit — Компоненты
Компоненты из макета Figma для покомпонентной вёрстки
Запустите «Анализ структуры» для извлечения компонентов
Мобильный
375px
Планшет
768px
Десктоп
1440px
Аудит качества
--
PageSpeed
--
WCAG 2.1
--
HTML валидность
--
SEO
--
Favicon
--
Microdata / OG
--
Качество кода
--
Общий размер
--
Gzip оценка
Перетащите скриншот из Figma для сравнения
Оригинал Figma
Результат
Дизайн-токены
Цвета
Типографика
Отступы
Тени и эффекты
1. Дерево дизайна (вход)
Tokens
Tree (JSON)
2. BEM маппинг
3. Промпты Claude
HTML промпт
SCSS промпт
JS промпт
4. Ответы Claude (raw)
HTML ответ
SCSS ответ (BEM блоки)
SCSS каркас (сервер)
5. Статистика конвейера
6. Выходные файлы
Статус системы
—
Сервисы
Метрики генерации 0 запусков
Тайминги процессоров парсинга
Системная информация
Настройки проекта
Переопределяют автоматическую детекцию при генерации
AI Провайдер
CLI (MAX) — по умолчанию. API и OpenRouter — опционально.
Figma Token
Сетка и контейнер
px
px
Брейкпоинты (Media Queries)
Шрифты
Цвета (CSS переменные)
Кастомные CSS переменные
Тип сайта и отрасль
BEM и CSS единицы
Имена секций (переименование)
Выполните «Анализ структуры» для заполнения списка секций
Нет проектов
Создайте первый проект или используйте Генерацию для быстрого старта