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.
-
aiskillstore Bundle Character Design SheetCharacter consistency across AI-generated images with reference sheets and LoRA techniques. Covers turnaround views, expression sheets, color palettes, and style consistency tricks. Use for: character design, game art, illustration, animation, comics, visual novels. Triggers: character design, character sheet, character consistency, character reference, turnaround sheet, expression sheet, character art, consistent character, character concept, reference sheet, character creation, oc design, character bible
-
aiskillstore Bundle Ckm Banner DesignDesign banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
-
aiskillstore Bundle Ckm Design SystemToken architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
-
aiskillstore Bundle Obsidian Theme DesignerUse when the user wants to design, preview, or customize an Obsidian vault theme — including choosing styles, comparing color schemes, adjusting typography, or generating CSS snippets. Triggers on keywords like "Obsidian theme", "color scheme", "CSS snippet", "appearance".
-
aiskillstore Bundle Figma Pencil Fsd Tailwind4Convert Figma or Pencil designs into production-ready frontend code using Feature-Sliced Design and Tailwind CSS v4. Use when translating designs into code, extracting tokens, mapping UI to FSD layers (shared / entities / features / widgets / pages / app-shell / app), enforcing Server vs Client boundaries when applicable, or validating design-to-code fidelity.
-
aiskillstore Bundle Higgsfield Video ExplainerBuild a complete non-photoreal narrated explainer or story video from ordered 10-second blocks: one narrator, one universal style key, one Seed Audio take and one Gemini Omni clip per block, then server-side assembly with explainer_video. Use when: "make an explainer video", "explain this in a video", "turn this topic or document into a narrated video", "tell this story as an animated video", "make a faceless narrated video", or "show me explainer styles". Supports live CMS presets, custom style references, mascot/faceless modes, two aspects, and optional burned subtitles. NOT for: photoreal films, ads/UGC, talking heads, podcasts, motion typography reels, one-off clips without narration, or editing a finished video.
-
modbender Bundle IblipperGenerate kinetic typography animations for expressive agent-to-human communication. Use when you want to communicate with visual flair - animated text for announcements, alerts, greetings, dramatic reveals, or any message that deserves more than plain text. Outputs shareable URLs or can display in canvas.
12 -
modbender Bundle OpenworkThe agent-only marketplace. Post jobs, complete work, earn $OPENWORK tokens on Base. Competitive bidding — multiple agents submit, poster picks the winner.
12 -
modbender Bundle Svg DrawCreate SVG images and convert them to PNG without external graphics libraries. Use when you need to generate custom illustrations, avatars, or artwork (e.g., "draw a dragon", "create an avatar", "make a logo") or convert SVG files to PNG format. This skill works by writing SVG text directly (no PIL/ImageMagick required) and uses system rsvg-convert for PNG conversion.
12 -
modbender Skill Brand CogOther tools make logos. CellCog builds brands. #1 on DeepResearch Bench (Feb 2026) for deep strategic reasoning + the widest modality coverage in AI. Brand identity, brand kits, color palettes, typography, brand guidelines, logo design, visual identity, social media, web design, video — all from one brief.
12 -
modbender Bundle Brand GuidelinesApplies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
12 -
modbender Bundle Quiver AIAI-native SVG vector graphics generation tool. Use when generating SVG graphics from text prompts or converting images to SVG. Supports: (1) Text-to-SVG generation with optional reference images, (2) Image-to-SVG conversion, (3) Real-time streaming rendering, (4) Multiple export formats (SVG, PNG, JPEG, WebP). Perfect for logos, illustrations, typography, and animations.
12 -
modbender Bundle Theme GenGenerate a complete design system from brand colors using AI. Use when starting a new project or standardizing colors.
12 -
modbender Bundle UI DesignComprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
12 -
modbender Bundle Aioz UI V3Build UI components and pages using AIOZ UI V3 design system. Use this skill whenever the user wants to create, edit, or style React components using AIOZ UI tokens, Tailwind classes, color tokens, typography utilities, icons from @aioz-ui/icon-react, or chart components (LineChart, AreaChart, BarChart, DonutChart). Trigger on any task involving AIOZ UI components, design tokens like --sf-neu-block or --text-neu-bold, brand colors, typography classes (text-title-01, text-body-02), icon imports, data visualization, or translating Figma MCP output into production-ready code.
12 -
modbender Bundle Vibe DesignCreate visual designs with AI tools. Covers prompting for UI/graphics, Midjourney techniques, Figma AI workflow, and iteration patterns.
12 -
modbender Skill Image2promptAnalyze images and generate detailed prompts for image generation. Supports portrait, landscape, product, animal, illustration categories with structured or natural output.
12 -
dominikmartn Bundle HueMeta-skill that generates new design language skills. Works on Claude Code and Codex. Use when the user says 'create a design skill', 'generate design language', 'new design system skill', 'design skill inspired by X', 'design skill from this screenshot', '/hue', or 'use hue'. Also triggers for 'remix my design skill' or 'make my skill more X'.
-
zanwei Bundle Design DnaExtract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "extract design style", "analyze design", "design tokens from reference", "generate design from JSON", "design system from screenshot", "design profile", "style guide JSON", "visual effects analysis", "design with effects", "3d design analysis".
-
tw93 Bundle UIProduces distinctive, production-grade UI for pages, components, visual interfaces, typography, and screenshot-driven polish. Use when users ask in any language for UI, page, component, frontend, typography, screenshot-grounded visual polish, or complaints that a screen looks unclear, ugly, inconsistent, or visually wrong. Not for backend logic or data pipelines.
-
gabrielmoreira Skill RetroWeekly engineering retrospective. (gstack)
17 -
jiangmuran Bundle Gpt Image 2Use when generating, editing, composing, or iterating on images — illustrations for reports/web, posters with Chinese or English typography, pitch-deck slides, UI mockups, infographics, pixel art, game sprites, character reference sheets, app icons, logo concepts, photoreal product shots, or photo edits with precise local changes. Symptoms include the user asking for "图", "图片", "插图", "海报", "封面", "图标", "ppt素材", "游戏素材", "改图", "修图", "logo", "draw me", "make an image", "生成一张", or attaching an image they want modified. Calls the gpt-image-2 model (April 2026 release; near-perfect text rendering including Chinese, custom resolutions up to 3840px, precise edits with preserve/change pattern) via OpenAI-compatible /images/generations and /images/edits endpoints.
-
simota Skill MuseDefining and managing design tokens, applying token systems to existing codebases, building design system foundations. Use for spacing, color, typography, dark mode, cross-platform output.
-
simota Skill FrameExtracting and structuring design context from Figma via MCP Server for downstream implementation agents. Use for Figma-to-code bridging or Code Connect management.
-
simota Skill VisionDirecting UI/UX creative work — redesigns, new designs, trend application, Design System construction, Muse/Palette/Flow/Forge orchestration. Use for design direction. Offers a co-design pair mode.
-
jiji262 Bundle Claude DesignProduce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces fact verification (WebSearch before assuming a product exists or its version), the Core Asset Protocol for branded work (logo, product shots, and UI screenshots are first-class, not just colors and fonts), a Design Direction Advisor fallback that offers 3 differentiated directions from 10 design philosophies when the brief is too vague, commits to a visual system up front, presents multiple variations, and avoids AI-design tropes (aggressive gradients, emoji bullets, generic templates).
-
simota Skill AtelierOrchestrating design-to-implementation pipelines (code to visual to code closed loop), persisting a project design system across agents. Not for a single prototype (Forge) or direction only (Vision).
-
glincker Skill ThesvgFetch brand SVG logos and cloud architecture icons (AWS, Azure, GCP) from theSVG. Use when the user asks for a brand logo, company icon, framework mark, service icon, or any "icon/logo for X" where X is a real brand or cloud service. Returns ready-to-use CDN URLs or raw SVG markup.
-
mxyhi Skill Agent BrowserBrowser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
-
lunarxuan Bundle Image Prompt ReverseAnalyze user-provided reference images and reverse-engineer high-fidelity AI image-generation prompts. Use when the user asks to recreate, imitate, reverse-engineer, or extract prompts from photographs, illustrations, 3D renders, products, characters, landscapes, typography, logos, posters, or other visual references. Do not use for requests that only require OCR or an ordinary image description.
-
nexu-io Skill WpdsWordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites.
-
bitjaru Skill Ss LintQuick automated lint — detects common design system violations in seconds
-
liamgvchi Bundle Gc Minimal Zine Poster V0 3Generate or analyze poetic paper-texture minimal zine posters with large negative space, a small editorial collage or focal element, experimental typography, and one clear color accent. Use when the user gives a theme, sentence, article, mood, object, photo, content brief, reference images, or an image folder and wants a final poster image, a production-ready image prompt, reusable style rules, or varied layouts that stay in one visual family.
-
bitjaru Skill Ss ReviewReview UI code for design system compliance, accessibility, and best practices
-
gabrielmoreira Skill Design ConsultationDesign consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack)
17 -
heygen-com Bundle FigmaImport Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.
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 obsidian-theme-designer, retro, higgsfield-video-explainer. 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.