Screenshot Convert

---
name: screenshot-convert
description: Сгенерировать полный запускаемый код по скриншоту — семантика, точные токены, адаптив, a11y (роль screenshot). Use when нужен НОВЫЙ UI по скриншоту; найти этот экран в существующем коде → $pinpoint-locate, только разбор без кода → $screenshot-analyze.
---

# Задача: сгенерировать код по скриншоту (screenshot)

Сгенерируй полный код по указанному скриншоту (см. `$screenshot-to-code`).

Открой изображение и разбери: layout (grid/flex), компоненты (повторы — в переиспользуемые), детали (цвета, типографика, spacing, радиусы, тени). **Фреймворк:** не указан — по умолчанию React + Tailwind v4 (простая статика — семантический HTML/CSS); поддержи Vue / Next.js по запросу.

Требования: **семантический HTML** (не «div-суп»); **точные цвета** — hex со скриншота → семантические токены `@theme` (OKLCH); **spacing/пропорции** по макету; варианты — `cva`, классы — `cn`; типизированные пропсы (`any` запрещён); **адаптив** (rem/%/`clamp()`, брейкпоинты/container queries); **a11y** (alt, `aria-*`, видимый focus, контраст WCAG).

**Материализуй** результат как файлы в рабочем каталоге/проекте пользователя и отдай пути — не оставляй код только текстом в ответе. Перед выдачей **проверь, что код запускается**: `npm run dev`/`npm run build` (для статики — открытие HTML) проходит без ошибок; только запускаемый артефакт = готово. Отдай **все файлы + пути**, структуру, как запустить, результат проверки и заметки о допущениях; неоднозначное помечай и предлагай альтернативу. Опирайся на `$screenshot-to-code`, `$tailwind`, `$react`, `$nextjs`, `$typescript`.