Design & Media Agent Skills for Claude Desktop

Creates vivid, varied, tactile wallpaper prompts with a clear visual thesis, intentional palette, atmospheric depth, and desktop-safe…

Improves spatial hierarchy, depth, negative space, balance, and landscape, portrait, or square framing.

Establishes clear composition, adaptive detail, explicit orientation, and desktop-safe defaults for every wallpaper prompt.

Create or restyle raster illustrations as warm, hand-inked watercolor travel-journal stickers with muted pigment, paper grain, irregular…

Use this skill when designing the orientation chrome that tells users where they are — breadcrumbs, current-page indicators, page titles…

Use this skill when designing search as the universal wayfinding recovery, or when designing for users who got lost — 404 pages, "results…

Use this skill when deciding whether (and how) to borrow physical-world wayfinding metaphors for software — rooms, doors, paths, maps…

Transform ideas into detailed visual specifications through scenario-driven design

Create, import, browse, and maintain design system components and tokens

Build accessible web applications following WCAG guidelines.

Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and…

When to activate: web components, custom elements, Shadow DOM, HTML templates, slots, lit-element, custom HTML tags

Creates unique web designs with brand identity, color palettes, typography, and modern UI/UX patterns.

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues.

Generates standardized DESIGN.md design specifications and production-ready web frontend code from PRDs, reference URLs, screenshots, and…

Web graphic design for interfaces, layouts, and visual systems.

Build a polished, self-contained single-page HTML report or briefing microsite - executive briefings, analysis reports, campaign/project…

Turn a visual or interaction technique you already built into a reusable web-design skill, by isolating the one mechanism that makes it…

Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera…

Use when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical…