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.
-
oimiragieo Bundle Mobile First Design RulesFocuses on rules and best practices for mobile-first design and responsive typography using tailwind.
0 -
yongjianwan Skill Design System ManagementManage design tokens, component libraries, and pattern documentation. Trigger with "design system", "component library", "design tokens", "style guide", or when the user asks about maintaining consistency across designs.
-
sboghossian-mini-claude-for-legal Skill Wiki DesignUse when discussing product design principles, UI/UX decisions, or design system architecture for a legal-AI product. Covers comfort-first design philosophy, glanceable interfaces, progressive disclosure, design tokens, accessibility, and the specific considerations of designing for legal professionals under cognitive load. Reach for this skill when the user asks about design principles, design systems, component libraries, or UI strategy.
-
sboghossian-mini-claude-for-legal Skill Ops Case Study Asker After N MessagesUse when a high-value user has crossed a tenure and engagement threshold (50+ turns, 90+ days, NPS promoter) to request a testimonial quote or firm logo feature in the customer wall. Defines the trigger logic, conversation prompt, and downstream handoff to the testimonial collector — with rules about not pressuring users in active legal work and respecting skips gracefully.
-
sboghossian-mini-claude-for-legal Skill Conversation Intake Trademark FilingUse when a user wants to file a trademark application and Claude must gather the mark description, owner, Nice classification, filing jurisdictions, and clearance status before generating a filing strategy and cost estimate. Triggers on requests to register a brand, logo, name, or trademark nationally or internationally. Covers MENA national filing (UAE, KSA, LB, EG) and Madrid Protocol international designations, with specific handling for Arabic-script marks and GCC-block filings.
-
techwavedev Skill Core ComponentsCore component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
-
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
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, core-components, material-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.