Screenshot To Code

---
name: screenshot-to-code
description: "Скриншот UI в production-ready код: layout, design tokens, responsive behavior, semantic HTML и a11y."
---

# Навык: Screenshot → Code

По скриншоту — точный, современный, запускаемый код: воспроизвести структуру и стиль пиксель-в-пиксель. В связке с `$tailwind` (v4, CSS-first) и `$react`/`$nextjs`.

## 1. Анализ
Разбери: **layout** (grid/flex/позиционирование, колонки, gaps, выравнивание, max-width), **компоненты** (повторы → переиспользуемые), **детали** (цвета, типографика, spacing, радиусы, тени, градиенты), **состояния и адаптив** (hover/focus/disabled, empty/loading/error, mobile vs desktop).

## 2. Фреймворк
Спроси, если не задано. По умолчанию React + Tailwind v4; простая статика — семантический HTML/CSS; по запросу Vue / Next.js (App Router).

## 3. Генерация
Иерархия компонентов (повторы — один раз, пропсы типизированы); семантический HTML (`header`/`nav`/`main`/`section`/`button`/`label`); современный CSS (Grid/Flex, не floats/таблицы); Server vs Client Component явно; варианты — `cva`, классы — `cn`.

## 4. Точность
Цвета — точные hex → **OKLCH-токены** в `@theme` по ролям (`--color-primary`/`--color-surface`/`--color-border`…), не литералы по месту. Spacing/типографику — в единую шкалу токенов. Пропорции — по макету.

## 5. Адаптив
Относительные единицы (rem/em/%/vw); брейкпоинты mobile-first (`sm: md: lg:`); **container queries** (`@container`) для компонентов; fluid через `clamp()`/`min()`/`max()`.

## 6. Доступность
Alt-тексты, `aria-*` где нужно, порядок заголовков, видимый `focus-visible`, контраст WCAG, интерактив на `button`/`a`; формы — `label`+инпут, доступные состояния валидации.

## 7. Поставка
Весь код (рабочий), структура файлов, как запустить, заметки о допущениях. Без заглушек в прод-пути.

## 8. Интернационализация текста (i18n)
Если целевой проект мультиязычный — извлечённый UI-текст (лейблы, кнопки, `alt`, `aria-*`, плейсхолдеры) выводи **ключами** слоя перевода, а не литералами; в одноязычном — вынеси в константы/словарь. Даты/числа/валюты — через `Intl`. Подробнее — `$i18n`.

## Частые паттерны
Навбар — `flex justify-between` + sticky (mobile — гамбургер); сетка карточек — Grid `auto-fit`/`minmax`; hero — full-height, центр, фон/градиент; формы — `label`+инпут + валидация; модалка — `fixed`, бэкдроп, focus-trap, `Esc`.

## Неоднозначность
Неясное — по типовым паттернам + пометка комментарием и альтернатива; критичное (оттенок, поведение, фреймворк) — уточни, не выдумывай.