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.
-
murphytrueman Skill Figma Variable AuditAudit Figma variable collections against token architecture best practices. Trigger when someone says: audit my Figma variables, check my Figma tokens, are my variables structured correctly, Figma variable health, review my variable collections, variable naming check, or anything about auditing the quality or structure of Figma variables.
-
murphytrueman Skill Version Bump AdvisorRecommend the correct semver bump with reasoning and a generated changelog entry. Trigger when someone says: what version bump, is this a breaking change, semver recommendation, should this be major or minor, version this release, changelog entry, what kind of release is this, or anything about versioning a design system release.
-
murphytrueman Skill Pattern DocumentationWrite documentation for a design system pattern — a multi-component recipe covering use cases, anti-patterns, composition, and related patterns. Patterns span multiple components working together (e.g. a form pattern, a data table pattern). Trigger when someone says: document this pattern, write the pattern page, usage pattern, when to use this, pattern guidelines, document how this works, or anything about creating documentation for a reusable UI pattern rather than a single component. Do NOT trigger for writing usage guidelines for a single named component — use usage-guidelines for that.
-
murphytrueman Skill Context Engine BuilderGenerate a context engine — seven structured blueprint files (UX, UI, content, accessibility, ethical, technical, business intelligence) that encode everything an AI agent needs to work with a design system. This produces YAML infrastructure in .ai/context-engine/, NOT a health score or quality assessment. Trigger when someone says: build a context engine, create a system brain, build the seven blueprints, context engine, blueprint stack, encode design system knowledge for AI, make our system AI-navigable, or anything about creating structured knowledge files that AI agents load to understand the system. Do NOT trigger for scoring or assessing system health — use system-health for that.
-
murphytrueman Skill Engineering OnboardingCreate an onboarding guide for an engineer joining a team that consumes the design system. Trigger when someone says: onboard new engineer, developer getting started guide, new engineer guide, engineering onboarding, first day for developers, frontend onboarding, or anything about helping an engineer new to the team get up to speed with the design system.
-
murphytrueman Skill AI Component DescriptionGenerate AI-optimised text descriptions for components, formatted for Figma's MCP server and LLM consumption. This produces prose descriptions in a six-section format (purpose, props, anti-patterns, composition, accessibility, examples), NOT JSON schemas or structured data files. Trigger when someone says: write component description for AI, Figma MCP description, write the description for Claude to read, six-section description, describe this component for AI, or anything about writing text that makes components legible to LLMs. Do NOT trigger for JSON metadata schemas, structured constraint files, or programmatic tooling data — use metadata-schema-generator for those.
-
murphytrueman Skill Metadata Schema GeneratorGenerate structured JSON metadata schemas for design system components — machine-readable constraint definitions that encode props, behavioural rules, composition constraints, prohibited combinations, and accessibility contracts as programmatic data. This produces JSON files for tooling (MCP servers, linters, code generators, test frameworks), NOT text descriptions for humans or Figma. Trigger when someone says: generate metadata schema, JSON schema for components, component contract as JSON, structured metadata for tooling, prop constraints as data, machine-readable component rules, or anything about producing JSON/structured data that tools consume programmatically. Do NOT trigger for Figma descriptions, component documentation, or AI-readable text — use ai-component-description for those.
-
murphytrueman Skill Accessibility Per ComponentRun an accessibility audit on a specific design system component. Trigger when someone says: accessibility check, a11y audit, WCAG compliance, is this accessible, check accessibility, does this meet WCAG, screen reader support, keyboard navigation check, or anything about auditing the accessibility of a specific component.
-
mikefluff Bundle Logo MakerBrand mark / wordmark / logo generator. Default ideogram-3-quality for clean embedded text (gpt-image-2 fallback). Six presets: wordmark, minimal, illustrated, typographic, geometric, emblem. Optional palette hint. N variants per call. Use when: 'logo', 'brand mark', 'wordmark', 'логотип', 'эмблема', 'фирменный знак'.
-
mikefluff Bundle Flyer MakerTurn event details (title / date / location / CTA) plus optional photo into a poster / flyer / social-event-graphic with embedded text in a chosen style. Multi-aspect: portrait, square, story, landscape, a4. Use when: 'make a flyer for X', 'event poster', 'workshop flyer', 'meetup poster', 'афиша', 'плакат', 'флайер для мероприятия'.
-
mikefluff Bundle Image PromptWrite prompts for 14+ frontier AI image generators (Midjourney V8.1, Flux 2/Kontext, Nano Banana Pro/2, gpt-image-2, Ideogram 4/3, Recraft V3, Seedream 5, Qwen, HiDream, Krea, SDXL). Modes: T2I, edit, multi-ref, text-in-image. Use when: 'prompt for an image', 'Midjourney prompt', 'edit with Kontext', 'character consistency', 'poster with text'.
-
mikefluff Bundle Style SuggestVisual style generator — turn a text description and/or reference image into a structured style entry for the prompt-library. Duplicate-detect then emit v2.15.0 schema (background, accents, mood, typography, composition_signature). Use when: 'make a new style', 'add a style based on this image', 'добавь стиль', 'предложи стиль'.
-
mikefluff Bundle Meme Card MakerMeme-format graphic generator — top + bottom text + optional centerpiece image. Impact-style bold typography. 5 templates: drake, distracted-boyfriend, expanding-brain, two-buttons, custom. Optional --base-photo. Default gpt-image-2. Use when: 'meme', 'meme template', 'meme image', 'мем', 'сделай мем'.
-
mikefluff Bundle Quote Card MakerQuote card / aphorism graphic generator — bold short text + attribution + minimal visual. Typography IS the image. Multi-aspect: 1080×1080, 1080×1350, 1080×1920. Default ideogram-3-quality for clean text. Use when: 'quote card', 'aphorism graphic', 'pull quote post', 'цитата для соцсетей', 'афоризм на картинке', 'постер с цитатой'.
-
mikefluff Bundle Translation SyncRead-only parity checker for multilingual translations (RU↔EN↔PT-BR). Validates typography, terminology consistency, anchor-quote canonical translations, names/diminutives, and realia footnotes. Produces a parity report; never edits. Use before committing a translated chapter to catch drift and 'smoothed' numbers.
-
espennilsen Skill Design SystemBuild, maintain, and audit design systems — tokens, component libraries, style guides, and cross-project consistency. Use when asked to create a design system, define tokens, audit component consistency, generate a style guide, or sync design tokens with code.
-
espennilsen Bundle Extract Design SystemReverse-engineer a design system from a live website (public URL or localhost). Extracts colors, typography, spacing, shadows, radii, breakpoints, and component patterns using a headed Playwright browser. Captures screenshots of pages, components, and interactive states at real device resolutions. Produces structured design tokens and optionally seeds a Penpot project. **Triggers — use this skill when:** - User says "extract design system from [url]" - User asks to "reverse-engineer the styles from [site]" - User says "build a design system based on [website]" - User asks to "pull the design tokens from [url]" - User says "analyze the design of [site]" - User asks to "import styles from [website] into Penpot" - User points at a URL and asks about its colors, fonts, spacing, or components
-
zime-ai Bundle End Client RegistrationAudits a partner/reseller's end-client deal registration for completeness — partner identity, end-client entity kept distinct from the partner, engagement scope, conflict check against the direct pipeline, confirmed permission to engage the end-client contact, commercial terms, and an expiry window. Use when reviewing a channel/partner deal registration export or a partner registration-review call, before accepting the registration into the partner pipeline. Distinct from `new-business-registration` (sibling skill), which audits a direct new-logo opportunity with no partner involved.
-
zime-ai Bundle New Business RegistrationAudits a new-logo deal-registration record, or the call/checkpoint where a rep registers a brand-new opportunity into pipeline, against general deal-registration practice covering entity identification, duplicate/conflict checking, source attribution, and ICP fit. Use when reviewing a fresh deal registration before it's approved, or sweeping a registration export for records missing required fields. Not for partner-sourced end-client registrations — see end-client-registration.
-
datex Bundle Datex Studio SharedShared reference content used by other Datex Studio skills (report-creator, report-editor, function-creator, datasource-creator, endpoint-creator, hub-editor, branch-code-reviewer, commit-message-generator, release-notes-generator). Not invoked directly — other skills link into the files below. Install this alongside any Datex Studio skill so cross-skill references resolve. Covers: the canonical `dxs configuration` round-trip (get → extract `.json` → edit → upsert) and its silent-wipe guard, branch & connection selection, Studio lifecycle, designer context navigation, flow code patterns (`$utils.isDefined()`, OData pagination), RDLX-JSON report authoring (design standards, CLI commands, dataset rules, sample data, deploy patterns, troubleshooting), component-type references for cards (cti 11), lists (cti 14), and frontend flows (cti 27), and the Fluent 2 app design system (theme tokens, component class names, traps) for hand-authored UI.
-
gordonlu Bundle Suv CommercialGenerate a top-tier, ultra-premium future luxury SUV commercial — elegant, restrained, real, like an international luxury car brand spot — as one continuous 15s 16:9 24fps film from a single vehicle reference image. Use when the user wants a luxury car / SUV brand film, a showroom or Brutalist design-studio ad, a cinematic car-launch commercial, or a "car ad" that must feel expensive and calm rather than like a tech demo or racing game. Locks the vehicle to the reference image (no redesign, no second interior), enforces LEFT-HAND DRIVE consistency in every interior shot, restricts the palette to a luxury night showroom look, allows only five typography lines with soft-fade motion, and uses NO BGM — pure cinematic SFX only. Original prompt by Flkrstudio (source below); this Skill packages that prompt with reference-locking rules and a verified 15s output.
-
gordonlu Bundle Cinematic Key Art AnimatorTurn one high-quality character illustration, concept art image, fantasy portrait, game key art, anime-style character image, or original mecha artwork into a polished 7–8 second MiniMax H3 moving key-art clip. Automatically route between atmospheric Living Key Art and high-density Action Burst. Preserve identity and art direction while allowing meaningful pose changes, multi-joint action, fast short-form pacing, and multiple escalating peaks when the subject is action-oriented.
-
gordonlu Bundle Alternate Obstacles Toward GoalGenerate a one-take realistic disaster-action film — a female freight-ship engineer sprinting alone through a narrow reactor corridor toward an emergency seal console while crimson fuel-fire waves erupt from floor grates and severed pipes burst into sparks — as a continuous 15s 16:9 24fps shot with fast, clear, non-blurry action. Use when the user wants a cinematic disaster / escape scene, an industrial sci-fi corridor run, a "one goal, one storyline" single-take chase, or a fire-wall escape sequence. T2VA (text-to-video) only, no reference image. Hard rules: one continuous shot with no cuts, a single main character, no slow motion, no facial close-ups, no text/logo, no cartoon look — and the engineer must always stay inside the blast-door safe zone after the door seals (never outside the door, never re-entering from outside).
-
gordonlu Bundle Follow One Encounter And DepartureGenerate a 1970s Greenwich Village street cinéma-vérité piece — a 16mm film camera tailing a twenty-something completely make-up-free young woman through streets and squares, brushing past a group of children, and dissolving into the moving street — as a 15s 4:3 24fps short with raw 16mm film grain, organic texture, pure natural daylight, heavy shoulder-held shake, no stabilization, occasional focus loss, slight light leaks, and an unsettled frame until the very end. Use when the user wants a street-follow / documentary-style long take, a 1970s analog film look, a cinéma-vérité chase after one person, or a "one encounter then departure" observational short. T2VA (text-to-video) only, no reference image. Hard rules: no subtitles and no logo, no music — only on-location sound; no modern digital quality; no on-screen text; keep 4:3 framing and 16mm grain.
-
gordonlu Bundle Pencil Transmutes Reality Into SketchGenerate a POV magic-pencil film — a hand holding an orange pencil points at moving subjects in real Hong Kong and completely transmutes each into animated 2D hand-drawn illustration while the subject keeps its natural motion — as a 10s 16:9 24fps short converting four subjects in sequence: an MTR train, a street cat on a tong-lau windowsill, a red taxi and a woman on a park bench, against a bright realistic Hong Kong environment. Use when the user wants a "magic pencil" effect, a live-action-to-animation transmutation, a POV doodle-wand video, or a "whatever the pencil points at turns into a sketch" clip. T2VA (text-to-video) only, no reference image. Hard rules: the transmutation must be total (no live-action color, material or light left; no half-real-half-sketch states) and synchronous with the subject entering frame (the pencil starts drawing the moment the subject appears — never after a delay); conversion applies only to the pointed subject, never spreads to the environment; converted subjects keep the
-
xingfanxia Bundle Apple PDFDefault PDF generator. Render markdown, notes, or reports as professionally formatted PDFs with SF typography and clean layout. Use this whenever the user asks to "generate a PDF", "create a PDF", "make a PDF", or "convert to PDF" from any text or markdown source.
-
xingfanxia Bundle Gpt ImageGenerate or edit product, editorial, photographic and typography images with GPT Image 2.5. Sunburst favors quality; Flare favors speed. Automatically use the other variant on rate limits.
-
zakariaf Bundle Design System StructureStructures a Flutter design system as tokens→theme→modifiers→shapes with two-tier tokens (primitives named by measured value, semantic slots named by role) exposed through a ThemeExtension read via an asserting of(context); hand-authors both light and dark ColorScheme instead of ColorScheme.fromSeed, keeps every raw color/hex/Colors./Curves./Duration/BorderRadius/fontSize inside lib/theme/ behind a no-raw-values gate, collapses animation to zero under reduced motion, restores the persisted theme before first paint, bundles fonts (never google_fonts/dynamic_color), and derives each stateful meaning's supporting color last so color is never its sole signal. Use when creating or editing ThemeData/ThemeExtension/ColorScheme, adding or renaming a design token, wiring theme injection or theme-mode persistence, reaching for fromSeed/dynamic_color/google_fonts/FontVariation, structuring a theme/ or DesignSystem/ folder, or reviewing any widget that renders a color, radius, duration, or font.
-
stahura Bundle Domo App ThemeClean, professional dashboard theme for Domo custom apps. CSS custom properties, layout patterns, typography, and design polish that feel native to the Domo platform. Includes OKLCH color palette, layered shadows, concentric border radius, tabular numbers, and micro-interaction patterns.
-
stefan-stepzero Bundle Shipkit Design SystemScaffold a tiered design system — principles, tokens, aesthetic direction from project context. Triggers: 'design system', 'design tokens', 'brand guidelines', 'visual direction', 'design principles'.
-
iamk77 Bundle TypeThe type & text lens for a frontend build — where the scale, rhythm, and language-resilience of every string are decided. Use when establishing or auditing a type system, when text looks off, or when the UI has never been tested outside English. The one shift: a modular type SCALE + a spacing SCALE on the same rhythm (never magic px), AND text that survives EVERY language (i18n/BiDi/CJK/locale) — the agent nudges font-sizes until they "look right" and tests only in English, so the scale and the i18n robustness must be gated. Triggers on "type scale / modular scale / font size / font pairing", "spacing / padding / margin / gap / vertical rhythm", "line height / measure / line length / text wrap", "tabular numbers / numerics / data table typography", "RTL / BiDi / CJK / i18n / locale / pluralization / internationalization", "webfont / CLS / font-display / fallback stack", "letter-spacing / tracking / kerning / OpenType", "text looks off / spacing by eye / magic px".
-
iamk77 Bundle ColorThe color & light lens for a frontend build — where the palette gets its perceptual foundation, dark mode gets its re-tuned ramp, contrast gets verified, and data-viz gets a rigorous scale. Use when establishing a color system from scratch, auditing an existing palette for coherence or accessibility failures, designing a dark theme, or building a data visualization. The one shift: every color is a TOKEN in a perceptual system (oklch), dark is a re-tuned ramp (never invert()), and contrast is verified at DESIGN time — the agent emits plausible-but-incoherent hexes and feels no wrongness, so the palette must be a DECIDED system. Triggers on "color palette / oklch / perceptual color", "dark mode / dark theme / re-tuned ramp", "contrast / WCAG / APCA / accessibility", "semantic colors / tokens / color system", "data visualization color / colorblind / sequential / diverging / categorical", "neutral ramp / temperature / gray", "make the colors work / feel right / coherent palette".
-
iamk77 Bundle LiveryThe visual-craft lens for a frontend build — where the surface gets its color, type, depth, and motion. Use after seaworthy's build works, when establishing or auditing a visual language, or when a UI "looks off". The one shift: a polished interface is not a pile of hand-picked values — every visual value is a TOKEN derived from a small SYSTEM, and ad-hoc values are the entropy that makes a UI look amateur and impossible to re-theme. Taste picks the system; the system enforces it. Triggers on "color / theme / dark mode", "typography / type scale / spacing", "design system / design tokens", "make it look good / it looks off / cheap". The benchmark is a human nervous system, not a document, so taste is load-bearing and cannot be outsourced; the agent picks plausible-but-incoherent values and feels none of the wrongness.
-
iamk77 Bundle SystemsThe design-system lens for an atelier build — where tokens, components, and patterns become one coherent, non-drifting artifact, and "design says one thing, code does the other" is decided. Use after the other atelier lenses have produced their tokens, when auditing a token architecture, or when a component library rots. The one shift: the design system is itself STATE, so it gets ONE source of truth — tokens cross the CSS↔JS boundary from one source, the library is a living artifact, design→code does not drift — the agent re-types tokens per file and lets the system rot, so this is gated. Hands the boundary-enforcement contract to surface:bulwark at 1→N. Triggers on "design system / token architecture / token source of truth / @layer tokens / CSS↔JS / Style Dictionary / vanilla-extract", "component library / Storybook / visual regression / pattern library / living documentation / stability tier", "design→code drift / Figma handoff / design sync / tokens in two languages / two sources of truth".
-
iamk77 Bundle BulwarkThe 1-to-N lens for a frontend system that is already alive: the enemy is no longer building, it is ENTROPY — boundaries eroded by one "just this once" cross-import at a time, and the two graphs (component tree vs data dependency) drifting apart. Use when a frontend is in maintenance/scaling, onboarding more people, or showing rot (every change touches everything, the global store keeps growing, only one person dares touch the core). The one move: make the architecture SELF-ENFORCING, so it doesn't depend on everyone remembering the rules — because at scale they won't. Triggers on "the codebase is getting hard to change", "enforce architecture / module boundaries", "lint rules for imports / layering", "circular dependency", "this abstraction is everywhere / should I delete it", "dead code / unused exports / stale feature flags", "Conway's law / team structure", "design system / Storybook / component library", "onboarding / how long until a new hire ships". There is no exit; it is a steady state.
-
iamk77 Bundle GraphicsThe advanced visual layer for a frontend build — where icons, imagery, Canvas, WebGL, GPU, and generative technique live, and "three.js because it looks cool" gets decided. Use after the core visual language is set, when auditing the graphics layer, or when a UI has mismatched icons, layout-shifting images, or GPU surfaces that drain the budget. The one shift: the DOM is the default and the budget — you drop to Canvas / SVG / WebGL / GPU only where the DOM genuinely cannot go, always with a fallback and a budget, and icons come from ONE coherent set — the agent reaches for the GPU as a reflex, mixes icon families, and lazy-loads the LCP hero, feeling no wrongness, so these are gated. Triggers on "icon / icon set / SVG icon / aria-hidden", "image / hero / LCP / CLS / srcset / lazy load / AVIF / WebP / blurhash / illustration", "canvas / WebGL / WebGPU / three.js / shader / GLSL / SDF / raymarching / GPU / generative / procedural / data visualization / retina / devicePixelRatio / blurry canvas".
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 figma-variable-audit, version-bump-advisor, pattern-documentation. 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.