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
jorcan game-art
Guides visual style selection, asset pipeline choices, and animation workflows for game development.
0 · bundle
gabrielmoreira vgl
Define every visual attribute as structured VGL JSON for deterministic, reproducible image generation with Bria FIBO models, covering objects, lighting, camera settings, composition, and style.
17 · bundle
gabrielmoreira video-claw
Generates complete AI videos through a 6-stage pipeline (script, character/scene design, storyboard, reference images, video generation, post-production) or one-shot pipelines for short videos, action transfer, and digital human dubbing, all running on local servers.
17 · bundle
gabrielmoreira academic-pptx
Creates or improves academic presentations with structured argument, communication-first design, and slide-by-slide content guidelines for conference papers, thesis defenses, and research talks.
17 · bundle
gabrielmoreira ecommerce
Generates e-commerce product catalog images from raw photos, including packshots, cutouts, dimensions images, lifestyle scenes, and marketplace variants for Amazon, Shopify, and Etsy.
17 · bundle
gabrielmoreira claude-design-principles
Provides a structured checklist of design principles and rules to produce grounded, non-generic UI/HTML/slide outputs by gathering context, offering multiple variants, and avoiding AI-slop patterns.
17 · bundle
samyakjhaveri diagrams
Generates diagrams and visuals from code or descriptions, routing to specialized tools for hand-drawn, formal, academic, or architectural output.
0 · bundle
auto-skiller brand
Defines brand identity, voice, messaging, and visual standards, with scripts to inject brand context, validate assets, extract colors, and sync guidelines to design tokens.
1 · bundle
auto-skiller design
Unified design skill covering brand identity, design tokens, UI styling, logo and icon generation, corporate identity programs, presentations, banners, and social media images.
1 · bundle
auto-skiller sketch
Builds interactive HTML sketches with working states, transitions, and a shared CSS theme system for design exploration.
1
auto-skiller slides
Designs strategic HTML presentations with data visualization, layout patterns, and copywriting formulas for marketing and pitch decks.
1 · bundle
auto-skiller ui-styling
Builds accessible React UIs with shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
1 · bundle
auto-skiller ui-ux-pro-max
Generates design systems and UI/UX recommendations for React Native projects, with domain-specific searches for styles, colors, typography, and best practices.
1 · bundle
auto-skiller liquid-glass-design
Implements Apple's Liquid Glass design system for iOS 26 apps, covering SwiftUI, UIKit, and WidgetKit integration with glass effects, morphing transitions, and customization.
1 · bundle
auto-skiller ckm-design
Creates brand identities, logos, corporate identity programs, HTML presentations, banners, icons, and social media images using AI generation and HTML/CSS-to-screenshot workflows.
1 · bundle
mhassan0000 canvas-design
Creates original visual art in .png and .pdf documents by first generating a design philosophy and then expressing it visually, with minimal text and expert craftsmanship.
1 · bundle
mhassan0000 theme-factory
Applies curated color palettes and font pairings to presentation slide decks and other artifacts, with ten pre-set themes and the ability to generate custom themes on the fly.
1 · bundle
mhassan0000 algorithmic-art
Creates algorithmic art with p5.js, starting from a generative philosophy and expressing it through seeded randomness, noise fields, and particle systems.
1 · bundle
mhassan0000 frontend-design
Guides distinctive, intentional visual design for new or existing UI, covering aesthetic direction, typography, and avoiding templated defaults.
1 · bundle
mhassan0000 slack-gif-creator
Creates animated GIFs optimized for Slack with constraints, validation, and animation techniques using PIL.
1 · bundle
mhassan0000 wpds
Apply WordPress's official design tokens, typography, and component patterns to themes and sites.
1
mhassan0000 manim-video
Creates technical explainer animations with Manim, covering graphs, workflows, and system diagrams, and produces storyboards, scene plans, and rendered MP4s.
1 · bundle
mhassan0000 accessibility
Design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards, generating semantic ARIA for web and accessibility traits for iOS and Android.
1
galyarderlabs ui-ux-designer
Provides a dedicated design-oriented pass on user experience, visual flow, interaction quality, and interface coherence, pairing with a restored ui-ux-designer agent when appropriate.
20
diegosouzapw aica
Applies Kelvin Garr's fixed AICA brand identity—black glass, gold circuits, Space Grotesk—and Next.js 14 implementation guide for his personal sites and AICA-branded projects.
54 · bundle
diegosouzapw draw
Creates, edits, and converts vector graphics and diagrams using LibreOffice Draw, supporting ODG, SVG, PDF, and PNG formats.
54 · bundle
oyi77 video-gen
Generates short AI videos from text or images across Runway, Kling, Sora, Pika, Seedance, Grok Imagine, and Veo, with provider-specific APIs and prompt guidance.
10
chimeranext figma
Integrates Figma Dev Mode via MCP to extract assets, components, styles, and design tokens, converting designs to code with high fidelity.
4
demerzels-lab baz
Create professional motion graphics and videos from the terminal.
10 · bundle
samuelpatro prototype
Reproduces an existing design as a faithful, self-contained HTML file, then generates and evaluates design variations to recommend the strongest option.
2
samuelpatro apple-design
Translates Apple's fluid interface design principles—springs, interruptible motion, velocity handoff, and momentum projection—into concrete web techniques for building and reviewing gesture-driven UI.
2
samuelpatro remove-ai-slop
Audits codebases, pages, or documents for AI-generated design and copy tells, then proposes surgical fixes for user approval.
2
vikingokft design-md
Analyzes Stitch projects and synthesizes a semantic design system into a DESIGN.md file.
0 · bundle
vikingokft shadcn-ui
Integrates shadcn/ui components into projects, covering discovery, installation, customization, and best practices.
0 · bundle
vikingokft enhance-prompt
Transforms vague UI ideas into structured, Stitch-optimized prompts with design system context and UI/UX keywords.
0 · bundle
vikingokft stitch-extract-design-md
Analyzes frontend source code to extract a comprehensive design system document (DESIGN.md) capturing colors, typography, spacing, and component patterns without building or rendering the app.
0 · 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 brand, vgl, ecommerce. 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.