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.
-
youware-labs Bundle Figma PilotREQUIRED reading before using figma_execute. Contains API syntax, parameter formats, and examples. READ rules/*.md files for correct usage.
-
ythx-101 Bundle Huatu SkillTurn articles, research, notes, data, or existing drafts into clear Xiaohongshu carousel images or self-contained ELI5 visual explainer HTML. Use for 小红书图文、小红书轮播图、信息卡片、知识型笔记、研究型长图, responsive mechanism explainers, local PNG/HTML rendering, and checks for typography, hierarchy, overflow, sources, simplification boundaries, and safe self-contained delivery.
-
yuanzhao321 Bundle Academic WritingAcademic and scientific writing coach — covers structuring papers (title, abstract, introduction, literature synthesis, methods, results, discussion, conclusions), paragraph/sentence/word-level editing, figures and tables, citations, revision and submission checklists, responding to peer review, writing referee reports, authorship and ethics, ESL guidance, and scientific presentations (slides, talks, posters, Q&A). Use this skill whenever the user is writing, revising, translating, or polishing a journal manuscript, thesis, dissertation, conference abstract, extended abstract, response to reviewers, referee report, cover letter, or academic talk/poster — or asks to "improve/edit/tighten my paper", "make this more academic", "写论文", "修改论文", "润色", "投稿", "审稿意见", "回复审稿人", or "学术报告/海报" — even if they don't say "academic writing" explicitly.
-
yuzhworkhard-wq Bundle Image To Code像素级 750px 图片转代码与高清切图工作流。当 Codex 需要把当前选中的 UI 图片、截图、App/Web 设计稿、Figma 图片导出稿或设计长图转换为代码,并输出独立透明 PNG 切图资源时使用。适用于严格 1:1 等比例还原、画板宽度精确 750px、高清放大切图、防模糊和背景抠除、必要时用 image2/imagegen 抠透明 PNG、文本可编辑、简单图形原生矢量/代码化,最终代码需要自适应适配,或需要把完成稿导出/导入 Figma 为可编辑图层的任务。
-
yysun Bundle Audit UI DesignAudit existing UI designs and implemented interfaces using evidence from screenshots, images, Figma exports, live URLs, local frontends, or multi-screen flows. Use when Codex needs to critique visual interface quality, find and prioritize design problems, compare UI variants, review hierarchy/layout/color/typography/consistency, reduce interaction cost, recommend concrete fixes, or recheck a design after changes. This is a UI design audit, not a substitute for user research or a complete accessibility conformance review.
-
leadbeater Bundle Logo FinderSource, verify, and prepare company/brand logos (customers, partners, vendors) for decks and internal assets. Use this skill whenever the user needs a logo or a set of logos — for a town hall deck, a customer slide, a partner page, a one-pager, or any document — including requests phrased as "add the McDonald's logo", "grab logos for our new customers", "I need the white version of their logo", "get me their icon", or "put customer logos on this slide". Also use it when the user asks to clean up, recolor, resize, or make transparent an existing logo file. Handles finding the current official logo, confirming the right corporate entity, choosing between wordmark/lockup and square icon formats, verifying transparency and quality, converting to black/white versions, normalizing a set to consistent visual scale, and placing logos into decks and documents — PowerPoint, Google Slides, Keynote, PDFs, Canva, Figma, or wherever the logos are headed.
-
legioncodeinc Bundle Legion DesignUse this skill to generate well-branded interfaces and assets for Legion, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
-
zarazhangrui Bundle Beautiful Feishu WhiteboardA library of 35 curated colour palette styles for building beautiful, editable Feishu / Lark (飞书) whiteboards from SVG. Use this whenever the user wants to create or draw a Feishu whiteboard, infographic, diagram, poster, or visual explainer and wants it to look polished, on brand, or in a particular aesthetic, or when they name a style. The agent figures out what board the user wants, asks about the visual vibe, picks a fitting style from the catalogue, generates an editable Feishu whiteboard, returns the doc link and the rendered image, and offers to switch styles. Requires lark-cli (npm @larksuite/cli) installed and authenticated, and a Feishu/Lark account.
24.6k -
zb-sj Bundle Review BuddyChunked interactive PR review — walks you through PRs chunk by chunk, surfaces existing reviewer feedback, and helps post thoughtful comments without cognitive overload. Use when the user wants to review a pull request, examine PR changes, or post review comments to GitHub. Also trigger when the user mentions a PR number or GitHub PR URL and wants feedback, asks to self-review their own PR, wants a sanity check or quick look at PR changes, needs to resume a paused review session, wants to post saved review findings, asks about what's been addressed vs still open in PR comments, wants to check a diff between branches for issues, or mentions reviewing UI changes against Figma designs. If the user says anything like "review PR", "check this PR", "look at the diff", "go through the changes", "self-review", "resume review", or "post findings" — this skill applies.
-
zeke Bundle Minimalist DesignApply a minimalist monospace design system using IBM Plex Mono at a single size with ASCII-style structure. No opacity, no weight variation, no type scale. Hierarchy comes from spacing, indentation, and ASCII punctuation. Use this skill when the user asks for a minimal, minimalist, simple, clean, stark, bare, understated, monospace, ASCII, terminal, typewriter, or typographic design. Also invoke when the user says things like "keep it simple", "nothing fancy", "just make it clean", "strip it back", "plain design", "no frills", "utilitarian", "raw", "text-first", or "developer aesthetic". Use for documentation, dev tools, CLIs, portfolios, landing pages, or any interface where clarity and restraint are valued over decoration.
-
zhoujiegg123-svg Bundle Excel Print FormatFormat Excel workbooks for visually clean printing and presentation, with Chinese office-style typography, mixed Chinese/Latin font handling, visible-area-only print regions, fixed-scale layout when required, width-first page filling, row-height calculation from actual wrapped line counts, group-aware pagination, and dedicated print-sheet fallback for hidden-column-heavy workbooks. Use when the user asks to make a spreadsheet 美观, 适合打印, 适合汇报, 调整打印格式, 排版成 A4 或 A3, 横版竖版优化, or wants an Excel file turned into a polished print-ready version rather than a calculation workbook.
-
ziguishian Bundle Brand Design SkillDrive a strict conversational, image-first and image-final brand identity design process. Use when the user asks for brand design, logo inspiration, logo exploration, AI-generated logo images, VI/visual identity systems, brand manuals, identity guidelines, application mockups, or premium HTML brand books. The skill must not assume missing brand details or generate images from an incomplete brief. It must ask Socratic clarification questions first, wait for user answers or explicit permission to proceed with named assumptions, generate logo images only after the brief is sufficient, require user selection after images, refine the approved logo through image generation rather than SVG reconstruction, then build a complete industry-specific HTML VI manual using generated image assets.
-
mathruffian-dot Bundle YAML Image DeckCreate consistent image-first slide decks from a structured YAML design system, layout registry, and per-slide content. Use when the user asks for a YAML image deck, NotebookLM-style image presentation, full-image PPTX, fixed visual grammar with controlled layouts, golden-sample style locking, or batch image slides across any subject. Supports baked slides and text-free plates with editable overlays.
-
mav-rik Bundle VunorUse when working with Vunor, the Vue 3 + UnoCSS design system and component library. Covers presetVunor, vunorShortcuts/defineShortcuts/mergeVunorShortcuts, VunorVueResolver, Nuxt module, Vu-prefixed components, semantic UnoCSS classes (scope-*, layer-*, surface-*, current-*, c8-*, i8-*, card, fingertip, spacing, typography), public composition primitives (btn, menu-item, popup-card, i8-bare, disabled-soft), palette/theme tuning, and shortcut override patterns. Imports: vunor, vunor/theme, vunor/utils, vunor/vite, vunor/nuxt.
-
cskwork Skill Reddit PosterDraft, preview, publish, reply to, edit, or delete Reddit content using the reddit-post CLI, with subreddit-rule checks, flair validation, and explicit authorization for live changes.
-
cyberlesterr Bundle Make Paper Collage VideoCreate, resume, revise, or finalize editable, narrated Remotion videos in paper-cutout, hand-drawn, historical-collage, or comic-inspired (Korean/Japanese/Hong Kong/American) styles, including layered/parallax illustration, persistent travelling environments, functional diagrams, and recurring characters. Use for a new video brief or to continue an interrupted project tracked in production.json; drives style approval, motion/asset planning, provider budgeting, and quality review through to local final delivery.
-
dacnay816y62-hub Bundle Culture Fragment Poster EngineConvert fragmented cultural visual materials into traceable asset indexes, visual genes, high-end brand visual systems, poster concepts, image-generation prompts, and refined poster/KV/ad/cover layout directions. Use when the user asks to organize folders of cultural images, photography, traditional art, objects, scripts, patterns, intangible heritage, commercial reinterpretations, layout references, or to generate modern, restrained, premium cultural posters, luxury brand KVs, fashion/beauty/fragrance campaigns, ads, exhibition visuals, booklet covers, or social-media vertical visuals from those materials.
-
duckduckgo Skill Implement DesignTranslates Figma designs into production-ready code with 1:1 visual fidelity. Use when implementing UI from Figma files, when user mentions "implement design", "generate code", "implement component", "build Figma design", provides Figma URLs, or asks to build components matching Figma specs. Requires Figma MCP server connection.
-
ecomfe Skill Figma Design To CodeImplement or update project-consistent UI code from a Figma selection or nodeId using TemPad Dev MCP. Use when the user wants visible Figma UI recreated, ported, or integrated into the target project's framework, styling system, tokens, and existing components when available. Do not use for design critique, product invention, generic code review, or for guessing hidden states, responsiveness, or behavior not shown in design or project evidence.
-
whitphx Bundle Poster ReviewVerify that a poster in this repository still holds up at its declared physical print size. Use this whenever you change a poster's copy, layout, CSS, or assets, and whenever the author asks whether a poster looks right, reads at conference distance, is print-ready, has overflow, spacing, or legibility problems, or is ready to finalize or send to a printer. Measures rendered type size, clipped and occluded content, padding encroachment, image resolution, page fills, and print-hostile shadows under print media, then guides the visual judgment that measurement cannot replace. Reach for this instead of reading poster.css, because declared CSS values do not predict printed size.
-
wholiver Bundle Design Codex ThemeDesign, generate, install, apply, switch, inspect, remove, restore, or uninstall custom Codex Desktop appearance themes from a one-sentence visual brief. Use for Codex themes, skins, backgrounds, colors, typography, panels, buttons, UI appearance, saved theme libraries, returning Codex to its default look, or diagnosing theme installation on macOS and Windows.
-
win-hao Bundle Vermilion SketchTurn a photo into a minimalist East Asian zen ink sketch: a few black brush strokes with dry-brush ends on rough embossed watercolor paper, the subject alone on empty sheet, and one small vermilion-red accent. Keeps the subject's pose and placement, strips everything else. Use whenever a user wants a photo turned into a 'zen sketch', 'ink line sketch', 'minimal ink drawing', 'brush line art', a red-accent Japanese/Chinese minimal illustration, or attaches a photo and says 'make it that simple ink style', including batches and illustrations for wallpapers, posts, slides or covers. Chinese triggers: 简笔画、禅意简笔画、水墨简笔画、极简线稿、毛笔线描、一抹红、把照片画成简笔画. Works with the host's built-in image tool (Codex, ChatGPT, Doubao, Gemini) or through any OpenAI-compatible image API that accepts several input images (gpt-image-2).
-
win-hao Bundle Vintage PlateTurn a real photo or screenshot into a vintage natural-history plate, a 19th-century hand-coloured copperplate engraving on aged cream paper with fine hatching, thin low-saturation watercolour washes, the subject isolated on blank paper, and a small handwritten Latin-name caption with a plate number. Keeps only the main subject and strips everything else. Use whenever a user wants a photo turned into an antique engraving, an old book illustration, a botanical or zoological plate, a 'naturalist', 'museum plate' or 'specimen' look, a hand-drawn scientific illustration, or attaches a photo and says 'make it that old-plate style', including batches and illustrations for slides, websites or covers. Chinese triggers: 复古博物画、博物志图版、铜版画、手绘版画、油画风转绘. Works with the host's built-in image tool (Codex, ChatGPT, Doubao, Gemini) or through any OpenAI-compatible image API.
-
zluckyhou Bundle Living LogoDesign a living character logo from a one-sentence brief, entirely as code — no image models. Builds a simple, cute, rounded mascot as a parametric SVG rig with CSS keyframe animation and delivers three packs from it - the mark (animated logo on a solid background), six looping states (idle, happy, thinking, error, sleep, loading) and a sticker pack (12–16 expressions) with optional GIF/WebM/APNG export for WeChat, Telegram, Discord, Slack, LINE and Feishu. Use when the user asks for an animated or living logo, a mascot or IP character that moves, 会动的 logo, 动态吉祥物, 表情包, emoji or sticker pack, 微信表情, loading / empty-state / 404 characters, or wants three directions and six animated candidates to pick from.
-
zouchenzhen Bundle Gpt Image2Generate images with GPT Image 2 through a local OpenAI-compatible Images API script, then deliver them through OpenClaw chat channels such as Telegram or QQBot. Use when the user asks to generate, draw, create, or send an image, poster, photo, illustration, wallpaper, avatar, icon, logo, 文生图, 生成图片, 画图, 海报, 照片, 发我图片, or similar visual output requests.
-
zseven-w Skill Openpencil DesignUse when designing UI with OpenPencil — creating layouts via op CLI, batch design DSL, sandboxed JS scripts, or MCP tools. Covers PenNode schema, semantic roles, typography, color, spacing, and common component patterns.
-
zsy1207 Bundle Atmospheric Science ResearchAnalyze atmospheric and climate data, compute reproducible diagnostics, and create or revise publication figures from NetCDF, GRIB, HDF, Zarr, or derived tables. Use for climate analyses and manuscript maps or plots; not generic illustration.
-
daas2 Bundle System DesignEnd-to-end system design for real codebases and greenfield problems. Use when the user asks to design or architect a system, map or reverse-engineer an existing architecture, review a design doc/PR/ADR, plan a migration, scaling evolution or service split, choose technologies (SQL vs NoSQL, Kafka vs SQS, cache strategy, sharding), size infrastructure (servers, QPS, storage, cost), or practice system design interviews. Also fires on oblique asks such as "is Postgres enough?", "will this hold at 10x?", "should we split this service?", "write an ADR", "capacity plan for peak", "our DB falls over at peak". Covers capacity math, failure-mode stress testing, right-sizing against over-engineering, cost estimation, distributed-systems fundamentals, and LLM-era infrastructure (RAG, vector search, model serving). Produces ADR-style design docs with Mermaid diagrams, architecture maps, scored reviews, and migration plans. NOT for UI/visual/CSS/logo design, single-query database tuning, or DevOps pipeline debugging.
-
kkenny0 Bundle Card SkillRender text and evidence into polished, shareable PNG visuals with one consistent Kenny Style visual grammar. Use this skill whenever the user asks to turn words, notes, articles, quotes, arguments, stories, open-source repository or tool material, technical commands/workflows, explicit WeChat Reading highlights/thoughts, or WeChat Reading personal statistics into an 信息图/infographic, 海报/poster, 卡片/card, 大字报, whiteboard, visual summary, comic, sketchnote, social card grid, 开源工具介绍配图, 工具推荐卡片, GitHub 项目介绍插画, 小红书式竖版技术内容, 公众号头图, 博客封面, 正文配图, 正文解释图, 关系图, 流程图, 边界图, reading report, or non-summary editorial image for an essay. Trigger on phrases like 做成图, 渲染成图, 做张卡片, 卡片组, 处理这个开源工具, 技术工作流卡片, 做成漫画, 视觉笔记, 给文章配图, 微信读书划线做卡, article cover, blog hero, article diagram, process flow, and editorial image. Supports 9 output modes. Tone and explicit legacy design names affect color only; they never replace the house typography, geometry, spacing, material, or composition grammar. Do not use for websites, UI components, Figma protot
-
nakanosanku Bundle Design System AnalyzerAnalyze any website's UI style using ChromeDevTools to extract precise CSS tokens, animations, and interaction states. Handles complex sites and anti-bot measures by guiding the user. Triggers on "analyze this site", "extract UI style", "create design system from [URL]", or "learn visual style".
-
stianlars1 Bundle Drawn ToEstablish and apply a design direction using a curated visual reference library, plain-language weighted choices and a project lock file. Use for web design direction, "my taste", "min stil", visual alternatives, or reviewing UI against an existing direction. Also supports maintaining this reference library. A project's own approved design system and the user's explicit choices take precedence.
-
jiangyurong609 Bundle Motion PagesBuild production-ready immersive motion pages in the award-site mold — Three.js worlds (foggy heroes, glass product stages with sonar rings, drag-orbit dome galleries, scroll-driven camera journeys with particle morphs, walkable procedural game worlds with HUD chrome) AND non-Three.js motion (raw-WebGL liquid-glass ripple typography, springy draggable poster walls, cursor-trail image reveals, horizontal scroll-snap stories, scroll-scrubbed process reveals, cursor mask reveals, gesture control) — each a single HTML file with a crisp DOM overlay, responsive to phone/tablet, touch-aware, with a mandatory multi-viewport screenshot loop and a design-review (aesthetic + conversion) pass. Use when asked for a "3D landing page", "Three.js hero", "living/breathing homepage", a 3D product page, a 3D gallery, a scroll-story page, "liquid glass", a ripple/distortion hero, a draggable poster wall, "images that follow the cursor", a horizontal-scrolling story, a "scroll to build it" process explainer for a business, a game
-
jpbaking Bundle Lazyway Io DesignBuild or edit web pages and UI in the lazyway.io design system (IBM Plex, brand blue
-
kappaemme-git Bundle MengtofrontendAudit and refine landing pages to avoid generic AI-generated visual quality problems using Meng To's frontend design checklist. Use when Codex is asked to review, polish, improve, redesign, or prepare a landing page before launch, especially for typography, letter spacing, font choice, image authenticity, AI-generated visuals, prompt quality, micro-interactions, and final human design details.
-
manutej Bundle Shadcn MotionUse when generating WOW-level animated components for course pages, dashboards, hero sections, product landing pages, or technical demos. Triggers on 'animated component', 'make this WOW', 'add animation', 'magnetic button', 'number ticker / number flow', 'bento grid', 'hero text reveal', 'hero parallax', 'sticky scroll', 'animated beam', 'dynamic island', '3D tilt card', 'border beam', 'shadcn animations', 'smoothui style', 'aceternity style', 'magic UI', 'motion primitives', 'react bits', 'animate UI', 'cult UI', 'animated dashboard widget', 'scroll storytelling', 'KPI counter', 'animated background', 'interactive experience'. Also use when extending the codebase-to-course design system with motion, building interactive course tutorials beyond single-page HTML, or producing dashboard widgets with data-viz motion. Hybrid shadcn structure + smoothui motion vocabulary.
-
mbennell Bundle Saas DesignGenerate modern, production-grade SaaS interfaces grounded in real component patterns and design system conventions. Use when the user asks to build dashboards, admin panels, settings pages, data tables, forms, or any SaaS-quality web interface. Produces clean, minimal, professional output — not expressive/artistic UI.
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 logo-finder, make-paper-collage-video, figma-pilot. 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.