Извлечь дизайн-токены из скриншота (цвета OKLCH, типографика, spacing, радиусы, тени) в Tailwind @theme (роль screenshot). Use when нужны только токены без вёрстки; полный код экрана → $screenshot-convert.
Installs into .claude/skills of the current project.
Are you the author of Screenshot Tokens?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/vitammiin-screenshot-tokens)
---
name: screenshot-tokens
description: Извлечь дизайн-токены из скриншота (цвета OKLCH, типографика, spacing, радиусы, тени) в Tailwind @theme (роль screenshot). Use when нужны только токены без вёрстки; полный код экрана → $screenshot-convert.
---
# Задача: извлечь дизайн-токены из скриншота (screenshot)
Извлеки единую систему дизайн-токенов из скриншота (см. `$screenshot-to-code`, `$tailwind`).
Открой изображение и собери токены как **семантические** CSS-переменные в `@theme` (Tailwind v4, CSS-first):
- **Цвета:** точные hex → **OKLCH**, имена по роли (`--color-primary`/`--color-surface`/`--color-border`/`--color-muted`/`--color-danger`…), не литералы по месту; учти тёмную тему, если видна.
- **Типографика:** семейства (`--font-*`), шкала кегля, насыщенность, межстрочный, трекинг.
- **Spacing:** единая шкала (`--spacing-*`), не случайные px.
- **Радиусы/тени/градиенты/брейкпоинты** — тоже в токены (`--radius-*`, `--shadow-*`, `--breakpoint-*`).
Выдай готовый блок `@import "tailwindcss"; @theme { … }` + таблицу «токен → где на макете». Семантические имена, не значения по месту. Опирайся на `$tailwind`, `$screenshot-to-code`.
