Design & Media Agent Skills for Claude Code

Interactive StyleSeed setup wizard for choosing app type, brand color, visual style, typography, and the first screen scaffold.

Design planning interview before writing UI code — produces a design brief covering register, typography strategy, color constraints, and…

Audit, add, or update a UI resource source card in the UI Design Playbook catalog when license, access tier, provenance, integration, or…

Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element…

List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.

Fix typography hierarchy, font choices, type scale, and line-length in UI files — applies register-aware rules (brand vs product) with…

Professional typography rules for UI design, web applications, software interfaces, and all screen-based text.

Delivers rigorous, senior-level UI/UX critiques analyzing visual hierarchy, usability, design system alignment, and business metrics…

Expert UI/UX designer specializing in user-centered design, accessibility (WCAG 2.2), design systems, and responsive interfaces.

Comprehensive UI/UX design and layout toolkit for web interfaces.

Comprehensive design guide for web and mobile applications.

Use as the UI/UX quality gate for frontend work that materially affects web product surfaces: design/build/redesign/review/polish/refactor…

Multi-perspective UI/UX roasting workflow with iterative improvement cycles

Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with…

Establishes a web project's design system as the single source of truth — colors, spacing, typography, radius, shadow, breakpoints — then…

Use when you need to pick high-quality Unsplash images for product/design assets (avatars, headshots, portraits, large website…

Recreate an authorized live website or app URL as a faithful, runnable, frontend-only local implementation.

Usability review — evaluate an existing flow or UI against usability heuristics, flag friction points, and recommend fixes.

Run a moderated usability session on a working prototype and return findings tied to the screen, not the user.

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and…

Load or manage Product Design's saved user context.