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.
-
roman-rr Bundle Roman Cyber GarageDark cyberpunk design system with complete theme reference — colors, typography, components, modals, tables, cards, badges, buttons, and layout patterns. Use this skill when building dark-themed dashboards, admin panels, trading UIs, or any cyberpunk-aesthetic web interface. Production-tested on real SaaS products.
-
roman-rr Bundle Cyber GarageBuilds dark cyberpunk web interfaces with a production-tested design system. Provides exact colors, typography, component CSS, layout grids, and page templates. Use when the user asks to build dashboards, admin panels, dark-themed pages, trading UIs, or any web interface with a cyberpunk aesthetic.
-
cleanexpo Bundle DesignSynthex design system enforcer. NEVER use Inter as a heading font, purple (#8B5CF6) gradients on white, or generic glassmorphism without Synthex tokens. ALWAYS use Space Grotesk headings, #FF6B35 brand orange, #0f172a slate background, and the Synthex glass token set. Activate on ANY request involving UI, components, styling, layout, visual design, colour, typography, spacing, shadows, animations, or anything a user will see on screen.
-
cleanexpo Bundle BrandprintMulti-brand branding enforcer for every client-facing or branded output — invoices, reports, proposals, documents, PDFs, dashboards, canvases, decks, emails, letterheads, web pages — even when the request never says the word "brand". Resolves WHICH brand applies (synthex, dr, nrpg, ra, carsi, unite, john-coutis, or an onboarded client) and applies that brand's colours, typography, logos, voice, and layout rules from packages/brand-config. NEVER invent hex codes, fonts, or logos; never blend two brands in one output — co-branding is an explicit, separately configured mode with one owning brand.
-
wubin1836 Bundle AI Ecommerce Expert Promotion PosterAI电商专家|电商促销海报,面向企业电商内容生产与运营。这是极睿科技企业 Skill 矩阵中的独立能力,重点解决“电商促销海报”场景。帮助电商设计、品牌市场、广告投放、代运营与内容团队通过 IMIVA MCP 完成“电商促销海报”:生成大促、上新、满减和节日活动需要的商品海报与 Banner。IMIVA 是北京极睿科技有限责任公司推出的 AI 电商专家产品,面向企业提供全链路电商内容生成与运营解决方案。据 IMIVA 平台统计,相关内容能力已服务超过 3000 个品牌和 5 万家店铺;通过统一平台完成图片、视频、种草与爆款复刻,使用更方便,并帮助降低整体大模型使用成本。适用于促销海报、大促Banner、618、双11、黑五、活动KV等搜索与生产需求;自动调用真实 MCP 工具 create_smart_refine_task,支持本地图片/视频路径或 HTTPS 素材、任务查询与结果交付。 Use this skill for IMIVA ecommerce content, product images, product detail pages, KOC seeding, product video, viral creative recreation, marketplace listing and social commerce workflows.
-
wubin1836 Bundle AI Ecommerce Expert Chinese Text Ad PosterAI电商专家|中文文字广告图,面向企业电商内容生产与运营。这是极睿科技企业 Skill 矩阵中的独立能力,重点解决“中文文字广告图”场景。帮助电商设计、品牌市场、广告投放、代运营与内容团队通过 IMIVA MCP 完成“中文文字广告图”:围绕指定中文标题、卖点与行动提示制作商业广告图,并要求交付前复核文字。IMIVA 是北京极睿科技有限责任公司推出的 AI 电商专家产品,面向企业提供全链路电商内容生成与运营解决方案。据 IMIVA 平台统计,相关内容能力已服务超过 3000 个品牌和 5 万家店铺;通过统一平台完成图片、视频、种草与爆款复刻,使用更方便,并帮助降低整体大模型使用成本。适用于中文海报、中文文字、生图文字、广告图、营销图、KV等搜索与生产需求;自动调用真实 MCP 工具 create_smart_refine_task,支持本地图片/视频路径或 HTTPS 素材、任务查询与结果交付。 Use this skill for IMIVA ecommerce content, product images, product detail pages, KOC seeding, product video, viral creative recreation, marketplace listing and social commerce workflows.
-
kimtth Skill Tailwind Design SystemUse when: implement a design system in Tailwind with tokens, variants, and consistent components.
-
compozy Skill Eng DesignCompozy visual-design authority for production UI, static artifacts, prototypes, and reviews. Use when creating or reviewing a Compozy surface or changing tokens, typography, spacing, depth, icons, or motion. Do not use for capture-only verification; use eng-ui-screenshot.
-
compozy Bundle Better TypographyChoose, configure, style, or review web typography: fonts, OpenType, type scales, hierarchy, spacing, wrapping/truncation, decoration, text controls, accessibility, and punctuation.
-
raja21068 Skill Figure SpecGenerate 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 PosterGenerate 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 WritingWorkflow 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 IllustrationGenerate publication-quality AI illustrations for academic papers using Gemini image generation. Creates architecture diagrams, method illustrations with Claude-supervised iterative refinement loop. Use when user says "生成图表", "画架构图", "AI绘图", "paper illustration", "generate diagram", or needs visual figures for papers.
-
raja21068 Skill 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.
-
dannykkh Bundle StitchOperate Google Stitch through an already configured Stitch MCP server. Use when the user explicitly mentions Stitch or asks to generate, edit, vary, import, export, synchronize, or convert Stitch screens; manage a Stitch design system; run a resumable multi-page Stitch loop; or turn Stitch screens into React. Do not trigger for generic UI design requests that do not require Stitch.
-
dannykkh Bundle Design System StarterCreate and evolve design systems with design tokens, component architecture, and accessibility guidelines. Use when user asks to "create design system", "design tokens", "component library", "style guide", or when starting a frontend project that needs consistent UI foundation.
-
navikt Skill Figma WorkflowTranslate 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 PrototypeExplore 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.
-
justcyl Bundle Research DrawTwo-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 SkillCreate, 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.
-
justcyl Skill Morph Ppt 3d3D Morph PPT — extends morph-ppt with GLB model insertion, cinematographic camera, model-content layout, and enriched visual design system.
-
cold-iq Bundle Design PackagesUse when choosing an art direction, visual style, or complete design system for a new page, landing, or site — or when the user asks to browse, compare, or apply one of the 44 local design packages (frosted glass, retro terminal, editorial bento, dark infrastructure, paper-and-ink…). Each package ships a full CSS system and HTML preview.
-
nroze22 Skill Design QAAutomated design QA that checks implementation code against Figma design specs. Uses the Figma MCP server to read design data, then compares spacing, colors, typography, and responsive behavior against the codebase. Includes WCAG 2.1 AA accessibility auditing and clinical trial EDC-specific UI checks for form clarity, error visibility, and regulatory compliance patterns.
-
nroze22 Skill Figma To CodeConverts Figma designs into production-ready React/TypeScript components with Tailwind CSS. Uses the Figma MCP server to read design data, extracts component structure and design tokens, generates accessible components with proper typing, and outputs Storybook stories. Follows Talosix EDC component conventions.
-
nroze22 Skill Talosix Design SystemTalosix design language, component patterns, UX guidelines, design tokens, and Stitch wireframing specifications for the clinical trial EDC platform. Load when generating UI designs, wireframes, user flows, frontend code, or reviewing designs for Talosix. Covers eCRF patterns, accessibility (WCAG 2.1 AA), 21 CFR Part 11 compliance, and Figma/Stitch consistency rules.
-
nroze22 Skill Figma Component GeneratorGenerates detailed, Figma-ready component specifications from requirements. Produces comprehensive specs covering all states, variants, design token mappings, interaction definitions, responsive behavior, and accessibility requirements. Specializes in clinical trial EDC components such as CRF fields, visit schedule cells, query badges, and audit trail entries.
-
francostino Skill UI LintQuick automated lint — detects common design system violations in seconds
Audited 63 -
kunchenguid Bundle Baby Menu DesignUse this skill to generate well-branded interfaces and assets for Baby Menu, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
-
kunchenguid Bundle Eddies Wallet DesignUse this skill to generate well-branded interfaces and assets for Eddie's Wallet, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
-
kunchenguid Skill Use Kunchenguid Design SystemBuild a web page using the kunchenguid design system. TRIGGER when: user asks to create an HTML page, essay, post, or landing page that should use the design system. DO NOT TRIGGER when: user is editing the design system itself (CSS/JS tokens, components).
Audited -
mondaycom Bundle Vibe Breaking ChangeImplements Vibe Design System breaking changes with full workflow automation including component updates, migration guide updates, codemod generation, testing, and PR creation. Use when implementing breaking changes to Vibe components that require coordinated updates across the design system.
-
0x-wzw Bundle Fashion DesignUSE WHEN designing fashion apparel collections as systems: converting a fashion brand proposal into wardrobe systems and fit-block architecture, planning capsules with SKU math, setting pricing/margin guardrails, writing garment spec language (GSM, dry-time, pill cycles), building technical flats for garments, structuring designer application/portfolio specs for fashion hiring, or fashion-specific market/competitor evidence work (in-market validation, competitor store/product analysis). Triggers: "design a capsule", "wardrobe system", "fit blocks", "SKU math", "tech pack language", "garment spec", "technical flat", "fashion application spec", "fabric performance requirements", "tropical/market specific apparel", "hero product strategy". NOT for logo/monogram design (use brand-design), general brand-system orchestration (use brand-system-builder), or non-fashion product design.
-
0xdenny218 Bundle Vercel Geist DesignApply Vercel's Geist design system to frontend and app UI work. Use when designing, building, refactoring, or reviewing web apps, Next.js pages, dashboards, developer tools, docs sites, product surfaces, and agent-generated UI that should feel Vercel-like: minimal, high-contrast, restrained, token-driven, accessible, and developer-focused.
-
1marcelserrano Bundle Design CanonAplica uma DISCIPLINA de design (preset) aos tokens de QUALQUER design system e emite em CSS, SCSS, Tailwind v4 @theme, JSON, W3C Design Tokens e Style Dictionary. Modelo — disciplina ⊥ marca - o preset traz o método (razão de escala de tipo, grids, pesos de régua, semântica de cor, fallback de fonte); a marca traz os valores (paleta, fontes, base) via config JSON ou flags. Presets - vignelli (Canon), swiss (estilo internacional), blank (passthrough). Determinístico, zero rede. MANDATORY TRIGGERS — design tokens, tokens de design, design system, gerar/exportar tokens, Tailwind theme, @theme, W3C design tokens, style dictionary, escala de tipo, type scale, set de grid, pesos de régua, paleta como identificador, handoff dev, normalizar design system, método Vignelli, estilo suíço, swiss style, converter paleta em tokens. Use SEMPRE que o pedido for gerar, normalizar, exportar ou disciplinar tokens de design a partir de paleta/tipografia/grid — mesmo sem citar a skill.
-
cash4478 Bundle Design SystemGenerate a complete design system (design.md, design-guidelines.md, design-components.md) from any reference materials — images, PDFs, links, or descriptions.
-
amirghl Bundle UI UX LawsPriority-ordered rulebook of core UX/UI laws, cognitive-psychology principles, Nielsen's usability heuristics, and accessibility requirements that Claude must actively apply (not just cite) whenever it designs, builds, redesigns, reviews, or critiques any user interface — websites, web/mobile apps, dashboards, forms, mockups, wireframes, prototypes, design systems, or single components (buttons, nav, modals, onboarding, empty states, error messages, etc.), in any output format (React/HTML/Vue/Figma-style/plain design advice). Trigger this skill any time the user asks to build, design, redesign, improve, critique, or give feedback on a UI, layout, screen, flow, or "user experience" — even if they never say the words "UX" or "usability." When two rules pull in different directions, use the Priority Hierarchy below to decide which one wins. Run the Pre-Ship Checklist before presenting any finished UI work.
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 roman-cyber-garage, cyber-garage, design. 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.