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.
-
martin65536 Bundle PublicationPrint-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
-
forgeyclap Skill Forge FigmaForge playbook for design-to-code. Use for figma, design to code, mockup, design tokens, pixel-perfect, responsive, breakpoints, style guide, dev mode, handoff, accessibility.
-
bitranox Bundle Docs Generate SchematicsUse when a document, paper, poster, or README needs a scientific schematic, flowchart, block diagram, or architecture figure GENERATED as an image from a text description via an AI image model - CONSORT participant flows, neural-network architectures, pipeline diagrams - using OpenRouter (OPENROUTER_API_KEY) with an automated quality-review loop. Not for converting existing documents (bitranox:docs-convert-markitdown) or code-rendered graphs (graphviz/matplotlib).
-
tmj-90 Bundle BrandUse to establish or audit a product's brand so the factory's output looks intentional, not template — when a ticket asks to "create a brand", "define the design system / visual identity / palette / typography", or when delivered UI looks generic and needs a deliberate direction. Detects existing brand and extends it in its own idiom, or commits to one specific direction (palette, type pairing, voice) and writes a BRAND.md. Invoke whenever the factory needs a design foundation before building UI.
-
tmj-90 Bundle Design SystemUse when a ticket needs a *systematic* token + component foundation for a frontend — the three-layer token architecture (primitive → semantic → component), component specs with full state coverage, or a recommendation for which design system a product should have. Invoke for "set up design tokens", "define the component system", "we keep hardcoding colours — fix it", "what design system should this product use", or as the structural backbone that `frontend-design` and `brand` build distinctive UI on top of.
-
tmj-90 Skill Frontend ResponsiveUse when a ticket requires a layout to work across screen sizes — mobile/tablet/desktop, fluid typography, breakpoint behaviour, or fixing overflow and touch-target issues. Invoke for "make X responsive", "fix the mobile layout", "support tablet", or when adding any layout that must adapt.
-
compozy Bundle QA ReportPlans real-user QA as living repo docs — the durable <qa-docs-path> tree (default docs/qa/) that every QA cycle appends to. Use when bootstrapping or updating a project's QA docs, planning a cycle before execution (map journeys as flows, derive scenarios, plan persona-driven session charters), or registering bugs into the durable bug registry. Do not use for live session execution, browser evidence, or fix loops — use qa-execution for those.
-
compozy Skill Agh DesignAGH visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing an AGH surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use agh-ui-screenshot.
-
compozy Skill Create ThemeUse this skill when the user wants to create, draft, author, or extract a slide theme in this open-slide repo. Triggers on phrases like "create a theme", "make a theme called X", "extract a theme from <slide>", "build a theme from these images". Produces a single markdown file under `themes/<id>.md` describing palette, typography, layout, fixed Title/Footer components, and motion philosophy. Do NOT use for editing slides themselves — only for authoring `themes/<id>.md`.
Audited -
caixinyu2017-star Bundle Visio Image RebuilderRebuild or restyle editable Microsoft Visio diagrams from reference images and existing .vsdx files, then export deliverables as .vsdx, PNG, SVG, PDF, or PPTX. Use when the user asks Codex to open Visio, recreate a diagram from a PNG/JPG/screenshot/reference image, match a scientific model figure, batch-create Chinese technical-bid flowcharts, continue drawing another similar flowchart, update colors/typography/layout in a .vsdx, calibrate panel coordinates to avoid shifted or overlapping submodules, or make publication/presentation outputs while preserving Visio native editable shapes rather than embedding the reference image as a flat picture. For Chinese technical-bid flowcharts, default to the user's standard SimSun/宋体 12 pt technical-bid style and ask whether to use that default or reproduce the original image style when the two conflict.
-
caixinyu2017-star Bundle Econ Table Figure DesignUse when designing, auditing, revising, or formatting tables and figures for economics papers in English or Chinese, including three-line tables, main regression tables, robustness tables, heterogeneity and mechanism tables, table notes, figure admission, event-study/trend/map/distribution figures, color palettes, typography, and publication-ready export checks.
-
aiocean Bundle Aio UiuxWeb UI design and review advisor — applies UX psychology, interaction patterns, WCAG accessibility, and modern CSS to design new interfaces or critique existing ones. Use proactively when reviewing any frontend UI, scaffolding new components, or deciding layout/color/typography trade-offs.
-
aiocean Skill Aio Visual DiffVerify AI-generated frontend UI against design via measurement-driven diff — extracts `getComputedStyle` + `getBoundingClientRect` through chrome-devtools MCP, diffs against Figma data or baseline JSON, reports numerical deltas. Catches library-specific token traps where class names lie about runtime values (Radix, Material UI, Tailwind, shadcn). Use when checking pixel-perfect implementation, validating design fidelity, catching layout regressions, or when the agent claims "it looks right" but you want numerical proof instead of eyeballed screenshots.
-
xiaotianna Bundle Heroui Pro Design TasteDesign taste profile for the HeroUI design system. 78 design principles across 10 categories (spacing, typography, color, cards, forms, buttons, icons, navigation, accessibility) learned from iterative human feedback. Applies across all HeroUI packages: @heroui/react, @heroui-pro/react, @heroui/native, @heroui-pro/native. Use when generating UI, reviewing design quality, or improving visual polish.
-
xiaotianna Bundle GeistExpert guidance for Geist, Vercel's default typography system and font family for precise Next.js interfaces. Use when configuring Geist Sans, Geist Mono, or Geist Pixel, setting up font imports, or applying Vercel typography and aesthetic guidance.
-
seemseam Skill Figma To CodeUse when Figma context, selected frames, variables, components, or screenshots should be mapped to local frontend implementation without copying private Figma state into Role source.
-
seemseam Skill Frontend BriefUse when a frontend request is vague, new, screenshot-based, Figma-based, or needs audience, workflow, constraints, acceptance criteria, and verification scope before implementation.
-
seemseam Skill Visual DirectionUse when UI needs stronger visual quality, anti-generic design, brand fit, layout, typography, color, spacing, density, motion, or state-design direction.
-
seemseam Skill Mobile App BriefCreate a mobile app implementation brief. Use when starting a mobile app or feature, clarifying iOS and Android platform scope, choosing native versus cross-platform stack, or turning requirements, screenshots, Figma context, or rough ideas into a build plan.
-
seemseam Skill Design System TokensUse for design tokens, theming, light/dark or multi-brand support, token drift, component-system alignment, Figma variables, or Style Dictionary/DTCG token workflows.
-
kangraemin Skill Design PptUse this skill to create a branded .pptx presentation from any content source (markdown doc, PDF, existing PPT) using a named design system from getdesign.md. Trigger whenever the user mentions making/creating a PPT or slides with a specific brand design (apple, claude, stripe, notion, etc.), or when they have a document they want turned into a polished slide deck. Keywords: '디자인 PPT', 'PPT 만들어', 'slides from', 'brand PPT', 'getdesign', 'apple design ppt', '공모전 PPT'. Always use this skill when the user wants a visually designed presentation, not just any pptx task — for editing/reading existing .pptx files use the pptx skill instead.
-
jpcaparas Bundle Sprite DecomposeDecompose existing sprite sheets or illustration contact sheets on flat or gently varying backgrounds into cropped transparent PNGs with reviewed grouping, bounds manifest, and validation. Skip generation, atlas packing, and hidden-pixel reconstruction.
-
natthasath Bundle Creative Webแนะนำ Design Style สำหรับเว็บไซต์ พร้อม Font Pairing (ไทย + อังกฤษ), Color Palette (hex) และเว็บอ้างอิงจริงให้เห็นภาพ — อิงจาก 20 สไตล์ชั้นนำ เช่น Minimal (Apple), Modern SaaS (Stripe), Glassmorphism (Linear), Dark Modern (Vercel), Luxury (Rolex), E-commerce (Nike) และอื่น ๆ ใช้ skill นี้ทันทีเมื่อผู้ใช้ถามเรื่อง design เว็บไซต์, landing page, web UI, สี, หรือ font เว็บ — เช่น "ทำเว็บ portfolio ใช้ style อะไรดี", "อยากได้เว็บแบบ Stripe", "landing page SaaS ใช้สีไหน", "ทำเว็บโรงพยาบาล", "เว็บ ecommerce ควร design ยังไง", "อยากได้ dark theme แบบ dev tool" — เรียกใช้ผ่าน `/creative:creative-web` เท่านั้น — ไม่ auto-trigger จากบทสนทนา
-
natthasath Bundle Creative Bookแนะนำ Design Style และ Font Pairing (ไทย + อังกฤษ) สำหรับงานนำเสนอ รายงาน และสื่อสิ่งพิมพ์ โดยอิงจาก Design System ชั้นนำ เช่น McKinsey, Apple, Notion, OpenAI และอื่น ๆ อีก 42 สไตล์ ใช้ skill นี้ทันทีเมื่อผู้ใช้ถามเรื่อง font, design style, หรือการเตรียม presentation/report — เช่น "ทำ slide McKinsey ใช้ font อะไร", "อยากได้ style แบบ Apple", "ทำ dashboard ใช้ font ไหนดี", "เตรียม pitch deck startup", "ต้องการ design แบบ minimal" หรือบอก use case โดยไม่ระบุชื่อ style — เรียกใช้ผ่าน `/creative:creative-book` เท่านั้น — ไม่ auto-trigger จากบทสนทนา
-
coderwanfeng Bundle Mark2video给视频添加文字水印,支持自定义字体大小、类型、颜色。当用户提到视频水印、视频加 logo、视频字幕时使用。
-
coderwanfeng Bundle Add Img Water给 PDF 添加图片水印(logo 等)。当用户提到 PDF 图片水印、PDF 加 logo 时使用。
-
xoai Skill Design CheckQuick design quality scan of changed frontend files. Checks for hardcoded colors (when design system exists), missing interactive states, and AI slop indicators. Code-only — does not use Lightpanda. Advisory only — never blocks. Invisible when no frontend files in diff.
-
alecs5am Skill PosterHow to make a vivid, character-driven brand POSTER — a single still image, not a video. A generalized overlay on the art-director step: supplies the poster-as-landing architecture (top banner → massive beveled wordmark → chest-up hero photo → scattered vinyl-sticker collage → copy block → thin footer strip), the parameterized slot set (brand, exclamation word, hero, product, palette, original blob glyph, aesthetic register), the model stack (gpt-5.4-image-2 for crisp typography, gemini fallback), and the niche's failure modes. Works for ANY brand and ANY aesthetic the user names — Y2K streetwear, vaporwave, grunge zine, clean DTC — the skill supplies the layout know-how, the user supplies the subject + vibe. USE WHEN the user asks for a poster / flyer / drop poster / "poster-as-landing-page" / brand key-art / album-cover-style still / hype graphic, with no specific existing poster to reproduce. This is a content-niche craft-overlay SKILL (generalized), loaded on top of a poster-format template match — not a r
-
alecs5am Bundle Vox CollageHow to turn ONE topic into a Vox-style paper-collage explainer / ad video — a punchy narrated short where each beat is a torn-paper collage POSTER that comes alive, with VO, music and captions. A craft overlay on the standard pipeline: the look is BORN in the image (a rich layered collage poster per beat — text-to-image, 5-part prompt structure, headline baked in), then a FLAT-SAFE "living poster" motion pass animates it, then hard-cut assembly. Supplies the one mandatory beat-map approval gate, the density rule (6+ separate cut-out pieces filling the frame, NOT one sticker on a plain bg), the flat-safe i2v constraint set (ONE smooth 2D camera move, ~5% amplitude, stability anchors on text/layout, banned warp moves) that is WHY seedance works for flat art, and anti-monotony hard cuts (adjacent beats never share a camera move; static reserved for the payoff). Works for ANY topic / product / person + ANY era-matched aesthetic. Ported from vox-director by Alisa Qian. USE WHEN the user asks for a "vox video", "co
-
alecs5am Skill Fb CreativesHow to make an N-creative FB / Meta / IG static ad pack for a real brand — generalized niche know-how, not one specific ad. A domain overlay on the standard pipeline: supplies the 5-set creative matrix (A real-people · B graphic / typography · C proof / data-viz · D meme · E niche-audience), the site-grounding pre-flight (curl CSS hex + Playwright hero screenshot used as `--ref` on every gen), the true-parallel batch shape on `openai/gpt-5.4-image-2`, the per-set prompt cookbook (testimonial portrait, code-card poster, strikethrough price stack, horizontal bar chart, meme header), and the deliverable folder layout (numbered PNGs + `ads-copy.md` + `README.md`). Works for ANY brand the user names — a SaaS dev tool, a DTC product, a B2B service — the skill supplies the matrix know-how, the user supplies the brand + URL. USE WHEN the user asks for an "ad pack", "32 creatives", "FB / Meta / IG ads", "creative matrix", "set of static ads", "performance creatives for <brand>", with N ≥ 4 stills and a single concrete
-
alecs5am Bundle Audio ExplainerAudio-first long-form explainer pipeline — takes one audio file (or a YouTube/podcast URL → audio) and produces a faceless overlay-driven video in the dev-essay / tech-podcast style (5-30 minutes, 16:9, no talking head). Orchestrates the existing `ralphy` primitives: yt-dlp pull → silence-remove → ElevenLabs Scribe v1 word-level transcript → Gemini audio-describe → LLM claim segmentation → per-claim overlay-type planner (code-block / terminal / tweet-card / browser-frame / screenshot / meme / diagram / quote-card / chapter-card / logo-pop) → asset prep (Playwright for screenshots, `ralphy generate image` for memes, ElevenLabs Music for the bed, ElevenLabs SFX for whoosh/pop/hit) → HyperFrames composition with chapter sub-compositions → `ralphy render`. USE WHEN the user drops an audio file (mp3 / wav / m4a) or a YouTube / podcast URL and asks for a long-form video edited on top, says "make a video from this audio / podcast", "monter ce podcast" (FR), "smontiruy podkast v video" (RU transliteration), "audio to
-
alecs5am Bundle JSON Prompt EngineAnalyze a reference image (or video frame) and emit a ready-to-paste structured JSON prompt that captures every visual quality needed to reproduce it through `ralphy generate image --prompt-file`. The reverse of the prompt cookbook: image in -> dense JSON prompt out (scene / style / technical / materials / environment / composition / quality blocks; add a `motion` block for image-to-video). Adapts the schema to ralphy's model stack — `gemini-3-pro-image-preview` for multi-ref consistency, `gpt-5.4-image-2` for crisp typography — and folds any matching `@guideline:<slug>` rules into the quality block. USE WHEN the user uploads or points at a reference image and asks for a prompt, "JSON prompt", "image-to-prompt", "reverse-engineer this image", "recreate this image", "describe this in prompt format", "give me the prompt for this style/look", or wants a per-slide JSON prompt for a carousel. DO NOT FIRE for conversational "what is in this image" questions, image editing, or when the user already has a brief and o
-
alecs5am Skill Gpt Image 2 DirectorProduction prompt director for GPT Image 2 (imagegen_2_0). Use whenever the user wants a GPT Image 2 prompt — portraits, posters, character sheets, UI mockups, creative/experimental scenes, or any image with on-screen text. Trigger on: GPT Image 2 prompt, poster met tekst, character reference sheet, UI mockup, cinematic portrait, social media mockup, or any image-generation request where text accuracy, multi-element composition, or reasoning-aware prompts matter.
-
kwakseongjae Bundle Omd Init프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의 요청에 트리거. CLAUDE.md / AGENTS.md / Cursor rule shim도 함께 설치.
-
kwakseongjae Bundle Omd AutopilotOne-prompt autonomous product design and implementation. Use automatically for broad greenfield UI requests such as 'from scratch', '새 제품/화면을 알아서 만들어줘', or requests that delegate DESIGN.md creation. It decides whether to reuse, establish, refresh, or skip a project design system; asks at most one consequential question batch; then builds and verifies the real surface. Use omd:harness instead only when the user explicitly asks for guided checkpoints.
-
prone-dc302 Skill Alterlab Vcd PackagingThis skill should be used when the user asks about "packaging design", "product packaging", "label design", "dieline", "die line", "structural design", "box design", "unboxing experience", "shelf impact", "packaging mockup", "package prototype", "regulatory compliance packaging", "nutrition label", "barcode placement", "sustainable packaging", "packaging materials", "act as a packaging designer", "packaging designer mode", "carton design", "bottle label", "pouch design", "retail packaging", "packaging hierarchy", "packaging typography", "gift box design", "packaging production", "print-ready packaging", or needs expertise in product packaging, label design, structural design, and dieline creation. Part of the AlterLab FC Skills collection (VCD department).
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 publication, forge-figma, docs-generate-schematics. 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.