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
voltagent clickhouse-design-analysis
Defines a high-contrast brand identity system for ClickHouse using near-pure black canvas, electric yellow accents, and Inter typography across dark surface cards.
50.9k · bundle
voltagent superhumon-inspired-design-analysis
Analyzes and documents Superhuman's design language, including color palette, typography, layout, and elevation system for implementation.
50.9k · bundle
voltagent nintendo-com-2001-analysis
Analyzes the design language of Nintendo.com from 2001, documenting its brushed-periwinkle chrome interface, beveled metal plates, chamfered panel geometry, carbon-navy command layer, rationed warm accents, photographic hero fields, and box-art typography.
50.9k · bundle
zhaoxuya520 diagram-generator
Generates editable diagram source code (Mermaid, Graphviz DOT, PlantUML, SVG) from natural language, code, schemas, or notes for flowcharts, sequence diagrams, ER diagrams, architecture diagrams, and more. Renders to PNG/SVG/PDF on request via a local Python script.
12.8k · bundle
momozi1996 johnwoo-perspective
提供吴宇森导演风格的创意建议，涵盖视觉方案、叙事手法和场景设计，适用于剧本创作与影像设计。
38 · bundle
momozi1996 wongkarwai-perspective
提供王家卫导演风格的创意建议，涵盖视觉方案、叙事手法和场景设计，适用于剧本创作与影像设计。
38 · bundle
momozi1996 jamescameron-perspective
提供詹姆斯·卡梅隆导演风格的创意建议，涵盖视觉方案、叙事手法和场景设计，帮助用户以技术先驱和极致震撼的美学进行创作。
38 · bundle
momozi1996 franciscoppola-perspective
提供弗朗西斯·福特·科波拉导演风格的创意建议，涵盖视觉方案、叙事手法和场景设计，适用于剧本创作与影像设计。
38 · bundle
momozi1996 christophernolan-perspective
Provides creative advice in the style of director Christopher Nolan, covering visual design, narrative structure, and scene crafting for filmmaking projects.
38 · bundle
yu-0312 ppt-creater-skill
Turns messy documents, meeting transcripts, reports, or raw data into a polished, design-conscious HTML presentation through a structured workflow that filters content, defines style specs, and generates slides, with optional theme research and cross-session resume support.
26 · bundle
tengj article-poster-generator
将长文章自动拆分为多张信息图海报（2400x3600竖版），支持多种风格模板和6种页面布局。
23 · bundle
ecnu-icalk brand-guidelines
Applies Anthropic's official brand colors and typography to artifacts, using Poppins and Lora fonts with fallbacks.
559 · bundle
agentskillexchange snowe-ui-skill
Guides coding agents through architecture-first UI/UX design, from product truth and user journeys to rendered browser critique, covering art direction, interaction, responsive behavior, and motion.
28
tinh2 design-sync
Imports a design system into the active project, validates UI components against design tokens, fixes token drift, and round-trips edits back to Claude Design.
13
tinh2 design-color
Adds strategic color to monochromatic or dull interfaces using oklch for perceptually uniform palettes, generating harmonious color systems with automatic light/dark variants and accessible contrast ratios.
13
comeonoliver bolder
Increases visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences.
61
comeonoliver delight
Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences.
61
lingxling algorithmic-art
Creates generative art with p5.js, starting from an algorithmic philosophy and expressing it through seeded randomness, noise fields, and particle systems.
253 · bundle
kvn8888 openfoodjournal-ui
Defines the design tokens, component catalog, and layout patterns for the OpenFoodJournal SwiftUI app, ensuring new views stay visually consistent.
3
drnabeelkhan ui-designer
Designs accessible, consistent user interfaces using atomic design methodology, design systems, and WCAG 2.1 AA standards, producing annotated specs for developer handoff.
2
nimoqup046-collab favicon
Generates a complete set of favicons from a source image and updates project HTML with the appropriate link tags.
2
pwdev-solucoes asset-upscale
Aumenta a resolução e nitidez de imagens via API Freepik/Magnific quando uma chave está configurada, ou orienta o processo manual e alternativas locais quando não há chave, sempre exigindo confirmação antes de gastar crédito.
2
pwdev-solucoes figma-pipeline
Composes final brand assets in Figma from generated images, applying text, brand tokens, layout, and grid. Optional layer: use when Figma is connected and an editable file is needed. Without Figma, delivers a composition specification.
2
pwdev-solucoes visual-consistency
Mantém a coerência visual entre peças geradas por IA usando modelo fixo, prompt base, seed e referência de estilo, com teste de coerência e biblioteca de prompts.
2
scoheart canvas-design
Creates original visual art in .png and .pdf documents by first generating a design philosophy and then expressing it visually on a canvas.
2 · bundle
scoheart algorithmic-art
Creates algorithmic art in two phases: first writing a generative-art philosophy as a markdown manifesto, then expressing it as interactive p5.js sketches with seeded randomness, flow fields, and particle systems.
2 · bundle
joshuashepherd art
Generates illustrations, diagrams, flowcharts, infographics, thumbnails, comics, and icons using multiple rendering backends, with workflows for various visual content types.
1 · bundle
joshuashepherd icon-audit
Audits icon usage in a codebase, enforcing lucide-react as the single icon library, correct sizes, semantic colors, and accessibility standards, then applies fixes.
1
joshuashepherd color-audit
Audits a color palette for semantic token completeness, WCAG contrast compliance, 60-30-10 distribution, and tonal stacking correctness, with a focus on a light-primary site.
1
joshuashepherd animation
Add scroll animations, micro-interactions, or page transitions to a component using GSAP, with reduced-motion support and performance best practices.
1
joshuashepherd asset-series
Generate a visually consistent set of image assets using Nano Banana 2 for course covers, book headers, video thumbnails, and more.
1
joshuashepherd stitch-build
Builds Google Stitch UI projects and generates screens from feature descriptions or export files by calling Stitch MCP tools directly, following Stitch prompting best practices.
1
jorcan draw
Creates, edits, and converts vector graphics and diagrams using LibreOffice Draw, supporting ODG, SVG, PDF, and PNG formats.
0 · bundle
jorcan guides
Optimizes Spline 3D scenes for web performance and mobile devices, covering file size checks, loading strategies, and Core Web Vitals.
0 · bundle
jorcan shadcn
Customize shadcn/ui themes by editing CSS variables, adding custom colors, and adjusting border radius.
0 · bundle
jorcan remotion
Creates walkthrough videos from Stitch app designs using Remotion, with smooth transitions, zoom effects, and text overlays.
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 Superhumon-Inspired-design-analysis, diagram-generator, ClickHouse-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.