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.
-
aizzaku Bundle Aiz InfographicAn infographic skill for AI agents — works inside Claude Code, Codex, Hermes, OpenClaw, Cursor, and any agent host that loads skills. Create professional infographics as self-contained HTML files with PNG exports. Use when the user asks to create, design, generate, build, or make an infographic, data visualization, visual explainer, chart poster, cheatsheet, or pocket guide. Trigger phrases include "make this visual", "turn this into a graphic", "visualize this data", "infographic for X", "cheatsheet for X", or when the user provides structured data (tokenomics allocations, ecosystem/partner lists, timelines, comparisons, step-by-step processes) AND asks for a visual output. Covers tokenomics, ecosystem overviews, game overviews, cheatsheets, airdrop guides, comparisons, and process flows. Do NOT trigger for plain text answers, markdown tables, bulleted summaries, questions asking for advice or explanations about a topic (even when the topic is tokenomics, ecosystem, vesting, etc.), inline chat diagrams, or d
-
ake77-code Bundle Distill DesignDistill a DESIGN.md from a website — crawl and analyze a site's rendered design (colors, typography, spacing, components, signature motifs) and produce a brand-accurate DESIGN.md design-system spec. On request, also generate a token-preview page (preview.html) or a realistic website demo (demo.html). Use when the user gives a URL and asks to "make/generate a DESIGN.md", "extract this site's design system", "capture a brand's visual language", or "turn this website into design tokens".
-
al1enjesus Bundle Instagram PosterPost images to Instagram automatically via Telegram. Generates images with WaveSpeed or uses your own. Bypasses Instagram bot detection using residential proxy. Use when: user wants to post to Instagram, auto-post image, share photo on Instagram, instagram autoposter, schedule instagram post, publish to instagram, post reel image. Requires IG_USERNAME + IG_PASSWORD env vars or a saved session. Needs human-browser skill for residential proxy.
-
albedo-tabai Bundle Image Analysis RouterRoute image-heavy requests into the correct critique workflow, then produce a targeted analysis plus study report. Use when Codex receives one or more images and the user wants structured analysis, style classification, critique, or learning notes for posters, brand graphics, UI screenshots, paintings, illustrations, photographs, interior design photos or renders, building exteriors or urban scenes, infographics or diagrams, product or industrial design images, comics or sequential pages, fashion or styling visuals, sculpture or installation works, game visuals, scientific or medical images, typography-led pieces, presentation/report pages, movie stills, storyboard frames, or mixed visual sets. Trigger on requests such as "分析这张图", "拆一下这组海报", "看看这张摄影作品怎么学", "鉴赏这幅画", "分析这个空间图", "看看这个建筑立面", "拆这个信息图", "分析这个产品外观", "读一下这页漫画", "看看这套穿搭", "分析这个游戏界面", "看看这个医学图", "拆这个字体海报", "帮我看这页PPT", or any case where a generic image summary would be too shallow.
99 -
aldegad Bundle Nano BananaGoogle Gemini image generation skill. Triggers on: 'generate image', 'draw', 'create character', 'illustration', 'nano banana', 'image gen', etc.
-
alfathony Bundle Tanya Warga YuxSimulasikan feedback desain UI dari beberapa persona pengguna yang berbeda, dalam bentuk "think aloud" (bicara sambil mikir) saat mereka menjelajahi tampilan dari atas ke bawah, ditutup dengan rangkuman temuan lintas persona. Gunakan skill ini kapan pun user melampirkan desain UI (screenshot, gambar, atau link Figma) dan minta divalidasi, dicek, diminta pendapat, second opinion, atau feedback dari sudut pandang user/pengguna — bahkan jika mereka tidak secara eksplisit menyebut kata "persona" atau "usability testing". Trigger juga untuk frasa seperti "tanya warga", "coba tanya user", "gimana menurut user awam", atau "validasi desain ini ke beberapa tipe pengguna".
-
alima-max Bundle Prototype To FigmaConverts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype", "break prototype into flows", "Figma specs from code", or wants to make a working prototype legible to non-technical stakeholders. Even if the user just says "put this in Figma" or "make this reviewable" in the context of a prototype, use this skill.
-
fangzhengjin Bundle Photo Evidence LedgerTurn a user-supplied photograph into a restrained editorial evidence ledger: preserve one truthful photo window, then extract exactly three traceable visual facts as labeled geometric, interval, and color specimens on quiet paper. Use for architecture, travel, landscape, street, object, food, and documentary photos when the user wants a clean archival poster, visual field note, source-derived index, or photo-plus-analysis composition without redrawing or filtering the original image.
-
karenlhao Bundle UI UX Pro MaxUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
-
adjacentai Bundle Necl Content PosterTurn one draft into three platform-tuned posts: Telegram (RU), LinkedIn (EN), Threads (EN). 8 hook formulas, anti-AI-marker rules, per-platform structures. Use when the user wants posts across channels — 'write a post', 'cross-post', 'превратить в пост'.
-
aeon-project Bundle Agent PayTrigger this skill when the user expresses intent to generate, create, draw, or render an AI image, illustration, picture, or artwork. Payment is handled automatically via the x402 protocol with USDT on BSC — the user just supplies a prompt. This includes intents such as: - "generate an image of …" - "draw a picture of …" - "create an illustration" - "make an AI image" - "render this scene" - "I want a poster / wallpaper / artwork of …" Also, any request involving x402-protocol crypto payments for AI image generation.
-
aeon-project Bundle AgentosTrigger this skill when the user expresses intent to generate, create, draw, or render an AI image, illustration, picture, or artwork. Payment is handled automatically via the x402 protocol with USDT on BSC — the user just supplies a prompt. This includes intents such as: - "generate an image of …" - "draw a picture of …" - "create an illustration" - "make an AI image" - "render this scene" - "I want a poster / wallpaper / artwork of …" Also, any request involving x402-protocol crypto payments for AI image generation.
-
agentsorg Bundle DesignDiscover, read, follow, update, and verify AgentsORG .design living visual contracts. Use when generating or reviewing UI, restyling, extracting or remixing a design system, fixing design drift, locking tokens, or when a .design / *.design file exists. Triggers on .design, design system, brand, tokens, components, DESIGN.md, restyle, visual identity, UI generation, design drift, remix, bootstrap design, verify design, landing page, dashboard, shadcn theme, design progress, UI review, polish, craft, accessibility.
-
agrimsingh Bundle Bringhurst TypographyApply Bringhurst-style typography principles from The Elements of Typographic Style to editorial pages, web UI, product surfaces, reports, slides, and books. Use when Codex must design, review, or improve hierarchy, measure, leading, spacing, punctuation, typeface selection/pairing, page geometry, and print-or-screen production quality.
-
yugasun Bundle Figma2designFigma design link → complete .design/ directory (DESIGN.md, PAGES.md, COMPONENTS.md, CODE_PATTERNS.md, ICONS.md, brand/, icons/, screenshots)
-
zeroz-lab Bundle Cc DesignHigh-fidelity HTML design and prototype creation. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use when the user mentions Figma, design systems, UI kits, wireframes, presentations, or wants to explore visual design directions. Even if they just say "make it look good" or "design a screen for X", this skill applies.
-
display-dev Bundle VisualizeGenerate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards. Loads on creation intents ("create a plan", "make me an implementation plan", "generate a diagram", "build a slide deck", "draft a recap", "visualize this", "render this as HTML", "make me a status update") and exploration intents ("show me three layouts", "explore document shapes", "compare visual treatments", "explore a new design system", "compare replacement brand directions") and iteration intents ("make this beautiful", "polish this report", "make this less generic", "design this", "theme this", "use my brand", "iterate on this design", "review this artifact", "make this bolder", "make this quieter", "simplify this design", "animate this", "improve the look of", "give this a refresh"). Captures brand from the user's codebase, asking, or live site, then applies it to every artifact.
-
kapishdima Skill Audit TypographyAnalyze your project's typography setup and identify issues
-
usenotra Skill Brand LogosFetch official brand/product/tool logos (Stripe, GitHub, Notion, AWS, Figma, etc.) as clean SVGs from SVGL (svgl.app) — as saved .svg files, inline markup, or installed React components. Check this whenever logos or SVGs come up, e.g. adding brand marks to integration/partner rows, footers, pricing tables, or slides; replacing a blurry logo with a vector; getting light/dark variants; or finding an official logo. Prefer it over hand-writing SVG markup or grabbing random files. Skip for generic UI icons, illustrations, charts, favicons from an existing logo, or designing a brand-new custom logo.
-
arumwu Bundle Design MdReference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography, components, layout, elevation. Use when the user wants UI, a landing page, or a component that matches a specific brand's look; wants to pick a design direction from real design systems; says "like <brand>", "make it feel like Linear / Stripe / Apple"; or needs a concrete design-token starting point before frontend work. Pairs with frontend-design and tailwind-design-system.
-
ascendho Bundle Generate Github CoverAnalyze a GitHub repository and generate PNG-only Logo Mark, Logo Lockup, README Cover, 1280x640 Social Preview, and 16:9 Promo assets. Generate English artwork by default and additional or alternative locales only when explicitly requested or already configured. Use for requests to create, refresh, localize, or standardize project logos, repository banners, Open Graph images, social cards, Covers, or shareable project artwork from repository evidence.
-
chnak Skill FkposterFKPoster 海报构建技能。适用于多种视觉内容创建场景:名片、宣传海报、邀请函、证书、优惠券、菜单、订单小票、社交媒体图片、广告横幅、产品图片、天气卡片、音乐播放列表封面、书籍封面、电影海报、旅游明信片、餐厅菜单、活动海报、个人头像卡片、统计图表等视觉设计。
Audited -
chrislee121 Bundle PDF TranslateTranslates PDF documents to Chinese with professional typography. Extracts text, translates section-by-section into well-structured Markdown, then generates PDF via weasyprint with full CJK support. Use when user asks to translate a PDF, says "翻译PDF", "translate this document", or "pdf translate".
-
clouluo Bundle Private Order Page私人訂購頁產生器。收集品牌素材(名稱、LOGO、配色、商品、價格、寄送方式、法律條款、身份角色、專業折扣、付款階段、匯款資料、LINE)後,產出一套完整的私人訂購頁:動態密碼閘門(可關閉)、商品多圖輪播與分色選購、課程日曆預約、身份折扣、運費試算、名片上傳、強制閱讀條款、多階段付款、HTML 排版訂單通知信+Google 試算表訂單總表,並指導部署到 Cloudflare Workers 與自訂網域。凡使用者提到「展場預購網站」「快閃訂購頁」「幫某品牌做預購/訂購表單網站」「限定販售頁」「展會收單」「私人邀請預購」「私人訂購頁」,或想為品牌建立含動態密碼、名片上傳、訂金分期的活動網站時,都應使用本技能——即使對方沒有明說要「網站」,只要情境是限量/限期/受邀才能買,就適用。
-
codewithowais Bundle Senior Backend DevAct as a Senior Backend Developer expert to design system architectures, build production-grade APIs (REST, GraphQL, gRPC), write optimized database schemas and queries, perform rigorous code reviews, and enforce engineering best practices. Supports Node.js/TypeScript, Python, Java/Spring Boot, Go, and Rust. Produces production-ready code, architecture docs with Mermaid diagrams, migration files, and actionable code-review feedback. Use whenever a user needs backend engineering guidance, code generation, refactoring, or architectural decisions.
-
comeonzhj Bundle Workbuddy ThemeCreate, inspect, validate, preview, package, publish, apply, and restore reversible CSS skins for the WorkBuddy Electron desktop app on macOS and Windows. Use when a user asks to reskin WorkBuddy, adapt a visual reference or Figma CSS into a WorkBuddy theme, prepare a Theme Manager ZIP, contribute a theme to the GitHub community registry, diagnose compatibility after a WorkBuddy update, or safely inject and remove a runtime theme without modifying app.asar or the signed application bundle.
-
brunoviews Skill React Native DesignBuild, redesign, critique, refactor, or debug React Native UI with strong visual direction and platform-correct implementation. Handles mobile constraints (gradients, shadows, images, flexbox), diagnoses existing design systems before proposing changes, and adapts to the project's styling stack, including StyleSheet, NativeWind/Tailwind, styled-components, and Restyle. Use when creating or improving any React Native screen or component, translating web/Figma ideas to React Native, auditing an existing mobile UI, or fixing iOS/Android-specific styling and interaction issues. Also use when: creating a full theme from scratch, generating color palettes, designing specific views, improving existing color combinations, or making design decisions about layout, navigation, and component structure.
-
bybit-exchange Bundle Svg DiagramSVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have to carry this skill plus the SVG XML; for multi-round tweaking, use it directly in the main context.
-
callahkate Bundle Data Viz Best PracticesApplies data visualization best practices to any chart, infographic, or dashboard, whether reviewing existing work or building something new. Covers chart type selection, accessibility (WCAG AA contrast, colorblind-safe palettes, non-color encoding), truthful scales, labeling clarity, and dashboard layout/hierarchy. Format-agnostic — works whether the visualization is code (matplotlib, D3, Chart.js), a design tool file (Figma, Canva, PowerPoint), a screenshot, or just a description of one. Use this skill any time the user mentions charts, graphs, infographics, dashboards, data visualization, "does this chart work," "review my viz," or wants help picking a chart type or improving one — even if they don't use the word "visualization" explicitly.
-
capsrock Bundle Bauhaus DesignCreate frontends, posters, dashboards, and web UIs rooted in Bauhaus and Swiss International Typographic Style (Internationale Typografische Stil) design principles. Use this skill when the user mentions Bauhaus, Swiss design, International Typographic Style, grid systems, Josef Müller-Brockmann, Max Bill, Jan Tschichold, Herbert Bayer, László Moholy-Nagy, constructivism, De Stijl-influenced UI, or asks for designs that emphasize mathematical grids, typographic hierarchy, geometric abstraction, asymmetric layouts, or modernist clarity. Also trigger when the user wants a 'clean modernist' look, 'grid-based' design, 'Swiss poster' style, minimalist-but-structured layouts, or references Neue Grafik, Akzidenz-Grotesk, Helvetica-era aesthetics, or rational/systematic design approaches. For iOS/SwiftUI projects, see IOS_ADAPTATION.md for platform-specific implementation patterns including design tokens, Grid/LazyVGrid layouts, SF Pro typography, Canvas geometry, and SwiftUI anti-patterns.
-
capsrock Bundle Reid Miles DesignA Claude Skill for reproducing Reid Miles' (1927-1993) Blue Note Records typography-led design style in layouts that cannot use large photography (app UI, splash screens, cards, banners, slides). No large portrait photography is used; instead, typographic contrast, flat color blocks, asymmetric composition, and extreme scale contrast recreate the Blue Note graphic tension. Use this whenever a request mentions "Reid Miles style", "Blue Note style", "jazz album cover look but no photography", or "make it feel that way through typography alone".
-
carolinaaafy Bundle Photo Now PlayingTurn a user-supplied everyday photo into a standardized portrait ‘now playing’ music-memory poster: prefer a verified real Chinese song unless the user requests another language, pair it with one very short verified lyric, crop a real photo detail as album art, and compose a visually prominent fixed-proportion music player with an atmosphere-matched palette and mandatory source-native foreground overlap. Use when users ask to turn a photo into a music player, song card, album-memory poster, ‘this photo is a song’ image, or a photographic music collage.
-
carolinaaafy Bundle Travel Memory Sticker CardTransform a user-uploaded photograph into one horizontal collectible memory card with a large quiet editorial illustration, six integrated journaling-sticker motifs, three small English keywords beneath the left illustration, tactile paper grain, and deliberately clumsy flat color fields. Use when Codex needs to P图, edit, redraw, stylize, or turn a travel, street, landscape, lifestyle, portrait, or pet photo into a minimalist postcard-like card or sticker-card in this visual language. Preserve recognition through one same-medium identification anchor and optionally one exact place-defining landmark text shown once; never retain an unintended photorealistic patch, signature, or watermark.
-
almendili Bundle Architecture MapBuild or update an interactive isometric map of a repository's architecture — buildings sized by real measurements, neighborhoods by subsystem, animated flows tracing actual call paths, and a drift counter that fails CI when the map falls behind the code. Use when someone wants to see, explain, or onboard people to how a codebase fits together, or asks for an architecture diagram, system map, codebase overview, or "show me how this repo works". Adapts to the repo's design system; re-run to refresh.
-
amomorning Bundle Zh Quotes SkillContextual Typography Skill
-
andyed Bundle IblipperGenerate kinetic typography animations for expressive agent-to-human communication. Use when you want to communicate with visual flair - animated text for announcements, alerts, greetings, dramatic reveals, or any message that deserves more than plain text. Outputs shareable URLs or can display in canvas.
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 aiz-infographic, distill-design, instagram-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.