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.
-
techwavedev Bundle Frontend DesignDesign thinking and decision-making for web UI. Use when designing components, layouts, color schemes, typography, or creating aesthetic interfaces. Teaches principles, not fixed values.
-
techwavedev Skill Figma AutomationAutomate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
-
techwavedev Skill UI Visual ValidatorRigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification.
-
techwavedev Skill Baseline UIValidates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
-
techwavedev Skill Makepad FontCRITICAL: Use for Makepad font and text rendering. Triggers on: makepad font, makepad text, makepad glyph, makepad typography, font atlas, text layout, font family, font size, text shaping, makepad 字体, makepad 文字, makepad 排版, makepad 字形
-
techwavedev Skill Enhance PromptTransforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
-
techwavedev Skill Product DesignDesign de produto nivel Apple — sistemas visuais, UX flows, acessibilidade, linguagem visual proprietaria, design tokens, prototipagem e handoff. Cobre Figma, design systems, tipografia, cor,...
-
lev-os Bundle Pencil[WHAT] Character design and illustration assistant for AI product mascots, orb avatars, and animated companions. [HOW] Generates text-to-image prompts, character reference sheets, animation state matrices, Lottie motion specs, and SwiftUI animation parameters. Uses "nano banana" quick-render mode for rapid 5-sample concept exploration. [WHEN] Use when designing mascots, avatars, orb characters, animated blobs, onboarding animations, emote sheets, or character state systems. Triggers on: "character design", "mascot", "avatar", "orb", "blob", "emote", "animation states", "reference sheet", "turnaround", "expression sheet", "ClawBuddy", "pencil", "nano banana", "character render". [WHY] AI products need personality through visual identity. This skill bridges the gap between concept and implementation — from prompt engineering to Lottie/SwiftUI specs.
-
lev-os Skill Material DesignGoogle's comprehensive open-source design system providing guidelines, components, and tools for building high-quality digital experiences
-
iradoweck Skill UI ReviewReview UI code for design system compliance, accessibility, and best practices
-
lev-os Bundle Frankensuite Website DevelopmentBuild FrankenSuite project websites matching frankentui.com quality. Use when creating a new FrankenSuite website, adding pages/sections, or adapting the design system for a different project.
-
1999azzar Bundle Blotcat IllustrationsPlan, generate, and edit Blotcat-style body illustrations for English articles, posts, blogs, and Notion documents. Use when the user explicitly mentions Blotcat or requests article/body-text illustration strategy, shot lists, generation, or edits in a sparse hand-drawn explanatory style. Defaults to the Blotcat IP, pure white background, black line art, and minimal red/orange/blue English annotations.
-
1999azzar Bundle UI DesignerChoose the best UI design system, or a deliberate combination of systems, for web or app interfaces. Use for dashboards, admin panels, internal tools, CMS, SaaS, websites, component theming, color systems, and frontend visual direction across Ant Design, Fluent, Carbon, Atlassian, Apple HIG, Material You, Polaris, Minimalism, Glassmorphism, Neo-Brutalism, Swiss, Swiss-Archival, and related systems. Also supports brand-cloning via getdesign.md DESIGN.md files (328+ real-world brands: Stripe, Vercel, Linear, Notion, Tesla, Spotify, etc.). Features anti-slop quality gates, pre-flight project scanning, genre-aware theme catalog, and 8-state component verification.
-
nanoodlecom Bundle Poster GeneratorGenerate a poster image from a short idea — an LLM expands the idea into a detailed image prompt, then an image model renders it. Use when the user asks for a poster, illustration, or promo image from a one-line concept.
-
natdexterra Bundle Work With Design SystemsInspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured descriptions, validation, and optional export of tokens.css + AI rules to the user's codebase). Use when the user says 'audit my design system', 'check component quality', 'create design system', 'build DS in Figma', 'generate component library', 'add slots to my components', 'sync design tokens from code', 'find detached instances', 'check WCAG compliance', 'export tokens to code', 'generate CLAUDE.md for design system', or wants to push a design system from code to Figma or back. The skill auto-detects the mode from request, or asks if unclear. After inspect, ALWAYS pauses and waits for explicit user decision before any build action. Phase 6 (sync to code) is OFF by default — only triggers on explici
-
netresearch Bundle German Technical WritingUse when writing German-language prose longer than one sentence for Jira tickets, internal German wiki/spec docs, or team-chat to German-speaking colleagues (Slack, Matrix, Teams). Invoke BEFORE composing. Covers anglicism verbs (failt, triggern, returnen), calqued collocations and idioms (blockiert auf, macht Sinn, in 2026), loanword genders (der Commit, die Pipeline), per-artifact register (impersonal for Jira/wiki, ich/du for chat), German typography (Gedankenstrich, Anführungszeichen, Durchkopplung), and AI-typical rhythm (restatement, symmetric paragraphs, summary closers). Skip for commit messages, MR/PR descriptions, release notes (English by team convention), conversational chat replies, or single-line acknowledgments. If you catch yourself thinking 'my German is probably fine here' for anything longer than a sentence — invoke this skill.
-
netresearch Bundle Netresearch BrandingUse when working with ANY Netresearch visual output: branded pages, dashboards, HTML reports, extension icons, README badges, or CSS theming. Enforce strict brand compliance with mandatory logo usage, brand colors, typography, footer, and reference-driven implementation.
-
nevertoday Bundle Xxd Article PosterUse when the user invokes `/xxd-article-poster` or `$xxd-article-poster`, or asks to turn long articles, selected clipboard text, one or more URLs, Markdown/text/HTML files, directories, and image-heavy source folders into one or more 30-45 second readable poster images. Use when the user asks to convert long text, web articles, documents, paths, folders, screenshots, or `clipboard` content into a digestible visual summary, information poster, editorial card, or shareable image; especially for prompts about "45 秒看懂", "长文转图片", "网页转海报", "文档转图片", "一图读懂", or Apple/Takahashi-style poster compression.
-
nevertoday Bundle Xxd Panel 028Create XXD Panel 028 raster artwork from one image or a directory batch while treating the bundled original style brief as the sole aesthetic authority. Supports one or more top-bottom, left-right, design-only, and four-device wallpaper outputs; multiple ratios or exact sizes; prompt-generated, user-exact, or text-free typography; and inline parameters. Use when the user invokes xxd-panel-028 or requests the exact Panel 028 style.
-
nevertoday Bundle Xxd Panel 040Create XXD Panel 040 raster artwork from one image or a directory batch while treating the bundled original style brief as the sole aesthetic authority. Supports one or more top-bottom, left-right, design-only, and four-device wallpaper outputs; multiple ratios or exact sizes; prompt-generated, user-exact, or text-free typography; and inline parameters. Use when the user invokes xxd-panel-040 or requests the exact Panel 040 style.
-
nevertoday Bundle Xxd Panel 046Create XXD Panel 046 raster artwork from one image or a directory batch while treating the bundled original style brief as the sole aesthetic authority. Supports one or more top-bottom, left-right, design-only, and four-device wallpaper outputs; multiple ratios or exact sizes; prompt-generated, user-exact, or text-free typography; and inline parameters. Use when the user invokes xxd-panel-046 or requests the exact Panel 046 style.
-
nevertoday Bundle Xxd Panel 061Create XXD Panel 061 raster artwork from one image or a directory batch while treating the bundled original style brief as the sole aesthetic authority. Supports one or more top-bottom, left-right, design-only, and four-device wallpaper outputs; multiple ratios or exact sizes; prompt-generated, user-exact, or text-free typography; and inline parameters. Use when the user invokes xxd-panel-061 or requests the exact Panel 061 style.
-
nevertoday Bundle Xxd Panel 075Create XXD Panel 075 raster artwork from one image or a directory batch while treating the bundled original style brief as the sole aesthetic authority. Supports one or more top-bottom, left-right, design-only, and four-device wallpaper outputs; multiple ratios or exact sizes; prompt-generated, user-exact, or text-free typography; and inline parameters. Use when the user invokes xxd-panel-075 or requests the exact Panel 075 style.
-
nelsonwerd Bundle Art DirectionCommit to ONE governing art direction for anything visual — app, website, game, dashboard, poster, brand, data-viz, deck, email, motion piece — via a disciplined diagnose → candidates → independent panel → COMMIT → govern process, and produce one durable ART_DIRECTION.md: a short constitutional brief (a world-with-physics idea + a membership test, a named material, palette-as-law, one depth model, type roles, an emphasis budget over a quiet baseline, quantified restraint, one earned climactic moment, provenance) that pre-answers every later visual decision — then govern execution with fidelity critics who are never allowed to add. It states its honest bounds: it guarantees a governed, coherent direction, not a beautiful one — taste stays human-gated, market appeal out of scope. ALWAYS invoke when the user says any of "art direction", "design direction", "visual identity", "design language", "make it cohesive", "commit to a style", "it looks tacky/generic/AI-generated", "redesign the look", or "style guide / a
-
nicolas-deyros Bundle Component GalleryUsar esta skill SIEMPRE que el usuario pida crear, diseñar, documentar o mejorar un componente de UI. Aplica cuando mencionen palabras como: botón, modal, dropdown, accordion, input, formulario, card, navbar, toast, badge, tabs, table, skeleton, spinner, breadcrumb, pagination, tooltip, popover, stepper, o cualquier elemento de interfaz. También activar cuando pregunten por naming de componentes, variantes, estados, accesibilidad, o cuando digan que un componente "se ve mal" o tiene problemas de spacing, padding o margin. Usar aunque no mencionen explícitamente "design system" ni "component.gallery".
-
nkapila6 Bundle RotoAdapt an existing reference video into an editable HyperFrames composition by preserving its original motion. Use when the user supplies a video and wants their own text, brand, or product in it: "recreate this ad with our copy", "swap the text in this animation", "make our version of this motion design", "reproduce this reference frame-accurately", "I have an MP4, put our headlines on it". The reference's real gradients, camera moves, cursor, and UI animation are kept as text-cleared background plates; only the typography is re-authored in JavaScript, so it stays editable and re-renders deterministically. Not for animating from scratch (use /motion-graphics or /general-video), not for captioning untouched footage (/embedded-captions), and not for overlaying graphics on talking-head video (/talking-head-recut).
-
no7z Skill Design PactEstablish and apply the project's design system. Invoke at the start of UI work, or whenever the user says "use my design system", "apply my tokens", "set up our design system", "build this to our design system", or asks to build/restyle UI. The skill first looks for a design.md in the repo: if present it generates UI against it; if absent it clarifies the product direction, YOU (the agent) propose 2–3 palettes, and it opens the design-pact studio where the user picks one visually and tunes it into a full design system to export. All AI runs on the agent's own compute — the web app has no AI and no backend.
-
nolangz Bundle Pixel2motionTurn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (split-fill, exact easing subdivision, tip glint), closed variable-width ribbon fitting, and quantitative motion QA (easing probe, ink-delta continuity sweep).
-
nomadamas Bundle God Tibo ImagenUse this skill whenever the user asks to generate, create, render, draw, or make an image, picture, illustration, icon, logo, or any other visual asset. Also use it when the user wants to edit, modify, restyle, or combine existing images (provide them as inputs). The skill drives the `gti` CLI, which uses the user's local Codex ChatGPT authentication to call the private image-generation backend. Trigger phrases include "generate an image", "create a picture", "make an image of", "draw me a", "render this", "make this cat wear a hat", and similar. Prefer this skill over describing images in text.
-
nopefallacy Bundle Video EditingTurn an approved script, provided talking-head/voiceover media, and gathered assets into a polished, creator-grade vertical (9:16) short rendered with HyperFrames. Encodes a non-negotiable init→preview→lint→render→verify workflow; a reusable editorial house look (mixed serif/sans headlines, paper-stage and dark-grid grounds, stacked splits with seam captions, highlight-bar supers, name pills, headline cards, UI-card stacks); engineered hooks; A-roll/B-roll spine; non-metronomic cuts down to 0.2s; split-screen layouts with deliberate full-frame transitions; eased camera moves (zoom/push) with explicit anti-jitter rules; kinetic captions/keyword emphasis; themed motion graphics (number/spec/poster/callout cards); logo animation; layered SFX mixed under voice; visual theming derived from a style pack (styles/<style>/FRAME.md); asset integration via a manifest; and required verification (preview screenshots + ffprobe + frame spot-checks + a render gate script). Adopts hyperframes-helper conventions (GSAP power-ea
-
nyldn Bundle UX UI Design SystemUse this skill when the user mentions ANY of: "design", "redesign", "UI", "UX", "styling", "component", "accessibility", "a11y", "WCAG", "contrast", "spacing", "typography", "color", "layout", "responsive", "touch target", "focus", "keyboard", "screen reader", "design system", "shadcn", "refactor UI", "audit", "review design", "improve UI", "fix styling", "make accessible", "design tokens", "visual hierarchy", "button", "input", "form", "card", "modal", "dialog", "navigation", "header", "footer", "sidebar", "table", "list", "grid", "flex", "animation", "transition", "hover", "shadow", "border", "radius", "padding", "margin", "theme", "dark mode", "light mode", "icon", "image", "avatar", "badge", "tooltip", "dropdown", "select", "checkbox", "radio", "switch", "slider", "progress", "skeleton", "loading", "error state", "empty state", "radix", "tailwind", "CSS", "styles", "visual", "interface", "usability", "user experience", "user interface". Also use when the user asks to "review", "audit", "improve", "fix", "
-
oerlellijk Skill Flex Grid FlowFramework-agnostic design philosophy for fluid, responsive interfaces. Covers layout thinking, fluid typography/spacing math, adaptive colors, and hard rules. Equal coverage for SCSS and Tailwind.
-
obeskay Bundle Lottie AnimatorCreate, inspect, and repair Lottie animations, including converting SVG art into animated Lottie JSON. Use when asked to animate a logo, icon, or SVG; build motion graphics, micro-interactions, loaders, spinners, or entrance animations; produce or edit a .json/.lottie animation file; add wiggle, bounce, pulse, fade, scale, rotate, morph, or trim-path draw-on effects; build walk cycles or character rigs; or debug a Lottie that renders blank, jumps at the loop, or looks wrong in a player.
-
oil-oil Bundle Computer Use通过鼠标/键盘直接操控 Mac 桌面 GUI,适用于只能通过"人工操作屏幕"才能完成的任务: 操作本地原生 App(微信、飞书、Figma 等)、爬取无 API 的桌面软件数据、 自动化任何需要点击/输入/滚动的 GUI 流程。 【重要:优先使用更专用的 skill,本 skill 是最后手段】 - 任务涉及网页/浏览器 → 优先用 agent-browser skill - 任务涉及文件读写、代码执行 → 直接用内置工具 - 只有目标是"无法通过 API 或其他工具访问的本地 GUI App"时,才使用本 skill 典型触发场景:帮我爬飞书/微信群里的消息、帮我在 Figma 里点击某个元素、 自动化某个桌面软件的 GUI 操作、截图分析当前屏幕状态。
57 -
ohmiler Bundle GridgeistUse when creating, redesigning, or reviewing web interfaces that need product-specific structure, clear hierarchy, responsive composition, accessible interaction, or relief from generic AI-generated SaaS aesthetics. Adapt grid, typography, imagery, motion, and product evidence to the established brand—including technical, editorial, image-led, warm, playful, and utilitarian directions—across React, Next.js, Tailwind CSS, HTML/CSS, landing pages, dashboards, documentation, portfolios, and interactive tools.
-
okooo5km Bundle 5km Littlebox IllustrationsCreate hand-drawn Littlebox (小盒) article illustrations and illustration plans for essays, posts, blogs, docs, product thinking, workflows, methods, comparisons, abstract concepts, and visual metaphors. Use when the user asks for Littlebox, 小盒, paper-box/carton IP illustrations, article visuals, body illustrations, shot lists, visual metaphor ideas, hand-drawn explainers, or regeneration/editing of this style. Default to 16:9 editorial marker illustrations on pure white with Littlebox as the active conceptual operator, using a closed-only box IP, moderately bold black strokes, side-seam twig arms, jagged amber tape/path accents, coral warning/stamp accents, and balanced non-linear compositions. Very pale cream, pale sky blue, pale lavender, or an exact user-specified background color are supported alternatives. Content clarity takes priority over artificial minimalism. Supports multilingual users by writing prompts in English while keeping visible labels in the user's language.
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 pencil, baseline-ui, frontend-design. 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.