Design & Media Agent Skills for Claude Code

Vibecode brand design system with colors, typography, spacing, and component guidelines.

Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.

Convert video files (MP4, WebM, MOV) into interactive web scroll animations, sticky canvas frame sequences, background video controllers…

Turn a reference video into a super detailed recreation or inspiration prompt.

Native browser View Transitions API for seamless page and state transitions.

Operation and scaling of existing design systems — multi-branding and theming, semantic versioning and deprecation of tokens and components…

1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.

Generate/edit images with Nano Banana Pro (Gemini 3 Pro Image).

Local vision CLIs: glance (describe/ask/OCR an image), ground (locate a target, pixel box), detect (element inventory), trace (image to…

Automate Visme tasks via Rube MCP (Composio).

Detect AI-generated UI patterns in CSS and component files — reports side-tab accents, gradient text, glassmorphism, bounce easing…

Perform adversarial visual audit of Quarto or Beamer slides checking for overflow, font consistency, box fatigue, and layout issues.

Convert a user-supplied designed image or an existing visual_dna_system document into a debranded, platform-specific illustration-style…

Image generation and presentations. Use when: - User asks for images: logos, icons, app assets, diagrams, flowcharts, architecture…

Specify any visual piece —a product interface, a presentation, an infographic— screen by screen or slide by slide: purpose, structure…

Multi-dimensional visual scoring using pixel-diff and structural analysis for design-to-implementation comparison

Extract a reusable, de-branded Visual DNA Design System from visual samples such as websites, screenshots, Figma references, images…

Open a running local app in Design overview mode as URL-backed iframe screens for visual editing, flow review, duplication, and…

Audits UI layouts, slides, and dashboards to identify visual hierarchy flaws, inconsistent spacing rhythm, and misaligned emphasis signals.

Use when a project needs its visual/frontend design direction decided — fonts, colors, theme, spacing, and overall feel — before or during…

Comprehensive visual reasoning engine. Transforms abstract creative intent into structured visual specifications for image generation and…