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.
-
wjgoarxiv Bundle Frontend DesignAward-winning frontend design skill producing hand-crafted, human-quality interfaces. Generates landing pages, dashboards, web apps, components, and posters with distinctive typography, bold color systems, intentional motion, and spatial compositions that look designed by an expensive agency — NOT generic AI output. Use this skill whenever the user wants a landing page, dashboard, web app, component, poster, or any frontend UI. Also use when user asks for "beautiful", "premium", "award-winning", "stunning", or "polished" frontend; wants HTML/CSS/React/Vue/Svelte UI; mentions "design" with frontend context; wants to build a website; says "make it look good" or "make it pretty"; asks for UI that doesn't look like AI generated it; mentions "anti-slop" or "no AI aesthetic"; wants to "beautify", "style", or "redesign" an existing UI; asks for a "modern", "professional", or "polished" website — even if they don't explicitly mention design quality. Make sure to use this skill for ANY frontend creation task. DO NOT T
-
wnby Bundle Paper Spirit ZineTransform a user-supplied photo into a tactile Paper Spirit Zine poster where the original photograph remains emotionally primary and the lower paper field becomes a source-derived living afterimage: ridge, shoreline, shadow, wind trace, breath mark, or only-if-earned animal-like vessel. Use for photo-to-zine editorial posters, paper afterimages, photographic memory specimens, Douyin-ready art series, and portrait or landscape images that need quiet source-derived abstraction without forcing decorative animals. For people-led photos, preserve the human subject and place a recognizable source-derived human cue inside any lower vessel.
-
wrsmith108 Bundle Visual Prompt CoachDesign visuals for technical course materials. Applies Dan Roam, Mayer's multimedia principles, C4, cognitive load theory, and Gestalt/CRAP to pick the right visual type and tool (Mermaid or Gemini/Nano Banana), then returns a ready-to-paste prompt plus framework rationale. Use when the user says any of design a visual, course diagram, illustration prompt, infographic for lesson, visualize this concept, what diagram should I use, help me prompt an image, visual for my course, diagram for a lesson.
-
wyuee912-ops Bundle Sai Poster StudioTurn a line of text or a post into a finished, on-brand Sai/Simular poster. 11 brand templates (event, talk, benchmark, launch, hackathon, editorial, mixer, enterprise…), every social size (Instagram, LinkedIn, X), a free-form editor (align, rotate, fonts, background patterns, keyword highlight), and print-resolution PNG/SVG export. No API keys — Claude writes the brief, the local Vite app renders it in the browser. Triggers: sai poster, simular poster, poster studio, make a poster, social graphic, instagram poster, linkedin poster, launch poster, event poster, benchmark poster, sai social, simular social.
-
mouse-lin Bundle Frame SmithBuild never-cheap, motion-crafted promo videos as Remotion compositions — cinematic HyperFrame-style clips (3D poster cubes, capsule theme-flips, architecture data-pulse, particle-burst photo albums) and vertical short-video for 抖音/小红书/视频号. frame-smith is the DIRECTOR, not the renderer: it reads the brief, sets the register (landscape cinematic vs. vertical short), picks ONE effect engine done at 100%, lays a beat timeline, writes the .tsx, and registers it in the Remotion Root. It runs ON TOP OF a video runtime — it needs the `hyperframe` OR the `remotion` skill installed, checks for them FIRST (§0), and guides install if neither is present. Ships a motion craft floor (30fps, second→frame helper, S-scale for vertical, 抖音 safe zones, easing library, export三件套), an effect-engine catalog lifted from shipped HyperFrames, a beat-timeline architecture, and a motion anti-slop blacklist (no everything-fades-up, no linear easing, no janking engine). Supports verb commands (craft · env · beats · engine · restage · slo
-
arvindrk Bundle Linear Design SystemMaintain, extend, and improve the Linear design system. Add new UI components, modify design tokens, validate consistency, and ensure all components follow Linear's design principles and aesthetic guidelines. Use when adding components, updating tokens, validating design system usage, or migrating components to the design system.
-
fldicoahkiin 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.
-
zethrise Bundle Readydesign SkillForce UI work onto six ready-to-use libraries only: shadcn/ui, Ant Design, Kokonut UI, Motion (motion.dev), Bklit (bklit.com), and sashimi UI. Web-fetch each official site one-by-one and install the real components from those pages — never invent APIs, class names, colors, or components from memory. Use when building or restyling a UI, scaffolding a frontend, adding components, picking a design system, or when the user says ReadyDesign, ready-to-use components, shadcn, antd, kokonut, motion.dev, framer motion, bklit, sashimi, or runs /readydesign-skill or $readydesign-skill.
-
grenzlinie Bundle Nanobanana Image GenerationUse when the user wants to generate or edit images with Google's Nanobanana/Gemini image models using the official Gemini API shape, or when they need publication-style scientific figures rendered exactly from data with the bundled Python plotting tool. Prefer this skill for text-to-image, image-to-image editing, multi-image reference workflows, attachment-based recreations, exact bar/trend/heatmap/scatter plots, or when the user wants publication-style figures such as materials-science paper schematics. Use it when the user asks for a materials-science figure, journal-style scientific illustration, graphical abstract, mechanism diagram, device architecture, processing workflow, or paper-ready materials figure.
-
tencent Bundle PagxConverts an HTML file/URL or a described visual (poster, card, banner, social post) to a PAGX file, and edits existing PAGX files. Use when the user asks to create a PAGX from a visual description, convert HTML to PAGX, modify/update an existing PAGX, run pagx CLI commands (render, verify, format, layout, bounds, font info/embed, import, resolve, export to SVG/HTML/PPTX, preview in browser, or look up PAGX element attributes and syntax).
-
agentsorg Bundle Design EngineeringLoad when reviewing UI code, designing a component or page layout, picking an easing curve or transition pattern, deciding whether something should animate at all, choosing an avatar/typography/color system, building an OKLCH palette or fixing contrast, writing UI copy or error messages, auditing for AI-default tells, code tells, or a11y misses, making a screen look less generated, consuming a project's DESIGN.md or .design tokens, writing design-system docs for agents, giving feedback through Agentation or a similar annotation tool, asking why a UI feels flat or unfinished, judging when delight earns its weight, deciding whether an interaction should make a sound, designing or generating UI sound effects (ElevenLabs or open-source), syncing sound to animation, scoring a product launch video or deriving its sound stem from the motion, cutting a multi-scene launch video so it reads as one camera move, creating or animating SVG (icons, mascots, logo reveals, video-to-vector), prototyping several directions behi
-
promptadvisers Bundle Document PolisherTransform any DOCX document with world-class brand styling. Choose from 10 premium brand aesthetics (The Economist, McKinsey, Deloitte, KPMG, Stripe, Apple, IBM, Notion, Linear, Figma) to polish documents with professional typography, colors, and formatting. Use when users want to: (1) Apply premium brand styling to documents, (2) Make documents look more professional, (3) Match a specific brand's visual identity, (4) Create polished reports, proposals, or presentations.
-
niuyupeng Bundle Cns SkillsEdits, plans, outlines, drafts, translates, polishes, peer-reviews, and optimizes titles for scientific manuscripts and research papers targeting journals or top conferences. Use for an SCI manuscript, Review outline, author-led first draft, manuscript planning, evidence matrix, Chinese-to-English academic writing, grants, rebuttals, scientific title optimization, claim/citation/DOI audits, figures, three-line tables, graphical abstracts, clean-copy audits, and DOCX/PDF/LaTeX QA. Also match 论文大纲、综述大纲、论文初稿、SCI初稿、写综述、论文框架、选题定位、论文题目优化、SCI标题润色、论文润色、SCI英文润色、学术中译英、审稿回复、参考文献核验、科研图表、论文作图、三线表. Benchmarked to Cell, Nature, Science, AAAI, CVPR, NeurIPS, ICML, and ICLR; preserves evidence and author intent. Excludes generic translation, independent literature search, identifier lookup, raw data analysis, generic illustration, fabricated or undisclosed ghostwriting, and biomedical Q&A without manuscript work. CNS means Cell/Nature/Science. Refuse fabricated evidence, acceptance guarantees, and AI-detector evasion.
-
pc-style Bundle Brand GuidelinesApplies Ferment Kolektiv's official brand colors and typography to any sort of artifact that may benefit from having Ferment's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
-
raju-bd Bundle Oracle Apex Ut UIUse this skill whenever the user wants to generate, style, or reference HTML/CSS that matches Oracle APEX's Universal Theme 42 design system (Vita, Vita Dark, Vita Red, Vita Slate, Iris, Redwood, or Standard Theme Styles). Triggers include: any mention of 'Oracle APEX', 'APEX theme', 'Universal Theme', 'Vita', 'Vita Emerald', 'Theme Roller', 'APEX region/component' (Alert, Card, Interactive Report, Wizard, etc.), or requests to build a dashboard, admin UI, or component that should 'look like APEX' or use APEX design tokens. Also use when asked to create a new custom APEX Theme Style, when styling should use var(--ut-*) / var(--a-*) CSS custom properties instead of hardcoded colors, or when working with files under tokens/ (vita-light.css, vita-dark.css, vita-red.css, vita-slate.css, iris.css, redwood.css, standard.css, vita-emerald.css/.less) or components-reference.md from this package. Do NOT use for generic web design requests with no APEX/Universal Theme context.
-
ssheleg Bundle Sheleg DesignUse when deciding how something LOOKS or MOVES — cinematic landing pages and hero sections, particle/WebGL, scrubbed motion, drift, dashboards, admin or internal tools, mobile screens, chat or agent interfaces, tokens, palettes, typography and the Figma border. Triggers - "design a landing" / "дизайн лендинга", "build a landing page" / "сделай лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens, style pack" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables" / "переменные фигмы, фигма в код", "mobile screen" / "мобильный экран", "palette, colors" / "палитра, цвета", "typography, font" / "типографика, шрифт", "how it looks, make it prettier" / "выглядит, красиво, красивее", "visual reference" / "визуальные референсы", "investor deck as a web page" / "веб-презентация", "redesign" / "редизайн, свёрстай, вёрстка". Not for structure, copy, backend behavior, or .pptx decks.
-
team-reflect Bundle Reflect DesignUse this skill to generate well-branded interfaces and assets for Reflect (reflect.app, the minimalist networked note-taking app), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
-
tjboudreaux Bundle Svg GeneratorGenerate SVG images using the Quiver AI API. Use when the user needs to create SVGs from text descriptions (logos, icons, illustrations, calligraphy, diagrams) or convert raster images (PNG, JPG, WebP) to SVG vector format. Triggers include "generate an SVG", "create a vector image", "make an SVG logo", "convert to SVG", "vectorize this image", or any AI-powered SVG creation task.
-
coleam00 Bundle Visual DiagramsProfessional diagram and architecture visualization design system for Remotion video compositions. Use when building: architecture diagrams, hub-and-spoke layouts, flowcharts, pipeline visualizations, comparison panels, layered stacks, data flow diagrams, or any scene with connected boxes/nodes/arrows. Ensures YouTube-grade visual quality with gradient fills, depth shadows, glow effects, brand logo icons, and animated connections. Triggers on: "diagram", "architecture", "flowchart", "pipeline", "hub and spoke", "data flow", "system diagram", "connected boxes", "infrastructure layout", "tech stack visualization".
-
moecui22 Bundle Accessible SlidesAudit and fix slides, posters and figures so people with vision loss can actually read them: colour blindness, low contrast, and text too small to read from the back of the room. Use when making, reviewing or fixing a presentation, conference poster or chart, and whenever accessibility, colour blindness, contrast, readability, WCAG, Section 508 or AODA come up.
-
pablopunk Skill Design SystemThe single source of truth for Fractal's UI — design principles, theme tokens, the material/glass system, component primitives, motion, and the opinions behind them. Use whenever you touch anything visual in this app; adding or restyling a component, building a modal/dialog/popover/menu, working in src/styles/global.css, adjusting colors/spacing/radii/typography, wiring a new theme, tuning the glass (opacity + blur) mode, fixing visual seams or washed-out surfaces, or deciding how a surface should look in light/dark/glass. Triggers include design system, design tokens, theme, dark mode, light mode, glass, glassmorphism, liquid glass, backdrop blur, translucent, modal, dialog, popover, command menu, card, button, input, surface, material, accent color, spacing, radius, hover/active/focus states, terminal theme, and "make this look better / more polished / more consistent".
-
wei Skill Add IconAdd or update supported language, framework, library, tool, or platform icons in Socialify. Use when a request involves adding a new icon/logo, mapping a display name to a Simple Icons entry or a custom icon, and updating the language options list used in the UI.
-
automattic Skill Site SpecificationExtract comprehensive site specifications from simple descriptions. Use when analyzing a user's theme request to determine site type, audience, tone, layout requirements, and typography.
-
czlonkowski Bundle Opencoo DesignUse this skill to generate well-branded interfaces and assets for opencoo, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
5.7k -
uditya-kumar Bundle QuarkdownAuthor Quarkdown (.qd) source files for typeset documents — books, articles, reports, presentations, wikis, and PDFs. Use this skill whenever the user wants to write or edit a Quarkdown document, asks about Quarkdown syntax (functions starting with a dot like `.doctype`, `.box`, `.row`, `.foreach`), needs help producing slides/paged/plain/docs output, wants a programmable Markdown alternative to LaTeX with high-quality typography, asks how to build PDFs from Markdown-like sources, or mentions `.qd` files. Prefer this over plain Markdown whenever the user is working in a `.qd` file or has Quarkdown installed.
-
tetherto Skill Use UI KitUse whenever creating or editing UI in this repo — React components, modals, dialogs, forms, buttons, inputs, typography, styling, icons, or any .tsx/.jsx work. The repo uses `@tetherto/pearpass-lib-ui-kit` as the single source for UI primitives; do not roll custom ones. Load this before suggesting any UI change, especially when touching src/action/pages, src/action/containers, src/shared/containers, or src/contentPopups/views.
-
thmsgo18 Bundle Presentation ForgeBuild beautiful, self-contained HTML presentations (slide decks) with the bundled Presentation Forge engine: one HTML file per slide, bundled into a single portable index.html with presenter mode, progressive reveal, and swappable themes. Use this whenever the user wants to create, design, write, or build a presentation, slide deck, talk, or "slides" as HTML or for the browser; wants a web-based or single-file shareable deck; wants to turn a topic, brief, outline, notes, or a document into slides (technical talks AND any other subject); or wants to recreate a brand/PowerPoint look as a reusable theme, from a .pptx, from image(s), or from a text description, optionally integrating a company logo. Produces HTML decks, not native PowerPoint files.
-
vercel-labs Bundle Geist Learning LabBuild explorative, interactive learning experiences as Next.js apps using the Geist design system. Use when creating tutorials, explorable explanations, interactive lessons, code sandboxes, quizzes, or any educational UI. Covers the Learning Loop pedagogy, 23+ learning component patterns, progress tracking, spaced repetition, and Bret-Victor-style interactive exploration — all with Geist's dark-first minimal aesthetic.
28.7k -
vermont42 Skill IOS Design Agent SkillAudit and improve iOS/SwiftUI app aesthetics — typography, color, spatial composition, motion, and atmospheric depth. Use when reviewing UI design, critiquing screenshots, or improving SwiftUI view code beyond functional correctness.
Audited -
vibeflowing-inc Bundle VibefigmaConvert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).
-
victoryoalli Bundle Stripe DesignCreate clean, professional, accessible frontend interfaces following Stripe's design principles applied to the project's own color palette (color-agnostic). Use when building SaaS dashboards, fintech apps, landing pages, or interfaces needing Stripe's polish - precise typography, layered shadows, subtle animations - without Stripe's brand colors. Triggers on "Stripe-style", "fintech design", "professional SaaS UI".
-
tristan-mcinnis Bundle Apple Hig DesignerDesign Apple-style iOS/macOS/visionOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, system colors, proper accessibility, and platform-appropriate patterns. Supports Liquid Glass (iOS 26+), adaptive layouts, and multi-platform design. Use this skill whenever the user asks for Apple-style UI, iOS/macOS/watchOS/tvOS/visionOS interfaces, HIG-compliant components, SF Symbols integration, or anything involving Apple design language — even if they just say "make it look like an iPhone app" or "native iOS feel". Also trigger for requests involving widgets, notifications, Live Activities, onboarding flows, settings pages, or navigation patterns in an Apple context.
-
visactor Bundle Vchart Development AssistantVChart图表库专家助手,擅长创建、配置和调试VChart图表。当用户需要:生成柱状图/折线图/饼图等图表;修复图表不显示/点击事件不触发等问题;从图片或Figma设计稿还原图表样式;实现点击获取数据/数据动态更新/图表联动/导出图片/主题切换等交互功能;配置图例/坐标轴/标签/tooltip等组件时使用。即使用户没有提到"技能"或"VChart"这个词,只要涉及图表开发就触发。
-
vxcozy Bundle Jobs Ive Design ArchitectPremium UI/UX design architect with Steve Jobs and Jony Ive's design philosophy. Audits every screen, component, and pixel of an app, then delivers a phased design plan for approval. Use when: "audit the design", "design review", "UI audit", "make this feel premium", "polish the UI", "run the Jobs filter", "check visual consistency", or any request to improve visual quality, spacing, typography, hierarchy, or feel without changing functionality. Does NOT write features or touch functionality. Proposes everything. Implements nothing without approval.
-
wangnov Bundle Gpt Image 2 SkillThis skill should be used when the user asks to "generate an image", "create a logo", "draw an icon", "edit this photo", "change background to transparent", "remove background", "use GPT image", "use Codex to draw", "用 GPT image 生成图片", "用 Codex 画图", "帮我生成一张图", "改成透明背景", "把这张图编辑一下", or any prompt-to-image or reference-image-edit task that benefits from a structured CLI returning JSON results and JSONL progress events. Supports OpenAI `gpt-image-2` (via `OPENAI_API_KEY` or OpenAI-compatible base URL) and Codex `image_generation` (via `~/.codex/auth.json`) under one command surface, with masks, custom sizes up to 4K, transparent backgrounds, and a raw request escape hatch.
-
wangpf1129 Bundle Design PromptsApply curated design style prompts to frontend projects. Use when the user wants to build or style a UI in a specific aesthetic (e.g., "use glassmorphism style", "make it brutalist", "cyberpunk design", "design in Art Deco style"). Supports 30 distinct design styles from designprompts.dev. Each style includes a comprehensive, ready-to-use design prompt covering layout, colors, typography, spacing, effects, and component patterns.
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 frontend-design, paper-spirit-zine, visual-prompt-coach. 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.