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.
-
actionpotentialplacebo701 Bundle Mck Ppt DesignProfessional PowerPoint presentation design framework with Python-pptx automation. Creates top-tier decks from scratch using a comprehensive design system including typography hierarchy, color palettes, layout patterns, and line treatments. Trigger when users need professional presentations, slide decks, or pitch materials.
-
adjurtime Bundle Origin FigureCreate, revise, audit, and save one editable publication figure at a time in Origin or OriginPro on Windows from tabular data, OPJU, SVG, and image references. Use for Origin画图, 单张论文配图, existing-OPJU revisions, Word-sized layouts, axes, typography, labels, multi-panel figures, and requested vector or raster exports. Require Origin-native worksheet bindings and persistence verification; use audit-figure-suite for paper-wide consistency review.
-
adjurtime Bundle Illustrator EditSafely refine, assemble, and export existing vector artwork in Adobe Illustrator (.ai, .svg, .eps, or PDF), especially scientific figures exported by Python, R, MATLAB, Origin, GIS, or network software and then manually adjusted. Use when Codex must preserve manual label placement while adjusting typography, consolidating fragmented imported text, refining annotations or legends, assembling panels, editing layers or vector paths, or producing publication exports through Illustrator MCP. Do not use it to analyze raw data, choose statistical methods, or generate data-driven plots that should be reproducible in code.
-
agiseek Bundle Gemini WatermarkRemove visible Gemini AI watermarks from images via reverse alpha blending. Use for cleaning Gemini-generated images, removing the star/sparkle logo watermark, batch watermark removal.
-
mercurjs Bundle Figma UIConvert a Figma design into Mercur dashboard UI code (admin or vendor panel) that matches the project's design-system conventions. Trigger whenever the user shares a figma.com URL, selects a Figma node/frame, or asks to "convert this design", "implement this design", "build this screen", "turn this mockup into code", or otherwise do design-to-code work in packages/admin or packages/vendor. Also trigger when the user describes the flow in their own words ("here's the Figma, make the page"). Use the Figma MCP to read the design, then map it onto the component inventory and patterns in this skill's references before writing any JSX.
-
xiaolai Bundle Nature FigureSubmission-grade Nature/high-impact journal figure workflow for Python or R. Use whenever the user asks to create, revise, audit, or polish manuscript figures, multi-panel scientific plots, figures4papers-style matplotlib plots, or journal-ready SVG/PDF/TIFF outputs, especially for Nature-family or other high-impact journals. Before plotting, define the figure's conclusion, evidence logic, export needs, and review risks. If the user has not chosen Python or R, ask "Python or R?" and stop. Use only the selected backend for figure generation, previewing, exporting, and QA. Supports matplotlib/seaborn and ggplot2/patchwork/ComplexHeatmap. Not for dashboards or Illustrator/Figma-first infographics.
-
ahmadzakiy Bundle PixelBuild Mekari Pixel 3 UI in Vue 3/Nuxt from Figma or text. Use when implementing components, validating props, applying design tokens, or checking token mode (2.1 vs 2.4).
-
ahmadzakiy Bundle Pixel 2026 2 18Create distinctive, production-grade frontend interfaces with high design quality. Use this skill to implement designs from Figma nodes or natural language to Vue 3 component or Nuxt pages using Mekari Pixel 3 design system. Requires a working Pixel MCP server connection.
-
ahmadzakiy Bundle Figma Code ConnectCreates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
-
panel-ui Bundle Logo MakerDesign an original app logo — a compact mascot or symbol that stays readable at 32 × 32 and works as an icon at every size. Use when asked to create, design or generate a logo, app icon, brand mark, mascot or avatar for a product, whether or not an image generator is available. Produces either a vector file the project can keep or a prompt for an image model, from one shared set of design rules.
-
paldom Bundle Icon DrawDraws a minimalist app or OSS package icon as a master 1024x1024 SVG - symmetric glyph on a dark grey rounded-rectangle (Apple-style radius). Use when the user asks to design, create, draw, generate, or make an app icon, package icon, or simple logo mark. Not for icon concept brainstorming, critiquing renders, exporting favicon/assets, UI icon sets, or vectorizing images.
-
biasia Skill C2dc2d2c c2d pipeline — the rules and process for exporting anything from code INTO Figma (code-to-design), UI components, state matrices, and design tokens/variables alike, and for keeping the token snapshot and its CI gate honest when tokens change. Use whenever the user wants code state reflected in Figma — "export/write/sync this component (or these tokens) to Figma", "update the Figma variables", "I changed a token, regenerate the snapshot", "the figma-variables gate is red". Not for implementing code from Figma designs (that is c2d2c:d2c).
-
biasia Bundle D2cc2d2c d2c pipeline — the standard eight-step workflow for implementing or updating UI from Figma designs. Use EVERY time the user provides figma.com/design/... links asking to build, update, restyle, or restore a UI to match a design. Covers survey → plan review → spec extraction → 1:1 build → regression page → motion review → screenshot acceptance → cleanup + MR. Not for exporting code INTO Figma (that is c2d2c:c2d).
-
bidah Bundle Expo Router App Store Card TransitionBuild an App Store "Today"-style card that zooms into its own detail/article screen with expo-router's Link.AppleZoom, including the poster card UI (expo-image + blurhash placeholder, caption tinted with the image's own average colour) and the editorial destination screen. Use when adding a card-to-detail zoom transition, an App Store-like poster card, blurhash tinting, Link.AppleZoom / Link.AppleZoomTarget, or a Today-style article screen in an Expo app.
-
neo4j-labs Skill Neo4j StyleguideEnsure consistency with Neo4j brand guidelines, Needle design system, and Cypher code style conventions. Use when creating Neo4j documentation, diagrams, presentations, Cypher queries, code examples, or any content that should align with Neo4j's visual identity and coding standards. Reference https://neo4j.design for the Needle design system.
-
computerlovetech Skill Brand Guidelines ComputerloveApplies Computer Love's official brand colors and typography to any sort of artifact that may benefit from having Computer Love's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Audited -
congemcd Bundle Generate Tokens From FigmaGenerate design token reports and token files from Figma variables and styles. Use when Codex needs to inspect a Figma design file, create a variables/styles extraction report, normalize Figma names, and export DTCG 2025.10 `.tokens.json` files for variables, color styles, text styles, or explicitly requested additional style types.
-
fradser Bundle Open Deskos WidgetDevelop, style, verify, and deploy Open DeskOS CM5 widgets and visual plugins on the Linux Electron runtime. Use when creating or refactoring widgets, tuning layout density and typography, isolating plugin faults, managing git-agent shared worktrees, or staging releases on the CM5 hardware.
580 -
juspay Skill Vira DesignVira's design system — TailwindCSS conventions, color palette, typography, spacing, components, and accessibility rules. Use when working on UI components, styling, or layout in this project (Lucid HTML in Haskell sources under packages/vira).
-
lamm-mit Bundle Reaction Diffusion PosterCreate deterministic science-art visuals from Gray-Scott reaction-diffusion dynamics. Use when asked for Turing patterns, morphogenesis, dynamics art, reaction-diffusion simulations, or social-post-ready scientific images. Produces PNG posters, simulation data, captions, and a README by running a bundled Python renderer.
-
fandhe-ai Bundle Create Design DocUX/UI デザイナーの専門家として、アイデア・要件文書から UI/UX 設計資料一式 (design-doc.md・画面遷移図・ストーリーボード・HTML ワイヤーフレーム・PC/モバイル スクリーンショット) を生成。「UI設計して」「ワイヤーフレーム作って」「画面遷移図作って」 「デザイン資料まとめて」「PO承認会用の画面説明資料を作って」で使用。主役成果物は storyboard.png(縦長1枚、主要シナリオの流れに沿って各画面の表示要素を日本語説明)。 Figma ではなく自己完結 HTML + Playwright でワイヤーフレームを作る。企画は create-pitch-deck が担当し、両スキルは concept-brief.md を介して整合する。推奨実行順序: create-design-doc → create-pitch-deck(pitch が画面素材を取り込むため)。
-
hotriluan Bundle UI UX Pro MaxFrontend UI/UX design intelligence - activate FIRST when user requests beautiful, stunning, gorgeous, or aesthetic interfaces. The primary skill for design decisions before implementation. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check frontend 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.
-
qiuy-collab 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.
-
resciencelab Bundle Clone PrototypeClone a real app's screens as pixel-accurate, self-contained HTML artboards on the prototype canvas. Overlay a grid on the reference and sample colours visually, derive one measured design-token block, generate one HTML file per screen from a single script, verify by re-rendering, and park the reference underneath its mockup. Use when asked to 100% copy / clone an app's UI, rebuild screens from screenshots or Mobbin, extract a design system from reference images, or check a mockup against its reference.
-
tariq-himself Skill DesignerGenerate a DESIGN.md design system for any project — for people with zero design knowledge. Use when the user starts UI work, says 'design', 'make it look good', 'designer', 'landing page for', 'design system', or mentions components, layouts, colors, fonts, or a site whose look they love.
-
thilina099 Skill Nonprofit Event RevenueUse when a nonprofit, association, or foundation wants more revenue from a conference, summit, gala, or annual event. Symptoms include sponsorship packages that have not been repriced in years, a prospectus that is just a logo-placement price list, sponsors who do not renew, no pipeline of new sponsor prospects, or an events team that cannot show sponsors what they got for their money.
-
iart-ai Bundle Testimonial VideoThis skill should be used when the user asks to "make an animated testimonial", "create a quote video", "build a review video", "turn a customer testimonial into a graphic", "animate a customer review", "make a social proof video", "add an animated star rating", or "turn a list of reviews into videos". Covers quote typography, staggered line reveals, kinetic emphasis on key phrases, animated star ratings, the author block (name/role/avatar/company), and templating one card across many quotes.
-
idealockin Skill Same Same But DifferentProduce N genuinely different versions of one thing — ten takes on the same page, screen, document, deck, logo, name, or plan — by holding the content fixed and varying exactly ONE named axis at a time (BONES = layout/architecture, SKIN = type/colour/surface, FRAME = scale/proportion/crop). Use whenever the user says "same same but different", "show me 10 versions", "give me variations", "other ways this could look", "mix it up", "remake this a bunch of different ways", "different layouts", "different styles", or asks for a set of options to choose between. Carries the shape catalogues that make variants actually different, a cheap build-and-verify pipeline, and a numbered gallery so the user picks or mixes by number. NOT for refining one design toward a single answer (that is ordinary iteration) and not for generating new content.
-
jenishshrestha Bundle Tailwind V4 Best PracticesExpert guidance for writing production-grade Tailwind CSS v4 code with design system thinking. Use this skill when users mention Tailwind CSS, CSS styling, design systems, theme configuration, design tokens, OKLCH colors, component styling, or migrating from Tailwind v3 to v4. Also trigger when writing or reviewing any CSS in a Tailwind project, even if "Tailwind" isn't explicitly mentioned. Covers @theme configuration, semantic utilities, and modern CSS patterns.
-
jhuse25 Skill Antislop DocsUse when writing or reviewing any document (docx, Google Docs, PDF, report, proposal, memo) so it does NOT read or look AI-generated. A bias-correction engine for documents: kills the ChatGPT-essay shape with BLUF/pyramid structure, prunes bold-bombing and connector cliches, sets the prose-vs-list discipline, defines real editorial typography, requires one signature element, and generates a DOC.md per project. Pairs with antislop-web for shared visual discipline.
Audited -
jihadkhawaja Bundle Mudblazor ThemingApply consistent Material Design UI theming in Egroo using MudBlazor. Use for: adding or updating colors, typography, elevation; ensuring new components follow the orange-on-dark palette; fixing visual inconsistencies; new MudBlazor components that need correct Color/Variant/Elevation props; CSS scoped overrides for theme-integrated layout. Covers the Egroo dark palette, component usage patterns, and the rules for keeping CSS and MudTheme in sync.
-
laguagu Bundle Skill FinderFinds existing agent skills before creating a new one. Searches a curated list of 1184+ official skills from Anthropic, Vercel, Stripe, Supabase, Cloudflare, Sentry, MongoDB, Figma, and 40+ other teams. Use when the user asks "find me a skill for X", "is there an existing skill for Y", "how do I do Z", or expresses a capability gap — even if they do not explicitly mention "skill". Run BEFORE skill-creator to avoid duplicating work.
-
legioncodeinc Bundle Honeycomb DesignUse this skill to generate well-branded interfaces and assets for Honeycomb (shared AI agent memory, a Legion Code × Activeloop product), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
-
copilotkit Skill Advanced Visualization TechniquesUI mockups, dashboards, advanced interactivity, generative art, simulations, math visualizations, and design system rules for producing rich generateSandboxedUi output.
-
cyberuni Bundle Init FigmaUse this skill when setting up cyber-figma — personal access token, team id, connection verify, and MCP wiring.
-
cyberuni Skill Inspect Figma FileUse this skill when reading a Figma file's structure — pages, frames, components, or one node — without wasting quota.
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 mck-ppt-design, origin-figure, illustrator-edit. 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.