Design & Media Agent Skills

Design agent skills guide AI agents through visual and UX work: UI mockups, design systems, image and asset workflows, and design reviews. A skill keeps the agent aligned with your design language instead of improvising a new style each session.

Design & Media

983 skills
samuraigpt
muapi-ad-creative
Generate a high-converting ad creative set — hero image, ad copy variations, and platform-optimized crops for Meta, Google Display, and LinkedIn.
3.7k
samuraigpt
muapi-rednote-cover
Generate Xiaohongshu (RedNote) style cover images with aesthetic typography overlays, using the muapi CLI for AI image generation and editing.
3.7k
samuraigpt
muapi-instagram-post
Generates a polished Instagram post with a hero image, caption, and hashtags based on a brief and brand style.
3.7k
samuraigpt
muapi-interior-design
Generate interior design visualizations by redesigning existing rooms or creating new concepts with specific styles, colors, and furniture.
3.7k
samuraigpt
muapi-keyboard-art-maker
Generate artistic top-down photos of keyboard keycaps arranged to spell out custom text messages.
3.7k
leonxlnx
brandkit
Generates premium brand-kit images including logo systems, identity decks, and visual-world presentations. Creates intentional, minimal, and strategic brand boards with grid-based layouts, symbolic logo concepts, and application mockups.
leonxlnx
redesign-existing-projects
Audits and upgrades existing websites and apps to premium quality by identifying generic AI patterns and applying high-end design standards without breaking functionality.
leonxlnx
imagegen-frontend-web
Generates premium, conversion-aware website design reference images with one separate horizontal image per section, enforcing composition variety, narrative concept spine, and consistent palettes for landing pages and marketing sites.
heygen
hyperframes
Creates, edits, and renders videos and animations from HTML compositions using the HyperFrames framework, handling project state, input adaptation, and workflow routing.
· bundle
heygen
motion-graphics
Creates short, design-led motion graphics like kinetic typography, data visualizations, logo reveals, and animated maps, rendered as MP4 or transparent overlays.
· bundle
heygen
talking-head-recut
Packages an existing talking-head, interview, or podcast video with timed, designed graphic overlay cards—kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture—synced to the transcript, on a 16:9, 9:16, or 4:5 canvas.
· bundle
heygen
hyperframes-animation
Provides atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU) for composing animations with HyperFrames.
· bundle
op7418
guizang-ppt-skill
Generates a single-file horizontal-scroll web PPT with WebGL backgrounds, section covers, data hero cards, and image grids in two visual styles: 'e-magazine × e-ink' or 'Swiss International Style'.
· bundle
nexu-io
poster-hero
Generates visually striking vertical posters for social media sharing, with full-screen gradient backgrounds, bold typography, and decorative SVG elements.
· bundle
nexu-io
motion-frames
Creates a hero frame with looping CSS animations including a rotating type ring, animated globe, ticking timer, and parallax labels.
· bundle
nexu-io
deck-blueprint
Creates a print-friendly architecture or pipeline presentation deck with a blueprint-grid mask, rust-red callouts, and serif typography.
· bundle
nexu-io
web-proto-soft
Creates Apple-style soft UI prototypes with squircle cards, spring motion, and ambient mesh backgrounds.
· bundle
nexu-io
vfx-text-cursor
Creates a video intro frame with a typing cursor effect that reveals text character by character, accompanied by chromatic aberration trails and directional light leaks.
· bundle
nexu-io
frame-logo-outro
Generates a video outro frame with a logo assembled from geometric blocks, glow bloom animation, tagline reveal, and CTA, using pure CSS/SVG.
· bundle
nexu-io
deck-magazine-web
Create horizontal-swipe HTML presentations with magazine and e-ink aesthetics, featuring WebGL fluid backgrounds, serif display fonts, and keyboard navigation.
· bundle
nexu-io
frame-glitch-title
Generates a single-file HTML page with a cyberpunk glitch-art title frame, featuring chromatic aberration, scanlines, noise grain, and data-corruption animations.
· bundle
nexu-io
social-media-matrix
Build a cinematic, data-dense multi-platform social media dashboard with KPI matrix, interactive charts, insights drawer, and dark/light theme toggle.
· bundle
nexu-io
deck-open-slide-canvas
Creates a 1920×1080 presentation deck with React-like component layout, strict typography and color constraints, and no template restrictions.
· bundle
nexu-io
frame-macos-notification
Renders announcements, messages, or tips as macOS Big Sur+ style notification banners for video overlays, product launch teasers, or social media graphics.
· bundle
voltagent
ibm-design-analysis
Documents IBM's marketing design system based on Carbon Design System, including colors, typography, layout, and component specifications for enterprise marketing canvases.
50.9k · bundle
voltagent
nike-design-analysis
Documents Nike's commerce design system: photography-first layouts, typographic hierarchy, color palette, and component patterns across PLP, PDP, and editorial pages.
50.9k · bundle
voltagent
apple-design-analysis
Documents Apple's design system including color tokens, typography hierarchy, spacing rhythm, and component patterns across five surfaces.
50.9k · bundle
voltagent
wired-inspired-design-analysis
Analyzes and recreates Wired magazine's editorial design language: a strict black-and-white duet, proprietary serif/sans typographic system, square buttons, magazine-style story grid, and hairline borders.
50.9k · bundle
voltagent
framer-design-analysis
Analyze Framer's marketing site design system, including color palette, typography hierarchy, spacing, and component patterns, to produce a structured design specification.
50.9k · bundle
voltagent
resend-design-analysis
Analyzes and documents Resend's brand design system, including color palette, typography, spacing, and component patterns for dark-themed developer tools.
50.9k · bundle
voltagent
vercel-inspired-design-analysis
Analyzes Vercel's design language, documenting its color system, typography, surface hierarchy, and gradient-based decorative system for use in design systems or brand analysis.
50.9k · bundle
voltagent
lovable
Provides a design system specification inspired by Lovable's website, including visual theme, color palette, typography rules, and component styling for building warm, approachable interfaces.
50.9k · bundle
voltagent
renault-design-analysis
Documents Renault's brand design system including color palette, typography hierarchy, and layout principles for web implementation.
50.9k · bundle
voltagent
airtable-design-analysis
Documents Airtable's design system including color tokens, typography hierarchy, spacing, and component patterns for building editorial-style marketing interfaces.
50.9k · bundle
voltagent
runwayml
Provides a design system specification inspired by Runway's cinematic, dark-themed interface with full-bleed photography, single-typeface typography, and minimal UI elements.
50.9k · bundle
voltagent
hashicorp-design-analysis
Documents HashiCorp's marketing design system: near-black canvas, per-product accent colors, hashicorpSans typography, and charcoal card surfaces for multi-product brand identity.
50.9k · bundle

Frequently asked questions

What are Design & Media agent skills?

Design agent skills guide AI agents through visual and UX work: UI mockups, design systems, image and asset workflows, and design reviews. A skill keeps the agent aligned with your design language instead of improvising a new style each session.

Which Design & Media skills are most installed?

Popular Design & Media skills on SkillMD right now include hyperframes-animation, poster-hero, Apple-design-analysis. Rankings shift as installs change; sort this page by "Most downloaded" for the live list.

Do Design & Media skills work with Claude Code and Cursor?

Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds add <owner>/<name>, or copy the file into your agent's skills directory.