Skill для Claude Code, который ведёт дизайнера через сбор референсов в три последовательных слоя. На каждом слое skill показывает находки и спрашивает, что нравится — итоговый мудборд собирается только из твоих выборов, не из автоматической курации.
npx skills add mmkeewa/design-discoveryРаботает с: Claude Code, Cursor, Codex CLI, Gemini CLI.
Claude in Chrome MCP — обязательно. Все источники прячут контент за JS, без браузерной автоматизации skill не работает.
Опционально — Figma MCP (для авто-сборки визуального борда в Figma design-файле на Шаге 6, см. reference/figma-board-build.md) и Mobbin MCP (ускоряет Layer 1).
В чате напиши:
Опиши свой кейс и какие у него компоненты, потом запусти design-discovery.
Затем опиши задачу в свободной форме. Skill сам спросит, чего не хватает.
Пример:
Делаю онбординг для финтех-приложения. ЦА — gen-z. Компоненты: 4-шаговый wizard с прогресс-баром, биометрика на последнем шаге, motivational копирайтинг.
Три слоя подряд, автономно, без пауз на курацию. Файл в Figma создаётся сразу и наполняется вживую:
- Layer 1 — Patterns. Mobbin, PageFlows, Benchmarkee → в раздел «Layer 1»
- Layer 2 — Visual. Awwwards, Recent (ex-Godly), scrn.gallery, FPS60 → в раздел «Layer 2»
- Layer 3 — Mood. Pinterest, Behance, Dribbble, UI8 → в раздел «Layer 3» (запускается автоматически)
Перед стартом skill просит проверить логины сервисов (Mobbin, Awwwards, Pinterest, Dribbble, Behance) и даёт ссылку на файл. Твоя роль — следить за файлом: если бенчи уходят не туда, остановить и поправить бриф. Ссылки в чат не сыплются, подтверждений по слоям нет.
Финальный артефакт — визуальный борд в Figma (три раздела-слоя, карточка = скриншот + источник + ссылка). Текстовую markdown-сводку skill соберёт по запросу.
- На старте новой задачи, когда нужно понять конвенции индустрии
- Когда есть гипотеза о направлении, но нужно валидировать живыми примерами
- Когда заказчик дал бриф, и нужно за 15 минут собрать референсный материал
- Если ты уже точно знаешь, что делать — иди в Figma
- Если бриф настолько абстрактный, что не извлекаются 3 из 5 категорий — сначала уточни задачу
- Для генерации дизайна — это
figma-generate-design, не этот skill
SKILL.md— главный flowreference/brief-parser.md— извлечение типа, индустрии, компонентов, тона, платформыreference/source-urls.md— URL-шаблоны и инструкции для Claude in Chrome по каждому из 12 источниковreference/layer-flow.md— sequential pause-логика между слоямиreference/moodboard-template.md— структура итогового файла
- Mobbin и PageFlows имеют paywall на полные флоу. Skill собирает с listing-страниц то, что видно бесплатно. Этого достаточно для первичной курации
- Pinterest и Dribbble требуют залогиненного браузера. Если Chrome не залогинен — skill честно скажет и перейдёт на Behance
- UI8 — это маркетплейс готовых kit'ов. Используется как mood-источник для расширения настроения, не для копирования
Я пробовала параллельный вариант раньше — skill приносит сразу 30 ссылок из всех слоёв. Получается шум. Дизайнер открывает каждую, теряет фокус, в итоге выбирает по случайному принципу.
Sequential с паузами заставляет принимать решение на каждом этапе. К моменту Layer 3 у тебя уже зафиксировано направление от Layer 1 и Layer 2 — Pinterest не зашумит выдачу, потому что ты ищешь в нём конкретное настроение, а не "что-то fintech-like".
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 — первая публикация.
Roadmap:
consolidate-memory: skill запоминает удачные брифы и угадывает направления при следующих запусках- A/B mode: ведёт два параллельных мудборда под разные направления одного брифа
- quick scan: Layer 1 only, для проверки гипотезы за 1 минуту
Apache-2.0.
Нашёл, что какой-то источник изменил структуру и парсинг сломался? Открой issue. Хочешь добавить источник? PR welcome.