anydesign

Укажите на что угодно визуальное. Получите дизайн-систему.

Навык Claude, который превращает изображения, веб-сайты и файлы Figma в структурированные, машиночитаемые спецификации дизайна — и копирует отдельные элементы (от навигационных панелей до 3D-арта) в виде промптов для пересоздания, которые способен выполнить любой ИИ.

Установка · Посмотрите в действии · Режим элементов · CLI-скрипты · Примеры

🧠 Что он делает

anydesign работает внутри Claude — его результат универсален. Обычный Markdown + W3C DTCG JSON, который могут использовать v0, Lovable, Cursor, Bolt, Claude Code или живой дизайнер. Никакой привязки к платформе. Это не генератор описаний — это инструмент диагностики дизайна: каждое умозаключение снабжено маркером уверенности (✅ ⚠️ ❓), каждый цвет — настоящий hex, а выдумывание токенов считается хуже, чем честное «недостаточно информации».

Два режима, выбираемые автоматически в зависимости от запроса:

🎬 Посмотрите в действии

Каждое изображение ниже — реальный, воспроизводимый запуск; исходники и команды лежат в examples/.

Акт 1 — Полная дизайн-система становится работающим приложением

Навык проанализировал vercel.com (извлечено 808 CSS custom properties, ничего не выдумано), создал design.md, а v0 построил по нему вот это приложение:

^{Доступно онлайн: v0-anydesignexample.vercel.app · полный запуск в examples/vercel-landing/}

Акт 2 — Один элемент, пересобранный заново

Режим элементов был направлен на ретро-плеер Mac OS с сайта poolsuite.net: захват с точностью до DOM, палитра, снятая попиксельно, дословная система фасок и теней — и промпт для пересоздания, который v0 превратил в работающее приложение.

Захваченный элемент	Пересобрано v0 по element.md

^{Доступно онлайн: retro-radio-player-zz.vercel.app · детали запуска в examples/poolsuite-player-element/}

Акт 3 — Арт становится промптом, который держится

Когда элемент — это арт, вы получаете промпт для генеративного изображения, привязанный к извлечённой палитре — hex за hex'ом. 3D hero-сцена Discord, перегенерированная с первой попытки: индиго-мир зафиксирован, каждый акцент на своём точном извлечённом hex, оригинальные персонажи (никаких брендовых маскотов — предусмотрена защита интеллектуальной собственности).

Захваченный элемент	Сгенерировано по промпту на основе токенов
И тот же результат извлечения в виде изолированной, готовой для веба вырезки — единственный объект, настоящий альфа-канал, никакого окружения. Вставляйте её прямо на свой сайт:

^{Оба промпта + проверка альфа-канала в examples/discord-hero-asset/}

Акт 4 — Наборы игровых ассетов, которые остаются согласованными

Боль №1 в AI-арте для игр — согласованность между ассетами. Режим element извлекает арт-направление игры один раз — палитру, рецепт освещения, правила распределения цветов — и выдаёт набор промптов, где каждый ассет опирается на эту базу. На входе — один ключевой арт, на выходе — согласованный набор спрайтов:

Захваченный ключевой арт	Оригинальный персонаж, сгенерированный по набору

^{Набор промптов (персонаж + подбираемый предмет + проп) в examples/game-asset-pack/ · только оригинальные объекты, согласно правилу защиты IP}

🚀 Установка

git clone https://github.com/uxKero/anydesign.git

# Personal skills (all projects)
cp -r anydesign ~/.claude/skills/

# OR for a single project
cp -r anydesign /path/to/project/.claude/skills/

Необязательные дополнения:

# Python deps for the companion scripts
pip install -r requirements.txt
playwright install chromium   # only for capture_site.py (~300MB first time)

Чтобы анализировать файлы Figma, подключите Figma MCP в приложении Claude (Settings → Connectors).

Вот и всё — навык активируется автоматически, когда Claude распознаёт намерение проанализировать дизайн («извлеки дизайн-систему из X», «скопируй эту навигационную панель», «какая палитра у этого сайта»). Запоминать команды не нужно.

📦 Что вы получаете

🪄 Режим element — «скопируй только это»

Иногда вам нужна не вся система — а именно та навигационная панель, та карточка с ценами, та 3D-иллюстрация. Просто скажите об этом, и навык захватит только нужный элемент (capture_site.py --selector снимает его точную ограничивающую рамку + outerHTML для URL) и классифицирует его:

Промпты для изображений — главное отличие: вместо расплывчатого описания промпт содержит точную извлечённую палитру, наблюдаемое освещение и настроение исходного бренда — благодаря этому перегенерированный ассет органично вписывается в исходный дизайн. Два формата выдачи: scene (композиция с фоном) или isolated (один объект, прозрачный PNG с альфа-каналом, готовый для веба).

🔌 Работает с любым AI-билдером

Результат работы — обычный текст. Всё, что умеет читать Markdown, может это использовать.

🧰 Автономные CLI-скрипты

Семь чисто-Python инструментов в scripts/, которые работают без Claude:

Примеры команд

# Pull design tokens from any URL — no Claude needed
python scripts/extract_css_vars.py https://vercel.com/ --pretty

# Multi-viewport responsive captures
python scripts/capture_site.py https://your-site.com --viewports desktop,tablet,mobile

# Capture a single element (screenshot + outerHTML)
python scripts/capture_site.py https://your-site.com --selector "header.navbar" -o element.png

# WCAG contrast check
python scripts/check_contrast.py --pair "#111,#FFF" --pair "#3B82F6,#FFF"

# Validate a generated design.md
python scripts/lint_design_md.py path/to/design.md

# Audit declared tokens vs live site (the drift tool)
python scripts/verify_design.py path/to/design-tokens.json https://vercel.com/

# Bundle a design.md + tokens for upload to claude.ai/design
python scripts/export_for_claude_design.py path/to/design.md --out my-brand-bundle/

У каждого скрипта есть --help.

💡 Что ещё можно с этим делать

Использование с Claude Design — загрузите свой захваченный бренд в claude.ai/design на постоянной основе

Claude Design (Anthropic Labs) создаёт постоянную дизайн-систему из загруженных вами брендовых материалов — презентаций PPTX, брифов DOCX, репозиториев кода. Он не принимает напрямую DTCG JSON или markdown, поэтому скрипт export_for_claude_design.py устраняет этот разрыв:

python scripts/export_for_claude_design.py path/to/design.md --out my-brand/

Рабочий процесс: запустите anydesign → экспортируйте пакет → загрузите его в настройке дизайн-системы Claude Design → каждый будущий проект в вашей организации по умолчанию будет использовать этот бренд. Реальный пакет из запуска для Vercel: examples/vercel-landing/claude-design-bundle/.

Сценарии использования — восемь реальных примеров

• 🎨 Воспроизвести референс — «Мне нравится ощущение лендинга Linear — проанализируй его, чтобы я мог поставить задачу своей команде». HTML + CSS-переменные извлекаются как явные токены, design.md готов для брифа в Notion.
• 🧩 Токены из скриншота — «Вытащи палитру и типографику из этой работы на Dribbble». Прямое зрение + extract_colors.py для пиксельно точных hex-кодов с указанием уровня уверенности.
• 🪄 Скопировать один элемент — включая арт — «Дай мне промпт, чтобы сгенерировать этот 3D-блоб под мою палитру». Режим элемента: промпт изображения, привязанный к токенам, + заметки о согласованности, указывающие, какой hex заменить на цвета вашего бренда.
• 🛠️ Бриф для ИИ-конструктора — «Портфолио как vercel.com, но проще — дай то, что я могу отдать v0». design.md с акцентом на реконструкцию — вставил и пошёл.
• 🎯 Аудит передачи из Figma — объявленные переменные (get_variable_defs) сверяются с фактическим использованием; несоответствия попадают в раздел открытых вопросов.
• 🔍 Дизайн против продакшена — передайте файл Figma и живой сайт; получите раздел расхождений: разошедшиеся токены, компоненты вне спецификации, отсутствующие состояния.
• 📚 Документировать легаси-продукт — извлеките неявную систему, которую ваша команда построила, не формализуя её; начните с базовой линии вместо нуля.
• ♿ Быстрая проверка WCAG — design-a11y.md с коэффициентами AA/AAA для каждой зафиксированной пары текст/поверхность.

Как думает навык — рабочий процесс + структура проекта

Строгий рабочий процесс из 5 шагов (подробности в SKILL.md):

Step 1 — Identify source, mode (full vs element), and emphasis
 ↓
Step 2 — Capture material
       (vision / HTML + CSS vars / Playwright / Figma MCP)
 ↓
Step 3 — Layered analysis (Identity → System → Components → Layout
       → Reconstruction → Brand rules) + Art Direction QA pass
 ↓
Step 4 — Generate design.md + design-tokens.json   (or element.md)
 ↓
Step 5 — Deliver + suggest next step

Многослойный анализ идёт от общего к частному, никогда не перескакивая от «настроения» к «токенам» без прохождения через «систему» — именно это делает результат целостным.

anydesign/
├── SKILL.md                       Main instructions (the "brain")
├── references/                    Loaded on-demand (progressive disclosure)
│   ├── capture-flows.md           How to capture each source type
│   ├── analysis-framework.md      The analysis layers in detail
│   ├── token-extraction.md        Token inference rigor + DTCG
│   ├── output-template.md         design.md template
│   └── element-copy.md            Element mode: element.md + image prompts
├── scripts/                       7 standalone CLI tools
└── examples/                      Real, reproducible runs
  ├── vercel-landing/            Full analysis of vercel.com (+ Claude Design bundle)
  ├── landing-example/           Synthetic minimal example
  ├── poolsuite-player-element/  Element mode, code path (+ v0 rebuild)
  ├── discord-hero-asset/        Element mode, asset path (+ generated images)
  └── v0-downstream-demo/        The original downstream proof

MIT · См. LICENSE · История изменений в CHANGELOG.md

Сделали что-то с помощью anydesign? Откройте issue и покажите нам ✨