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.
-
humbleteam Bundle Ascii WireframesSketches three genuinely different layout hypotheses as ASCII wireframes before any hi-fi design work starts. Use when a user asks to "show me some layout options", "sketch a few wireframes", "give me 3 versions of this screen", "explore layouts before Figma", or "ascii wireframe this". Do not use for pixel-faithful HTML mockups built from a reference screenshot - use html-mockup for that.
-
iart-ai Bundle Generative IllustrationThis skill should be used when the user asks to "make an animated illustration", "animate an illustration", "make a generative motion piece" / "动态平面", "turn AI-generated art into something that moves", "make a poetic or ambient motion piece / motion poem", "make a visual metaphor", or "combine AI-generated visuals with code-driven motion". Covers generating isolated illustration assets with AI, compositing them as sprites, frame-accurate deterministic rendering, and the craft of expressive, concept-driven motion. NOT for data charts (use chart-animation), pure text (use kinetic-typography), or 3D/particles (use webgl-animation).
-
ibadwi Bundle Arabic Rtl Fixer AI SkillCreate, edit, repair, and validate Arabic or Arabic-English content with logical-order Unicode, native RTL semantics, mixed-language handling, Arabic-capable typography, and format-specific QA. Use for Word, PowerPoint, PDF, web, spreadsheet, image, and reusable Arabic-copy tasks; pair it with the skill for the requested output format.
-
guilhermerodz 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.
-
gusbavia Bundle Pbi ThemeGenerate complete Power BI Desktop theme files from brand colors. Creates production-ready JSON themes with branded canvas backgrounds, CSS design tokens, DAX HTML visual examples, and A4 PDF design system documents. Runs standalone or chained with pbi-lifecycle (auto-saves into the client's Global Theme/pbi-theme/ folder when invoked inside a lifecycle-managed project). Use when user asks to create a Power BI theme, PBI theme, dashboard theme, report branding, or Power BI color palette. Triggers on "create theme", "Power BI branding", "theme generator", "branded dashboard". Supports light/dark mode, 5 canvas layouts with logo embedding, WCAG accessibility, and 21 shape presets. Do NOT use for general web design, CSS frameworks, or non-Power BI visualization tools.
-
hamelsmu Skill Design ResearchConduct comprehensive design research on any website or web application using a team of browser-automation agents. Use when asked to analyze, audit, or document a website's design system, UX patterns, layout, typography, colors, components, accessibility, responsive behavior, and technical implementation.
-
hamsterider-m Bundle Long PosterCreate vertical long-form posters from any content. Use this whenever the user asks for a 长图, long poster, vertical infographic, social media poster, WeChat/Feishu/Xiaohongshu/Bilibili image, event/course/product promo long image, or asks to turn notes into an HTML + PNG poster. The skill must research style directions live, show 3 clearly different demos first, open the preview for user judgment, then produce final editable HTML plus high-resolution PNG.
-
handsontable Bundle Figma Tokens SyncUse whenever a user of the handsontable-figma project pastes or updates `tokens.json`, asks to "add tokens", "sync", "audit", "validate" the tokens, regenerate themes, or mentions anything about missing/new design tokens, pagination buttons, notification tokens, or similar. Also trigger for questions about what's different between `tokens.json` and `tokensKeys.js`, or when the user reports that a design change isn't showing up in generated CSS. Don't wait for the user to explicitly say "skill" — the moment someone says they updated `tokens.json`, run this.
-
edwinustb Bundle Scenes Gathered Zine V1 3Transform a user-supplied photo into a Gathered Scenes Zine poster that preserves the source aspect ratio by default, anchors truthful photography inside a spacious source-derived abstract illustration field, turns every supporting fragment into a low-detail visual echo traceable to the source rather than unrelated decoration, integrates one high-chroma hue as compositional structure, and preserves a visibly hand-torn fibrous photo-to-paper edge. Use when the user wants a tactile minimal paper collage with simplified illustration, active negative space, restrained English-default, Chinese, or bilingual micro-text, and an unmistakable but quiet torn-paper boundary.
-
egoist Skill Gpt ImageGenerate or edit images with OpenAI's gpt-image-2 model via the gpt-image CLI. Use this skill whenever the user wants to create any kind of image — artwork, illustrations, logos, icons, photos, banners, diagrams-as-art, wallpapers, product mockups — or wants to edit, retouch, restyle, combine, or add/remove things from an existing image, even if they don't name the model. Trigger on phrases like "generate an image", "make a picture of", "draw", "create a logo", "edit this photo", "remove the background object", "change the style of this image".
-
ehmo Bundle Typecraft GuideUse for typography evaluation, cleanup, and composition guidance across web, iOS, Android, print, and presentations.
-
emalorenzo Bundle Tech Lead WebTech Lead for web development projects. Orchestrates a fleet of Opus agents to build pixel-perfect websites from Figma designs. Use with /tech-lead-web to start a new project.
-
erenlokman Bundle ImagegenMaster UI Designer & Asset Generator with Design Memory and Pencil MCP integration. Combines AI image generation (DALL-E via Codex CLI), design system intelligence, persistent design memory (NotebookLM), and Pencil design tool integration for end-to-end visual asset creation with cross-project learning. Capabilities: - Generate UI assets: hero images, OG images, thumbnails, banners, icons, illustrations - Analyze Pencil designs and generate matching assets - Apply UI/UX best practices (WCAG, Apple HIG, Material Design) - Create design-system-aligned visuals with correct color palettes and brand consistency - Batch generate multiple asset variations - Insert generated assets directly into Pencil .pen files - DESIGN MEMORY: Remember every generation — prompts, styles, colors, feedback — across projects and sessions via NotebookLM. Query past decisions, reuse proven styles, maintain brand consistency over time. Use when asked to: generate/create images, design assets, make visuals, produce UI graphics, create il
-
eriemon Bundle Agents Md GeneratorUse when creating, updating, compressing, reviewing, or verifying AGENTS.md and other AI coding-agent rules; when a managed root AGENTS.md is missing, malformed, stale, or version-incompatible; when the user explicitly mentions AGENTS.md, agent rules, or scoped AGENTS.md; when a managed skill README needs a functional illustration set; or when a request about the current workspace, repository, or work folder is a planning request and therefore requires a root AGENTS.md check first.
-
esthersjw Bundle Collage Art DirectorAnalyze one to six user photos and art-direct expressive collage posters with deliberate image–type hierarchy, theme-specific materials, refined typography, and structurally different concepts. Use when a user asks to make, generate, redesign, evaluate, or iterate a collage, poster, scrapbook image, editorial social graphic, multi-photo composition, or a collage-generation product workflow. Also use when results feel templated, overly neat, generic, “AI-looking,” or when the relative roles of photo, subject, background, type, and decorative material need to be decided.
-
jovd83 Bundle Design Fidelity AuditorAudit implemented UI code for design-system drift. Use to verify CSS, Tailwind, JSX, TSX, Vue, or Angular components honor the project's canonical design tokens, typography, spacing scale, interaction states, and visual conventions.
-
juanjuandog Bundle Finsight ProductProduct design system for the FinSight AI evidence-driven equity research workspace.
-
julianoczkowski Bundle HTMLProduce a single self-contained .html file instead of a markdown wall when the answer has shape — side-by-side comparisons, a timeline, a diagram, a sortable list, or a deck. This skill should be used when the user invokes /html or any of its patterns (options, plan, pr, codemap, tokens, motion, diagram, deck, explainer, status, editor), and when a request implies a structured artifact — phrases like "show me my options for X", "write the plan", "do a post-mortem", "make a deck from these notes", "let me triage these", "render the design system", "explain how X works", "diagram the flow". Prefer this skill even when the user says "write me a doc" or "summarize" — HTML is often the better surface, and the user can always ask for markdown if they prefer.
-
ethanweber Bundle Make PosterGenerate an HTML conference poster from a paper and project website, printable to PDF
-
eugeniughelbur Bundle Gpt Image CookbookUse this skill whenever a user asks to generate, create, draw, render, or edit images with AI image models — gpt-image-2, DALL-E, Google Imagen, Flux, or others. Covers text-to-image, reference-image editing, inpainting, posters, typography, UI mockups, diagrams, and curated gallery prompts. Search the bundled cookbook references for matching patterns, confer on direction when ambiguous, then call the packaged `gic` CLI. Do not write new image-generation code unless the user explicitly asks to modify this repo.
-
evolinkai Bundle Generate Z ImageGenerate images using the Evolink Z-Image-Turbo API. Use when the user asks to create, generate, or produce an AI image, illustration, or artwork. Trigger phrases: "generate an image", "create a picture", "make an illustration", "draw", "image of", "picture of".
-
fancyboi999 Bundle Claude Style IllustrationCreate original raster editorial illustrations inspired by Claude's warm humanist visual language: one clear metaphor, flat solid marker forms with hand-drawn wobble, spacious composition, and muted backgrounds. Use for Claude-style article art, sparse conceptual illustrations, and related visual series.
-
blitzsicht Bundle FalzmarkeErzeugt Geschäftspost nach DIN 5008:2020 — als Brief und als E-Mail. Briefe (Form A und B) als PDF mit Falz- und Lochmarken, Anschriftfeld für Fensterumschläge, Informationsblock, Briefkopf und Fußzeile aus Absender-Profilen, standardmäßig als PDF/A-2b; dieselbe Quelle auch als E-Mail — eine .eml mit Textteil, HTML-Teil, Anhängen, Signatur samt Logo und nachgemessenem Umschlag. Immer verwenden, wenn ein Brief, Anschreiben, Schreiben, Kündigung, Mahnung, Angebot, Mieterschreiben, Behördenschreiben, Widerspruch, Bestätigung oder "etwas zum Ausdrucken oder Verschicken" gewünscht ist — und ebenso bei jeder E-Mail, Mail oder Nachricht, die verschickt werden soll ("schreib eine E-Mail an …", "Mail an den Kunden", "Antwort an das Amt"), auch wenn DIN 5008 nicht genannt wird. Nie einen Brief als .docx oder frei gesetztes PDF bauen und nie eine E-Mail als frei getippten Text oder selbstgebautes HTML, wenn dieser Skill verfügbar ist. Ebenso zuständig für einen Serienbrief aus einer Datenquelle und für das Zurücklesen e
-
bomkino Bundle Pitchdog IllustrationCreate, rebuild, refine, or audit pitch.dog's tiny editorial visual poems: full-bleed cool pastel fields, sparse imperfect ink, one restrained accent, huge negative space, an ordinary act, and one impossible relationship, with exact human or dog identity when references exist. Use when the user invokes `$pitchdog-illustration`, explicitly requests pitch.dog illustration style, asks for metaphor thumbnails, family-character likeness work, candidate QA, a coherent illustration series, website placement, or final production handover in this system. Do not apply it to unrelated illustration work.
-
jimliu Bundle Doubao MultimodalAsync audio/video understanding with Doubao-Seed (火山方舟 Ark). Handles ASR (plain / per-character timestamps / multispeaker), AST translation, speaker diarization, subtitle alignment, audio-visual captioning, video timeline JSON, technical-blog keyframe selection (with optional transcript hint), and free-form prompts over an audio or video file. Auto-uploads local files to Volcano TOS and auto-downloads remote URLs. Auto-splits videos > 20 min (≤ 50 MB/segment) and audio > 120 min (≤ 50 MB/segment) and merges results. Use when the user wants to transcribe, translate, diarize, caption, pick blog illustration frames, or ask questions about an audio/video file or URL.
23.1k -
jnsahaj Bundle Arcane Print MinimalismApply the Arcane Print Minimalism v0 design system: scholarly, print-like interfaces using paper, ink, typography, borders, whitespace, and restrained engraved illustration.
-
joemccann Bundle Canvas DesignCreate beautiful visual art in .png and .pdf documents using design philosophy. Use this skill when the user asks to create a poster, piece of art, design, or other static visual piece. Creates original visual designs with expert-level craftsmanship, never copying existing artists' work to avoid copyright violations.
-
joeseesun Bundle Qiaomu HTML CoverCreate title-first, fixed-size HTML covers and social carousel cards, then capture them as verified PNG screenshots. Use for HTML封面、网页封面、文章头图、公众号封面、小红书/Instagram/TikTok/X/LinkedIn/YouTube/Pinterest 社交封面、知识卡系列、用户明确要求的结构化 SVG 流程/迁移/对照/循环/数值图、editable HTML cover, multiple cover styles, platform safe zones, or ratios such as 21:9, 16:9, 4:5, 3:4, 9:16, 1:1, 4:3, and 2:3. For a multi-card series without a chosen style, first render three representative style screenshots for selection, then lock one typography, palette and graphic system while varying decoration rhythmically. Default cover mode keeps only the title and truly necessary supporting copy; it never invents branding, years, issue numbers, dimensions, style labels, CTA, diagrams, or webpage-like metadata. Knowledge cards and explanatory SVGs are opt-in only. Do not use for ordinary website/app development, standalone icon/SVG drawing, slide decks, image-only generation, existing-page screenshots, or long scrolling articles.
37 -
joeseesun Bundle Qiaomu Image GeneratorUse when user requests image generation for articles, papers, covers, or social media. Triggers on "配图", "生成封面", "illustration", "小红书配图", "公众号封面", "X封面", or when other skills need images.
37 -
kosthi Bundle Gemini ImageUse when the user requests image generation, illustration, icon, logo, photo, visual content creation, or image editing - any task requiring AI-generated or AI-edited images
-
kourika Bundle Biz Deck DoctorContent diagnosis and audit coach for workplace reports and business proposal presentations (职场汇报, 商业提案, 述职, 项目复盘). Use this skill whenever the user wants to turn raw material (meeting notes, data, reports) into a logically structured outline BEFORE building slides; wants an existing .pptx/.ppt reviewed, audited, diagnosed, or '体检' for logic, design consistency, data credibility, or Chinese typography problems; needs to triage a pile of reviewer or boss feedback (老板意见/评审意见/导师意见) into concrete per-slide fixes; needs help choosing the right chart type for data; or needs a speaker script matched to a deck's timing. Trigger on phrases like '这个PPT怎么样' '帮我看看这份PPT' 'PPT逻辑不清楚' '大纲怎么搭' '老板给了一堆意见改不过来' '这页用什么图表' — even if the user never says 'audit' or 'diagnose' explicitly. This skill owns CONTENT and STRUCTURE, not file generation: pair it with Anthropic's built-in pptx skill (or another pptx-generation skill) to actually create or edit the .pptx file.
-
ksmyl Bundle Nano Banana ProGenerate, edit, and iteratively refine images using Google Nano Banana Pro (Gemini 3 Pro Image). Use this skill whenever the user asks to create, generate, draw, design, or make any kind of image, photo, illustration, thumbnail, icon, logo, diagram, or visual asset. Also use when they want to edit, modify, touch up, or iterate on an existing image, or when they mention Nano Banana, Gemini image generation, or text-to-image. Even casual requests like "make me a picture of..." or "can you create a visual for..." should trigger this skill.
-
khan Bundle Dsg CreationAdd to or edit Khan Academy Design System Guidelines documentation in storybook. Use this skill when researching or making changes to Foundations, Components or Patterns in the design-system-guidelines repo.
-
kaisanetwork Bundle Kn Interface MaestroInterface Maestro: Comprehensive guidance for UX/UI strategy, information architecture, and design systems. Follows a logic-first approach to interface design, focusing on user flows, consistent component libraries, and visual hierarchy. Activate this skill when you need to: (1) Define user flows and interaction logic, (2) Create information architectures or wireframes, (3) Build or refine design systems (typography, semantic colors, atomic components), (4) Ensure absolute consistency and WCAG accessibility, or (5) Design micro-interactions and visual feedback.
-
kantaro4123 Bundle Illustrator AI EditingSafely inspect, edit, repair, and review Adobe Illustrator .ai files on macOS, including Japanese typography, flyer layout, aspect ratio restoration, print review, rendering, and crash recovery.
-
kappaemme-git Bundle Animate Images With ActionwayTurn a still image into a short animated video with Actionway's image-to-video capabilities. Use when Codex is asked to animate a photo, product image, illustration, character, artwork, or other still visual; add camera or subject motion; create a cinematic loop or social clip; or compare and run Actionway image-to-video services with a cost quote before execution.
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 arabic-rtl-fixer-ai-skill, ascii-wireframes, generative-illustration. 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.