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
nextlevelbuilder brand
Defines and manages brand identity including voice, visual standards, messaging frameworks, asset organization, and consistency audits.
· bundle
nextlevelbuilder ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components, Tailwind CSS utility-first styling, and canvas-based visual designs.
· bundle
nextlevelbuilder banner-design
Design banners for social media, ads, website heroes, and print with multiple art direction options and AI-generated visuals.
· bundle
nextlevelbuilder design-system
Creates and manages design tokens with a three-layer architecture (primitive, semantic, component), generates CSS variables and component specifications, and produces brand-compliant slide presentations with Chart.js integration.
· bundle
jakubantalik transitions-polish
Polishes existing motion against the transitions.dev motion-token scale by auditing duration, distance, scale, blur, and easing values and suggesting token-based corrections.
· bundle
heygen figma
Import Figma designs into HyperFrames compositions as frozen assets, brand tokens, components, motion animations, and shaders.
· bundle
heygen media-use
Resolves, generates, and operates on media assets (audio, images, icons, logos, voice, color grades, LUTs) for HyperFrames projects, using a local cache and the HeyGen CLI for free-usage catalog search and TTS.
· bundle
heygen general-video
Creates or edits custom video compositions using HyperFrames, supporting multi-scene pieces, brand reels, montages, and freeform builds with media, Figma, and creative treatments.
heygen hyperframes-core
Build a single renderable HyperFrames composition using HTML with data-* timing attributes, clips, tracks, sub-compositions, variables, and deterministic rendering rules.
· bundle
heygen hyperframes-creative
Provides creative direction for HyperFrames videos, handling design specs, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand/style decisions.
· bundle
heygen changelog-video
Turn a weekly changelog markdown into a branded square video with animated UI mockups, voiceover, and captions.
· bundle
heygen motion-doctrine
Defines the high-level motion law for multi-scene videos, ensuring seamless transitions and continuous camera movement through vector rules, carriers, causal motion, and seam enforcement.
· bundle
heygen oversized-cursor
Provides a production-proven oversized macOS-style cursor technique for launch videos, covering size, entry, tip-targeting, click animation, and exit laws to carry the viewer's eye.
helloianneo ian-xiaohei-illustrations
Generates 16:9 horizontal illustrations for Chinese articles using a hand-drawn, black-and-white style with the 'Xiaohei' character as the central figure, based on the article's key concepts.
· bundle
nexu-io dating-web
Provides a dashboard template for community/dating metrics with a navigation rail, ticker bar, headline KPIs, 30-day mutual-matches bar chart, and match-rate trend block.
· bundle
nexu-io card-twitter
Generates a Twitter share card with a hero quote, author attribution, category tag, and subtle texture, ready for screenshot and posting.
· bundle
nexu-io gamified-app
Generates a gamified habit-tracking app UI with three phone frames: a cover poster, today's quests with XP and level bar, and a quest detail view with subtasks and rewards.
· bundle
nexu-io saas-landing
Generates a single-page SaaS landing page with hero, features, social proof, pricing, FAQ, and footer sections.
· bundle
nexu-io deck-xhs-post
Creates a 9-page 3:4 vertical carousel for Xiaohongshu or Instagram with warm pastel backgrounds, dashed sticker cards, and page dots.
· bundle
nexu-io prototype-web
Generates a high-fidelity, clickable web prototype with navigation, hero, features, and CTA sections.
· bundle
nexu-io waitlist-page
Generates a minimal pre-launch waitlist landing page with email capture, logo, and decorative layers.
· bundle
nexu-io deck-xhs-white
Generates a white magazine-style deck with rainbow bar, gradient text, macaron cards, and black pill for dual-use on Xiaohongshu and horizontal PPT.
· bundle
nexu-io digital-eguide
Generate a two-page digital e-guide spread with a cover and content page, including pull-quote and step list, in a lifestyle creator brand style.
· bundle
nexu-io deck-xhs-pastel
Creates pastel-toned, lifestyle-oriented presentation decks with rounded cards, soft glow blobs, and Playfair italic numbering.
· bundle
nexu-io magazine-poster
Generates a magazine-style poster with a newsprint editorial layout, oversized serif headline, two-column body, numbered sections, and paper-textured design.
· bundle
nexu-io card-xiaohongshu
Generates a series of Xiaohongshu-style knowledge cards with a cover, content cards, and a summary card, designed for mobile viewing.
· bundle
nexu-io mockup-device-3d
Renders UI content inside 3D iPhone and MacBook mockups using CSS transforms, with glass lens flares, ground reflection, and an optional turntable animation.
· bundle
nexu-io sprite-animation
Creates educational single-frame posters with pixel art mascots and kinetic typography using pure CSS keyframe animations, no JavaScript required.
· bundle
nexu-io wireframe-sketch
Creates hand-drawn wireframes with graph-paper background, multiple tabs, scribbled chart placeholders, hatched fills, and sticky-note annotations.
· bundle
nexu-io mobile-onboarding
Generates a three-screen mobile onboarding flow with splash, value proposition, and sign-in screens displayed side by side.
· bundle
nexu-io deck-graphify-dark
Creates a dark-themed presentation deck with gradient backgrounds, floating blur orbs, SVG force-directed graphs, and JetBrains Mono code highlighting.
· bundle
nexu-io doc-kami-parchment
Generates serious, typeset documents (one-pagers, reports, letters, resumes, slides, equity reports, changelogs) with a warm parchment aesthetic, ink-blue accent, and single serif font per language.
· bundle
nexu-io social-reddit-card
Renders a story, question, or meme as a realistic Reddit post card with vote rail, comments, and awards, suitable for video overlays or social media sharing.
· bundle
nexu-io social-x-post-card
Renders tweet content as a realistic X (Twitter) post card image for video overlays or image sharing, with interactive metrics and customizable themes.
· bundle
nexu-io social-spotify-card
Renders a Spotify Now Playing card with album art, progress bar, and playback controls for video overlays or personal pages.
· bundle
nexu-io web-proto-brutalist
Generates brutalist web prototypes with Swiss industrial-print aesthetics, using grotesque typography, oversized numbers, ASCII decorations, and hazard-red accents.
· 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 ui-styling, brand, figma. 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.