1. Устранение разрыва между макетом и фронтенд-кодом

Вам больше не нужно вручную измерять отступы и писать сложные структуры Flexbox. Достаточно вставить изображение из буфера обмена, чтобы получить рабочий прототип за считанные секунды.

2. Загрузка и вставка скриншотов из буфера обмена

Нажмите Ctrl+Shift+U или иконку камеры на панели инструментов. Вы можете перетащить файл PNG/JPEG или нажать Ctrl+V, чтобы вставить скриншот из системных ножниц.

3. Выбор целевого формата: HTML/CSS или React TSX

Выберите тип проекта. Для статических страниц генерируется семантический HTML5 и современный CSS с переменными. Для проектов React создаются структурированные TSX-компоненты.

4. Автоматическое извлечение сеток, цветов и типографики

Модель определяет колонки Flexbox, сетки Grid, пропорции отступов и скругления углов. Основные цвета палитры выносятся в переменные CSS в корне стилей.

<!-- Generated responsive card layout component -->
<div class="pricing-grid">
  <div class="pricing-card featured">
    <span class="badge">Most Popular</span>
    <h3>Professional</h3>
    <div class="price">$29<span>/mo</span></div>
    <ul class="features-list">
      <li>Unlimited in-browser workspaces</li>
      <li>Instant WebContainer execution</li>
      <li>Custom domain publishing</li>
    </ul>
    <button class="btn-primary">Get Started</button>
  </div>
</div>

5. Параллельное сравнение оригинала и рендера

Перед заменой содержимого редактора диалоговое окно показывает исходное изображение рядом со сгенерированным компонентом для проверки соответствия.