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.
-
treafree Bundle Everyday User ManualRecast a supplied everyday photo as a witty illustrated product instruction sheet with a large Chinese title and concise English annotations. Use for 日常说明书、宠物使用说明、生活物品冷幽默说明图 or a fictional everyday object manual poster.
-
treafree Bundle Photo Poetry DiptychPair a source-faithful photographic upper panel with a small source-derived dry-brush illustration surrounded by generous paper whitespace below. Use for 摄影加极简手绘、上下双联艺术海报、photo and miniature illustration diptychs or quiet photo-poetry prints.
-
treafree Bundle Pirate Bounty PosterTurn a supplied portrait or pet photo into a humorous pirate-anime wanted poster with a recognizable manga portrait, a playful alias and a fictional bounty. Use for 海贼王式通缉令, 大航海悬赏令, or a pirate bounty photo poster.
-
treafree Bundle Scene Sketch CollageTransform a supplied photo into an editorial collage where a realistic foreground gradually continues as fine drawing and light pigment on paper. Use for 实景渐绘拼贴、摄影与建筑线描融合、photo-to-sketch travel posters. Keeps a photographic anchor rather than converting the whole image into an illustration.
-
treafree Bundle Architectural Relief PosterReinterpret a supplied architecture or structural-detail photograph as a bold relief-print poster with carved marks, a restrained ink palette and a tall condensed title. Use for 建筑版画海报、屋檐木刻海报、architectural linocut posters; not for a generic halftone photo filter.
-
teddy563 Bundle Server BrandingBuilds a cohesive brand and copy kit for a Minecraft server from a name + vibe. Use whenever the user wants help with branding, a brand kit, a server name or naming ideas, a tagline or slogan, a color palette, a MOTD or "message of the day" or server-list text, rank names and prefixes, a rank ladder, store or Tebex package copy, a Discord category/channel/role layout, a welcome message or rules, scoreboard/TAB layout, join/leave/broadcast/vote/crate messages, kit or crate names, or wants any server text written in a particular tone or vibe (cozy SMP, hardcore anarchy, competitive PvP, kid-friendly, premium, meme). Emits MOTD and prefixes in the RIGHT format per plugin (MiniMessage vs legacy ampersand hex) using the format-target matrix. Hands rank tracks to permissions-helper and fetches real plugin keys with learn-plugin-docs; never invents config keys.
-
younesbenallal Skill Illustration IdeasPropose specific illustrations that improve comprehension of a web page. Use when the user provides a URL or article and wants visual concepts with placement and layout guidance.
-
dkadts Skill TypographyPrint-quality typography enforcement for English text. Prevents widows, orphans, and hanging short words (articles, prepositions, conjunctions, dashes) at line ends. Rewrites HTML text nodes to insert ties. Also serves as the canonical short-word list used by /build and /audit.
-
exiao Skill Design IterationImprove design mockups from critique (design-review, user studies, a multi-perspective council, a UI lint pass, or raw notes): triage keep/change/kill, produce a new version with a per-change rationale trail so the next test can measure improvement. If no critique exists yet, runs the full test-iterate-test loop (review + studies + lint) around the mockup. Reaches for a design system if one exists. Use when: run design-iteration on this mockup, iterate on these designs, revise the mockups from feedback, incorporate the review, next design iteration, close the loop on design feedback.
-
lintendo Bundle Axhub Commentary处理 Axhub Commentary 完整工作流。优先读取本地页面批注文档,落实修改并更新批注状态,或在用户确认后写入删除标记;本地读取失败时再确认 ACP UI 并生成临时可批注地址。也可为已接入 @axhub/annotation 的页面准备标注编辑环境,或配置 AI 侧边栏对话、AI 批注执行、调整面板属性和多方案比稿。当用户提到 Axhub Commentary、Axhub Chrome 扩展页面批注、可批注链接、comments.json、标注编辑按钮、修改标注内容、Annotation Runtime、annotationSourcePath、根据 Commentary 意见改代码、更新或清理批注、页面 AI、供应商安装登录、调整面板、方案切换或页面定位信息时使用。可批注目标是 Figma 时,也应与 figma-content-operator 组合。
-
lintendo Bundle Build Design System从网页中采集设计令牌并生成完整的 DESIGN.md 设计规范文档 + Tailwind CSS 主题文件。 当用户提供 URL 并要求"提取主题"、"生成设计规范"、"导出设计系统"、 "提取这个网站的设计令牌"、"帮我做一个主题"、"分析这个页面的设计风格"时使用。 产出包含 DESIGN.md(getdesign.md / DESIGN.md 9 段式标准)和 globals.css(Tailwind CSS v4), 每个 token 类别均有推荐/允许/禁止三级规范,可直接放入项目根目录供 AI 编码工具使用。
-
lintendo Bundle React To Figma MakeUse when 需要把现有 React、Vite、Next.js、V0 或 AI Studio 页面转换为 Figma Make 可导入的 .fig 资产,或补齐、更新、验证已有 Figma Make 导出壳和 canvas.fig。
-
lintendo Bundle Search Design SystemUse when selecting an existing design system or theme for a product, page, prototype, or implementation through Axhub design knowledge indexes; not when creating or updating a theme.
-
lintendo Bundle Figma Content Operator用于处理涉及检查、读取、创建、编辑、导出或代码映射的 Figma 内容任务,也用于将 HTML/React/Vue 等网页复制到 Figma,尤其适用于当前选区、设计系统、Figma MCP、Drafito、Figwright 或需要避免 MCP 工具污染上下文的场景。当用户需要可批注 Figma 链接或要求同时绑定工作目录时,也应与 axhub-commentary 组合。
-
locusyuri Bundle Illustration Prompt根据用户说明生成物理/数学教学插图的 AI 绘图提示词。涵盖模型示意图、函数曲线图、实/复函数与一般映射图等,支持多面板组合布局。
-
melvynx Bundle App IconGenerate a vibrant dimensional iOS and Android app icon, then post-process it for store specs. Use for creating, regenerating, or polishing an Expo or React Native app logo or launcher icon.
-
douinc Skill Figma Logos SvglUse when working with Figma and brand or product logos are needed — triggers on brand names (React, Next.js, Vercel, Stripe, GitHub), company logos, or requests to add/insert logos in Figma designs.
-
douinc Bundle Design Md To ShadcnApplies an external DESIGN.md (Google Labs design-token format) to a project's shadcn/ui theme. Activate when the user provides or references a DESIGN.md / design.md file, a designmd.app or Stitch design system, a downloaded brand design system, or asks to 'apply a design system / theme' to a shadcn project. Translates DESIGN.md tokens into shadcn CSS variables in the project's theme CSS file and turns the prose into component guidance. Inbound-only: does not extract a DESIGN.md from the project.
-
douinc Skill Figma Icons IconifyUse when working with Figma and UI icons are needed — triggers on icon names, icon libraries (Tabler, Lucide, Material Design, Phosphor, Heroicons), or requests to add/insert icons in Figma designs.
-
dynamods Skill Dynamo UX DesignerPlans UX flows, maps product needs to Weave Design System components, and generates structured Figma mockups using Autodesk Weave libraries. Use when the user requests UI components, pages, or applications; mentions forms, dashboards, landing pages, or modals; asks to design, build, or create interfaces; or wants to improve existing UI/UX. Aligns with Weave governance, tokens, variants, and AI/Assistant standards.
-
igorkulman Bundle Jira Task ContextFetch Jira task details from a Jira issue URL or key, follow linked Jira issues, and inspect referenced Confluence/Figma links. Use at the start of flows that begin from a Jira task, when the user provides a Jira URL/key, or when Jira issue context, dependencies, blockers, parent/subtasks, linked issues, Confluence specs, or Figma designs are needed.
-
japboy Bundle Design System Reverse EngineeringReverse-engineers existing implementations, design files, and documentation into a reusable design system while preserving Adobe Spectrum's Principles/Foundation/Content structure. Use when users ask to derive design rules from legacy projects, normalize heterogeneous inputs, and produce evidence-based design system documentation.
-
joacod Bundle UI Design Token RefactorImprove, refactor, review, and systematize web UI styling with CSS design tokens, cascade layers, Tailwind theme variables, semantic color/spacing/typography tokens, dark mode, accessibility checks, and maintainable component styling. Use this skill whenever the user asks to improve CSS, redesign a site, clean up stylesheets, migrate hardcoded values to tokens, organize Tailwind themes/classes, review a PR for design-token or CSS architecture issues, create or update a design system, add light/dark themes, or make future UI changes easier for agents.
-
jpoindexter Skill Brand IdealsUse when judging, critiquing, or defending brand identity work and functional checkboxes (recognizable, protectable, consistent) aren't enough to explain why one identity is better; evaluating a proposed logo/system, setting acceptance criteria for an identity project, repositioning a brand, or grading a merger/retail/venture identity against a rubric.
-
jpoindexter Skill Brand ElementsUse when choosing or evaluating the concrete building blocks of a visual identity — deciding which type of logo or mark fits a brand (wordmark, letterform, pictorial, abstract, emblem, dynamic), naming a company or product, judging whether a name or tagline is strong, or picking whether a brand needs a character. Reach for it whenever the question is 'what type of mark/name/tagline should this be' rather than how to run the identity process.
-
martian56 Bundle Design SystemUse when starting a frontend or working on its look and feel, to establish and enforce a DESIGN.md-driven custom design system as the single source of truth for tokens, components, and icons. Make any generated UI (including 21st.dev Magic output) conform to DESIGN.md.
-
full-stack-skills Bundle CLI Ascii Logo生成 CLI 的 ASCII 艺术 Logo/Banner(支持 box drawing 边框、█ 块字符、ANSI 24-bit 渐变色)并提供可运行脚本与集成代码。适用于“做一个像 Spec Kit CLI 的终端 Logo / 彩色 ASCII banner / figlet 风格标题 / CLI 启动欢迎页”等需求。
-
full-stack-skills Bundle Ascii CLI Logo BannerEntry point for ASCII CLI banners. Choose the Python built-in font skill or the figlet.js/FIGfont skill depending on needs.
-
full-stack-skills Bundle Ascii CLI Logo Banner PythonGenerate copy-pastable ASCII banners with a built-in font (no external font deps), including compact fallback and optional ANSI 256 coloring for the logo.
-
full-stack-skills Bundle Ascii Terminal Animation PackPlan and generate terminal ASCII animations/screensaver-style output (FPS, refresh rules, loop policy, low-flicker guidance), with a static poster frame and an optional local demo script.
-
full-stack-skills Bundle Ascii CLI Logo Banner FigletjsGenerate TAAG/FIGlet-style ASCII art banners using figlet.js (FIGfont spec), with layout controls (horizontal/vertical layout, width, whitespaceBreak) and optional ANSI 256 coloring.
-
gul-labs Bundle Craft UXThe Craftsman standard for UI/UX — design tokens, component patterns, pixel-perfect standards, Tailwind/React implementation, motion craft, an AI-tells anti-pattern catalog, and a two-pass review protocol (static review + live browser audit). Use this whenever designing, building, reviewing, auditing, redesigning, or polishing UI — a component, page, dashboard, landing page, modal, form, or layout; standing up or hardening a design system; checking spacing, typography, color, motion, or accessibility; or hunting AI-generated "tells". Trigger even on "make this look better", "fix the styling", "audit my design tokens", or "test it in the browser" without naming a tool or framework. App architecture (state, data fetching, bundles, routing) → craft-frontend. Does NOT fire on backend, database, CI/CD, or infra requests, or UI-free code-quality asks.
-
mshadmanrahman Bundle UI UX Pro MaxUI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
-
marmelab Skill Update BrandingRebrand Atomic CRM — change the application logo (the wordmark in the header and on the login/signup pages) and/or the title/name. Use when the user wants to change, swap, update, or rebrand the CRM logo or title. Handles the two light/dark-mode logo variants, the three places the title is hardcoded, the config that points at them, and — optionally — the browser favicon and PWA app icons.
-
quan0715 Bundle Carbon BuilderCarbon Design System expert for React and Web Components. Use for: Carbon components (Button, Modal, DataTable, etc.), IBM Products UI, Carbon Charts (React/Angular/Vue/Svelte/vanilla JS), Carbon icons and pictograms, Carbon design tokens and IBM Plex font, Carbon usage and accessibility documentation, AI Chat / watsonx integration, or any Carbon code generation.
-
sugatoray 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.
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 architectural-relief-poster, ui-design-token-refactor, everyday-user-manual. 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.