Сгенерировать полный запускаемый код по скриншоту — семантика, точные токены, адаптив, a11y (роль screenshot). Use when нужен НОВЫЙ UI по скриншоту; найти этот экран в существующем коде → $pinpoint-locate, только разбор без кода → $screenshot-analyze.
Installs into .claude/skills of the current project.
Are you the author of Screenshot Convert?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/vitammiin-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`.
