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.
-
vm0-ai Bundle Loose ContourFlat editorial spot illustration in a locked house style — confident open-contour ink drawings in dark teal-green over flat offset color blobs (printing-misregistration look), with one continuous looping ribbon line weaving through the scene, on warm cream paper. Tight 5-color palette (cream + teal + mustard + soft blue + coral). Trigger when the user says /loose-contour, asks for a "loose-contour illustration", "offset-blob editorial illustration", "cream paper ribbon-line scene", or briefs with a scene metaphor + accent lead + complexity level.
-
vm0-ai Bundle Sticker SheetSticker Sheet — hand-painted gouache sticker-sheet illustration. ~20 small floating themed objects on pure white, punchy saturated palette (coral, mustard, sage, dusty pink, navy, cream, warm brown), flat brushy gouache fills with wobbly hand-drawn ink linework and tiny decorative marks (dots, hatches, squiggles) on every object. Each object slightly tilted, no drop shadows, cheerful cozy lifestyle journal mood. Trigger when user says /sticker-sheet, asks for a "sticker sheet illustration", "hand-painted gouache sticker pack", "themed object sheet", or briefs with a scene theme + object count in this house style.
-
vm0-ai Bundle Tiny WandererContemplative bande-dessinée landscape illustration in a locked house style — a tiny human (or 2–3 figures) dwarfed by a vast natural panorama, hand-drawn black ink contour + parallel hatching for clouds/rock/grass texture, flat color fills sitting beneath the ink, restrained 3–5 color palette, vertical portrait canvas. Mood is quiet wonder, Moebius / Christophe Chabouté travel-sketchbook lineage. Trigger when the user says /tiny-wanderer, asks for a "tiny wanderer illustration", a "bande-dessinée landscape", a "Moebius-style travel illustration", an "ink-hatched vertical landscape", or briefs with a palette + landscape archetype + complexity in this house style.
-
vm0-ai Bundle Folk StorybookFolk-art children's picture-book illustration style — hand-painted gouache/watercolor scene on aged paper, anthropomorphic animal characters with closed-crescent-eye smiles, dusty muted folk palette, decorative pattern surfaces (wallpaper, rugs, textiles), and a hushed lullaby mood. Trigger when users ask for a folk-art illustration, storybook scene, cozy animal illustration, or any new piece in this Eastern European picture-book style.
-
vm0-ai Bundle Grainy DuotoneHand-drawn editorial spot illustration — grainy charcoal-stippled black-ink figures on a warm cream background, paired with free-floating two-tone color blocks (no outlines) filled with internal patterns and surrounded by small scattered ambient marks. Trigger when the user says /grainy-duotone, asks for a "grainy two-tone editorial illustration", "charcoal-stippled hand illustration", "duotone editorial spot", or briefs with a scene metaphor + two-color palette + complexity.
-
vm0-ai Bundle Ink StorefrontSingle-color hand-drawn ink line illustration of a small storefront on warm cream paper — locked house style with confident fineliner contours, a hand-lettered shop sign, foliage, and small street props (bike, A-frame, planters, lanterns, cat). Boutique poster aesthetic. Trigger when the user says /ink-storefront, asks for a "shopfront illustration", "storefront poster", "boutique fineliner illustration", "café line drawing", or briefs with a shop name + ink color + archetype in this house style.
-
vm0-ai Bundle Sunlit GouacheSunlit Gouache — bright pastel travel-painting illustration in opaque gouache on textured paper. Chunky flat brushstrokes, dappled cream-and-butter-yellow sunlight, sky-blue + sage-green + terracotta accents, figures seen from behind walking into a one-point-perspective focal light, with overhead hanging elements (awning, flags, wires, lanterns) creating depth. Trigger when user says /sunlit-gouache, asks for a "sunlit gouache illustration", "painterly travel scene", "gouache café/market/temple/station scene", or a new piece in this bright pastel painted-light style.
-
vm0-ai Bundle Iberian VignetteHand-drawn editorial vignette illustration in a locked Iberian-Mediterranean style — loose wobble ink linework, flat muted color fills with a cream ground and burgundy/wine as the anchor color, exactly one secondary accent (sage / mustard / dusty blue / terracotta), minimal abstract faces (tiny dot eyes, soft nose hint, almost no mouth), casually-observed body language, and a short Spanish serif lowercase wordmark anchored at the bottom of the canvas. Always grounded by an architectural / scenic prop (doorway, archway, balcony, courtyard, counter). Trigger when the user says /iberian-vignette, asks for an "Iberian vignette illustration", a "Spanish editorial illustration", a "Mediterranean observed-moment scene", or briefs with a scene metaphor + cast + complexity in this hand-drawn editorial style.
-
vm0-ai Skill Vm0 IllustrationGenerate vm0-style vm0 in-app spot illustrations: bold hand-drawn ink line art with white-filled interiors, a soft rounded color backdrop, transparent output, and simple iconic metaphors for product states.
-
vm0-ai Bundle Mosaic Still LifeMosaic-tile + painterly hybrid editorial illustration. Tessellated/pointillist mosaic surfaces (grass, sky, sand, walls, floors) anchor the scene, with crisp painterly still-life objects rendered ON TOP. Always features a still-life centerpiece on a table, an animal companion at the heart of the scene, and at least one patterned textile peeking through. Cozy, nostalgic, bucolic mood. Trigger when user says /mosaic-still-life, asks for a "mosaic illustration", "mosaic-tile editorial illustration", "tessellated still life", or briefs with a palette + scene + animal in this style.
-
vm0-ai Bundle Editorial FlatfolkEditorial hand-drawn naive book-illustration style — flat saturated color blocks, loose hand-drawn ink line overlay on top of the color, subtle paper grain, simple ink sun-ray hatching, and a strong sense of place built from tall narrow architecture and one-point perspective. Five creative dials (palette, scene metaphor, perspective, cast, light/weather) over a locked style core. Trigger when the user says /editorial-flatfolk, asks for an "editorial flat-folk illustration", a "saturated naive book-illustration scene", a "tall narrow row-house illustration", or briefs a palette + scene metaphor + season.
-
vm0-ai Bundle Light Pop PortraitLight flat-vector single-character portrait — a hand-drawn child/tween on a fully saturated flat color background, with chunky black hair, big round eyes, a tiny red nose, and pink five-point-star sparkle blush. Trigger when the user says /light-pop-portrait, asks for a "light pop portrait", "flat-vector character portrait", "saturated color-block character", or briefs with expression + hairstyle + palette + prop.
-
vm0-ai Bundle Notion IllustrationNotion-editorial-style hand-drawn spot illustration. Black brush-pen ink on white, tapered confident strokes, solid-black curly hair, solid-black pants/shoes, 3/4 face turned toward viewer with closed-eye smile and soft nose hint, open breathing body outlines, and 1-3 supporting scene props + ambient marks that frame the moment. Trigger when user says /notion-illustration, asks for a "Notion-style illustration", "Notion spot illustration", or a new piece in this hand-drawn brush-pen Notion editorial style.
-
vm0-ai Bundle Painterly BotanicalPainterly watercolor + gouache portrait illustration with a single figure embraced by lush botanicals. Closed-eye introspective subject, loose translucent washes with visible bleeds, sparse crisp ink line accents, and a softly tinted paper-wash background (never pure white). Use when a brief describes a contemplative figure with foliage, a "watercolor portrait", a "botanical embrace" composition, or asks for a piece in this painterly editorial style.
-
vm0-ai Bundle Postcard IllustrationHand-drawn editorial postcard illustration style. Fine black marker/pen ink linework over flat saturated gouache color fills with sharp edges, dense small repeated ink patterns on surfaces (rows of windows, shingle curves, hatching, stippling), subtle paper-grain background texture, tiny scattered white speckles (snow / petals / sparkle), and a tall portrait composition with a layered foreground-midground-background. Travel-journal / urban-sketcher aesthetic. Trigger when the user says /postcard-illustration, asks for a "postcard illustration", "travel illustration", "urban sketcher style", or briefs a palette + scene archetype + complexity.
-
jimmypaolini Bundle ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-
social-media-skills Bundle IdeogramUse to write great prompts for Ideogram (Ideogram 4.0) to generate design-grade images for social media — the image-prompt-craft mini-skill for typography + layout, sibling to nano-banana under the image-prompt router. Run when the user wants an Ideogram / AI image prompt where TEXT and LAYOUT matter: quote cards, carousel covers, posters, logos/wordmark concepts, signage, ads with headlines, or any image that must say words correctly. Reads brand-profile for style/palette. Ideogram's standouts: best-in-class in-image text rendering, structured JSON prompting (bounding boxes, hex palettes), native 2K, transparency, and Layerize Text. Also covers the Ideogram app-editor workflow (Canvas, Magic Fill, Extend, Style References). Honest: review rendered text, disclose AI images and sign with C2PA, never generate real identifiable people or copyrighted characters/IP/logos. The API/connection and the generate -> upload to WoopSocial Media -> attach flow live in tools/integrations/ideogram.md.
-
social-media-skills Bundle Nano BananaUse to write great prompts for Nano Banana (Google's Gemini image model: Nano Banana Pro = Gemini 3 Pro Image) to generate or edit images for social media — the image-prompt-craft mini-skill. Run when the user wants a nano-banana / Gemini image prompt, an AI image for a post (quote graphic, carousel slide, thumbnail, infographic, product shot, ad creative), or conversational image editing. Reads brand-profile for brand colours/style. Strengths: best-in-class legible in-image text (route typography/layout-led design to ideogram), multi-image consistency, conversational editing, and Google's photoreal lane (Imagen deprecated); surreal art stays Midjourney's. Teaches prompt anatomy, the text-first approach, reference-image consistency, and per-platform aspect ratios. Honest: SynthID watermark + AI disclosure; never real identifiable people or copyrighted characters/logos; verify spelling/data. The API/connection and WoopSocial upload flow live in tools/integrations/nano-banana.md.
-
social-media-skills Bundle Thumbnail DesignDesign YouTube video thumbnails that earn the click — mobile-legible, one focal point, honest. Use when someone wants to design a YouTube thumbnail, improve CTR, brief a thumbnail, choose thumbnail text, or plan thumbnail A/B testing. Designs and briefs high-CTR thumbnails and writes the A/B test plan: a thumbnail is a promise, not a poster, designed as a unit with the title and legible on mobile. Uses the CLICK framework. Reads brand-profile + the video/title first. A HUMAN or an image/design tool (nano-banana/ideogram/Canva/designer) creates the final raster; the YouTube custom thumbnail is uploaded NATIVELY in Studio (WoopSocial has no thumbnail field) and Test & Compare is native; TikTok/IG-Reel covers use WoopSocial's cover field via those format skills. No clickbait, no unconsented real-person/deepfake faces, CTR never fabricated. Distinct from youtube-publishing-and-metadata (the metadata) and nano-banana/ideogram (which generate the raster this briefs).
-
social-media-skills Bundle Design And TemplatesThe reusable on-brand template-SYSTEM skill -- build a brand kit + a small set of reusable templates so a non-designer can produce consistent on-brand graphics fast across formats. Use when someone wants templates, a brand kit, a consistent visual system, or help choosing/using a design tool (Canva/Adobe Express/Figma). For social, consistency + speed beat bespoke. Uses the BRAND framework. Reads brand-profile first. The agent designs the SYSTEM (brand-kit tokens, template set, hierarchy rules, workflow); a design tool or the image tools produce the actual graphics; the finished asset enters the WoopSocial flow (WoopSocial publishes -- it does NOT design or generate). Honest about the ~70-80% on-brand ceiling and AI copyright limits. Distinct from brand-profile (the identity source), thumbnail-design + pinterest-pin-design (single asset types), carousel-writer (copy vs visual frame), and image-prompt + the image tools (generation vs layout).
-
social-media-skills Bundle Quote Cards And Text GraphicsThe craft of turning a single quote, line, or stat into a designed typographic graphic — quote cards, pull-quotes, text-on-image, stat cards, typography posts. Use when someone wants a quote card, a text graphic, a pull-quote, a stat card, or to turn a strong line into a shareable image. The design amplifies a strong line; it can't create one. Uses the QUOTE framework. Reads brand-profile + design-and-templates + voice-builder first, and pulls the line from hook-writer, storytelling, or data-and-original-research (a stat). The agent picks the line and specs the card; a design tool renders; the human approves; WoopSocial publishes the image (it does not generate media). NEVER fabricates a quote, attributes an invented line to a real person, or strips context; verifies wording + source; consent + likeness. Distinct from infographic-and-data-viz, design-and-templates, caption-writer, and social-proof-and-testimonials.
-
guanyang-open-agent-hub Bundle UI UX Pro MaxUI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
-
charleswiltgen Bundle Axiom DesignUse when making design decisions, implementing HIG patterns, Liquid Glass, SF Symbols, typography, or structuring app entry points and authentication flows.
-
oakoss Bundle UX DesignerDesigns user experiences and interfaces grounded in research. Use when creating user journeys, wireframes, prototypes, or improving usability. Use for information architecture, interaction design, accessibility audits, design system creation, and developer handoff.
-
oakoss Bundle UI UX PolishIterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
-
oakoss Bundle Asset ManagerOrganize design assets, optimize images and fonts, maintain brand asset libraries, implement version control for assets, and enforce naming conventions. Use when optimizing images for web, converting fonts to WOFF2, organizing asset directories, setting up responsive image pipelines, or managing logo variants.
-
oakoss Bundle Brand DesignerCreates cohesive brand identities including logos, color palettes, typography systems, and brand guidelines documents. Generates SVG logo components with variants, configures Tailwind color tokens, builds type scales, and produces social media and business card templates. Use when designing a logo, building a color palette, setting up typography systems, creating brand guidelines, generating social media templates, or organizing brand asset files. Use for branding, visual identity, logo design, brand guidelines, color systems.
-
oakoss Bundle Figma DeveloperExtracts design data from Figma via the REST API and converts designs to React code. Use when syncing Figma tokens to CSS variables, exporting icons as SVG components, generating code from Figma designs, or automating design-to-code workflows. Use for design token extraction, icon export, component generation, and CI-based Figma sync.
-
duck4nh Skill CSS Styling ExpertCSS architecture and styling expert with deep knowledge of modern CSS features, responsive design, CSS-in-JS optimization, performance, accessibility, and design systems. Use PROACTIVELY for CSS layout issues, styling architecture, responsive design problems, CSS-in-JS performance, theme implementation, cross-browser compatibility, and design system development. If a specialized expert is better fit, I will recommend switching and stop.
-
duck4nh Skill UI UX Pro MaxUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
-
duck4nh Skill Vibecode Blog DocsBlog and Documentation template using the Partnership model. AI proposes typography and content structure based on readability best practices, then you provide content and audience context. Perfect for tech blogs, documentation sites, knowledge bases.
-
starchild-ai-agent Bundle CLI BridgeManage short-code bundles that authorize the local starchild CLI to talk to this agent, including the agent-shell local-exec channel and the local MCP proxy (stdio MCP servers on the user's machine). Use when connecting or disconnecting the starchild CLI (e.g. mint a CLI bridge code, list my CLI bundles, revoke an old CLI session, let the agent run shell commands on the user's own machine, or drive a local app via a stdio MCP server — Blender, Figma, Godot, computer-use, etc.).
-
starchild-ai-agent Bundle Project DesignProfessional UI design system — the visual quality gate for all HTML output. MUST USE together with project-builder when building any HTML page, dashboard, landing page, portfolio, or web application. project-builder handles engineering workflow; this skill handles visual design decisions (color palette, typography, layout, animation). Ensures every generated UI looks professional, modern, and unique — never generic AI slop.
-
patricio0312rev Skill Responsive Design SystemImplements responsive design systems with mobile-first breakpoints, container queries, fluid typography, and adaptive layouts using Tailwind CSS. Use when users request "responsive design", "mobile-first", "breakpoints", "fluid typography", or "adaptive layout".
-
malue-ai Skill Elegant ReportsGenerate beautifully designed PDF reports with Nordic-style typography, charts, tables, and multi-page layouts using reportlab or fpdf2.
-
cinience Bundle Aliyun Wan ImageUse when generating or editing images with DashScope Wan 2.7 image models (wan2.7-image, wan2.7-image-pro). Use when implementing text-to-image, image editing, interactive editing with bounding boxes, sequential group image generation, or color palette control via the multimodal-generation API.
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 asset-manager, impeccable, ui-ux-pro-max. 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.