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.
-
modbender Bundle Seedream ImagegenGenerate high-quality images using Seedream 4.5 API (Volcengine/火山引擎). Supports text-to-image, image editing, multi-image fusion, and sequential image generation. Triggers include requests like "generate an image", "create a picture", "make a poster", "edit this image", "生成图片", "画一张", "做一个海报", image generation tasks, or any visual content creation request. This skill crafts optimized prompts based on user intent and then calls the Seedream API. Requires ARK_API_KEY environment variable.
12 -
modbender Bundle Hacker News PosterPost, comment, and interact on Hacker News. Use when the user asks to submit a Show HN, post a story, comment on an HN thread, edit a comment, or update an HN profile. Requires HN_USERNAME and HN_PASSWORD environment variables. Persists session cookies to ~/.hn_cookies.txt (configurable via HN_COOKIE_FILE env var).
12 -
modbender Skill X PosterPost to X (Twitter) using the OpenTweet API. Create tweets, schedule posts, publish threads, upload media, access analytics, and manage your X content autonomously.
12 -
modbender Bundle Sketch Illustration插画图片生成技能,支持多种手绘风格。使用 Imagen 3(ZenMux API)生成插图,适合流程图、功能说明、PPT配图、教程配图等场景。支持三种风格:A) Sketch 极简手绘风(Notion/Linear 风格,简笔人物,冷淡低饱和);B) Watercolor 奶油彩铅水彩风(暖色调,纸纹彩铅,适合PPT讲义);C) Flat Vector Retro 扁平矢量复古风(黑色轮廓线,几何简化,复古配色,适合NotebookLM PPT/课程封面)。生成后自动上传发送到飞书。当用户要求生成插画、配图、手绘风格图、流程示意图、产品插图、PPT配图时触发此技能。
12 -
modbender Bundle PaperbananaGenerate publication-quality academic diagrams, methodology figures, architecture illustrations, and statistical plots from text descriptions using the PaperBanana multi-agent AI pipeline. Also evaluate diagram quality against reference images. Use when: (1) user asks to generate, create, or make a research diagram, methodology figure, system architecture illustration, pipeline diagram, or framework figure, (2) user asks to create a statistical plot, bar chart, or data visualization from CSV/JSON data, (3) user asks to evaluate or score a generated diagram against a reference, (4) user asks to refine or improve a previously generated diagram. NOT for: analyzing existing images, general image generation (non-academic), or chart/graph discussions without explicit generation intent.
12 -
modbender Bundle Nano Banana Prompting SkillTransform natural language image requests into optimized structured prompts for Gemini image generation. Automatically detects style and builds the perfect prompt — cinematic, illustration, anime, 3D, watercolor, product, and more.
12 -
modbender Bundle Style Guide GeneratorGenerate comprehensive website style guides and design systems from URLs, screenshots, and existing documentation. Use this skill when users ask to create a style guide, design system documentation, brand guidelines document, or design specification from a website, app, or existing materials. This skill produces professional PDF outputs following industry-standard style guide structure.
12 -
modbender Skill Wavespeed Seedream 45Generate and edit images using ByteDance's Seedream V4.5 model via WaveSpeed AI. Supports text-to-image generation and multi-image editing with custom resolutions up to 4096x4096. Features enhanced typography for posters and logos. Use when the user wants to create or edit images with high-quality text rendering.
12 -
modbender Skill Character Design SheetCharacter consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art, illustration, animation, comics, visual novels. Triggers: character design, character sheet, character consistency, character reference, turnaround sheet, expression sheet, character art, consistent character, character concept, reference sheet, character creation, oc design, character bible
12 -
modbender Bundle Design System CreationComplete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
12 -
modbender Bundle Design System PatternsFoundational design system architecture — token hierarchies, theming infrastructure, token pipelines, and governance. Use when creating design tokens, implementing theme switching, setting up Style Dictionary, or establishing multi-brand theming. Triggers on design tokens, theme provider, Style Dictionary, token pipeline, multi-brand theming, CSS custom properties architecture.
12 -
modbender Bundle Gemini Image GeneratorGenerate, edit, and compose images using Gemini models. Activate when user asks to generate images, draw, create logos/posters/icons/banners, edit/modify photos, combine images, or any image creation task. 画图、生成图片、做图、P图、修图、合成图、做logo、做海报、做图标、做封面、品牌视觉、Nano Banana、Banana。
12 -
modbender Bundle Loading State PatternsPatterns for skeleton loaders, shimmer effects, and loading states that match design system aesthetics. Covers skeleton components, shimmer animations, and progressive loading. Use when building polished loading experiences. Triggers on skeleton, loading state, shimmer, placeholder, loading animation.
12 -
modbender Bundle Menu Design GenerationGenerate professional restaurant, cafe, and bar menu designs using each::sense AI. Create print-ready menus, digital displays, QR code menus, and seasonal specials with stunning food photography and elegant typography layouts.
12 -
modbender Bundle Design System ComponentsPatterns for building design system components using Surface primitives, CVA variants, and consistent styling. Use when building reusable UI components that follow design token architecture. Triggers on Surface component, CVA, class-variance-authority, component variants, design tokens.
12 -
modbender Bundle Distinctive Design SystemsPatterns for creating design systems with personality and distinctive aesthetics. Covers aesthetic documentation, color token architecture, typography systems, layered surfaces, and motion. Use when building design systems that go beyond generic templates. Triggers on design system, design tokens, aesthetic, color palette, typography, CSS variables, tailwind config.
12 -
modbender Bundle Openclaw X Article Cover GeneratorGenerate OpenClaw-themed X (Twitter) article cover images with fixed composition: lobster logo on right quarter, text zone on left three quarters.
12 -
modbender Skill Build In PublicAutomate your
12 -
mblode Bundle UI DesignDesigns and builds React/Next/Tailwind UI and audits visual and interaction defects. Use when asked to "build a landing page", "extract our design system", "add dark mode", "make this responsive", "remove UI slop", or "audit this component". For product decisions use product-design; for browser measurements use ui-verification; for motion use ui-animation.
-
nexu-io Skill Figma UseRun Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.
-
xy-showing Bundle Page ClawUse when the user wants to turn a page-story markdown file (page-story-*.md) into a polished static HTML page. Trigger for: personal pages, academic homepages, portfolio pages, profile pages, any request to build a page from a structured markdown brief. Runs the full pipeline automatically: design context gathering, design system, implementation plan, build, and quality pass.
-
bitjaru Skill Ss ReferenceCompile screenshots, URLs, Figma exports, or an existing UI into a project-local StyleSeed output grammar with evidence, tokens, confidence, anti-patterns, and a validation screen. Use when the user supplies a design reference that StyleSeed does not already model.
-
richtabor Skill Red PenA strict editorial reviewer that checks writing principles inspired by George Orwell's "Politics and the English Language" rules and Matthew Butterick's Practical Typography. Use this skill whenever the user says "red pen", "check my prose", "edit this for clarity", "typography check", "tighten this up", "review this draft for style", or wants a rigorous line-edit focused on cutting flab, killing dead metaphors, fixing passive voice, and correcting typographic errors like straight quotes, wrong dashes, and double spaces. Also use when the user asks you to be a "tough editor", "strict editor", or "copy editor", or wants feedback on prose quality rather than content or structure.
-
nexu-io Skill Minimax PDFGenerate, fill, and reformat PDFs with a token-based design system and 15 cover styles. Useful for branded PDFs, e-guides, and reports.
-
oaker-io Bundle Wewrite VisualWeWrite 视觉模块:为公众号文章生成封面和必要的内文配图,或只交付提示词。触发词: 封面图、公众号配图、给文章配图、换封面。通用绘图和 logo 设计不触发。
-
openlair Skill Aris Pixel ArtGenerate pixel art SVG illustrations for READMEs, docs, or slides. Use when user says "画像素图", "pixel art", "make an SVG illustration", "README hero image", or wants a cute visual.
-
yub369302-cyber Bundle Gc Minimal Zine Poster V0 1Generate Minimal Zine Poster v0.1 poetic paper-poster prompts and the matching generated image. Use when the user gives a theme, sentence, object, mood, article idea, photo, or content brief and wants a quiet Japanese/Korean zine-like editorial poster with large negative space, aged paper texture, experimental typography, restrained color accents, and a generated bitmap image.
-
iofficeai Skill Morph Ppt 3d3D Morph PPT — extends morph-ppt with GLB model insertion, cinematographic camera, model-content layout, and enriched visual design system.
-
nexu-io Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.
-
wuyoscar Bundle Gpt ImageUse this skill whenever a user asks to generate, create, draw, render, or edit images with GPT Image 2 / gpt-image-2, text-to-image, reference-image editing, inpainting, posters, typography, Chinese text, UI mockups, diagrams, or gallery prompts. Analyze the user's prompt, search the bundled Reference Gallery/craft files for matching design patterns, confer on direction when useful, then call the packaged `gpt-image` CLI or bundled `scripts/generate.py`. Do not write new image-generation code unless explicitly asked to modify this repo.
-
first-fluke Bundle Oma FrontendFrontend specialist for React, Next.js, Angular, TypeScript with FSD-lite architecture, shadcn/ui, and design system alignment. Use for UI, component, page, layout, CSS, Tailwind, shadcn, Angular, and RxJS work.
-
mblode Bundle Typography AuditAudits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.
-
nexu-io Skill Brand GuidelinesApply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.
-
nroadley Bundle Creating Oneshot Landing PagesDesigns and builds video-driven parallax hero landing pages with smooth video scrubbing, progress-locked typography, and clean navigation. Powered by Gemini Omni and Nano Banana.
-
daymade Skill Frontend Visual QAAudits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find typography, wrapping, overlap, overflow, responsive, route, overlay, map, transient-state, data-visualization, browser-output, file-dialog, PDF/print, or Electron-shell defects, or to compare a rendered artifact with a visual reference. Do not use for greenfield UI design, extracting a design system from screenshots, general QA-program setup, or nonvisual code debugging.
-
heygen-com Bundle Motion GraphicsA short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.
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 seedream-imagegen, hacker-news-poster, x-poster. 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.