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.
-
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.
-
axelendometrial4386 Bundle Russian Text QualityUse when reviewing or writing code that contains Russian-language UI strings, i18n locale files (ru.json, ru.yml, ru.po), Russian comments, or transliterated identifiers (polzovatel, tovar, kolichestvo). Triggers on mixed English-code + Russian-content projects. Does not cover typography, spelling, or ё/е.
-
blingkusano Bundle Design Token BuilderExpert design token engine that interviews the user and generates a structured, semantic tier-3 Design Token JSON file (W3C DTCG format) plus a mandatory HTML preview — both delivered as files on every run, in that order — adhering to platform and accessibility standards. Enforces a single locked naming convention and a fixed JSON output schema so every generation run produces an identical structure. Use this skill whenever the user wants to build, generate, audit, or update a design token system — color/typography/spacing/radius/border/elevation scales, a multi-brand or multi-theme (Light/Dark) token set, or wants those tokens wired directly into a Figma file as Variables and Foundation documentation pages — even if they only say 'set up our design tokens' or 'build a Figma variable library' without using the words 'design token' explicitly.
-
brinshadewater Bundle Webp Me DaddyPrepare website images with a semantic recipe-driven WebP pipeline that generates optimized assets, structured metadata, responsive variants, accessibility-safe alt text, usage-level overrides, framework snippets, cleanup reports, and lintable output contracts. Use when working with images in a site's public/assets folders, preparing heroes, review heroes, blog covers, avatars, cards, posters, story covers, logo lockups, logo grids, or auditing an image set before shipping.
-
tomevault-io Bundle Teswiz ProjectUse when working in the znsio/teswiz repository to modify framework code, Cucumber/TestNG hooks, Applitools visual testing flows, configs/caps, or related docs/tests. Covers repo-specific file layout, verification commands, and current conventions such as Figma-driven Applitools naming instead of @eyes tags.
-
tomevault-io Bundle Update Int SnapshotsUse when Playwright visual snapshots in e2e/visual.spec.ts-snapshots/ need to be regenerated after a UI change (logo, theme, layout, anything that affects rendered pixels) and the integration suite needs to be rerun via make int
-
tomevault-io Bundle Write Biweekly AnnouncementGenerate bi-weekly announcement posts for Blade Design System updates by analyzing changelog entries from the past two weeks Use when this capability is needed.
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 tailwind-design-system, eng-design, better-typography. 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.