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
ecnu-icalk canvas-design
Creates original visual art as .png or .pdf files by first defining a design philosophy, then expressing it through a canvas with minimal text and expert craftsmanship.
559 · bundle
tinh2 dark-mode
Adds a complete dark mode to any frontend project: auto-detects the theme system, generates a WCAG-compliant dark palette, adds a toggle with system detection and persistence, migrates hardcoded colors to theme tokens, and verifies contrast ratios.
13
tinh2 design-build
Builds production-grade web or mobile interfaces with distinctive design, modern CSS, and purposeful motion, inferring intent from the codebase without asking questions.
13
comeonoliver figma
Translates Figma designs into project code using the Figma MCP server, fetching design context, screenshots, and assets to implement pixel-perfect UI.
61
lingxling canvas-design
Creates visual art in .png and .pdf documents by first generating a design philosophy and then expressing it visually, emphasizing minimal text and expert craftsmanship.
253 · bundle
drnabeelkhan maxim-brand
Builds and enforces brand identity through structured agents covering positioning, voice, visual systems, and consistency audits, with behavioral science frameworks applied throughout.
2 · bundle
drnabeelkhan sus
Applies the System Usability Scale (SUS) framework to guide decision-making, structure analysis, and improve outcomes in design and user experience contexts.
2
nimoqup046-collab vizcom
Transforms rough sketches or text descriptions into photorealistic 3D product renders with customizable styles and materials.
2
sakamoto-family-smile frontend-slides
Build zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files, with viewport-safe layouts and visual style exploration.
0 · bundle
lord1egypt p5js
Creates production-grade p5.js sketches: generative art, interactive visualizations, 3D scenes, shaders, and audio-reactive visuals, with export to HTML, PNG, GIF, MP4, or SVG.
2 · bundle
lord1egypt excalidraw
Creates hand-drawn style Excalidraw diagrams as JSON files for architecture, flow, and sequence diagrams, with optional upload for shareable links.
2
lord1egypt ascii-video
Converts video, audio, or images into colored ASCII art videos (MP4/GIF) with generative effects, audio-reactive visuals, and text overlays.
2 · bundle
pwdev-solucoes figma
Translates between Figma designs and Vue 3 + shadcn-vue code, mapping Auto Layout to Tailwind, extracting design tokens, and pushing components back to Figma via MCP.
2
pwdev-solucoes ux-tokens
Defines and applies design tokens for Vue 3 + shadcn-vue projects, including CSS variables, Tailwind configuration, and usage patterns.
2
pwdev-solucoes brand-kit
Extrai tokens de cor, tipografia, grid, logo e componentes do Figma e grava na seção 3 do contexto, marcando itens inferidos quando não há acesso ao Figma.
2
pwdev-solucoes ui-theme-reference
Canonical design token registry covering colors, typography, spacing, sizing, border radius, shadows, z-index, breakpoints, motion, and focus tokens, with a CSS variable template for project setup.
2
pwdev-solucoes export-handoff
Exports approved Figma assets and assembles the delivery package with named files, captions, alt text, and publishing instructions.
2
pwdev-solucoes creative-concept
Transforma copy aprovada em conceito visual: ideia central, mecanismo visual, hierarquia, sistema de peças e especificação de ativos com prompts prontos.
2
scoheart rednote
将内容拆解为系列卡通风格信息图提示词，通过 Chrome DevTools MCP 自动化调用 Gemini web app 生成图片，并自动收集到本地临时目录。
2
joshuashepherd asset-edit
Refine existing images through conversational edits using Nano Banana 2, covering color grading, composition, element changes, style transfer, and cleanup with iterative refinement.
1
joshuashepherd icon-system
Establishes or validates a canonical Icon wrapper component, size token scale, stroke weight conventions, and illustration usage standards for a project, creating src/components/ui/icon.tsx and documenting the system.
1
joshuashepherd asset-mockup
Places generated images into realistic device and print mockups such as laptops, phones, books, posters, and billboards for marketing previews and presentations.
1
jorcan vizcom
Transforms rough sketches or text descriptions into photorealistic 3D renders using Vizcom's AI rendering modes and prompt weighting.
0 · bundle
jorcan pc-games
Guides engine selection and platform-specific principles for PC and console game development, covering Steam integration, controller support, and performance optimization.
0 · bundle
samyakjhaveri impeccable
Designs and iterates production-grade frontend interfaces, covering UX review, visual hierarchy, accessibility, performance, responsive behavior, theming, typography, layout, color, motion, and design systems. Handles websites, landing pages, dashboards, product UI, components, forms, and more.
0 · bundle
neuralblitz 3d-printing
Designs 3D models, selects printing technologies, optimizes prints, and troubleshoots issues for additive manufacturing.
1
auto-skiller banner-design
Designs banners across social, ad, web, and print formats, generating multiple art direction options with AI-generated visuals and HTML/CSS composition.
1 · bundle
mhassan0000 brand-guidelines
Applies Anthropic's official brand colors and typography to artifacts such as presentations, ensuring a consistent look and feel.
1 · bundle
mhassan0000 motion-ui
Implements accessible, performant UI motion for React and Next.js apps, covering tokens, patterns, and modal behavior.
1
diegosouzapw rams
Reviews code files for accessibility (WCAG 2.1) and visual design issues, providing prioritized findings and fixes.
54 · bundle
samuelpatro make-interfaces-feel-better
Applies design engineering principles to polish UI components, covering typography, surfaces, animations, and performance with concrete CSS values and review checklists.
2 · bundle
vikingokft stitch-manage-design-system
Manages design systems in Stitch by retrieving project assets, creating or updating design systems from DESIGN.md files, and applying them to screens.
0 · bundle
infinition sketch
Builds disposable HTML mockups in multiple design variants so users can compare and choose between them.
2
phoroth vizcom
Transforms rough sketches or text descriptions into high-fidelity 3D-like product renders using Vizcom's AI platform.
3
phoroth lookdev
Builds interactive in-browser studios for tuning visual parameters or editing and annotating text and media, enabling direct manipulation instead of static comparisons.
3
lucaspmarie-a11y imagen
Generates images from text prompts using Google Gemini's image generation model, saving them as PNG files for use in UI, documentation, and design projects.
5
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 canvas-design, p5js, ascii-video. 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.