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.
-
kienbui1995 Skill Design System AuditUse when reviewing component consistency, design token coverage, or the health of a design system
-
williamcorrea23 Bundle Btp Diagram GeneratorGenerate SAP BTP (Business Technology Platform) solution architecture diagrams as native draw.io (.drawio) files following the official SAP BTP Solution Diagram guidelines (Fiori Horizon design system) and open them via a configured draw.io MCP server. USE WHEN: user asks to create/draw/design/sketch a BTP diagram, BTP architecture, BTP landscape, BTP solution diagram, BTP reference architecture, SAP Business Technology Platform diagram, or wants to visualize SAP BTP services (CAP, Build, Integration Suite, SAC, AI Core, HANA Cloud, Cloud Foundry, Kyma, Workzone, etc.) and their interdependencies in draw.io / drawio / diagrams.net. DO NOT USE FOR: non-BTP architecture diagrams, generic flowcharts, sequence/UML diagrams, or diagrams that should remain in Mermaid/PlantUML.
-
hmbown Skill Major ImageIn D&D, Major Image creates a multi-sensory illusion — visual, auditory, thermal, even olfactory — that persists and can be animated. It is convincing enough that creatures must actively investigate to see through it. The real-world version is the interactive prototype: the demo that makes stakeholders ask 'wait, is this real?' The answer is no, but the conviction is the point. Clickable Figma prototypes, scenario simulations, pitch decks with working demos, preview environments with synthetic data. Major Image is the spell that sells a future state before it is built.
-
hmbown Skill Silent ImageIn D&D, Silent Image creates a purely visual illusion — no sound, no smell, no substance. It looks real but falls apart if you interact with it. The real-world version is the static design comp: a high-fidelity visual mockup that shows exactly what something will look like but does nothing when you click it. Figma frames without prototyping links, screenshot mockups, rendered previews, static architecture diagrams. Silent Image is faster than Major Image because it skips interactivity. Use it when the only question is what does it look like.
-
shengdabai Skill TwitterLaunch the X/Twitter Poster Agent to auto-create and publish tweets. Use when: user types /twitter, /x, wants to post tweets, create threads, write X content, or manage Twitter posts. Keywords: twitter, x, tweet, thread, 推文, 发推, 推特
-
shengdabai Skill BrandkitPremium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
-
shengdabai Skill Gpt TasteElite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
-
vibeeval Skill Design System GeneratorGenerate design systems with color palettes, typography, spacing scales, component tokens, and Tailwind config
-
vibeeval Skill Component Library PatternsDesign system token management, component API design, Storybook, and visual regression testing patterns
-
modu-ai Skill Design Brand System웹 프로젝트의 브랜드 정합 시각 디자인 시스템 전문가. 히어로 우선 레이아웃 체이닝, WCAG 2.1 AA 접근성, Lighthouse 80점 이상, 브랜드 정체성 파일에서 디자인 토큰 추출을 보장합니다. 색상 팔레트, 타이포그래피, 여백, 컴포넌트 사양을 다룹니다. Use for brand-aligned visual design systems: color palettes, typography, spacing systems, hero-first layout, component specs, design tokens, visual identity, and WCAG 2.1 AA accessibility enforcement.
-
modu-ai Skill Instagram Post주제를 Instagram 게시글(이미지/비디오/릴) 초안으로 작성해 즉시 발행합니다. 저장된 문체 프로필이 있으면 자동 적용합니다. 큐·예약·상태머신 없이 세션 안에서 직접 발행합니다. 예약·정기 발행은 Claude Cowork 이 담당합니다. 다음과 같은 요청 시 사용하세요: - "이 주제로 Instagram 포스트 작성해줘" - "인스타에 올릴 이미지 캡션 써줘" - "이 영상 인스타 릴로 올려줘" (share_to_feed) - "인스타에 비디오 게시해줘" - "이 뉴스를 Instagram 용으로 요약해줘" - "이 초안 인스타에 바로 올려줘" (승인 → 즉시 발행) [책임 경계] vs 형제 스킬: Instagram 이미지/비디오/릴 *초안 작성·즉시 발행* 만 담당합니다. 댓글 관리는 instagram-comments 스킬, Threads 발행은 threads-* 스킬, 멀티 채널 포맷은 threads-multichannel 스킬을 사용하세요. 예약·정기 발행은 Claude Cowork 에게 맡깁니다.
-
modu-ai Skill Instagram CommentsInstagram 미디어의 댓글을 관리합니다 — 목록 조회, 답글 작성, 댓글 숨김. `manage_comments` 권한이 부여된 경우에만 동작합니다. 발행된 게시물의 댓글 모더레이션(응대/정리) 에 사용합니다. 다음과 같은 요청 시 사용하세요: - "인스타 게시물 댓글 확인해줘" - "이 댓글에 답글 달아줘" - "스팸 댓글 숨겨줘" - "최근 포스트 댓글 정리해줘" - "특정 댓글 숨김 처리해줘" [책임 경계] vs 형제 스킬: Instagram 댓글 *조회/답글/숨김* 만 담당합니다. 포스트 발행은 instagram-post 스킬, 인사이트 조회는 instagram_insights 도구를 직접 사용하세요.
-
modu-ai Bundle Threads Post Draft주제를 Threads 게시글 초안으로 작성합니다. 저장된 문체 프로필이 있으면 자동으로 적용합니다. 초안은 발행 전에 ⟨한국어 감사 3단⟩(ai-slop-reviewer → korean-spell-check → korean-humanize)을 반드시 통과하며, 감사를 통과한 최종본을 사용자가 AskUserQuestion 으로 승인해야 Graph API 로 발행합니다 — 큐·예약·상태머신 없이 세션 안에서 직접 발행합니다. 예약·정기 발행은 Claude Cowork 이 담당합니다. 다음과 같은 요청 시 사용하세요: - "이 주제로 Threads 포스트 작성해줘" - "Threads에 올릴 글 초안 만들어줘" - "이 뉴스를 Threads용으로 요약해줘" - "블로그 글을 Threads 포스트로 변환해줘" - "내 문체로 초안 작성해줘" (저장된 프로필 자동 적용) - "이 초안 그대로 Threads에 올려줘" (감사 3단 → 승인 → 즉시 발행) [책임 경계] vs 형제 스킬: 초안 작성(저장된 문체 프로필 적용 포함)·발행 전 한국어 감사·승인 후 즉시 발행을 담당합니다. 문체 *분석·저장* 은 threads-style-learn, 멀티 채널(Facebook/X) 포맷은 threads-multichannel, 이미지/비디오 발행은 MCP 도구(threads_publish_image, threads_publish_video)를 직접 사용하세요. 예약·정기 발행은 Claude Cowork 에게 맡깁니다.
-
modu-ai Bundle Threads Style Learn과거 Facebook/Threads 포스팅 3-10개를 붙여넣으면 문체를 분석해 style profile 파일로 저장합니다. 이후 threads-post-draft 가 저장된 프로필을 자동으로 불러와 적용합니다. 다음과 같은 요청 시 사용하세요: - "내 문체 학습해줘" - "이전 포스팅들 보고 문체 분석해줘" - "내 글투 분석해서 저장해줘" - "스타일 프로필 만들어줘" - "이전 스레드/페이스북 글로 문체 학습해줘" - "내 톤앤매너 분석해줘" [책임 경계] vs 형제 스킬: 문체 *분석* 과 프로필 *저장* 만 담당합니다. 저장된 프로필을 적용해 초안을 작성·발행하는 건 threads-post-draft, 여러 채널(Threads/Facebook/X) 포맷은 threads-multichannel 이 담당합니다. 이 스킬은 발행을 하지 않습니다.
-
modu-ai Skill Threads Multichannel하나의 텍스트를 Threads(직접 발행) / Facebook(복붙) / X(복붙, free=스레드 분할·premium=단일) 용으로 각각 포맷합니다. 발행은 하지 않고 포맷만 — Facebook·X 출력은 사용자가 직접 복붙하고, Threads 출력은 승인 시 threads_publish_text 로 즉시 발행합니다. 다음과 같은 요청 시 사용하세요: - "이 글 페이스북/엑스에도 올릴 수 있게 해줘" - "X 스레드로 쪼개줘" (무료 tier 280자 분할) - "트위터용 스레드 만들어줘" - "Facebook 이랑 X 용으로도 포맷해줘" - "이 초안 멀티 채널로 변환해줘" - "X premium 으로 한 번에 올릴 수 있게 해줘" [책임 경계] vs 형제 스킬: *포맷만* 담당합니다 — Facebook/X 로 발행하지 않습니다 (사용자가 복붙). Threads 직접 발행은 threads-post-draft / threads_publish_* 도구가 담당합니다.
-
builderio Skill Create DeckCreate a new deck with slides from scratch. Use before creating a deck or standalone visual; resolve source fidelity, creative context, and the active design system before using the fallback HTML patterns in this skill.
3.4k -
builderio Skill Slide ImagesSource and generate images for slides with Assets-owned style grounding and provenance. Use when a slide needs a new visual, logo, or approved media.
3.4k -
builderio Skill Logo CompositeHow the generate-then-composite pipeline puts a pixel-perfect canonical logo onto a generated image without letting the LLM regenerate the logo.
3.4k -
argentaios Bundle Argentos Popular Web Designs54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.
-
argentaios Bundle Community Popular Web Designs54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.
-
hybridlabor-api Bundle BdbhtmlmanueldocsUse when authoritative design system, standalone HTML template, and automated GitHub Pages live hosting workflow for creating neutral, enterprise-grade developer documentation and user manuals in the official Google Antigravity / BDB OS aesthetic ...
-
hybridlabor-api Bundle UI UX Pro MaxComprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues.
-
nexu-io Skill Web To Design MdExtract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a structured `design.md` an AI can consume. Use to seed motion-anything's design system from an existing site so generated motion stays on-brand ("扒这个网站的配色/字体", "design.md from url").
-
kyrie66nb Skill Paper IllustrationGenerate paper illustrations.
-
modu-ai Bundle Design Logo디자인 시스템에 맞는 로고를 생성합니다. 프로젝트의 토큰(색·타이포·형태 언어)과 브랜드 보이스를 먼저 읽어 생성 프롬프트에 반영하므로, 만들어진 로고가 브랜드와 어긋나지 않습니다. 로고는 히어로·OG 이미지와 달리 작아도 보이고 컬러·흑백·단색으로 변형되어야 하므로 벡터/심볼 접근으로 다룹니다. 다음과 같은 요청 시 사용하세요: - "로고 만들어 줘", "브랜드 마크 디자인" - "워드마크", "레터마크", "심볼 로고" - "앱 아이콘 만들어 줘", "파비콘 디자인" - "로고 컨셉 몇 개 뽑아 줘", "로고 아이디어" - "기존 로고 다른 스타일로", "로고 리디자인" 이미지 생성 실행·모델 선택·비용 고지는 moai-media:media-higgsfield-core 계약에 위임하고, 이 스킬은 "무엇을 만들지"(로고 타입·브랜드 정합·제약)까지만 정합니다. 로고는 recraft_v4_1 벡터 계열로 생성합니다. 브랜드 비주얼(히어로·OG·목업)은 design-brand-visual을 쓰세요.
-
modu-ai Bundle Career Portfolio한국 신입 취준생·재직자를 위한 분야별 포트폴리오 구성과 프로젝트 기술서 작성 스킬입니다. "포트폴리오 만들어줘", "프로젝트 정리해줘", "노션 포트폴리오 1시간 만에"처럼 말하면 됩니다. 개발(GitHub·기술 블로그)/디자인(Figma·Behance)/마케팅/기획 분야별 + 검색되는 노션 포트폴리오 + 채용공고 맞춤형 1page 셀링 + 877건 노하우 기반 비중 배분을 지원합니다.
-
modu-ai Skill Design Workflow통합 디자인 워크플로 스킬 — Path A(Claude Design 핸드오프 번들 가져오기, 필요시 Figma 추출기 경유)와 .moai/design/(research·system·spec)에서 design-brief 컨텍스트 로딩을 처리합니다. DTCG 토큰을 검증하고 브랜드 컨텍스트 헌법 우선순위를 보장합니다. /moai design 워크플로에 사용 — 일반 디자인 시스템 문서용이 아닙니다. Use for the /moai design workflow: Path A Claude Design handoff-bundle import (via Figma extractor when needed), design-brief context loading from .moai/design/, DTCG token validation, and brand-context constitutional priority.
-
netvar1337 Skill LLM Jailbreak MultimodalMultimodal jailbreaks: typography-in-image, adversarial pixels, screenshot policy text, PDF polyglots, audio stego.
Audited -
acaprino Skill Review FrontendFull frontend review in one pass: a design and UX audit (typography, color and contrast, spacing and layout, motion, cognitive load, platform conventions, design-token architecture, component states, visual craft) alongside auto-detected code dimensions (React performance, TypeScript type safety, PWA architecture, platform compliance). Produces one scored report at `.frontend-review/report.md`. TRIGGER WHEN: the user asks for a complete frontend review, a design plus code review, a UI/UX audit paired with a code audit, or a full pass over a frontend surface before shipping. DO NOT TRIGGER WHEN: the request is React-only (use `/react-development:review-react`), TypeScript-only (use `/typescript-development:review-typescript`), PWA-only (use `/pwa-expert:pwa-audit`), or a general code review with no design dimension (use `/senior-review:code-review`).
-
argentaios Bundle Argentos P5jsProduction pipeline for interactive and generative visual art using p5.js. Creates browser-based sketches, generative art, data visualizations, interactive experiences, 3D scenes, audio-reactive visuals, and motion graphics — exported as HTML, PNG, GIF, MP4, or SVG. Covers: 2D/3D rendering, noise and particle systems, flow fields, shaders (GLSL), pixel manipulation, kinetic typography, WebGL scenes, audio analysis, mouse/keyboard interaction, and headless high-res export. Use when users request: p5.js sketches, creative coding, generative art, interactive visualizations, canvas animations, browser-based visual art, data viz, shader effects, or any p5.js project.
-
argentaios Bundle Argentos Design MdAuthor, validate, diff, and export DESIGN.md files — Google's open-source format spec that gives coding agents a persistent, structured understanding of a design system (tokens + rationale in one file). Use when building a design system, porting style rules between projects, generating UI with consistent brand, or auditing accessibility/contrast.
-
fluxonlab Skill Design System ReviewUse when you need to inspect component reuse, design tokens, variants, primitives, and design system drift.
-
fluxonlab Skill Premium Frontend UIA comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.
-
fluxonlab Skill UI Consistency ReviewUse when you need to audit UI consistency, spacing, color, typography, states, accessibility basics, and responsive behavior.
-
pavel-kravchenko Skill Bio Core Multiple Sequence AlignmentAlign FASTA sequences via MAFFT/MUSCLE/Clustal Omega, parse with Biopython AlignIO, build UPGMA guide trees, score sum-of-pairs/consensus/conservation. Use for MSA, MSA tool choice, consensus/logo, or guide-tree building.
Audited -
zgbrenner Skill Trademark Clearance TriageUse when a user wants a preliminary triage of a proposed brand name, product name, or logo before engaging trademark counsel for a formal clearance search.
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 design-system-audit, btp-diagram-generator, major-image. 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.