Design & Media Agent Skills for Claude Code

Use after a brand direction and source of truth are confirmed to produce or maintain VI manuals, logo packages, brand assets, landscape…

Use when improving accessibility — WCAG 2.2 compliance across Perceivable, Operable, Understandable, Robust.

Use when building or auditing frontend UI — components, design systems, or avoiding generic AI aesthetics.

Use when building UI components — design systems, state, responsive, a11y.

AI art direction system. Claude directs image generation models (Gemini, DALL-E, Flux) via structured prompts. Generate banners, diagrams…

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

Short-form video generation skill — 3-10 second clips for product reveals, motion teasers, ambient loops.

Turn a video into a premium scroll-driven animated website with GSAP, canvas frame rendering, and layered animation choreography.

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.

Upload, stream, search, edit, transcribe, and generate AI video and audio using the VideoDB SDK.

Transforms plain text into hand-drawn marker and whiteboard-style animated short videos using rough.js primitives and automated quality…

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…

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

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

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

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