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.
-
ihlamury Bundle Planetscale UI SkillsPlanetscale's UI design system. Use when building interfaces inspired by Planetscale's aesthetic - dark mode, Inter font, 4px grid.
-
ihlamury Bundle Hugging Face UI SkillsHugging Face's UI design system. Use when building interfaces inspired by Hugging Face's aesthetic - dark mode, Inter font, 4px grid.
-
ihlamury Bundle Launchdarkly UI SkillsLaunchdarkly's UI design system. Use when building interfaces inspired by Launchdarkly's aesthetic - dark mode, Inter font, 4px grid.
-
ihlamury Bundle Lemonsqueezy UI SkillsLemonsqueezy's UI design system. Use when building interfaces inspired by Lemonsqueezy's aesthetic - light mode, Inter font, 4px grid.
-
ihlamury Bundle Weights Biases UI SkillsWeights Biases's UI design system. Use when building interfaces inspired by Weights Biases's aesthetic - light mode, Inter font, 4px grid.
-
eachlabs Bundle Logo GenerationGenerate professional logos using each::sense AI. Create wordmarks, icon logos, combination marks, monograms, mascots, emblems, and abstract logos for brands, startups, and businesses.
-
eachlabs Bundle Video WatermarkAdd or remove watermarks from videos using each::sense AI. Add logo watermarks, text overlays, transparent watermarks, animated watermarks, and remove unwanted watermarks from TikTok, stock footage, and other sources.
-
eachlabs Bundle Menu Design GenerationGenerate professional restaurant, cafe, and bar menu designs using each::sense AI. Create print-ready menus, digital displays, QR code menus, and seasonal specials with stunning food photography and elegant typography layouts.
-
eachlabs Bundle Tshirt Design GenerationGenerate print-ready t-shirt and apparel designs using each::sense AI. Create graphic tees, typography designs, vintage styles, illustrations, and more for custom apparel printing.
-
acedatacloud Skill FigmaRead Figma design files, nodes, rendered images and comments via the Figma REST API. Use when the user mentions Figma, a figma.com file link, implementing a design as code, extracting design tokens / colors / spacing, or summarizing comments on a design.
-
acedatacloud Skill Gpt Image 2Generate and EDIT images with OpenAI gpt-image-2 via AceDataCloud API. Use when you need high-fidelity images from a prompt, or to edit/composite existing images (e.g. fuse a real logo/QR/screenshot into a scene, keep characters consistent, restyle). Strong at legible text and faithful editing.
-
glebis Bundle TypographyThis skill should be used when applying proper typography to prose text or files in Russian, English, German, or French — smart quotes per locale («ёлочки», “curly”, „Gänsefüßchen“, « guillemets »), correct dashes (тире, em/en dash, Gedankenstrich, tiret), non-breaking spaces, ranges, ellipsis, and French espaces insécables before ! ? ; :. Fully deterministic via a pinned typograf-based CLI; never apply these rules by hand. Triggers on "типографика", "typograf", "оттипографь", "smart quotes", "fix typography", "неразрывные пробелы".
-
glebis Skill Design TokensMOVED — design-tokens now ships in the humane plugin (glebis/humane-agentic-design), not here. This directory is a redirect; install humane to get the maintained skill.
-
eyadsibai Skill UI UX DesignThis skill should be used when the user asks about "UI design", "UX design", "user interface", "user experience", "wireframes", "mockups", "design patterns", "design system", "component design", "layout", or mentions UI/UX decisions.
-
eyadsibai Skill BrandingThis skill should be used when the user asks about "branding", "brand identity", "logo design", "color palette", "brand guidelines", "visual identity", "brand voice", "style guide", or mentions brand-related decisions.
-
fandhe-ai-agent-reference-skil Bundle Windows DesignWindows アプリ開発 (Fluent Design / WinUI 3) の デザインガイドラインリファレンス。 layout, spacing, alignment, elevation, geometry, breakpoints, Color, Mica, Acrylic, Smoke, Reveal Highlight, materials, typography, Segoe Fluent Icons, app icons, motion, easing, connected animation, page transitions, parallax, reduce motion, NavigationView, TabView, CommandBar, menus, keyboard accelerators, access keys, accessibility, high contrast, RTL, globalization, widgets design。
-
fandhe-ai-agent-reference-skil Bundle Android Compose ComponentsAndroid Jetpack Compose (Kotlin) の androidx Material3 コンポーネントリファレンス。 Button, IconButton, FloatingActionButton, Checkbox, Switch, Slider, TextField, SearchBar, DropdownMenu, Chip, DatePicker, TimePicker, Card, Scaffold, Dialog, BottomSheet, TopAppBar, NavigationBar, NavigationRail, Tab, Snackbar, ProgressIndicator, Badge, Icon, MaterialTheme, ColorScheme, Typography, Shapes。
-
nickcrew Skill Chart BuilderUse this skill when creating data visualizations, selecting the right chart type, or generating chart code. Trigger phrases: 'build a chart', 'visualize this data', 'create a graph', 'plot these numbers', 'which chart should I use for'. Not for building interactive dashboards, designing UI components, or creating infographics with design tools like Figma.
-
nickcrew Skill Color PaletteUse this skill when creating, evaluating, or documenting color palettes for brands, products, or design systems. Trigger phrases: 'create a color palette', 'what colors should I use', 'brand colors for', 'accessible color scheme'. Do NOT use for image editing, photo color correction, or print production color matching.
-
nickcrew Skill Frontend DesignUse this skill when specifying, designing, or documenting UI components, layouts, and design systems for frontend implementation. Trigger phrases: 'design this UI component', 'create a responsive layout', 'spec the CSS for', 'design system for'. Do NOT use for backend development, server-side logic, data engineering, or writing server code.
-
nickcrew Bundle Design Journey ReviewCombined visual design and user journey review: color systems, typography, spacing, information density, visual hierarchy, workflow stages, emotional curve, friction points, and daily-use optimization. Use when evaluating how an interface looks, how it serves its user over time, and whether the design earns its space.
-
podo Bundle ImpeccableDesign fluency for frontend development. 1 skill with 23 slash commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.), curated anti-pattern detection CLI, and runtime node scripts. Covers UI design, redesign, critique, accessibility, motion, theming, typography, and component craft across websites, dashboards, and apps.
-
podo Bundle Baseline UIValidates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS. Ensures UI work meets baseline quality standards before shipping.
-
podo Bundle Design HTMLImplement designs as production-ready HTML/CSS with pixel-level fidelity. Garry Tan's design-html skill — translates mockups, Figma specs, or design descriptions into clean, semantic, accessible HTML output.
-
podo Bundle Figma SkillConnects to Figma API, discovers Community resources matching the project, extracts design tokens, and generates framework-specific code for 7 frameworks.
-
podo Bundle Open DesignOpen-source local-first alternative to Claude Design with 31 design skills (web prototypes, SaaS landing pages, dashboards, mobile onboarding, gamified apps, email, social carousels, poster design, motion frames, sprite animation) and 71 brand-grade design systems. Runs as a daemon plus web UI or desktop app.
-
podo Bundle P5js HermesProduction pipeline for interactive and generative visual art using p5.js. Covers 2D/3D rendering, noise and particle systems, flow fields, GLSL shaders, pixel manipulation, kinetic typography, WebGL, and audio-reactive visuals. 10 reference files from NousResearch's Hermes agent.
-
podo Bundle Claude2figmaFour-skill enforcement layer for design system compliance in Figma: ensures components are instances of master components, and colors/fonts/spacing/radii bind to Figma variables and styles. Every canvas write is auto-verified for token compliance.
-
podo Bundle Huashu DesignHTML-native design skill producing magazine-grade typography, precise CSS Grid, animated prototypes with 20 design philosophies, 5-dimension self-review, and MP4 export. Agent-agnostic and works without external component libraries.
-
podo Bundle Humanize TextScores and rewrites text to remove AI writing patterns. Rates content across 7 dimensions — AI vocabulary, content inflation, grammar patterns, UX copy quality, structural tells, punctuation, and meta-content — each on a 1–10 scale. Works with raw text, Figma URLs, and UI screenshots. Based on Wikipedia's Signs of AI Writing field guide.
-
podo Bundle Openai Skills9 official OpenAI skills: 6 Figma design skills (mirroring the Figma official suite), frontend design for landing pages and apps, PowerPoint slide creation with PptxGenJS, and image generation using the OpenAI Image API.
-
podo Bundle Design AuditorAudits designs across 19 professional categories including typography, color/contrast, spacing, visual hierarchy, consistency, WCAG, forms, motion, dark mode, responsive, loading/empty/error states, microcopy, i18n/RTL, elevation, iconography, navigation, design tokens, ethical design/dark patterns, and Nielsen heuristics. Scores 0-100 with severity-ranked issues.
-
podo Bundle Brand Design MdFetches exact design tokens (colors, type weights, letter-spacing) for 62 world-class brands including Stripe, Linear, Apple, Figma, Notion, and Nike at runtime, then applies them to your project.
-
podo Bundle Figma CatalogueDomain navigator for Figma, design-to-code, design tokens, and official platform skill suites. Routes to the right skill for working between design tools and code, managing design systems, or using official platform skills (Anthropic, Vercel, Expo, Software Mansion, Callstack).
-
podo Bundle Frontend Design8 aesthetic anchors (Brutalist, Nordic, Cyberpunk, Vaporwave, Organic, Luxury, Editorial, Industrial), each locking palette, typography, and texture to specific CSS tokens. Pick one per brief and the skill generates matching code.
-
podo Bundle Design With ClaudeDeterministic design-system audit plus a full set of design specialists as slash commands. `npx dwic-audit` scans a project across 8 categories (color, typography, spacing, accessibility, forms, navigation, motion, copy) using WCAG contrast math and token parsing — no LLM, no token, nothing leaves the machine — then routes each finding to the specialist that fixes it. Specialists cover visual hierarchy, interaction design, design system architecture, typography, color, spacing, motion, forms, navigation, dashboards, mobile, landing pages, auth UX, healthcare UX, b2b SaaS, e-commerce, dark mode, error handling, onboarding, and data viz. No runtime dependencies, pure markdown.
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 impeccable, figma, gpt-image-2. 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.