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.
-
betterpromptme Skill Making American Style Advertising Signs From The 50s 70sThis prompt instructs an image-generation model to create a square, mid-century (1950s diner) vintage American roadside sign featuring user-supplied text and a user-specified icon-shaped sign silhouette, rendered in colorful, slightly weathered painted metal or neon with retro fonts, drop shadows, and playful composition against a clear blue sky, producing a polished retro sign illustration in a raw, realistic style.
-
betterpromptme Skill Taylor Swift The Life Of A Showgirl Poster TransformationThis prompt instructs the AI to create a photorealistic, cinematic luxury album-style poster that closely matches a specific “The Life of a Showgirl” reference in composition, pose, water-bath environment, lighting, color grade, jeweled styling, and glittery serif typography layout, while replacing the original subject with the user by preserving the user’s facial identity and expression and adapting the outfit concept appropriately for gender; the result is a high-end editorial poster featuring the user in the same framed, underwater-glow aesthetic with identical text placement and overall mood.
-
betterpromptme Skill Turn Your Logo Or Icon Into A Hug Pillow With This PromptIl prompt richiede di realizzare un rendering 3D ad alta risoluzione del logo trasformato in un oggetto gonfiabile, con forme morbide e arrotondate, texture liscia opaca e dettagli come pieghe e cuciture, inquadrato a 45° per mettere in risalto la profondità e inserito in una scena di soggiorno dove il logo è appoggiato su un divano e l’arredamento riprende i suoi colori, ottenendo un’immagine finale realistica e coerente con l’estetica “inflatable”.
-
betterpromptme Skill Transform Your Logo Or Icon Into A Luxurious Diamond DesignThis prompt instructs the AI to generate an ultra‑high‑resolution 3D render of an existing logo, preserving its original shape and text layout while transforming it into a realistic diamond‑crafted object with transparent, faceted, highly reflective surfaces and subtle white/pale‑blue/soft‑violet refraction shimmer, all presented on a pure white background at 8K detail.
-
betterpromptme Skill Convert Any Image Into Retro Pixel Game Art With This PromptThis prompt instructs an image model to take a provided reference image and recreate it as a highly detailed yet low-resolution 8-bit pixel art scene, preserving the original composition, key shapes, and overall color palette while converting all elements into blocky pixels with sharp edges and minimal shading. It specifies a vertical cinematic aspect ratio, strong stylization toward retro video game graphics, and pixelated lighting consistent with the source image, resulting in a nostalgic, cohesive pixel-art rendition that remains clearly recognizable as the original scene.
-
betterpromptme Skill Dramatic Cinematic Portrait Of A Rugged Young ManThis prompt directs the AI to generate an ultra-realistic, movie-poster style cinematic portrait of a rugged young man in a smoky, ember-filled environment, using dramatic low-key lighting with warm firelight and cool shadows, shallow depth of field, volumetric haze, and high-detail facial texture. The result is a high-resolution, high-contrast image with sharp subject focus, floating particles, and a dark atmospheric background that conveys a serious, introspective mood.
-
betterpromptme Skill Vintage Patent Drawing With Nano Banana Pro In OpenartGenerates a museum-quality, 1890s-inspired patent technical illustration of the specified object, rendered as black-ink linework with sepia accents on aged cream parchment. The result includes hand-lettered labels, numbered component callouts, cross-section views, and an official-looking patent border with a fictional patent number and date, producing an elegant, authoritative vintage engineering drawing.
-
betterpromptme Skill Create A Visually Striking Product Poster Based On The ImageThis prompt instructs an AI design system to turn a user-supplied product photo into a polished, market-ready advertising poster by making the product the visual centerpiece and enhancing it with theme-driven backgrounds, dramatic yet clear lighting, depth-building shadows/gradients, and brand-aligned storytelling. It also supports optional user parameters (style elements, mood, color palette, and audience/voice) to tailor the composition for high-impact use across both digital and print media.
-
betterpromptme Skill Remade Your Image Turn To The Signature Fortnite Skin AestheThis prompt instructs an image-generation system to create a 3D-rendered, Fortnite-inspired character modeled after a referenced person, specifying a stylized Unreal Engine–like aesthetic with exaggerated proportions, smooth cartoon materials, and vibrant textures. It defines the character’s key visual attributes—hair, outfit, color palette, accessories—along with a specific pose and facial expression, resulting in a cohesive custom “skin” concept render that matches the recognizable Fortnite style.
-
ngxtm-devkit Skill Core ComponentsCore component library and design system patterns. Use when building UI, using design tokens, or working with the component library.
-
ngxtm-devkit Skill Figma AutomationAutomate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.
-
ngxtm-devkit Bundle UI Design SystemUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
-
hashgraph-online-awesome-codex-plugins Bundle FrontendContext-led frontend design. Derives art direction from product, audience, brand, content, and the existing system; avoids generic defaults. Triggers: frontend, UI, CSS, styling, visual, theme, component, layout, responsive, accessibility, design system, aesthetic, animation, motion, abyss, spatial, verdant, substrate, ember, arctic, void, patina, signal, kinetic-type, haunted-machine, cursor-field, real-weight, one-surface, liquid-material, held-breath, grand-tour.
-
hashgraph-online-awesome-codex-plugins Bundle UI CraftAuthoritative guide for implementing stunning, accessible, performant UI. Synthesizes design engineering philosophy, accessibility standards, animation principles, spatial design, typography, color systems, and component craft into a single actionable reference. Complements the design-system skill (which covers DESIGN.md spec writing) by covering the HOW of implementation. Trigger phrases: "build UI", "create component", "landing page", "make it look good", "frontend", "design", "polish UI", "implement design", "make it beautiful", "UI implementation", "component styling", "animation", "accessibility"
-
hashgraph-online-awesome-codex-plugins Skill Design SystemHow to write and maintain a DESIGN.md in the 9-section Google Stitch format. Covers the 9-section structure, design token conventions, quality standards, integration with kits and build tasks, revision patterns, and collection import. Trigger phrases: "design system", "DESIGN.md", "visual design spec", "design tokens", "create design system", "import design system", "visual identity", "UI spec", "design language"
-
hashgraph-online-awesome-codex-plugins Skill Memoire Design ToolingUse when a task spans interface understanding, design-system memory, UI audits, design CI, Figma, shadcn or Tailwind code generation, research, or agent design workflows and needs the correct Memi capability selected.
-
hashgraph-online-awesome-codex-plugins Bundle Hero UI CraftUse when Codex works on any front-end implementation, UI polish, dashboard, product screen, internal tool, design system, React component, Tailwind CSS v4 surface, HeroUI React v3 setup, shadcn-to-HeroUI migration, or any task that should use HeroUI. Enforces official HeroUI context, Pencil/Figma component-detail visual approval before coding, HeroUI component selection, and final visual/accessibility verification.
-
hashgraph-online-awesome-codex-plugins Skill Visual Evidence GateUse after requirements are approved and before UI implementation when a product feature needs Pencil or Figma visual design evidence.
-
hashgraph-online-awesome-codex-plugins Skill Visual Design OrchestratorUse after requirements are approved to run the one-pass Pencil or Figma workflow that creates visual boards, exports images, records approval, and hands off to implementation gates.
-
hashgraph-online-awesome-codex-plugins Bundle Mechanical Engineering ResearchApply source-aware mechanical-engineering judgment to research, analysis, coding, writing, teaching, research identity, and release work. Use for thermal-fluid systems, heat transfer, fluid mechanics, thermodynamics, HVAC, energy systems, turbomachinery, piping, multiphase flow, experiments, correlations, CFD, reduced-order models, AI/ML, uncertainty, engineering datasets, literature reviews, citations, manuscripts, reviewer revisions, Overleaf packages, figures, proposals, research software, reproducibility, public releases, engineering teaching materials, or a research-project logo and visual identity.
-
lord1egypt Bundle PPTX PostersCreate research posters using HTML/CSS that can be exported to PDF or PPTX. Use this skill ONLY when the user explicitly requests PowerPoint/PPTX poster format. For standard research posters, use latex-posters instead. This skill provides modern web-based poster design with responsive layouts and easy visual integration.
2 -
lord1egypt Skill Skill Design Sync Slash CommandSkill definition for syncing a React design system to claude.ai/design, including project selection, source-shape detection, converter configuration, validation, upload planning, and self-check behavior
2 -
lord1egypt Skill Skill Design Sync Package Source ShapeShape-specific /design-sync instructions for syncing a React design system from a built package without Storybook
2 -
lord1egypt Skill Skill Design Sync Storybook Source ShapeShape-specific /design-sync instructions for syncing a React design system from Storybook output, including build steps, converter configuration, validation fixes, and DesignSync upload
2 -
leoyeai-openclaw-master-skills Bundle Plume InfographicPlume AI Infographic Generation Service. Triggered when users want to convert topics, long-form text, or reference images into infographics. Supports: topic infographics, long-form text to infographic, reference image infographics (sketch/style transfer/product embed/content rewrite), batch infographics, retry. Activate when user mentions: infographic, knowledge poster, visualize article, diagram, summary chart, timeline, turn this article into a graphic, create a visual about XX, use this infographic's style as reference, use this product image for infographic, replace the content of this infographic, create a series of infographics, split long text into multi-page infographics, 信息图, 知识图谱海报, 把文章可视化, 图解, 总结图, 时间线图, 把这篇文章转成图, 围绕XX主题做一张图解, 参照这张信息图的风格, 用这张产品图做信息图, 把这张信息图的内容换成, 做一组系列信息图, 把长文拆成多页信息图.
-
leoyeai-openclaw-master-skills Bundle Macos Hig DesignerDesign native macOS apps following Apple's Human Interface Guidelines and Liquid Glass design system. Use when building SwiftUI/AppKit macOS apps, validating designs, or implementing macOS-specific patterns.
-
leoyeai-openclaw-master-skills Bundle Zhy Wechat WritingUse when generating a complete WeChat article from a topic, with optional source research, evidence tracking, illustration, HTML conversion, and draft-box publishing.
-
leoyeai-openclaw-master-skills Bundle Saas Churn AnalysisSaaS churn and retention analysis: cohort-based churn rates, retention curves, revenue churn vs logo churn, at-risk customer identification, expansion vs contraction MRR, churn recovery playbooks, and net revenue retention (NRR) benchmarking. Produces investor-ready retention charts and actionable recovery plans. Use when: analyzing why customers are churning, building cohort retention tables, calculating NRR/GRR, identifying at-risk accounts before they cancel, or presenting retention data to investors/board. NOT for: executing churn recovery outreach (use CRM/email tools), real-time subscription billing changes (use billing platform APIs), general SaaS KPI dashboards (use saas-metrics-dashboard), or revenue forecasting without churn context (use startup-financial-model).
-
pjt222 Skill Screen TrademarkScreen a proposed trademark for conflicts and distinctiveness before filing. Covers trademark database searches (TMview, WIPO Global Brand Database, USPTO TESS), distinctiveness analysis using the Abercrombie spectrum, likelihood of confusion assessment using DuPont factors and EUIPO relative grounds, common law rights evaluation, and goods/services overlap analysis. Produces a conflict report with a risk matrix. Use before adopting a new brand name, logo, or slogan — distinct from patent prior art search, which uses different databases, legal frameworks, and analysis methods.
-
pjt222 Bundle Design CLI OutputDesign terminal output for a CLI tool with chalk colors, Unicode glyphs, multiple verbosity levels (human, verbose, quiet, JSON), and consistent voice rules. Covers color palette selection, status indicator design, reporter function architecture, ceremony/narrative output variants, and cross-terminal compatibility. Use when building a new CLI reporter module, adding warm narrative output to an existing tool, standardizing output across multiple commands, or designing machine-readable JSON alongside human-readable text.
-
pjt222 Skill Review Web DesignReview web design for layout quality, typography, colour usage, spacing, responsive behaviour, brand consistency, and visual hierarchy. Covers design principles evaluation and improvement recommendations. Use when reviewing a design mockup before development, assessing an implemented site for design quality, providing feedback during a design review session, evaluating brand consistency, or checking responsive behaviour across breakpoints.
-
pjt222 Skill Ornament Style ColorDesign polychromatic ornamental patterns grounded in Alexander Speltz's classical ornament taxonomy. Builds on monochrome structural analysis by adding period-authentic color palettes, color-to-motif mapping, and rendering styles suited to painted, illuminated, and glazed ornament. Use when creating decorative designs where color is integral to the tradition (Islamic tilework, illuminated manuscripts, Art Nouveau), exploring how historical periods used color in ornament, or producing colored reference imagery for design, illustration, or educational materials.
-
pjt222 Skill Setup Tailwind TypescriptConfigure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
-
pjt222 Skill Render Publication GraphicProduce publication-ready 2D graphics with proper DPI, color profiles, typography, and export formats for print and digital media. Use when preparing figures for academic journal submission, creating graphics for print publications, ensuring graphics meet publisher technical specifications, exporting visualizations for web with proper optimization, or creating multi-format exports from a single source.
-
leoyeai-openclaw-master-skills Bundle AI Image To Video GeneratorThe ai-image-to-video-generator skill on ClawHub transforms static images into dynamic, motion-rich video content through a conversational interface. Upload any photo or illustration, describe the motion style you want, and receive a polished video output. Ideal for marketers, content creators, and social media managers who need animated visuals without complex software. Supports mp4, mov, avi, webm, and mkv output formats.
-
21st-dev Skill 21st UIFind, install, and generate UI with 21st.dev. Use when the user asks for a UI component (pricing table, hero, navbar, dashboard, form, etc.), wants design inspiration, needs a brand logo as an SVG component, or wants to generate new UI from a prompt.
Audited
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 hero-ui-craft, 21st-ui, making-american-style-advertising-signs-from-the-50s-70s. 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.