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.
-
digitalsamba Bundle Ideogram4Prompting patterns for Ideogram 4 text-to-image — best-in-class in-image text rendering and exact color/layout control via structured JSON captions. Use when generating images that need legible on-image text (title cards, thumbnails, logos, signage, CTAs), precise brand colors, or controlled spatial layout. Triggers include title slide image, thumbnail with text, on-image text, legible text in image, brand color palette image, bounding-box layout, Ideogram.
-
hyperb1iss Bundle Tui DesignUse this skill 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.
-
leeguooooo-chrome-use Skill CanvasDrive canvas / WebGL / game UIs that paint to a <canvas> with no DOM or accessibility node — game boards, voice-room mic seats, map tiles, 3D viewers, design canvases (Figma/mockitt), HUDs. Use when snapshot/find/eval querySelector return no ref for something clearly on screen, when the label shows in `get text` but has no @ref, or when you need real-time coordinate/keyboard control. Covers canvas capture, coordinate clicks, hold-to-move, batch timed sequences, reading engine globals, and the real-time WebSocket stream.
-
leeguooooo-chrome-use Skill ElectronAutomate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using chrome-use via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
-
zc277584121-marketing-skills Bundle Image GenerationGenerate illustration images for articles and documentation with a Codex-first workflow, OpenAI API fallback, and Gemini fallback.
-
joneqian Bundle 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. Integrations: shadcn/ui MCP for component search and examples.
-
athevon Skill PaintPaint a complete visual universe with genjutsu - art direction brainstorm, design system, implementation, audit. Anti-AI-slop design pipeline. Adapts to Web, Android (Compose), Apple (SwiftUI).
-
openrouterteam Bundle Openrouter ImagesGenerate images from text prompts and edit existing images using OpenRouter's dedicated Image API. Use when the user asks to create, generate, or make an image, picture, or illustration from a description, or wants to edit, modify, transform, or alter an existing image with a text prompt.
-
binance Bundle Query Token InfoPer-token details for a specific token identified by keyword, symbol, or contract address: (1) search — find tokens by keyword/symbol/contract; (2) meta — static info: name, symbol, logo, social links, creator, official website; (3) dynamic — real-time market data: price, 24h change, volume, holder count, liquidity; (4) kline — OHLCV candlestick data for technical analysis. Use for: "price of $X", "search for token Y", "kline chart for $Z", "who created $W", "social links for $V", "holder count of $U", "candlestick data", "find the contract address of <token>".
-
zrong Bundle Matting通过独立 matting-api 为本地图片抠图、去背景并输出透明 PNG。每次先读取服务状态、队列、实时算法和模型能力,再检查输入图的 alpha、边框颜色、均匀度与亮度特征,自动选择可用的 BiRefNet、InSPyReNet、Luma 或 CorridorKey 组合;也支持显式算法/模型。用户提到抠图、去背景、透明底、绿幕/蓝幕、人物/产品/Logo/特效分离,或 image-generation 生成图需要透明化时都应使用。配置缺失或服务不可用时,由调用方明确回退到现有本地方法,不能伪装成 matting-api 成功。
-
zrong Bundle Media Use媒体处理工具集(基于 ffmpeg)。当用户需要视频转码、格式转换、压缩到指定大小、调整分辨率/帧率、添加 Logo 或图片水印、设置水印位置/尺寸/透明度、追加片头片尾、音频处理、视频裁剪/剪辑、合并/拼接、修复 m3u 下载损坏视频(faststart/moov atom)时使用。支持品牌视频一体化生成、目标 MB 两遍编码、H.264/H.265/AV1/VP9 批量转码、无损裁剪与合并、mp4 moov 前置修复。
-
cognitedata Bundle Aura ReviewChecks how well an app uses Aura, Cognite's design system: what fraction of its components are Aura vs. custom-built, whether any custom components should really have been an existing Aura component, and whether Aura components got styled in ways that break the design system's own rules. Runs fully automatically by scanning the app's source and checking it against Aura's docs — no back-and-forth, so it also works unattended in CI. Writes a plain-language report to aura-review/report.md and a machine-readable aura-review/stats.json. Use when asked to run an Aura audit, check Aura compliance, or score how compliant an app is with the Aura design system.
-
roble3 Bundle Contour To MeshBuild Blender mesh surfaces directly from extracted 2D contours/masks instead of approximate primitives. Use for 1:1 mascot/logo reconstruction, exact leaf/petal silhouettes, filled wireframe shapes, shallow bas-relief forms, or when the model outline must match a front template before adding depth.
-
roble3 Bundle Reference To 3dReconstruct Blender models from supplied reference sheets, branding templates, texture atlases, orthographic front/side/back/top views, or mascot/logo art where visual fidelity to the source is more important than a plausible generated object. Use when the user says the model must match a template, wireframe, texture pack, character sheet, mascot sheet, or brand asset exactly; also use after feedback like "does not look like the reference", "fit the texture 1:1", "wrong number of visible parts", or "compare against the template". Requires Blender MCP plus local Python with Pillow/OpenCV/numpy; pairs with blender-uv-texturing, wireframe-to-3d, blender-modeling, blender-materials, and blender-export.
-
roble3 Bundle Atlas Uv FittingDetect texture-atlas regions and map each source part to its own UV rectangle or projected UV surface. Use when a texture pack must fit a Blender model 1:1, when textures look off/stretched, when alpha decals or lightmaps are provided, or before exporting a textured GLB for a brand mascot/logo.
-
roble3 Bundle Orbital Hud MotionCreate tasteful circular/orbital HUD and aura animations around a Blender subject using source-derived arcs, dots, dashes, opacity, parallax, and restrained motion. Use when decorative circles, halos, orbit markers, scanner rings, or HUD effects must correlate with a logo/mascot rather than looking like random oversized rings.
-
roble3 Bundle Texture State AnimationDesign and validate texture-state transitions for Blender animations without ugly whole-image crossfades, texture popping, misregistered morphs, or target-engine-incompatible Python-only swaps. Use when animating between multiple source textures, mascot/logo states, style states, lightmaps, decals, or UI skins.
-
roble3 Bundle Source Part SegmentationSegment overlapping visual parts from source images, wireframes, texture atlases, and decals before mesh reconstruction. Use when a mascot/logo/template contains touching or overlapping components and exact structural part masks are needed before contour-to-mesh, UV fitting, or landmark repair.
-
roble3 Skill Mascot Logo ReconstructionOrchestrate a fail-gated, source-locked Blender reconstruction of mascots, logos, brand avatars, and stylized flat characters from wireframes, texture packs, and orthographic views. Use when the user requires a 1:1 brand/model match rather than a plausible stylized interpretation.
-
roble3 Bundle Reference Analysis ValidatorMeasure and validate supplied reference images, wireframes, texture atlases, and Blender renders before declaring a reconstruction 1:1. Use when an asset must match a template, when visual feedback says the output is off, when part counts must be exact, or before exporting a brand mascot/logo reconstruction. Pairs with reference-to-3d, contour-to-mesh, orthographic-registration, atlas-uv-fitting, and Blender MCP.
-
artivilla Skill Design Spec RulesEnforce design-to-code fidelity rules. Use when implementing UI from Figma, mockups, or design specs to ensure pixel-perfect accuracy.
-
artivilla Skill Interfaces RaunofreibergReview UI code against Rauno Freiberg's interface guidelines. Use when checking interactivity, typography, motion, touch, optimizations, accessibility, and design details.
-
hexbee Bundle Hn To X PosterUse this when the user wants to review Hacker News top 30 stories, select software or AI related items, and automatically publish a Chinese thread of at least 3 posts to x.com or Twitter from an already logged-in browser session.
-
hexbee Bundle X Thread PosterPost multi-part X/Twitter threads through Chrome DevTools MCP using the user's logged-in browser session. Use when Codex is asked to open x.com, compose, publish, or automate a thread/multiple posts, especially when a source link must be included or the post style must be adapted from provided content.
-
cycleuser Bundle Software PlannerComprehensive software development planning and implementation skill for multi-interface Python applications with academic research integration. Triggers when: Creating new Python software with CLI/GUI/Web interfaces, planning software architecture and modules, designing scientific or engineering applications, setting up bilingual documentation and PyPI publishing, or needing academic research-based feature design. Commands: - /planner research <topic> - Conduct domain research - /planner design <project> - Design system architecture - /planner modules - Generate module specifications - /planner docs - Create bilingual documentation - /planner verify - Run verification checklist Capabilities: Pre-development planning and research, multi-interface design (CLI + PySide6 GUI + Flask Web), scientific visualization with pyqtgraph, academic literature-based feature design, sample data and test documentation generation, bilingual README with structured sections, GPLv3 licensing and PyPI publishing setup
-
zernie Skill Generate LogoGenerate or iterate on the vigiles logo using ImageRouter API
-
sanky369 Bundle Brand AssetProduces branded visual identity elements — logo concepts, icon sets, seamless patterns, brand illustrations, and textures — as generation-ready prompt specs, and generates them via FAL.ai fal-ai/nano-banana-pro when the automation is configured. Use when the user says 'design a logo', 'I need icons', 'brand pattern / texture', 'brand illustrations', 'visual identity elements', or 'make my brand assets'. Produces one prompt-spec block per asset (asset type, style, palette with hex, composition, negative constraints), a variant plan for user selection, file-naming conventions, and a brand-guidelines entry for each approved asset; runs docs/creative_cli.py brand when FAL_API_KEY is set.
-
sanky369 Skill OrchestratorDispatcher for the creative suite: diagnoses a multi-asset creative request with a few questions, then routes it through the right sequence of creative skills, naming the artifact each step passes to the next, and wires in the FAL.ai automation (single model fal-ai/nano-banana-pro via docs/creative_cli.py) when available. Use when the user asks for several creative deliverables at once or an outcome that implies them — 'assets for my product launch', 'set up my brand visuals', 'I need a logo, product shots, and social posts', 'a week of content', 'rebrand everything' — or when it's unclear which creative skill applies. Produces a Creative Production Plan: chosen route, ordered skill sequence with hand-off artifacts, generation checklist, and asset output map. For a single obvious asset, skip this and use the specific skill directly.
-
sanky369 Bundle Image GenerationTurns any request for an AI-generated image into precise, generation-ready prompt specs and — when the FAL.ai automation is configured — the generated files themselves, using the single model fal-ai/nano-banana-pro. Use whenever the user asks to 'generate an image', 'make a picture of X', 'create a thumbnail / hero image / illustration / infographic', 'write me a prompt for this image', or any visual that isn't specifically product photography, a social-platform graphic, or a brand mark (hand those to the sibling skills). Produces one prompt-spec block per asset (subject, style, composition, lighting, mood, aspect ratio, negative constraints) plus file-naming and variant conventions, and runs docs/creative_cli.py to generate when a FAL_API_KEY is available.
-
sanky369 Skill Creative StrategistEstablishes a brand's visual direction and compresses it into a Creative Direction Brief with a paste-ready 'style block' that every downstream image prompt reuses, so all generated assets look like they came from one brand. Use when the user says 'define my brand style', 'I want a consistent look', 'what should my visuals look like', 'help me pick an aesthetic / mood / color palette', 'my generated images all look different', or before any multi-asset creative work where no style guide exists yet. Produces the Creative Direction Brief: aesthetic profile, palette with hex codes, style block for prompts, and prohibitions.
-
sanky369 Bundle Design FoundationCreate or extract a design-token foundation — colors, typography, spacing, radii, shadows — as a real tokens file (CSS variables and/or Tailwind theme) plus a migration map from current hardcoded values. Use when the user says 'set up a design system', 'our styles are inconsistent', 'we have 50 shades of the same blue', 'add design tokens', 'formalize our design', 'make new features match', or when starting a new frontend that needs a foundation before building screens. Also the first step whenever other design work keeps fighting ad-hoc values. Produces the tokens file, a global→semantic token structure wired for dark mode, and a short list of the worst drift to migrate first.
-
sanky369 Bundle Product Design ReviewRun an evidence-based product design and UI/UX review of a digital product (web, mobile, desktop) — heuristic evaluation, task walkthroughs, visual and interaction critique, and WCAG 2.2 AA accessibility checks. Use when the user says 'review my app/page/site', 'critique this UI', 'something feels off', 'why are users dropping off', 'audit our onboarding/checkout/dashboard', 'is this usable/accessible', or shares a URL, screenshot, Figma link, or codebase and asks what to improve — even if they never say 'design review'. Produces a Design Review Report: executive summary, prioritized findings table with evidence and severity, flow walkthroughs, accessibility blockers, and next steps routed to the skill that fixes each category.
-
sanky369 Bundle Design Engineer MindsetTranslate a design (Figma mockup, spec, screenshot, or verbal description) into code with pixel- and motion-level fidelity, using the browser's rendering pipeline as a constraint: exact spacing/timing via tokens, GPU-safe animations, no layout thrashing, 60fps interactions. Use when the user says 'implement this design', 'make it match the mockup', 'it doesn't look like the Figma', 'the animation stutters/drops frames', 'set up design tokens', or when a diff between design and implementation needs to be closed. Produces the faithful implementation plus a fidelity report (design value → implemented value → any deviation and why) and performance notes.
-
open-mercato Bundle Om UX SetupExtract the repository's design contract (tokens, component registry, screen archetypes, conventions) into .uxproof/ so every UX skill judges against THIS repo's design system, whatever it is. Run once per repository; re-run to refresh after design-system changes.
-
jim60105 Bundle UIUI/UX design agent for crafting user experiences, visual designs, and game interfaces. Auto-detects the designer role (UX Designer, UI Designer, Game UI Designer) and spawns a role-scoped sub-agent with only the relevant reference files. Triggers on phrases like "user flow", "wireframe", "design system", "design tokens", "accessibility", "WCAG", "UI pattern", "HUD", "game menu", "inventory UI", "minimap". Full per-role triggers in references/roles/.
-
poteto Bundle Make Interfaces Feel BetterDesign engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
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 tui-design, canvas, electron. 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.