🎨 Автоматизируем вёрстку по макету с помощью нейронок Вёрстка по дизайну из Figma — довольно механическая работа, которую хочется отдать машине. Самый очевидный подход — сделать скриншот и скормить его нейронке, но результаты обычно так себе: нейронка творчески интерпретирует размеры и выдаёт нечто лишь издали смахивающее на макет. Недавно нашёл гораздо более стабильный подход, который даёт практически идеальный результат. Шаг 1: Экспортируем код из Figma. Вместо скриншотов использую плагин Figma to Code. Бесплатный, опенсорсный, без регистрации и смс, поддерживает Dev Mode. Генерит код алгоритмически, сохраняет много мета-инфы (слои, переменные). Поддерживает Web, Flutter и SwiftUI, но сейчас сфокусируемся на JSX+Tailwind. Шаг 2: Скармливаем его нейронке (Cursor / Copilot / Claude Code / etc) с дополнительными инструкциями. Тут уже можно накидывать по вкусу и в зависимости от традиций в проекте. Я добавляю примерно такие: - Выноси SVG в отдельные файлы, импортируй либо через <img>, либо как React-компонент - Используй кастомные значения из tailwind-конфига - Убирай лишние обёртки, не добавляй элементов там, где они не нужны - Убирай избыточные классы (например, цвет текста можно повесить один раз на весь контейнер, а не на каждый абзац внутри) - Переиспользуй существующие компоненты из дизайн-системы (кнопки, инпуты, иконки) Шаг 3 (опционально): Адаптивная вёрстка. Для responsive дизайна можно попробовать скормить нейронке сразу несколько вариантов для разных размеров экрана и попросить объединить их в один компонент с правильными breakpoints. Срабатывает не так чётко, но тоже может быть полезно. В результате получается почти идеальное соответствие макету с первого раза —&nbsp;остаётся только добавить интерактивности. Главный кайф в том, что нейронка работает не с картинкой, а с уже структурированным кодом. Не нужно угадывать размеры и цвета — всё уже есть в исходнике.