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.
-
tody-agent Skill Cm Design System 2Ultimate Design System Intelligence. Manage, extract, replicate, and improve UI design systems. Extracts design tokens visually from existing sites (Harvester v5), manages multi-page tokens, and utilizes MCP servers like Google Stitch and Pencil.dev to generate complete, consistent design systems (Shadcn UI, Halo, Lunaris, Nitro). Use when the user asks to "extract design from a URL", "create a Shadcn design system", "analyze design tokens", "build a design system for", or "copy the UI style of".
-
wanshuiyin Bundle Paper Illustration Image2Generate publication-quality academic illustrations through a local Codex app-server bridge that uses Codex native image generation. This is a separate experimental alternative to `paper-illustration`, intended for Claude Code users who want a GPT-image-style renderer without modifying the original skill.
-
wanshuiyin Skill Paper Poster HTML 2DEFAULT poster pipeline — build an academic conference poster (ICML/NeurIPS/ICLR/CVPR/...) as a single HTML/CSS file with measurement-driven hard gates, real paper figures, a two-hue design-token system, and print-ready PDF via headless Chromium. Use when the user says "做海报", "poster", "conference poster", "paper poster", or asks to design/redo a research poster.
-
involvex Bundle Stitch DesignUnified entry point for Stitch design work. Handles prompt enhancement (UI/UX keywords, atmosphere), design system synthesis (.stitch/DESIGN.md), and high-fidelity screen generation/editing via Stitch MCP.
-
navikt Skill Figma Workflow 2Translate a chosen Figma design into Aksel code or an implementation brief with component, token and responsive guidance. Use for design-to-code work; use `design-prototype` for visual exploration or changes to the Figma design itself. Design-only agents return a brief.
-
navikt Bundle Design Prototype 2Explore or refine visual concepts, user flows and existing Figma designs through Aksel browser sketches or editable Figma components. Use for layout, hierarchy and visual alternatives; use `prototype` for executable behavior and `figma-workflow` to translate a chosen design into code or an implementation brief.
-
raja21068 Skill Figure Spec 2Generate deterministic publication-quality architecture, workflow, and pipeline diagrams from structured JSON (FigureSpec) into editable SVG. Use when user says "架构图", "workflow 图", "pipeline 图", "确定性矢量图", "figure spec", "draw architecture", or needs precise, editable, publication-ready vector diagrams. Preferred over AI illustration for formal architecture/workflow figures.
-
raja21068 Skill Paper Poster 2Generate a conference poster (article + tcbposter LaTeX → A0/A1 PDF + editable PPTX + SVG) from a compiled paper. Use when user says "做海报", "制作海报", "conference poster", "make poster", "生成poster", "poster session", or wants to create a poster for a conference presentation.
-
raja21068 Skill Paper Writing 2Workflow 3: Full paper writing pipeline. Orchestrates paper-plan → paper-figure → figure-spec/paper-illustration/mermaid-diagram → paper-write → paper-compile → auto-paper-improvement-loop to go from a narrative report to a polished PDF. At `— effort: max | beast` (or explicit `— assurance: submission`), Phase 6 gates the Final Report on `tools/verify_paper_audits.sh`; the PDF is labelled `submission-ready` only when the external verifier is green. Use when user says "写论文全流程", "write paper pipeline", "从报告到PDF", "paper writing", or wants the complete paper generation workflow.
-
raja21068 Skill Paper Poster 3Generate a conference poster (article + tcbposter LaTeX → A0/A1 PDF + editable PPTX + SVG) from a compiled paper. Use when user says "做海报", "制作海报", "conference poster", "make poster", "生成poster", "poster session", or wants to create a poster for a conference presentation.
-
justcyl Bundle Research Draw 2Two-stage workflow for publication-style scientific schematics: generate or use a raster reference with imagegen/PNG/JPG/WebP, then trace it into an editable diagrams.net/draw.io file using research-drawio-skill. Use for Nature-style scientific illustrations, graphical abstracts, model or mechanism schematics, biomedical workflows, AI architecture figures, and paper-style visual drafts that should become editable .drawio source. For complex recognizable elements, author or select dedicated SVG glyphs and compare rendered SVGs against reference crops before inserting them, instead of assembling those elements from draw.io primitives. Enforces a minimum three-round strict pixel-level export/compare/fix loop for close raster-to-draw.io tracing tasks. Use with imagegen, draw.io, diagrams.net, scientific illustration, graphical abstract, paper schematic, figure tracing, SVG glyph tracing, and drawio redraw requests.
-
justcyl Bundle Research Drawio Skill 2Create, revise, audit, and export publication-style scientific flowcharts and schematic workflows in diagrams.net/draw.io. Use for research-paper flowcharts, Nature-style workflows, graphical abstracts, method pipelines, experimental design, cohort/study flow, mechanism schematics, model architecture, editable .drawio files, and SVG/PDF-ready scientific diagrams, including 科研流程图, 论文流程图, draw.io作图, 方法流程图, 实验设计图, 技术路线图, 机制示意图, and 图形摘要. Start from a scientific message, topology, grid layout, semantic composite-element plan, collision-free routing, math-label contract, export contract, and reviewer-risk check. Build editable glyphs from draw.io primitives, such as bar miniatures, DNA helices, matrices, neural networks, cells, samples, and model blocks. Enforce alignment, non-overlap, readable labels, and MathJax formulas. Not for dashboards, generic business diagrams, or illustration-first artwork.
-
kitfunso Bundle FigmaImport Figma assets, brand tokens, components, motion, and shaders into HyperFrames. Use for figma.com links or Figma design imports.
-
crimsonblazezero 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.
-
crimsonblazezero 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.
-
crimsonblazezero Bundle Stitch Design TasteSemantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
-
ziadnagar Bundle FigmaUse the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
-
ziadnagar Bundle Canvas DesignCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
-
ziadnagar 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.
-
nledford 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.
-
kwakseongjae Bundle Omd Init 2프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의 요청에 트리거. CLAUDE.md / AGENTS.md / Cursor rule shim도 함께 설치.
-
synkraai Skill Aiox UX Design Expert 2Activate the AIOX UX/UI Designer & Design System Architect agent (Uma). Complete design workflow - user research, wireframes, design systems, token extraction, component building, and quality assurance Trigger when user asks to ux-design-expert, or says 'activate ux-design-expert', 'switch to ux-design-expert', '@ux-design-expert'.
-
synkraai Skill Aiox UX Design Expert 3UX/UI Designer & Design System Architect (Uma). Complete design workflow - user research, wireframes, design systems, token extraction, component building, and quality assurance
-
synkraai Skill Aiox UX Design Expert 4Activate Uma (ux-design-expert) for UX/UI Designer & Design System Architect. Complete design workflow - user research, wireframes, design systems, token extraction, component building, and quality assurance
-
khanhhuyenngo985-sys Skill Scene Design 2场景设计技能。接收四维度编码,输出场景提示词。驱动场景配图迭代工作流。使用即梦生成图片,中文提示词,自然语言描述。
-
khanhhuyenngo985-sys Skill Character Design 2Character Design
-
vetcoders Bundle Vc Decorate 2Late-stage visual finishing and experience coherence skill. Detects the user's existing design language, audits system consistency, distinguishes identity from drift, upgrades weak patterns, and proposes tasteful polish that works WITHIN the user's system. Never imposes the agent's taste. Never decorates chaos. First make the system coherent. Then make it feel premium. Trigger phrases: "decorate", "make it look good", "add polish", "smaczki", "micro-interactions", "udekoruj", "dopracuj wizualnie", "curb appeal", "premium pass", "finish the experience", "make it feel intentional", "coherence audit", "design system cleanup", "interactive demo", "animate", "add hover effects", "make it feel nice", "visual polish".
-
zouyangxiaohao111 Bundle Canvas DesignCreate beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
-
j-star-films-studios Bundle Frontend DesignGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when styling/beautifying any web UI.
-
telerik Bundle Kendo React Style 2Generates CSS variables and custom themes for KendoReact applications using the Kendo Design System. Use when the user wants to create a custom theme, change colors, update visual style, apply brand guidelines, or customize CSS variables. Trigger on "custom theme", "change colors", "apply brand", "CSS variables", "theme generation", "dark theme", "style assistant", "Kendo theme".
-
telerik Bundle Kendo React Layout 2Retrieves Kendo Design System CSS utility classes for building layouts in KendoReact applications. Use when the user wants to build a page layout, create sections, add spacing, use flexbox/grid utilities, structure a dashboard, or needs layout-related CSS classes. Trigger on "build layout", "add spacing", "flexbox utilities", "grid layout", "Kendo CSS utils", "layout structure", "responsive layout", "page sections". Always call before writing custom CSS for layout purposes.
-
telerik Bundle Kendo Angular Style 2Generates CSS variables and custom themes for Kendo UI for Angular applications using the Kendo Design System. Use when the user wants to create a custom theme, change colors, update visual style, apply brand guidelines, or customize CSS variables. Trigger on "custom theme", "change colors", "apply brand", "CSS variables", "theme generation", "dark theme", "style assistant", "Kendo theme".
-
telerik Bundle Kendo Angular Layout 2Retrieves Kendo Design System CSS utility classes for building layouts in Kendo UI for Angular applications. Use when the user wants to build a page layout, create sections, add spacing, use flexbox/grid utilities, structure a dashboard, or needs layout-related CSS classes. Trigger on "build layout", "add spacing", "flexbox utilities", "grid layout", "Kendo CSS utils", "layout structure", "responsive layout", "page sections". Always call before writing custom CSS for layout purposes.
-
telerik Bundle Telerik Blazor Style 2Generates CSS variables and custom themes for Telerik UI for Blazor applications using the Kendo Design System. Use when the user wants to create a custom theme, change colors, update visual style, apply brand guidelines, or customize CSS variables. Trigger on "custom theme", "change colors", "apply brand", "CSS variables", "theme generation", "dark theme", "style assistant", "Kendo theme".
-
telerik Bundle Telerik Blazor Layout 2Retrieves Progress/Kendo Design System CSS utility classes for building layouts in Telerik UI for Blazor applications. Use when the user wants to build a page layout, create sections, add spacing, use flexbox/grid utilities, structure a dashboard, or needs layout-related CSS classes. Trigger on "build layout", "add spacing", "flexbox utilities", "grid layout", "Kendo CSS utils", "layout structure", "responsive layout", "page sections". Call before layout CSS decisions so utilities, Telerik layout components, and custom CSS can be chosen deliberately.
-
tbc-servicos Skill Feedback 2Registra um aprendizado de correção na base de conhecimento Protheus. Usar quando Claude erra e o dev corrige, para que o erro não se repita com outros devs. Conduz diálogo de confirmação antes de persistir.
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 cm-design-system, paper-illustration-image2, paper-poster-html. 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.