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.
-
tools-only Bundle 2991 Figma MCP Integration Report 13bd0195Figma MCP Integration Analysis Report
7 -
adobe Bundle Diff 2Reconcile a converted/built web page against its source prototype with two complementary probes — a PIXEL/layout diff (stretched images, dropped wraps, blank renders, colour flips) and a STRUCTURAL content+typography diff (dropped/mis-slotted headings, eyebrows, CTAs; rendered-face font forks). Stack-agnostic via profiles (eds | generic). Use after converting a prototype to EDS/AEM (the stardust `deploy` skill Step 10), or for any prototype↔build fidelity check; invocable as the stardust `diff` skill and from workflows.
142 -
adobe Bundle Extract 2Crawl an existing website (capped, multi-page) and seed stardust/current/ with PRODUCT.md, DESIGN.md, DESIGN.json, a per-page inventory, and the consolidated brand surface — the captured design system, palette, typography, motifs, and voice of the live site. Use when the user wants to analyze an existing site's design, extract or reverse-engineer its design system or brand, capture design tokens from a live site, import a website as the starting point for a redesign, capture the current state before a migration, or invokes `$stardust extract` (`/stardust:extract` in Claude Code). Trigger phrases include "analyze this site", "extract the design tokens", "capture the brand", "crawl the site", "reverse engineer the design". Not for scraping page data or content for its own sake (it captures design evidence, not datasets), and not for the redesign itself — extraction is descriptive; direction and prototyping happen downstream.
142 -
adobe Bundle Stardust 2Guided multi-page redesign of an existing website through a four-phase pipeline — extract (crawl and capture the current site), direct (set a visual direction), prototype (generate redesigned HTML), and migrate (emit a deployable static site). Tracks progress incrementally per page in stardust/state.json so redesigns are resumable. Delegates the per-page design craft (typography, spacing, color, layout, motion) to the impeccable skill. Use when the user wants to redesign, revamp, modernize, or restyle an existing site they can point to by URL, run the extract/direct/prototype/migrate flow, or resume a multi-page redesign or migration. Also routes the same-design migration flow (replica) and the donor-design flow (reskin). Not for designing a brand-new site from scratch or one-off single-component edits.
142 -
adobe Bundle Appbuilder UI Scaffolder 2Generate React Spectrum UI components for Adobe Experience Cloud Shell SPAs and AEM UI Extensions. Provides patterns for pages, forms, data tables, dialogs, and navigation using @adobe/react-spectrum. Guides ExC Shell integration with @adobe/exc-app including runtime.done(), IMS token passthrough, and shell theming. Guides AEM UI Extension development with @adobe/uix-guest for Content Fragment Console, CF Editor, Universal Editor, and Assets View surfaces. Trigger on: building App Builder UI, React Spectrum components, ExC Shell pages, forms, data tables, dialogs, modals, navigation, theming, web-src, Spectrum design system, @adobe/exc-app, AEM extension, AEM UI extension, Content Fragment Console, Universal Editor extension, uix-guest, @adobe/uix-guest, extension points for AEM, customizing AEM surfaces.
142 -
adobe Bundle Figma To ContentUse this to turn a Figma design into an AEM Edge Delivery Services (EDS / AEM / Franklin / Helix) content page in Document Authoring (DA, da.live). Triggers: "build this Figma frame in EDS", "turn this Figma design into a DA page", "publish this design to da.live", or providing a figma.com URL for a page. Reads the frame (and any annotations) via a Figma MCP, resolves each section to an existing block, a new isolated block, or default content (inferred against the project's existing blocks and confirmed with you, or read from annotations when the frame happens to have them), generates DA-compliant body-fragment HTML, and deploys via the DA Source API + preview.
142 -
adobe Skill Adobe FontsFinds, searches, and previews real, licensable Adobe Fonts typefaces: contextual recommendations, direct lookup by name or facets (foundry, designer, style), metadata (language support, weight, foundry), style variants in a family, and a visual specimen. Use for font recommendations, looking up a specific font, "what does [font] look like", a font's language support or designer/foundry, weights/widths in a family, or choosing/pairing fonts for a design (poster, invitation, social post, brand, website, presentation). Discovers and previews fonts only — does not lay out the design. Triggers: "what font for...", "find fonts like [name]", "search Adobe Fonts for...", "does [font] support [language]", "who designed [font]".
142 -
adobe Skill Adobe Design To PDFFind an Adobe Express template, customize its text or background color, and turn it into a print-ready PDF, packet, or shareable link. Use whenever the user asks to make a flyer, poster, banner, brochure, sign, or other print piece and mentions PDF, printing, a packet, or sharing — for example, “make me a flyer and give me a PDF”, “turn my flyer into a printable PDF”, “get this ready for the print shop”, “combine these into one packet”, or “share my finished design as a link”. Do not use for a bare design request with no PDF/print/share goal, social-only designs, or editing an existing image/file (resizing, cropping, or OCR). Access: Signed-In required
142 -
theexperiencecompany Bundle ImpeccableCreate distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system.
-
getlago Skill Lago Organization SlugWhich organization a tab is on comes from the URL slug, never from currentOrganizationVar — the per-caller consistency table, the audited list of legitimate var reads, and useCurrentUser vs useOrganizationInfos. TRIGGER — read BEFORE writing the code whenever anything reads or builds an organization id or slug; whenever the diff mentions currentOrganizationVar, getCurrentOrganizationId, switchCurrentOrganization, useCurrentUser, currentMembership, useOrganizationInfos, organizationSlug, OrganizationLayout or x-lago-organization; whenever the change builds a persistent identifier embedding an org — a URL a user copies, a webhook or template path, a localStorage key, a filename, a mutation argument; whenever a route, redirect or navigation target is added; and whenever the report is wrong-org data, a logo flashing another org, or a value bleeding across tabs.
-
btspoony Bundle Mstar Design MdDESIGN.md design system specification for Morning Star projects. Create, audit, and maintain project-level design tokens (Colors, Typography, Spacing, Elevation, Motion, Shapes, Components, Voice & Content) using Vercel Geist as reference template. Three-level completeness checklist (MVP/Standard/Production) with built-in upgrade placeholders. Supports light/dark dual-theme via DESIGN.md + DESIGN.dark.md sharing same token names with different values. Prepare 阶段由 @architect 主责创建,@product-manager 提供设计需求;@frontend-dev / @fullstack-dev 实现 UI 时消费;@qc-specialist / @qa-engineer 审查 UI 对齐 DESIGN.md。Read when PM assigns DESIGN.md creation in Prepare, initiating a new UI project, @architect defining a design system, implementing styled components, auditing UI against design spec, adding dark theme, or user mentions "DESIGN.md" / "design tokens" / "design system". Phase gate → **mstar-phase-gates**; paths → **mstar-conventions**.
-
rojim666 Bundle Livestream Poster生成直播宣传海报:支持风格文件/视觉大类和用户风格参考图两种工作流,收集人物、Logo、文案与比例后,用 ImageGen 生成底图并在 Ardot 画布完成排版。 当用户提到「直播海报」「直播宣传图」「直播预告海报」「线上直播海报」「livestream poster」,或引用直播海报风格文件时使用。
-
rojim666 Skill Ardot Design RouterDispatcher for Sztubuddy's Ardot design assistant. Use this when a design task is in Craft/design mode but the specific deliverable type is not yet determined from UI signals. It classifies intent (UI screen / slides / poster / livestream poster / design-to-code) and tells you which domain Ardot skill to load, then defers to that skill plus ardot-design-core. Carries the always-on hard rules for canvas design. Not for PowerPoint .pptx file output (pptx skill).
-
alharkan7 Bundle PosterlyBuild an academic conference poster (ICML/NeurIPS/ICLR/CVPR/etc.) as a single HTML/CSS file and render it to print-ready PDF via headless Chromium. Use when user says "做海报", "poster", "ICML/NeurIPS/ICLR poster", or asks to design/edit a research poster.
-
luol0380-tech Bundle Profile Poster KitCreate a coordinated profile poster and character model sheet from a portrait, verified identity text, and optional local brand assets. Use when producing, revising, batching, or standardizing person-introduction visuals while preserving identity, text accuracy, adult proportions, and cross-image consistency.
-
nahid-sparktales Bundle Design SystemsBuild UI inside an existing design system — find its tokens and components, reuse before adding, decide between extending a component and introducing a new one, and preserve conventions you did not set. Use when a project already has design tokens, a component library, a theme or a shared Figma library and you are about to add or change UI inside it. Not for establishing a visual direction where no system exists, and not for reviewing an interface's usability.
-
nahid-sparktales Bundle Design To CodeTurn a design, mockup, Figma frame or screenshot into implementation that actually matches it — mapping values to the codebase's existing tokens and components, covering the states the design never drew, and listing what the design left ambiguous instead of guessing. Use when handed a design to build, when asked whether an implementation matches its source, or when a build has drifted from the design. Not for deciding what the design should be, and not by itself proof that the screen works.
-
nahid-sparktales Bundle Frontend DesignEstablish a visual direction for new or reshaped UI so it reads as designed for this product rather than assembled from defaults — hierarchy, typography, colour, spacing, density. Use when building a new surface, when something looks templated and needs a direction rather than a tweak, or when asked to make an interface feel considered. Prefer the official Anthropic frontend-design skill when it is installed; this is the local counterpart for when it is not. Not for critiquing an existing interface, and not for work inside a design system that already decides these things.
-
acryldev Skill Acryl Restyle UIUse when the user asks to change colors, fonts, theme, dark mode, logo, branding, name, favicon, tab title or the general look and feel of the Web or Desktop app.
-
demondamon Skill B2b Desktop Design SystemGenerate modern B2B desktop design system specs — tokens, layout, information hierarchy — for Near delivery POC.
-
bacnh85 Skill UX PresetsReference design-system presets for ux-design. Anti-slop shortcuts: instead of inventing tokens, elevation, and state contracts from scratch, reuse one of these battle-tested systems (shadcn/ui, Material 3, Radix), drop in a medium-tuned DESIGN.md starter (Web or Mobile), or adopt a style-direction starter (Editorial print, Ledger, Warm consumer) that already carries a point of view. Use when starting a new UI project with no existing design system, when Step 0 (Own the system) of the ux-design method has nothing to reuse, or when asked for a starter token set. These are REFERENCES only — pi-ux never bundles CSS.
-
mabbit143 Bundle Epic DesignBuild immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.
-
robertoatila Skill Frontend Design EngineeringEngineers distinctive frontend UI/UX, intentional typography, harmonious palettes, and responsive layouts.
-
robertoatila Skill Visual QAMUST USE after building/changing any UI or when asked whether a page, component, or TUI looks right. Rigorous visual QA across web/page, terminal, and paginated-document surfaces. Prefer browser:control-in-app-browser for unauthenticated browser/page QA in Codex, then Playwright/agent-browser/dev-browser. Captures screenshot/TUI evidence with bundled diff scripts, runs design-system/functional and visual-fidelity/CJK reviewer passes, then synthesizes a good/bad verdict. Triggers: visual QA, screenshot/pixel diff, UI looks wrong, reference fidelity, design system check, responsive check, CJK text clipping, TUI alignment, box-drawing drift, PDF page check, deck review, blank or near-empty page, wrong page break.
-
promptpartner Skill Design ReviewUse when adding or restyling a Facet UI component, or before merging a UI PR — walks the component against DESIGN.md (tokens, states, a11y, contrast, responsive) so the design system is matched, not just remembered. The judgment check verify.sh can't grep.
-
duodealteam Bundle Duodeal Deck To BlocksTurn a designer's deck (a PDF, an Illustrator .ai, an exported slide deck) into Duodeal V2 html blocks that match the source at the pixel, and stay readable on a phone. Method for reading the real values out of the file instead of guessing from a render, cutting the artwork, hosting the brand font, sizing everything in vw, and closing the gap with a measured calibration loop. Use whenever someone hands over a deck, a PDF, an .ai, a Figma export or "the designer's file" and wants it rebuilt as a quote or a selling page, whenever a block "does not look like the design", and whenever a transposed block has to be checked on mobile.
-
jialuohu Bundle Rubber Stamp Travel PosterCreate a separate 4:3 rubber stamp travel journal poster from each supplied photo, pairing the original photograph with a small handmade stamp on aged paper. Use for this photo-poster style.
-
gabuldev Skill Flutter Design SystemUse when creating or extending a Flutter design system package - design tokens, type scale, spacing, colour palette, or a new reusable component built from Figma tokens. Triggers on a request for a component shared across apps, or for visual standardisation.
-
nik-ti Skill Frontend DesignGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
-
blauwtje Bundle DesigningUse when a page, component, or visual axis changes: typography, color, spacing, motion, copy. Fires on a new visual surface, a redesign, or a surface called empty, boring, or generic. When a new visual surface does not name its displayed data, settings, or behavior, shaping decides those first; designing follows for presentation. Not for typo-only copy fixes or behavior with no visual effect.
-
belentani7 Bundle 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.
-
belentani7 Bundle UI UX Pro MaxUI/UX Pro Max - Design Intelligence workflow skill. Use this skill when the user needs Comprehensive design guide for web and mobile applications. Use when designing new UI components or pages, choosing color palettes and typography, or reviewing code for UX issues and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.
-
belentani7 Bundle Frontend ExpertExpert frontend developer specializing in React, Next.js, Vue, Angular, TypeScript, Tailwind CSS, and modern UI frameworks. Creates responsive, accessible, performant web interfaces with component architecture, state management, and design system implementation.
-
muzimu217 Bundle UI Design AgentTurn plain-language UI requests into researched development prompts; design, build, refine, or review modern UI/UX with distinctive visual systems, purposeful motion, interactive web 3D, and verified MCP/CLI workflows. Routes Motion, Three.js, physics, Blender asset preparation, Figma, and browser checks; delegates video timelines and embedded compositions to Remotion. Not for backend-only work or maintenance of this agent kit.
-
muzimu217 Bundle ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
-
muzimu217 Bundle UI UX Pro MaxUI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.
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 2991-figma-mcp-integration-report_13bd0195, diff, extract. 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.