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.
-
mengto Bundle Orange Clean Paper SaasCreate a clean paper-toned SaaS design system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces.
-
mengto Bundle Blue Cloudy Clean ModernCreate a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.
-
mengto Bundle Scroll World StorytellingTurn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography. Use when the user asks for a scroll world, fly-through landing page, article-to-website transformation, animated planet, data scrollytelling, video-scrubbed page, connected visual journey, or story-led alternative to ordinary stacked sections.
-
mengto Bundle Agency Grid Layout MinimalCreate a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.
-
mengto Bundle Light Mode Paper TechnicalCreate a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.
-
mengto Bundle Dark Blue Contrasting CleanCreate a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow.
-
mengto Bundle Funky Purple Container TechCreate a dark container-led technical design system with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects.
-
mengto Bundle Tech Green Dark Mode ModernCreate a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow.
-
mengto Bundle Documentary Brutalist AgencyCreate or redesign creative agency, production studio, architecture, culture, and portfolio websites with billboard typography, hard black-and-white chapters, exposed grids, documentary imagery, irregular collages, restrained parallax, brutalist navigation, and accessible FAQ controls.
-
mengto Bundle Cinematic Scroll StorytellingCreate cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.
-
mengto Bundle Mesh Gradient Dark Blue CleanCreate a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black navy foundation, procedural blue mesh atmosphere, disciplined minimal structure, and infrastructural or planetary depth.
-
mengto Bundle Nested Container Clean AgencyCreate a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.
-
mengto Bundle Bright Green Tech System WebglCreate a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.
-
mengto Bundle Clean Minimal Beige Light ModeCreate a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.
-
mengto Bundle Technical Wireframe Info LayoutCreate a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.
-
mengto Bundle Framed Tech Dark Border GradientCreate a framed dark technical design system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere.
-
mengto Bundle High Contrast Skeuomorphic CleanCreate a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.
-
markdown-viewer Bundle InfocardCreate editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.
-
yuan1z0825 Bundle Nature FigureCreate, revise, audit, and export submission-grade scientific figures for Nature-family and other high-impact venues in Python (matplotlib/seaborn) or R (ggplot2/patchwork/ComplexHeatmap), including multi-panel plots, figures4papers-style work, and journal-ready SVG/PDF/TIFF outputs. Use for paper or scientific plots, manuscript data visualization, 论文配图、学术写作配图、科研绘图、科研作图、画图、作图、出图、论文图表、可视化. Define the conclusion, evidence logic, data integrity, template compatibility, export needs, and reviewer risks before plotting; honor or persist the Python/R backend choice. Also use the separate OpenRouter GPT Image 2 route for explicit AI-generated graphical abstracts, mechanism diagrams, concept schematics, 论文示意图、机制示意图、图形摘要; this route skips backend choice and treats outputs as drafts. Do not use for interactive dashboards, statistics-only analysis, data cleaning, literature review, code debugging, pure photo editing, or Illustrator/Figma-first infographics without manuscript-figure intent.
-
davidondrej Skill Image PromptTurn any idea, brief, or rough instruction into 4 ready-to-paste prompts for AI image models (Midjourney, Nano Banana, GPT Images, Seedream, Flux, any other). Use when the user asks for an image prompt, a thumbnail / banner / logo / illustration prompt, says "write a prompt for this image", or wants to turn a description into something an image model can render. Differentiator: writes the prompt text only — to actually generate the image use the deepapi skill.
Audited -
jakubkrehel Bundle Better InterfaceCombines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.
-
jakubkrehel Bundle Interface ReviewReviews your work across multiple categories like UI, typography, layout, color, writing and accessibility and gives you a detailed analysis of the findings.
-
jakubkrehel Bundle Better TypographyFocuses on type scale, spacing, sizing, variable fonts, OpenType features, wrapping, truncation and other details that make typography feel great across your product.
-
dvcrn Bundle 0xworkFind and complete paid tasks on the 0xWork decentralized marketplace (Base chain, USDC escrow). Use when: the agent wants to earn money/USDC by doing work, discover available tasks, claim a bounty, submit deliverables, post tasks with bounties, check earnings or wallet balance, or set up as a 0xWork worker/poster. Task categories: Writing, Research, Social, Creative, Code, Data. NOT for: managing the 0xWork platform or frontend development.
32 -
dvcrn Bundle TrmnlGenerate content for TRMNL e-ink display devices using the TRMNL CSS framework and send via the trmnl CLI. Use when the user wants to display information on their TRMNL device, send messages to an e-ink display, create dashboard content, show notifications, or update their terminal display. Supports rich layouts with the TRMNL framework (flexbox, grid, tables, progress bars, typography utilities).
32 -
dvcrn Bundle LogoGenerate logos with AI image tools using effective prompt structures, validation loops, and export workflows for App Store icons and brand marks.
32 -
dvcrn Skill FigmaFigma 集成。浏览团队项目与文件,读取设计结构、页面、节点,导出图片,管理评论,查看版本历史,检查组件/组件集/样式,获取设计变量(Token)。通过 MorphixAI 代理安全访问 Figma API。
32 -
dvcrn Bundle VibeskuCLI for VibeSKU — an AI-powered creative automation platform that turns product SKU photos into professional e-commerce visuals and marketplace-ready copy at scale. Use when the user wants to: (1) generate hero banners, exploded-view infographics, detail page poster sets, or listing copy from product photos via the command line, (2) authenticate with VibeSKU (browser login or API key), (3) browse or inspect generation templates (ecom-hero, kv-image-set, exploded-view, listing), (4) refine AI-generated outputs with edit instructions, (5) export/download image and text results, (6) run batch generation across a product catalog, (7) manage credits (check balance, purchase, redeem), (8) configure CLI settings. Triggers on mentions of "vibesku", "product visuals", "SKU photos", "ecommerce images", "hero banner", "listing copy", "product image generation", "batch generation", "VisionKV", "exploded view", "product infographic", "component breakdown", "technical diagram", or any VibeSKU CLI workflow.
32 -
dvcrn Skill FontsChoose and implement web typography avoiding common rendering, pairing, and hierarchy mistakes.
32 -
dvcrn Bundle IblipperGenerate kinetic typography animations for expressive agent-to-human communication. Use when you want to communicate with visual flair - animated text for announcements, alerts, greetings, dramatic reveals, or any message that deserves more than plain text. Outputs shareable URLs or can display in canvas.
32 -
dvcrn Bundle UI DesignComprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
32 -
dvcrn Skill Wan Image GenGenerate images using Alibaba DashScope wan2.6-t2i model, download to Desktop, and upload to catbox.moe image hosting. Use when the user asks to generate, create, or draw an image, picture, or illustration using wan or DashScope.
32 -
dvcrn Bundle Svg DrawCreate SVG images and convert them to PNG without external graphics libraries. Use when you need to generate custom illustrations, avatars, or artwork (e.g., "draw a dragon", "create an avatar", "make a logo") or convert SVG files to PNG format. This skill works by writing SVG text directly (no PIL/ImageMagick required) and uses system rsvg-convert for PNG conversion.
32 -
dvcrn Bundle Web DesignCSS implementation patterns for layout, typography, color, spacing, and responsive design. Complements ui-design (fundamentals) with code-focused examples.
32 -
dvcrn Bundle Opengfx LogoGenerate complete logo systems with icon + wordmark + lockups. Creates production-ready SVG vector logos from natural language prompts. Use when a user requests a logo, brand mark, icon design, or visual identity foundation.
32 -
dvcrn Bundle Happy HuesGet curated color palettes from Happy Hues for design projects. Use when the user asks for color schemes, palette recommendations, design colors, UI colors, or mentions "配色", "color palette", "happy hues", "颜色方案". Supports filtering by mood (warm, dark, bold, minimal, etc.) and provides role-based colors (background, headline, button, highlight, etc.).
32
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 nature-figure, infocard, image-prompt. 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.