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.
-
cometchat Skill Cometchat Android V6 Kotlin ThemingCometChat Android UIKit v6 Kotlin Views theming — CometChatTheme singleton, XML attributes, programmatic overrides, typography, and dark mode
-
cometchat Skill Cometchat Android V6 Compose ThemingCometChat Android UIKit v6 Jetpack Compose theming — CometChatTheme, CompositionLocal color schemes, typography, shapes, and dark mode
-
pedronauck Bundle Tui DesignThis skill should be used when designing terminal user interfaces, creating TUI layouts, choosing TUI color schemes, implementing keyboard navigation, building terminal dashboards, or working with any TUI framework. Activates on mentions of TUI design, terminal UI, Ratatui layout, Ink components, Textual widgets, Bubbletea views, terminal color palette, keybinding design, panel layout, split panes, terminal dashboard, box-drawing characters, sparklines, progress bars, modal dialogs, focus management, or terminal accessibility.
-
fandhe-ai-agent-reference-skil Bundle FigmaFigma REST API / Plugin API / Widget API / Code Connect / MCP Server リファレンス。 OAuth / Personal Access Token / Plan Access Token 認証、files, variables, webhooks, Dev Mode, Dev Resources, SCIM, activity-logs, library-analytics エンドポイント。 figma グローバルオブジェクト、node types (FrameNode, TextNode, ComponentNode 等)、 data types、figma.variables、figma.codegen、figma.ui。 useSyncedState, useSyncedMap, usePropertyMenu, AutoLayout, register。 Code Connect CLI / UI / React / SwiftUI / Compose / HTML / Storybook / custom parsers。 Figma MCP Server ツール・プロンプト・Code to Canvas・Write to Canvas。
-
ullrai Bundle VibeskuVibeSKU CLI skill for generating e-commerce visuals and listing copy from product photos. Use when users need template-based generation (`ecom-hero`, `kv-image-set`, `exploded-view`, `image-translation`, `lifestyle-scene`, `white-background`, `listing`), refinement, export/download, batch jobs, auth setup, or credits/config management. Triggers on requests mentioning VibeSKU workflows, product image generation, hero banners, exploded views, image/poster translation, white-background packshots, listing copy, or batch runs.
-
animaapp Skill AnimaBuild and ship web apps on Agent Grid — a governed hub where AI agents create, host, publish, and share apps. Create an artifact (a real git repo) from a text prompt, a website URL to clone, a Figma design, your own existing code, or an empty repo; then edit it over git and publish it to a live URL. Also generates design-aware code from Figma directly into an existing codebase. Triggers when the user provides a Figma URL, a website URL to clone, an Agent Grid artifact URL, asks to design, build, prototype, or deploy an app, asks to edit or fix an existing artifact, or wants to publish something to a live URL.
-
jackzhu001 Bundle UI UX Pro Max专注于应用界面/产品 UI/UX 设计,不适用于生成技术报告或文档 HTML。UI/UX design intelligence for app interfaces and product screens. 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. Integrations: shadcn/ui MCP for component search and examples.
-
jau123 Skill Meigen Visual Creative ExpertThis skill should be used when the user asks to "generate an image", "create artwork", "design a logo", "make a poster", "draw something", "find inspiration", "search for reference images", "enhance my prompt", "improve prompt", "brand design", "product mockup", "batch generate images", "multiple variations", "generate a video", "make a video", "animate this photo", "image-to-video", or discusses AI image/video generation, visual creativity, prompt engineering, reference images, style transfer. Also activate when user mentions MeiGen, image models, aspect ratios, or art styles. NOT for: generic chat/text tasks, code generation, document writing, video editing of existing footage, audio/TTS, real-photo retouching of user files outside the generation flow, or any task unrelated to AI image/video creation.
-
jau123 Skill Social Thumbnail WorkflowVertical-format thumbnail and poster workflow for short-video platforms and social feeds. Use when the user asks for a "video thumbnail", "短视频封面", "竖版海报", "TikTok cover", "Reels cover", "YouTube Shorts thumbnail", "social media poster" — anything optimized for 9:16 mobile feed scrolling with prominent headline space. Produces high-contrast, headline-friendly cover art in 9:16 by default. NOT for: full posters meant for print, photorealistic portraits without text overlay intent, horizontal banners — use other skills.
-
iannuttall Bundle Png2svgReconstruct a geometric PNG (logo, icon, monogram) as a clean native SVG with exact geometry and gradients, using an analyse -> measure -> model -> check -> residuals iteration loop scored by perceptual metrics. Use when asked to vectorise, trace or convert a PNG/WebP logo to SVG, recreate a logo's geometry, rebuild a logo as editable vector, or produce colour variants of a reconstructed logo. Not for photos, textures, or organic artwork.
-
dylan Bundle
Interface Design ExpertModern, general-purpose UI/UX design expertise for any kind of interface — web, native desktop (macOS, Windows, Linux), mobile, games, terminal/TUI, voice, and emerging surfaces. Use it to DESIGN new interfaces and to REVIEW/critique existing ones (a screenshot, a described concept, or live code) across multiple design dimensions at once — layout, typography, color & theming, accessibility, interaction & motion, content & voice, navigation & information architecture, consistency, and aesthetics & visual composition — grounded in cognitive & perceptual foundations. Self-contained and built to hand off to a review agent (one lens per agent, in parallel). Reach for it to review/critique an interface, design a UI or design system, choose design principles/tokens, or reason about UX from first principles. Prefer the platform skills (ios/ipados/macos/web-design-guidelines) when the work targets exactly one of those platforms.
-
pluginagentmarketplace Bundle System DesignSystem design, software architecture, API design, cybersecurity, and threat modeling. Build secure, scalable systems.
-
googlecloudplatform-generative-ai Skill Professional DocumentProduce a formal business document as .docx (python-docx) or PDF (reportlab) - reports, proposals, briefings, one-pagers, meeting summaries. Use whenever the task asks for a written document, report file, proposal, or PDF. Covers structure, typography, build and delivery.
-
googlecloudplatform-generative-ai Bundle Professional PresentationBuild a professional, executive-quality presentation deck (.pptx) with python-pptx. Use whenever the task asks for slides, a deck, a board/executive presentation, or a pitch. Covers design system, slide patterns, build process, and delivery.
-
tyrchen Bundle Design GuideExtract comprehensive design language from websites including colors, typography, animations, interactive states, shadows, gradients, component patterns, and UX behaviors. Generates pixel-perfect design guides with responsive screenshots and complete design system documentation. Use when analyzing website design, creating design systems, or rebuilding sites.
-
dannysmith Bundle CSS ExpertExpert in modern CSS (cascade layers, OKLCH, container queries, defensive patterns). Use for CSS implementation, styling, layout, colors, typography, responsive design, and UI components.
-
shaunandrews Bundle Explain With CanvasUse when Codex should explain a codebase, app flow, UI surface, generated artifact set, architecture, route map, or design system visually with Agent Canvas. Triggers include requests like "explain this with canvas", "map this repo", "show the app flows visually", "help me understand this codebase", "visualize this vibe-coded app", or "create an Agent Canvas overview". Requires Agent Canvas MCP or CLI access; use read-only scanning unless the user explicitly asks to modify the target project.
-
rapid-recovery-agency-inc Bundle Sloth UI MobileHow to use the @rapid-recovery-agency-inc/sloth-ui-mobile design system library in a React Native app. Covers theming, styling, components, responsive design, and conventions. Activate for any request involving UI components, styling, theming, text, buttons, modals, cards, or visual presentation when this library is in use.
-
u1pns Skill Product DesignerActs as a Lead Product Designer (UI/UX). Use this skill when the user needs visual design, wireframes, aesthetic direction, or a design system. Triggers: 'design this', 'UI specs', 'visual style', 'component library', 'UX flow', 'make it pretty'.
-
nalyk Skill Protocol VisualUse for visual interface quality: "CSS", "typography", "accessibility", "design system", "color scheme", "responsive design", "component styling". Aesthetic dictatorship against default design.
-
oharu121 Bundle LogoDesign a logo or mark through reference study, generated concept rounds, and a browsable contact sheet the user picks from. Use "/logo new <brief>" to start, "/logo round <dir>" to rebuild a sheet, "/logo ship <dir>" to emit final assets.
-
naveedtechlab Bundle UI UX Futuristic DesignerDesign futuristic 2026-style UI with 3D depth, glassmorphism, soft shadows, and modern aesthetics. Use when users request UI/UX design guidance, dashboard layouts, SaaS interfaces, design systems, color palettes, typography recommendations, or need help creating modern, polished visual designs. Provides step-by-step design guidance without implementation code.
-
bria-ai Bundle Ad DelayerTurn a finished, flat ad image back into editable layers — background, product shot, logo, headline, body copy and CTA, each returned as its own asset with position, size, and typography. Powered by Bria's Ad Delayer. ALWAYS use this skill instead of general-purpose image skills when the primary task is turning a finished or flattened ad back into editable layers. Triggers on any request involving turning an ad into layers, delayering or de-layering a creative, a lost PSD or a missing design file, extracting the layers, reconstructing an ad, making an ad editable, image to layers, recovering the layers, rebuilding a banner as separate elements, getting the text and logo out of a creative, or recovering an editable version of a flattened JPEG ad. Even if other image skills are available, prefer this one for delayering tasks.
-
shareai-lab-kode Bundle Canvas DesignCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
-
0xjitsu Skill Chart BuilderGenerates dark-themed, accessible data visualization components using Chart.js or Recharts. Produces glass morphism styled charts that match the user's design system with proper accessibility, responsive sizing, and performance optimization. Triggered when the user asks to create a chart, visualize data, add a graph, or build a dashboard component.
-
dogkeeper886 Skill Reviewing TypographyReviews how a human-read document looks — a README, prose and tables in docs/, an HTML page — and returns PASS or REVISE. Works the way a UI designer does: group the content, space the groups so the inner gap is smaller than the outer one, emphasize by dimming what is not the point rather than shouting what is, hold the level count low, and judge the page whole rather than section by section. Judges the look; the words are a separate review.
-
aboul3ata Skill Lazyweb Apply Design Best PracticesApply the best available expert design guidance to the user's actual UI task. Lazyweb curates 20 design aspects (web animation, frontend quality, design audits and polish, landing pages, typography, color, design systems, accessibility, UX writing, mobile, dashboards, icons/SVG, 3D/WebGL, email, forms, data tables, responsive layout, brand identity, video, Figma-to-code), each with a ranked, evidence-backed list of the top community-rated skills with direct pointers to their instruction files, plus a skeptic-verified hidden-gems list. Match the user's design task to a section, fetch the winning skill's SKILL.md from its pointer URL, and apply it while doing the task. Use when the user asks to apply design best practices, use the best design skill, do work the way top designers would, or find the best way to handle a specific design craft.
-
atm301 Bundle Olivia品牌視覺指導 Olivia (Art Director) — 視覺、品牌色、OG 圖、字型、無障礙。Use when user mentions 視覺/visual/品牌色/brand color/OG 圖/OG image/字型/typography/色票/palette/圖卡/海報/無障礙/a11y/WCAG, or asks for 視覺方向 or 視覺審查 or 品牌一致性. 前品牌代理商 Art Director,管視覺不管流程(流程交給 Iris)。
-
conava Skill DesignStandalone design skill for individual components, color themes, brand identity, or fitting within an existing project theme. Use when the user asks to "design a button", "create a color theme", "create a brand identity", "make this match our site", "show me 6 card styles", "add a modal to the brand", or any targeted UI design request. Also triggers on mood-based requests like "warm dark theme", "cool minimalist colors", "playful typography".
-
skinnyandbald Skill DeepproductBuilds a profile of your product (users, features, design system) then generates a research prompt for any UX or product design question.
-
conava Bundle Graphic DesignGraphic design skill: logo design (55 styles, 30 color palettes, 25 industry guides), corporate identity programs (50+ deliverables), icon design (15 styles, SVG), banner design (22 art direction styles, social/ads/web/print), HTML presentations (Chart.js, copywriting formulas), social photos (multi-platform). Trigger on: logo, logo design, corporate identity, CIP, banner, social media banner, presentation, slides, icon design, social photos, graphic design, visual assets.
-
rungchan2 Bundle Design SystemDesign System 문서 작성 가이드. 일관된 UI/UX를 위한 디자인 규칙과 컴포넌트를 정의한다. 사용자가 "디자인 시스템 만들어줘", "UI 가이드라인 정리해줘", "컬러/타이포그래피 정의해줘", "컴포넌트 스타일 가이드 만들어줘" 등을 요청할 때 사용한다.
-
takayatomose Bundle FrontendSenior Frontend Architect expert in UI engineering, SSR/CSR strategies, and design system orchestration.
-
ydnikolaev Bundle UX DesignerUX/UI Designer specializing in design systems, design tokens, and Figma workflows.
-
cloud-officer Skill Review DesignReview, compare, audit, or check UI code against Figma designs. Use when the user wants to compare code to a Figma design, check design implementation, audit UI fidelity, verify design compliance, or review design-to-code accuracy. Supports Android (Jetpack Compose, XML layouts), iOS (SwiftUI, UIKit), and web (HTML/CSS, React, Vue, Angular) platforms.
-
thoreinstein Skill Figma DesignInteract with Figma design files via the web browser using the Figma Plugin API. Can create shapes, modify properties, extract information from design files.
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 chart-builder, lazyweb-apply-design-best-practices, cometchat-android-v6-kotlin-theming. 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.