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.
-
findscripter Skill Magic UI Component Generator当需要生成或增强前端 UI 组件(定价表、表单、Hero、Logo/图标)时使用;借助 21st.dev Magic 生成多套差异化设计方案供选型并落地生产级 TypeScript 代码;不适用于纯逻辑/后端开发或需精确还原既有设计稿的场景;触发词:UI 组件、设计方案、Magic 21st.dev
Audited -
aifinlab 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.
-
findscripter Skill Canvas Design当用户要做海报/封面/艺术海报/静态视觉作品并希望导出 PNG/PDF 时使用;做法是先写一份"设计哲学"再据此在画布上表达,产出 .md 哲学文档 + 单页 .png/.pdf 成品;不适用于网页/前端 UI、品牌规范体系、代码生成式算法艺术或多页文档排版;触发词:海报、poster、视觉艺术、art、平面设计、design、封面、艺术品、PNG、PDF
Audited -
findscripter Skill Theme Factory当需要给幻灯片/文档/HTML 落地页等产物套用统一的配色与字体主题时使用;做的是从 10 套预设主题中选用或现场生成自定义主题,并将其色板与字体一致地应用到产物;不适用于从零做品牌视觉规范或纯插画生成;触发词:主题、配色、换肤、theme、套主题、配色方案、字体搭配、风格化、style deck、color palette
Audited -
findscripter Skill Design Critique当需要对界面/原型/视觉稿做结构化设计评审时使用;按可用性·层级·一致性·无障碍多维度产出带严重度分级和优先级建议的评审报告;不适用于纯代码实现、文案校对或无设计稿的需求讨论。触发词:评审这个设计、critique mockup、Figma 链接反馈
Audited -
findscripter Skill Brand Guidelines当需要把 Anthropic 官方品牌配色与字体应用到 PPT/文档/网页等产物(后处理统一观感)时使用;做品牌色与排版的批量套用并产出符合规范的成品;不适用于自定义品牌识别系统设计或 logo 制作;触发词:品牌色、Anthropic 风格、配色规范、字体规范、visual identity、brand colors、typography
Audited -
findscripter Skill Design Dev Handoff当设计稿定稿、要交给工程实现时使用;产出覆盖布局/设计令牌/组件 props/交互状态/响应式断点/边界情况/动效的开发交付规格文档;不适用于尚在探索的概念稿或纯视觉评审;触发词:设计交付、handoff、Figma 转开发
Audited -
findscripter Skill Spline 3d Web Integration将 [Spline.design](https://spline.design)(浏览器内的 3D 设计工具,可理解为「3D 版 Figma」)制作的交互式 3D 场景嵌入网页。设计师在 Spline 编辑器里搭建对象、材质、动画、物理与事件,导出为托管的 `.splinecode` URL,本技能负责选对集成路径、接好运行时控制并产出沉浸式、有 wow 效果的高端 UI。
-
findscripter Skill Google Stitch UI Prompting当用 Google Stitch(Gemini 驱动的 Labs UI 生成器)由文字/草图生成 Web 或移动端界面时使用;做提示词工程,产出具体、含视觉风格与功能要求的可执行提示词及迭代/导出方案;不适用于手写生产代码、做交互动效实现或替代真人评审。触发词:Stitch、UI 提示词、文字转界面、界面生成、导出 Figma/HTML。
Audited -
findscripter Skill Unsplash Photo Integration当为网站·App·营销物料挑选高质量免费摄影图、需替换占位图/平庸 stock 图时使用;做法是用艺术化关键词在 Unsplash 搜索、按方向与配色筛选、经 API 或直链获取并用动态参数(如 ?w=1600&q=85&fit=crop)按布局裁剪压缩后接入;不适用于自有插画/品牌 Logo/UI 图标、付费授权独占图、需明确商业授权或人物肖像权的场景。触发词:unsplash、免费配图、摄影图库、hero 配图、占位图替换
Audited -
findscripter Skill Magic Motion Animator当需要给静态 Logo、UI、图标或社媒素材加 AI 驱动的高级动效时使用;按品类选预设、用 AI 助手以提示词生成运动并微调关键帧,导出 Lottie(JSON)/GIF/MP4 集成到 Web、App 或社媒;不适用于一行 CSS transition 的简单过渡、3D/视频剪辑或代码级动画编排;触发词:Logo 动效、UI 动画、图标动效、微交互、Lottie、动起来
Audited -
aifinlab Bundle Product Highlight Poster Copy面向基金渠道与销售支持领域的文案生成任务Skill,围绕「产品亮点海报文案助手」场景提供信息抽取、结构化分析与结果输出。
-
brathod1432 Bundle Logo Dev AutomationAutomate Logo Dev tasks via Rube MCP (Composio). Always search tools first for current schemas.
-
brathod1432 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.
-
brathod1432 Bundle Senior ArchitectThis skill should be used when the user asks to "design system architecture", "evaluate microservices vs monolith", "create architecture diagrams", "analyze dependencies", "choose a database", "plan for scalability", "make technical decisions", or "review system design". Use for architecture decision records (ADRs), tech stack evaluation, system design reviews, dependency analysis, and generating architecture diagrams in Mermaid, PlantUML, or ASCII format.
-
brathod1432 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.
-
brathod1432 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.
-
javimosch Skill 0xworkFind and complete paid tasks on the 0xWork decentralized marketplace (Base chain, USDC escrow). Use when: the agent wants to earn money/USDC by doing work, discover available tasks, claim a bounty, submit deliverables, post tasks with bounties, check earnings or wallet balance, or set up as a 0xWork worker/poster. Task categories: Writing, Research, Social, Creative, Code, Data. NOT for: managing the 0xWork platform or frontend development.
-
javimosch Skill X PosterPost to X (Twitter) using the OpenTweet API. Create tweets, schedule posts, publish threads, upload media, access analytics, and manage your X content autonomously.
-
javimosch Skill FigmaInteract with the Figma REST API to read files, export layers/components as images, and retrieve comments. Use when the user needs information from Figma designs or wants to export assets for development. Triggers include "read figma file", "export figma layer", or "check figma comments".
-
javimosch Skill Skywork DesignSkywork Design (skywork) - Generate or edit images via the Skywork Image API. Use for image creation, poster design, logo design, visual asset generation, or image modification requests. Supports text-to-image and image-to-image editing with aspect ratio and resolution control.
-
amey-thakur Skill Web TypographySet a type scale, measure, and loading strategy that make text readable and stable across devices. Use when establishing typography for a site or fixing cramped, shifting, or slow-loading text.
Audited -
komunite Skill Color Palette GuideDesign and document a color palette guide with structured process, quality checks, and system integration
-
komunite Skill Illustration Style GuideDesign and document a illustration style guide with structured process, quality checks, and system integration
-
amey-thakur Skill Design SystemsBuild and maintain a design system that keeps a product visually consistent and fast to build. Use when creating design tokens, component libraries, or UI guidelines.
-
komunite Skill Logo BriefCreate a logo brief with structured process, quality checks, and system integration
-
komunite Skill Design SystemCreate a design system with structured process, quality checks, and system integration
-
komunite Skill Typography SystemDesign and document a typography system with structured process, quality checks, and system integration
-
haibarakiku Bundle IllustratorMaster illustrator with 15+ years in editorial, children's books, advertising, graphic novels, and entertainment concept art. Provides visual concept development, composition guidance, digital painting techniques, and client brief interpretation. Use when users request illustration, digital painting, character design, concept art, or visual development.
-
haibarakiku Bundle Art TeacherExpert-level Art Teacher with deep knowledge of drawing, painting, illustration, design principles, color theory, and visual arts education
-
haibarakiku Bundle Art InstructorExpert-level Art Instructor with 15+ years of experience in drawing, painting, illustration, digital art, and art history
-
wonsukchoi Bundle Graphic DesignerUse when a task needs the judgment of a Graphic Designer — designing or critiquing a logo/brand identity system, writing brand guidelines that others will apply, choosing a typographic scale and pairing, evaluating a color palette for legibility and contrast (not just aesthetics), or preparing a print or digital production file (CMYK build, bleed, resolution).
-
onfire7777 Bundle LoomAn agent that analyzes the codebase to generate and manage Guidelines.md for Figma Make, designs prompt strategies, and validates output. Used when optimal input preparation for Figma Make is required.
-
onfire7777 Bundle MuseDefine and manage design tokens, apply tokens to existing code, and build design systems. Responsible for token system design, unifying spacing, color, and typography, and supporting dark mode. Used when design token design and UI consistency are required.
-
onfire7777 Bundle FrameA bridge agent that leverages the Figma MCP Server to extract and structure design context, delivering it to implementation agents. Used when bridging Figma designs to code, managing Code Connect, or extracting design system rules.
-
onfire7777 Bundle TweaksWrap HTML artifacts with a live parameter side panel for safe visual tuning of colors, spacing, typography, and behavior. Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to localStorage. Lets the user explore variants of a design without re-prompting the agent. Use when the brief asks for "variants", "side-by-side options", "tweak this", "let me adjust", "live knobs", or "实时调参".
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 x-poster, magic-ui-component-generator, brand-guidelines. 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.