design-discovery

Гид по сбору референсов. Skill идёт по трём слоям подряд, без пауз на выбор. Файл в Figma создаётся сразу, и находки каждого слоя ложатся в него вживую: сначала Layer 1, потом Layer 2, потом Layer 3. Ссылки в чат не сыплются, подтверждений по слоям нет.

Твоя роль — следить за файлом в Figma. Если бенчи уходят не туда (не тот тон, не та индустрия, мусорная выдача) — останови skill и поправь бриф. Курировать «выбери из списка» не нужно.

Как пользоваться

В чате напиши:

"Опиши свой кейс и запусти design-discovery."

Дальше опиши задачу в свободной форме. Пример:

"Делаю онбординг для финтех-приложения. ЦА — gen-z. Компоненты: 4-шаговый wizard с прогресс-баром, биометрика на последнем шаге, motivational копирайтинг."

Формат любой — список, абзац, голосовая расшифровка. Главное — тип задачи, компоненты и (если знаешь) тон и платформа.

Что делает skill

Три слоя источников, в строгом порядке — все три подряд, автоматически:

Никаких пауз на «что тебе нравится». Skill сам собирает находки каждого слоя и кладёт их в Figma-файл отдельным разделом. Layer 3 запускается автоматически, следом за Layer 2. Контроль — не через выбор из списка, а через наблюдение за файлом: не туда → останавливаешь и меняешь бриф.

Для мобильного брифа Layer 2 приоритетно берёт мобильные галереи (Mobbin / scrn.gallery / Recent → app-screenshots), а не Awwwards (это web/desktop).

Процесс

Шаг 0 — логины и подключения

Сначала попроси пользователя проверить, что всё залогинено. Отдай список одним сообщением и дождись «ок» — это единственная блокирующая проверка, дальше skill идёт сам:

Перед запуском проверь, что в браузере (Claude in Chrome) ты залогинен(а) в:
- Mobbin — mobbin.com
- Awwwards — awwwards.com
- Pinterest — pinterest.com   (без логина отдаёт пусто)
- Dribbble — dribbble.com
- Behance — behance.net
- scrn.gallery и Recent (recent.design) — логин не нужен, просто проверь, что открываются

Залогинена везде? Тогда запускаю — дальше иду сам, без пауз.

Незалогиненные источники молча вернут пусто — поэтому логины проверяем заранее, а не ловим пустые слои по ходу.

Проверка MCP (тихо, до запуска):

• Claude in Chrome — обязателен. Отключён → skill не запускается: «Нужен Claude in Chrome MCP — без него Layer 2 и 3 пустые. Подключи и перезапусти».
• Figma — обязателен (файл создаётся сразу). Отключён → «Нужен Figma MCP — файл борда создаётся сразу и наполняется вживую. Подключи и перезапусти».
• Mobbin — опционален, ускоряет Layer 1. Отключён → просто читаю Mobbin через Chrome.

Как проверять: вызови read-only tool сервера (list_connected_browsers для Chrome, whoami для Figma, search_screens для Mobbin). Ошибка «not connected» → отключён.

Шаг 1 — бриф + сразу создать файл

1. Загрузи reference/brief-parser.md, распарси бриф: тип флоу, индустрия, UI-паттерны (приоритет — явно названным компонентам), визуальный тон, платформа.
2. Одной строкой скажи, как понял бриф — но не жди подтверждения. Пользователь остановит, если не то.
3. Сразу создай Figma design-файл (create_new_file, editorType design, имя {Brief} — Reference Board). Если Figma-команд несколько — быстро уточни, в какой создавать; иначе бери единственную. Перед create_new_file загрузи скилл figma-create-new-file.
4. Построй пустой каркас борда: тёмный артборд + заголовок + три раздела-плейсхолдера «Layer 1 · Patterns», «Layer 2 · Visual», «Layer 3 · Mood». Детали сборки — reference/figma-board-build.md.
5. Дай пользователю ссылку на файл и скажи следить:

Понял бриф как: [flow] · [industry] · [tone] · [platform].
Файл: {figma_url}

Дальше иду по трём слоям сам и наполняю файл вживую (Layer 1 → 2 → 3).
Следи за файлом — если бенчи уходят не туда, останови меня и поправь бриф.

Только этот шаг общается с пользователем. Дальше — молча наполняешь файл.

Шаг 2 — Layer 1: Patterns → в файл

Загрузи reference/source-urls.md, секция Layer 1. Источники: Mobbin (через MCP, если есть — search_flows / search_screens / search_sections, query естественной фразой, platform отдельным параметром; иначе Chrome), PageFlows, Benchmarkee.

С каждого собери: название приложения, экран/флоу, URL, превью-скриншот, одну строку «что взять».

Положи находки в раздел «Layer 1» файла по reference/figma-board-build.md (карточка = скриншот + название источника + «что взять» + ссылка). Ссылки в чат не выводи.

Пустой Layer 1 → сразу Layer 2. Если во всём Layer 1 меньше 3 уникальных позиций (источники за подпиской/логином) — не зацикливайся: пометь раздел «Layer 1 пропущен — источники недоступны» и переходи к Layer 2. Для этого брифа Layer 2 становится основным слоем паттернов.

Шаг 3 — Layer 2: Visual → в файл

Загрузи reference/source-urls.md, секция Layer 2. Через Claude in Chrome (browser_batch параллельно):

1. Awwwards — по тону/категории (web/desktop; для мобильного брифа — второстепенно)
2. Recent (recent.design) — теги тона / раздел /app-store-screenshots
3. scrn.gallery — /apps, мобильные скриншоты
4. FPS60 — motion-моменты

Для мобильного брифа приоритет — мобильные галереи (scrn.gallery, Recent app-screenshots, Mobbin), Awwwards бери осторожно (это десктопные сайты).

С каждого собери: название/автор, URL, скриншот, «что взять» (типографика / композиция / motion / цвет). Положи в раздел «Layer 2» файла. В чат не выводи.

Шаг 4 — Layer 3: Mood → в файл

Сразу за Layer 2, автоматически (без вопроса «нужен ли mood»). Загрузи reference/source-urls.md, секция Layer 3. Через Chrome:

1. Pinterest — по тону+индустрии (логин проверен на Шаге 0)
2. Dribbble — концепты / иллюстрации / типографика (не UX-паттерны). Если сбрасывает запрос в дженерик-ленту — honest fail, пропусти
3. Behance — field=ui/ux, главный источник mood
4. UI8 — 2-3 kit'а для vibe, не для копирования

С каждого: превью, URL, источник (без «что взять» — это mood). Положи всё в раздел «Layer 3» файла плиткой.

Шаг 5 — финал

Когда все три раздела наполнены — короткое сообщение:

Готово. Все три слоя в файле: {figma_url}
- Layer 1 · Patterns — [N] референсов
- Layer 2 · Visual — [M]
- Layer 3 · Mood — [K]
(если слой пропущен — скажи, почему)

Если что-то ушло не туда — скажи, перезапущу нужный слой с уточнённым брифом.

Опционально: markdown-сводка в outputs/{brief-slug}-moodboard.md по reference/moodboard-template.md — только если пользователь попросит текстовую версию.

Что skill НЕ делает

• Не генерирует дизайн — это figma-generate-design
• Не делает критику референсов — это impeccable critique
• Не ждёт выбора «из списка» — курация не поштучная, а через наблюдение за файлом и правку брифа
• Не работает без Claude in Chrome и Figma MCP

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

• Логины решают. Незалогиненные Pinterest / Dribbble / Mobbin / Awwwards отдают пусто — поэтому Шаг 0 проверяет логины заранее.
• Dribbble часто сбрасывает конкретный запрос в дженерик-ленту («Nice Shot!», логотипы). Если так — honest fail, пропусти, опирайся на Behance.
• Mobbin и PageFlows — paywall на детали флоу. Берём с listing то, что видно бесплатно.
• Awwwards — web/desktop и часто B2B. Для мобильного брифа фильтруй жёстко или пропускай.
• Картинки в Figma: headless-рендер не показывает webp — конвертируй в JPG; заливай привязкой к узлу (nodeId). Детали — reference/figma-board-build.md.

Когда вызывать другие skills

• После discovery, если нужна реализация → figma-generate-design
• Ревью собранного борда → impeccable critique

Версия

v0.4.0 — автономный поток без акцепта. Слои идут подряд (Layer 1 → 2 → 3), Figma-файл создаётся сразу и наполняется вживую, ссылки в чат не выводятся, подтверждения по слоям убраны. Шаг 0 теперь просит пользователя проверить логины сервисов (список) и следить за файлом — останавливать и менять бриф, если бенчи не те. Figma MCP стал обязательным. Layer 3 запускается автоматически (убрана развилка перед ним).

v0.3.2 — Layer 2: screen.gallery (мёртв) → scrn.gallery/apps; Godly → Recent (recent.design).

v0.3.1 — автопереход на Layer 2, если Layer 1 вернул почти пусто.

v0.3.0 — финальный борд в Figma design-файле (не FigJam) + гайд reference/figma-board-build.md.

v0.2.0 — проверка Mobbin/Figma MCP на Шаге 0; Layer 1 через Mobbin MCP напрямую.

v0.1.0 — первая публикация.

Лицензия

Apache-2.0.