Design & Media
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.
-
anthropic Bundle PPTXCreate, read, edit, and convert PowerPoint (.pptx) files with design guidance and visual QA workflows.
158k -
anthropic Bundle Canvas DesignCreates visual art in .png and .pdf documents by first generating a design philosophy and then expressing it on a canvas.
Audited 158k -
anthropic Bundle Theme FactoryApply consistent, professional color palettes and font pairings to presentation slide decks and other artifacts using pre-set themes or custom on-the-fly generation.
Audited 158k -
anthropic Bundle Algorithmic ArtCreate algorithmic art by first writing a generative philosophy, then expressing it as p5.js sketches with seeded randomness and interactive parameter exploration.
Audited 158k -
anthropic Bundle Frontend DesignGuides distinctive, intentional visual design for new UI or existing interfaces, covering aesthetic direction, typography, and avoiding templated defaults.
Audited 158k -
alirezarezvani Bundle LandingGenerates a premium single-page HTML landing page with 3D CSS animations, GSAP scroll effects, and mouse-parallax depth. Forces structured intake (product pitch, audience, brand, tone) before generating copy or markup.
Audited 20.4k -
alirezarezvani Bundle Design SystemOnboards brand tokens and generates a 12-token CSS palette for consistent, WCAG-AA-compliant HTML document styling across markdown conversions.
Audited 20.4k -
alirezarezvani Bundle Epic DesignBuild cinematic, scroll-driven 2.5D websites with parallax depth, text animations, and premium effects using CSS and JavaScript.
Audited 20.4k -
alirezarezvani Bundle UI Design SystemGenerate design tokens, color palettes, typography scales, component systems, and developer handoff documentation for UI design systems.
Audited 20.4k -
alirezarezvani Bundle Brand GuidelinesApply, document, or enforce brand guidelines for any product or company, covering color systems, typography, logo usage, brand voice, and visual identity.
Audited 20.4k -
alirezarezvani Bundle Senior ArchitectDesign system architecture, evaluate microservices vs monolith, create architecture diagrams, analyze dependencies, choose databases, and make technical decisions with architecture decision records.
Audited 20.4k -
alirezarezvani Bundle Demo VideoCreate polished demo videos, product walkthroughs, and feature showcases by orchestrating browser rendering, text-to-speech, and video compositing.
20.4k -
addyosmani Skill Frontend UI EngineeringBuild production-quality user interfaces that are accessible, performant, and visually polished, with guidance on component architecture, state management, design system adherence, and accessibility.
Audited 69.5k -
antfu Bundle Antfu DesignBuild interfaces with UnoCSS using semantic tokens, dark mode parity, and design polish for devtools and landing pages.
Audited 5.5k -
microsoft Bundle Frontend Design ReviewReview UI implementations against design quality standards and design system compliance, or create distinctive, production-grade frontend interfaces from scratch.
Audited 2.7k -
microsoft Bundle Frontend UI Dark TSBuild dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations for dashboards, admin panels, or data-rich interfaces.
Audited 2.7k -
conardli Bundle Gpt Image 2Generates and edits images using GPT Image 2 across three modes: direct generation via OpenAI-compatible API, prompt engineering for host-native image tools, or pure prompt advisory. Includes 80+ structured templates for posters, UI mockups, product visuals, maps, slides, and more.
9.2k -
conardli Bundle Web Design EngineerCraft polished visual web artifacts — pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations — using HTML, CSS, JavaScript, and React.
9.2k -
conardli Bundle Web Video PresentationTransform articles or scripts into click-driven 16:9 web presentations that look like videos, with optional AI voiceover synthesis.
9.2k -
affaan-m Bundle TasteProvides a creative-direction layer for music videos and short-form edits in the angelcore/cloud-trance/hyperpop visual family, encoding aesthetic vocabulary, mood/color/light system, and beat-synced editing grammar to produce intentional, stylistically coherent video content.
Audited 226k -
affaan-m Skill UI To VueBatch-convert UI design screenshots into Vue 3 Composition API components using Vant, Element Plus, or Ant Design Vue.
226k -
affaan-m Bundle Manim VideoCreate animated technical explainers using Manim for graphs, workflows, system diagrams, and product walkthroughs with precise motion and clear scene planning.
226k -
affaan-m Bundle IOS Icon GenGenerate iOS app icons as PNG imagesets for Xcode asset catalogs from SF Symbols or the Iconify API.
226k -
affaan-m Skill AccessibilityDesign, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards, with guidance for Web, iOS, and Android platforms.
Audited 226k -
affaan-m Skill Design SystemGenerate or audit design systems, check visual consistency, and review PRs that touch styling.
Audited 226k -
affaan-m Skill Video EditingEdit real video footage using a pipeline of FFmpeg, Remotion, ElevenLabs, fal.ai, and traditional editors for cutting, structuring, and augmenting raw captures.
226k -
affaan-m Bundle Frontend SlidesCreate zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files, with viewport-fit enforcement and visual style exploration.
Audited 226k -
affaan-m Skill Motion AdvancedBuild complex, interactive animations in React/Next.js including drag-and-drop, gestures, text animations, SVG path drawing, custom hooks, and imperative sequences.
Audited 226k -
affaan-m Skill Motion PatternsProvides copy-paste animation patterns for React and Next.js, including buttons, modals, toasts, stagger lists, page transitions, scroll reveals, and layout animations, all built on motion-foundations tokens.
Audited 226k -
affaan-m Skill Motion FoundationsProvides a foundational motion system for React/Next.js apps using motion/react, including tokens, spring presets, accessibility enforcement, SSR safety, and performance rules.
Audited 226k -
affaan-m Skill Liquid Glass DesignImplement Apple's Liquid Glass design system for iOS 26+ with dynamic glass materials, blur, reflection, and interactive morphing in SwiftUI, UIKit, and WidgetKit.
Audited 226k -
coreyhaines31 Bundle ImageCreate and optimize marketing images including blog heroes, social graphics, and ad visuals using AI generation and design tools.
36.3k -
antigravity Skill ImagenGenerates images using Google Gemini's image generation model for UI placeholders, documentation, and design assets.
Audited 42.4k -
antigravity Bundle ShadcnManage shadcn/ui components and projects with context, documentation, and usage patterns for building modern design systems.
42.4k -
antigravity Skill VizcomTransforms sketches and text descriptions into photorealistic 3D renders for product design, with control over materials, lighting, and style.
Audited 42.4k -
antigravity Skill LookdevBuilds an interactive in-browser studio for tuning visual parameters (sliders, pickers, drag handles) or editing/annotating text and media, enabling real-time human-in-the-loop refinement instead of static comparisons or chat-based feedback.
Audited 42.4k
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.
A skill is a plain SKILL.md file — YAML frontmatter naming the skill and describing when to use it, followed by markdown instructions the agent loads only when a task matches. The format is the one Anthropic documents for Agent Skills, and it is read unchanged by Cursor and OpenAI Codex, among 60+ agents. Every design & media skill listed here passes a safety review before it becomes publicly visible; the verdict and any network or filesystem capabilities it declares are shown on its page.
How to install a design & media agent skill
- Pick a skill. Choose a Design & Media skill from this page and open it to read its SKILL.md and safety review before installing.
- Run the install command. Run npx skillmds@latest add <owner>/<name> in your project. The CLI detects every agent installed on the machine and writes the skill into each one's skills directory.
- Restart your agent. Restart Claude Code, Cursor or Codex so it picks up the new skills directory. The agent then loads the skill on demand whenever a task matches its description.
Prefer to do it by hand? Every skill page has a copyable SKILL.md and a markdown twin at /skills/<owner>/<name>.md.
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 frontend-design, pptx, canvas-design. Rankings shift as installs change; sort this page by "Most installs" 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@latest add <owner>/<name>, or copy the file into your agent's skills directory.