设计与多媒体

ux-extract

jezweb/claude-skills

Exhaustively extract UX patterns from a reference web app. Walks every screen, captures screenshots of every state, records interaction patterns, copy verbatim, keyboard shortcuts, responsive treatments, motion, and empty/error/loading states. Produces a reusable pattern library that other audits can compare against. The inverse of ux-audit — asks 'what is the bar?' rather than 'does this match the bar?'. Trigger with 'learn from X', 'extract patterns from X', 'study X's UX', 'reverse engineer the UX of X', 'build a pattern library from X'.

  • 672 次安装
  • 1100 星标
  • 收录于

安装命令

npx skills add https://github.com/jezweb/claude-skills --skill ux-extract

SKILL.md

UX Extract

Exhaustively study a reference web app and produce a reusable pattern library. Goes everywhere, captures everything, then organises it into a document another audit or build can reference.

The inverse of ux-audit:

  • Audit asks: does this match a bar?
  • Extract asks: what is the bar?

Audits without extracts implicitly compare to "my memory of other apps" — fragile and inconsistent. Extracts turn that memory into a concrete, navigable artifact. An audit can then say: "Empty state on /app/clients shows no CTA. Reference (claude.ai) shows 3 keyboard shortcuts plus 'New chat' in the same position" instead of "feels a bit sparse".

When to use

  • Before building a new feature — study how best-in-class apps handle it
  • Benchmarking a build — extract the reference, then audit against it
  • Onboarding designers or engineers — here's what good looks like, concretely
  • Competitor research — document the competitor's UX so you can meaningfully differentiate
  • Refreshing an old app — extract patterns from modern equivalents to guide the update

Scope and ethics