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.

Design & Media

983 skills
nimoqup046-collab
remotion
Creates walkthrough videos from Stitch project screens using Remotion, with transitions, zoom effects, and text overlays.
2
nimoqup046-collab
design-md
Analyzes Stitch projects and synthesizes a semantic design system into a DESIGN.md file, capturing visual theme, colors, typography, and layout principles.
2
sakamoto-family-smile
motion-ui
Implements accessible, performant animations and transitions in React/Next.js apps using Motion, with tokens, reduced-motion support, and device adaptation.
0
lord1egypt
sketch
Generates 2-3 disposable HTML mockups for comparing UI design directions before committing to one.
2
lord1egypt
pretext
Builds creative browser demos with @chenglou/pretext for DOM-free text layout, enabling ASCII art, typographic flow around obstacles, text-as-geometry games, kinetic typography, and text-powered generative art. Produces single-file HTML demos by default.
2
lord1egypt
design-md
Author, lint, diff, and export Google's DESIGN.md design token spec files, including WCAG contrast validation.
2
lord1egypt
claude-design
Guides CLI/API agents through a design process for one-off HTML artifacts like landing pages, prototypes, and decks, emphasizing context gathering and verification.
2
pwdev-solucoes
ux-writing
Escreve microcopy de interface — mensagens de erro, estados vazios, tooltips, rótulos de botão, onboarding e notificações, com foco em clareza e acessibilidade.
2
pwdev-solucoes
design-system
Documents, standardizes, and governs a Vue 3 + shadcn-vue design system, including component documentation templates, patterns for forms, empty states, loading states, and feedback, plus a consistency checklist and conventional commit conventions.
2
pwdev-solucoes
component-audit
Audits Vue 3 components for design-system consistency, legacy patterns, and missing states, producing a component log.
2
pwdev-solucoes
ui-best-practices
Enforces a canonical UI/UX ruleset with 14 sections and 70+ prioritized rules (P0–P3) for implementing, reviewing, or auditing UI components, referencing tokens from a theme reference.
2
pwdev-solucoes
post-visual
Cria peças únicas de feed (quote card, card de dado, capa, anúncio estático) com hierarquia visual e boas práticas de design, integrando-se ao Figma para montagem e screenshot.
2
pwdev-solucoes
story-reels
Cria peças verticais 9:16 (story, reels, shorts, TikTok) respeitando as áreas seguras da interface do app, com guias, legendas acessíveis e verificação por screenshot.
2
pwdev-solucoes
skill-frontend-design
Design precise, production-grade enterprise UI — dashboards, admin panels, SaaS interfaces, and data-heavy applications. Use this skill for professional software interfaces that need Jony Ive-level craft: clean, minimal, functional, with intentional personality. Do NOT use for creative landing pages, marketing sites.
2 · bundle
pwdev-solucoes
asset-curation
Organiza, compara e seleciona variações de imagens geradas, publicando uma grade de comparação como Artifact para aprovação do time, com critérios de avaliação e registro de decisões.
2
pwdev-solucoes
social-context
Cria e mantém o contexto de criativos da marca, incluindo Figma, brand kit, formatos, geradores e restrições, para uso por outras skills do plugin.
2
pwdev-solucoes
creative-review
Audita criativos antes da aprovação, verificando contraste, legibilidade, área segura, hierarquia, aderência ao brand kit e conformidade, com veredito de aprovação, ajuste ou reprovação.
2
pwdev-solucoes
carousel-builder
Monta carrosséis completos para Instagram, LinkedIn e Facebook, estruturando slides, definindo hierarquia e construindo no Figma como componente com variantes, com revisão e texto alternativo.
2
sdiamante13
ui-redesign
Runs a UI redesign experiment by creating three git worktree branches for modern minimal, bold creative, and classic refined design directions, then implements and compares each approach.
7
scoheart
theme-factory
Applies curated color palettes and font pairings to presentation slide decks and other artifacts, with ten pre-set themes and the ability to generate custom themes on demand.
2 · bundle
scoheart
frontend-design
Builds distinctive, production-grade frontend interfaces with bold aesthetic direction, avoiding generic AI design patterns.
2 · bundle
scoheart
brand-guidelines
Applies Anthropic's official brand colors and typography to artifacts such as presentations, ensuring a consistent look and feel.
2 · bundle
joshuashepherd
design-audit
Audits a page or component against the Digital Curator design spec and movemental conventions, checking visual quality, accessibility, token compliance, and consistency before shipping.
1
joshuashepherd
typeset
Improves typography by fixing font choices, hierarchy, sizing, weight consistency, and readability, making text feel intentional and polished.
1
joshuashepherd
responsive-audit
Audits and fixes responsive design issues across specified pages or sections, covering breakpoint coverage, layout collapse, touch targets, typography scaling, overflow, and navigation, with mobile-first enforcement for Next.js and Tailwind projects.
1
joshuashepherd
affiliation-audit
Audits scraped affiliation data against logo strip and social proof best practices, evaluating logo quality, grouping, copy framing, prominence ordering, and strip readiness.
1
joshuashepherd
affiliation-scrape
Researches a leader's organizational affiliations and fetches logos, producing a JSON record for logo strips and social-proof sections.
1
joshuashepherd
design-chain-audit
Audits a codebase against a multi-layer design system, checking token, primitive, component, and layout drift with automated grep checks and severity ratings.
1
joshuashepherd
design-chain
Audits and enforces a five-layer design chain (tokens, Tailwind, primitives, sections, pages) across components and pages, detecting hardcoded values, layer violations, dark mode parity issues, and missing primitives.
1
joshuashepherd
figma-prompt
Generates a complete Figma Make prompt package with context primer, checkpoint, build prompts, and iteration templates for designing UI pages, components, or screens.
1
joshuashepherd
studio-style
Generates a focused style foundation prompt for AI Studio, building exactly three exemplary sections—hero, typography, and card grid—to establish a reusable visual language for any subsequent development.
1
jorcan
imagen
Generates images from text prompts using Google Gemini's image generation model, saving them as PNG files for use in UI, documentation, and design assets.
0 · bundle
jorcan
themes
Provides a cool, winter-inspired visual theme with a defined color palette and typography for presentations and documents.
0 · bundle
jorcan
favicon
Generates a complete set of favicon files from a source image and updates the project's HTML with the appropriate link tags.
0 · bundle
jorcan
2d-games
Provides principles for 2D game development, covering sprite organization, tilemap design, physics, camera systems, and genre-specific patterns.
0 · bundle
jorcan
3d-games
Provides principles for 3D game development, covering rendering pipelines, shaders, physics, cameras, lighting, and LOD optimization.
0 · bundle

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 skill-frontend-design, theme-factory, frontend-design. Rankings shift as installs change; sort this page by "Most downloaded" 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 add <owner>/<name>, or copy the file into your agent's skills directory.