Skills

P

progressive-blur

mengto / skills

使用多个 backdrop-filter 蒙版创建分层 CSS 渐进模糊（顶部或底部），呈现纵深感和柔和效果。用户要求“progressive blur”“gradient blur overlay”，或要求从视口边缘逐渐淡出的阶梯式模糊蒙版时使用。

C

content-strategy

owl-listener / designer-skills

定义产品需要哪些内容、如何组织，以及由谁负责。当问题本身在于内容时使用。界面文案请使用 `ux-writing`（designer-toolkit）；结构层级请使用 `information-architecture`

D

doherty-threshold

owl-listener / designer-skills

应用 Doherty 阈值——将系统响应时间控制在 400ms 以内，以保持用户操作流畅。适用于诊断感知到的延迟或设定性能预算。对于不可避免的等待期间应显示的内容，请使用 `loading-states`

C

cobejs

mengto / skills

使用 cobe 添加轻量级交互式地球仪时使用（canvas 设置、标记、交互、性能、与 React/Next.js 集成）。

A

android-design-guidelines

ehmo / platform-design-skills

Material Design 3 和 Android 平台指南。使用 Jetpack Compose 或 XML 布局构建 Android 应用、实现 Material You、导航或无障碍功能时使用。适用于涉及 Android UI、Compose 组件、动态颜色或 Material Design 合规性的任务。

C

canvas-design

composio-community / awesome-claude-plugins

.png 和 .pdf 文档中使用设计理念创建精美的视觉艺术作品。当用户要求创建海报、艺术作品、设计或其他静态作品时，应使用此技能。创建原创视觉设计，不要复制现有艺术家的作品以避免侵犯版权。

C

clone-website

jcodesmore / ai-website-cloner-template

将现有网页重建为可运行的本地代码，还原其真实内容、资源、响应式布局和交互。适用于网站克隆、复刻或逆向工程，包括 Framer 网站和动画页面。

F

frontend-crafting

sentimony / skills

构建、实现、重新设计、审查或完善面向用户的界面时，必须使用此技能，包括 HTML、CSS、Vue、Nuxt、React 或其他前端框架中的页面、布局、表单、导航、仪表板和可复用 UI 组件。也适用于涉及响应式设计、样式、无障碍性、视觉层次、交互状态或用户体验的前端代码更改，即使请求被表述为实现而非设计。与 web-debug 配合进行浏览器验证；意外行为的根因调查应使用调试技能。

R

research-repository

owl-listener / designer-skills

构建一个让研究发现易于查找、重复利用，并能在团队间累积的仓库。当相同研究一再被重复开展时使用。综合单项研究时，请使用 `affinity-diagram`。

S

senior-frontend

composio-community / awesome-claude-plugins

适用于 React、Next.js、TypeScript 和 Tailwind CSS 应用的前端开发技能。用于构建 React 组件、优化 Next.js 性能、分析打包体积、搭建前端项目、实现无障碍功能或审查前端代码质量。

U

ui-ux-designer

lotosbin / claude-skills

暂无简介

T

theme-factory

composio-community / awesome-claude-plugins

用于为各类成品应用主题样式的工具包，包括幻灯片、文档、报告、HTML 落地页等。提供 10 种预设配色和字体主题，可应用于已创建的成品，也可即时生成新主题。

B

brand-identity

travisjneuman / .claude

为企业和产品制定品牌策略并设计品牌形象。适用于创建品牌指南、开发视觉识别系统或定义品牌定位。

B

build-a-brand

pika-labs / pika-plugins

当用户要求打造品牌，或任务符合下方示例时使用。从任何输入构建实用的品牌形象——创意、现有网站、参考品牌列表、产品照片，或“我想重塑 X 品牌”。对于 founder-kit 用户，默认采用快速品牌方案，并可选择升级为完整的 14–16 页指南。适用于希望建立品牌形象、但不需要完整电商上线（无 Shopify、产品列表或社交媒体发布）的用户。触发语：“帮我打造一个品牌”“为我创建一个品牌”“设计品牌形象”“[X] 的品牌指南”“我想要一本品牌手册”“从零开始创建品牌”“[创意] 的品牌”“我想要一个有 [X] + [Y] 感觉的品牌”“重塑我的[事物]品牌”“[事物]的视觉形象”“build-a-brand”。

D

design-impact-reporting

owl-listener / designer-skills

使用利益相关方熟悉的语言，说明设计对业务和用户成果的贡献。向上级汇报结果时使用。若要选择指标，请使用 `metrics-definition`（ux-strategy）。

F

frontend-design

composio-community / awesome-claude-plugins

创建独具特色、达到生产级质量的高设计水准前端界面。当用户要求构建网页组件、页面或应用时使用该技能。生成富有创意、精致打磨的代码，避免千篇一律的 AI 风格。

L

landing-page-generator

kostja94 / marketing-skills

已弃用的 Landing Page 构建兼容条目。此页面现由 Pagina 维护；要构建新的 Landing Page，请安装并使用 page-builder。

D

design-taste-frontend-v1

nexu-io / open-design

原始 v1 taste-skill，为依赖其确切行为的项目保留。当前默认值是 `design-taste-frontend`（v2 实验版），这是一次重大重写。仅当需要确切的向后兼容性时才使用此 v1 安装名称。

D

design-negotiation

owl-listener / designer-skills

基于证据和共同目标，与合作伙伴及领导层沟通并争取设计质量、项目范围和时间安排。直接在对话中使用。有关其商业术语，请使用 `business-design`（ux-strategy）。

M

motion-brief-writer

charlie947 / motion-graphics-skills

把动态图形的大致想法转化为 Claude Code 可用的精确制作简报，并采用你自己的品牌风格。会先询问任何关键要素（确切数字、尺寸、时长、品牌），将真实结果与示例数据区分开，绝不编造数字。当有人说"brief this animation""write me a motion brief""I want an animated chart/graphic for my post""make this move in my brand"，或者有一个想法但还没有构建提示词时使用。

C

ce-gemini-imagegen

everyinc / compound-engineering-plugin

使用 Gemini API（Nano Banana Pro）生成和编辑图像时使用此技能。适用于根据文本提示创建图像、编辑现有图像、应用风格迁移、生成带文字的徽标、创建贴纸和产品模型图，或任何图像生成／处理任务。支持文生图、图像编辑、多轮优化，以及根据多张参考图进行构图。

I

imagegen-frontend-web

nexu-io / open-design

高端前端图像指导技能，用于生成高质量、转化率导向的网站设计参考。关键输出规则 — 为每个部分生成一张单独的横向图像。8 个部分的落地页产生 8 张图像。绝不将多个部分压缩为一张图像。强制实施构图多样性（不总是左文字/右图像）、背景图像自由度、多样化 CTA、多样化 Hero 尺度（巨大/中等/极简小号）、叙述概念脊椎、二级阅读时刻以及所有图像的统一调色板。针对落地页、营销网站和开发者或编码 Agent 能准确重现的产品效果图进行优化。

I

imagegen-frontend-mobile

nexu-io / open-design

精选移动应用图像生成 Agent，用于创建高端、原生应用屏幕概念和工作流。专为 iOS、Android 和跨平台移动产品设计。优先考虑清晰的层级结构、易读的文本、强大的多屏幕一致性、受控的色板、非通用的创意方向、纹理表面、图像主导的构图、精致的自定义图标和干净的手机模型框架。默认情况下，屏幕应显示在微妙的高端 iPhone 或类似手机模型内，具有可见的框架，同时主要焦点保持在应用内容本身。此 Agent 仅生成图像。它不编写代码。

B

brand-intake

charlie947 / motion-graphics-skills

这是本技能包中其他所有技能都会读取的设置步骤。通过一次简短访谈加上 3 到 5 个参考样例，在你的项目中生成两个文件：brand.md（你是谁、你卖什么、你有哪些素材）和 MOTION.md（你的色彩、字体、时长与动效规则），并在 CLAUDE.md 中加入一条规则，使 Claude 在制作任何动效之前先读取它们。在任何动效项目开始时使用，或当有人说“set up my brand”“brand intake”“build my motion design system”“make it look like my brand”“onboard me”“write my MOTION.md”，或直接把一批品牌样例丢进对话时使用。

T

tailwindcss

mengto / skills

使用 Tailwind CSS 设计/实现 UI 时使用，涵盖布局、字体排版、响应式设计、主题和组件模式。包含快速方案和规范，助力打造整洁、一致的 Web 设计。

B

brand-packaging

arnabbagxd / brand-building-skills

创建包装设计简报，涵盖结构、视觉方向、层级、材料和开箱体验。用户提到“packaging design”“packaging brief”“product packaging”“packaging direction”“label design”“packaging identity”“unboxing experience”“packaging look and feel”“brief my packaging designer”“packaging for my product”“packaging strategy”“retail packaging”“e-commerce packaging”“what should my packaging look like”，或向设计师、代理机构或制造商说明包装需求时使用。

A

artifacts-builder

composio-community / awesome-claude-plugins

用于在 claude.ai 中创建精细的多组件 HTML artifacts 的工具套件，采用现代前端 web 技术（React、Tailwind CSS、shadcn/ui）。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts，不适用于简单的单文件 HTML/JSX artifacts。

A

app-store-screens

pika-labs / pika-plugins

当用户要求制作 app store 屏幕素材或提出符合以下示例的任务时使用。根据 `brand.md`、原始产品截图或通过 Pika MCP 获取的公开 App Store 列表，按照指定品牌风格生成 5–6 张 App Store 截图。以故事线组织（吸引注意 → 价值 → 功能 → 证明 → 收尾），醒目且符合品牌调性。输出 1290×2796 PNG，可直接放入 App Store Connect。适用于需要 App Store／商店列表素材的请求，包括：“帮我制作 app store 截图”、“为 [brand] 设计 app store 屏幕”、“我有 brand.md 和截图，生成商店素材”、“应用发布截图集”、“iOS 商店屏幕”、“app store 创意素材”、“商店列表视觉素材”、“醒目的 app store 屏幕”、“app-store-screens”。

F

framer-motion

dylantarre / animation-principles

在 React 应用中使用 Framer Motion 实现 Disney 的 12 条动画原则时使用

M

masked-reveal

mengto / skills

使用 GSAP ScrollTrigger 创建滚动时通过遮罩依次显示单词的效果。适用于标题、主视觉文案、章节标题或编辑文本进入视口时，通过溢出遮罩逐词显现的场景。

I

industrial-brutalist-ui

nexu-io / open-design

融合瑞士印刷美学与军事终端风格的原始机械界面。严格网格、极度字号对比、实用主义配色、模拟衰退效果。适用于需要呈现解密蓝图感的数据密集仪表板、作品集或编辑类网站。

C

codex-theme-switcher

codexthemes / skills

通过一条命令，从本地 ~/.codexthemes 库应用、切换和恢复 Codex 桌面主题，并报告当前启用的主题。用户要求应用或启用自己创建或安装的主题、切换已安装主题、恢复 Codex 原生外观，或检查、调试当前应用的主题时使用。

G

guizang-material-illustration

op7418 / guizang-material-illustration

根据文章、笔记、产品概念、工作报告、创作者帖子、教程、学校材料、人文学科主题、科学说明、截图或图表数据，生成 Guizang 风格的材质插画、带标签的说明图、材质风格图表插画和数据优先的编辑图片。适用于用户要求配图、带字插图、解释图、图解插画、概念拆解图、图表美化、数据图美化、3D 图表、汇报配图、内容配图、小学课文配图、生物/化学/物理解释图、人文类配图、流程/循环/系统图，或希望使用 GPT-Image / 图像生成创建可用于社交卡片、文档、幻灯片、PPT 或帖子中的辅助图片。

M

mapbox-store-locator-patterns

mapbox / mapbox-agent-skills

使用 Mapbox 构建门店定位器、餐厅查找器和基于位置的搜索应用的常见模式。涵盖标记显示、筛选、距离计算和交互式列表。

Q

quick-mockups

civitai / civitai

并行创建多个 UI 设计模型。用户要求为某项功能创建模型、线框图或设计变体时使用。使用 Mantine v7 + Tailwind 创建 HTML 文件，并遵循 Civitai 的设计系统。

W

webgl-landing-steering

mengto / skills

创建或优化 WebGL 密集型落地页，并需要引导特定视觉效果（高级、技术感、活泼、电影感），同时兼顾转化信息清晰度、性能和实现复杂度时使用。

S

scss-best-practices

mindrally / skills

便于维护和扩展的样式表 SCSS/Sassy CSS 最佳实践与编码指南

U

ui-design-system

davila7 / claude-code-templates

面向高级 UI 设计师的 UI 设计系统工具包，包含设计令牌生成、组件文档、响应式设计计算和开发交接工具。用于创建设计系统、保持视觉一致性并促进设计与开发协作。

U

use-igniteui-blazor

dotnet / skills

在 Blazor 应用中添加、配置或审查 Ignite UI for Blazor Lite 组件支持。适用场景：安装 IgniteUI.Blazor.Lite 或 IgniteUI.Blazor.GridLite，在 Blazor Server、WASM、Hybrid 或拆分式 Blazor Web App 项目中注册 AddIgniteUIBlazor()，添加 @using IgniteUI.Blazor.Controls，连接主题样式表，选择合适的宿主页面，定位 GridLite 样式表路径，说明单项目与拆分式 Server/Client Web App 配置的差异，以及检查 Ignite UI 组件正常工作所需的可交互渲染模式。不适用场景：不使用 Ignite UI 的常规 Blazor 组件编写、从零选择应用架构或渲染模式（参见 create-blazor-project）、JavaScript 互操作（参见 use-js-interop）、身份认证（参见 configure-auth）、预渲染（参见 support-prerendering），以及无需 Ignite UI 配置的布局/组件设计问题。

M

mermaid-visualizer

axtonliu / axton-obsidian-visual-skills

将文本内容转换为适用于演示文稿和文档的专业 Mermaid 图表。用户要求将概念可视化、创建流程图或根据文本制作图表时使用。支持流程、系统架构、比较图、思维导图等，并内置语法错误预防功能。

C

critique-color

owl-listener / designer-skills

评审渲染屏幕的色彩，包括对比度、调色板协调性和语义含义。用于评审单个屏幕。若要进行产品级 WCAG 审计，请使用 `accessibility-audit` (design-systems)；若要构建调色板，请使用 `color-system` (ui-design)。

D

design-engineering

refoundai / lenny-skills

帮助用户了解并构建设计工程能力。适用于有人正在创建设计工程职能、招聘设计工程师，或弥合设计团队与工程团队之间差距的情况。

U

ux-designer

szilu / ux-designer-skill

为界面和前端代码的构建、审查与评估提供 UX/UI 设计指导。用于设计屏幕或组件、审查可用性或无障碍性（WCAG 2.2、EAA）、撰写微文案，或设计表单、导航、搜索、表格、仪表板、引导流程、通知、实时协作、画布/白板应用、AI/聊天界面、国际化/RTL、语音、设计系统或条码/QR 扫描与显示。

C

codex-theme-installer

codexthemes / skills

从 codexthemes.ai 下载已发布的 Codex 主题，并将源文件安装到本地 ~/.codexthemes 主题库；可匿名使用免费额度，或使用 CodexThemes API 密钥获取更高额度。用户要求安装、下载、获取或试用 CodexThemes 主题，提供要安装的 codexthemes.ai 主题 URL 或 ID，或遇到下载速率限制并需要 API 密钥指导时使用。

P

pricing-page

mengto / skills

设计或重写高转化率 SaaS 定价页面时使用，涵盖结构、套餐设计、文案、SEO/AEO、常见问题、布局模式和实验。包含检查清单、模板和常见误区

F

frontend-design

mager / frontend-design

以前端设计技能的形式，按照 mager 实际的设计品味生成界面、重新设计样式并指导 UI 开发——打造以概念为先、具有创作感、触感、表现力且易于使用的界面，涵盖温暖的编辑风格、明亮现代的产品设计和高对比度霓虹系统。构建或审查任何前端 UI 时使用此技能。

S

senior-frontend

alirezarezvani / claude-skills

适用于 React、Next.js、TypeScript 和 Tailwind CSS 应用的前端开发技能。用于构建 React 组件、优化 Next.js 性能、分析打包体积、搭建前端项目、实现无障碍功能或审查前端代码质量。

Q

qwencloud-image-generation

qwencloud / qwencloud-ai

使用 Wan 和 Qwen Image 模型生成和编辑图像。支持文生图、图像编辑（风格迁移、主体一致性、文本渲染）以及文本与图像交错输出。触发条件：用户想创作插画、产品图像、艺术设计、海报、进行文生图、编辑/转换现有图像、应用风格迁移、根据参考照片生成图像、创作文本与图像交错内容、提及 Wan/Qwen Image 模型/AI 艺术创作，或明确以名称调用此技能（例如使用 qwencloud-image-generation）。不触发：用户想理解/分析现有图像或进行 OCR（使用 qwencloud-vision）、生成视频（使用 qwencloud-video-generation）或处理纯文本任务。

Y

youtube-thumbnail

charlie947 / social-media-skills

根据视频标题生成品牌风格的 YouTube 缩略图。利用创作者的参考照片、高点击率缩略图原则和品牌色彩，生成可直接用于 Gemini 的图像提示词。用户提到“thumbnail”“youtube thumbnail”“build me a thumbnail”，或希望在撰写脚本前制作视频封面图时，使用此技能。缩略图优先的工作流与 LinkedIn 的图像优先方法类似：在观众听到脚本内容前先推介视频。

V

video-to-superprompt

mengto / skills

将参考视频转换为极其详细的复刻或灵感提示词。当用户提供、提及、上传、链接或指向某个视频，并要求分析设计、UI、动画、过渡效果、滚动交互、排版、颜色、素材、WebGL/Three.js、叙事、各区块行为，或创建用于复刻页面、应用、交互或动态系统的提示词／文章时使用。

U

ui-designer

daymade / claude-code-skills

从 UI 参考图像中提取设计系统，并生成可直接用于实现的 UI 设计提示词。用户提供 UI 截图/模型图，并希望创建一致的设计、生成设计系统，或构建符合参考美学风格的 MVP UI 时使用。

D

diagram-animation

iart-ai / explainer-video-skills

当用户要求“为这个图表添加动画”“构建逐步显示的流程图”“为架构图/时序图添加动画”“让图表动起来”“让柱形增长／绘制折线／数字递增”“显示数据沿连接线流动”或“将静态图表变成引导式展示”时，使用此技能。涵盖 SVG、Framer Motion、D3 和 Remotion。

P

powerpoint-ppt

practicalswan / agent-skills

通过 MCP 服务处理 PowerPoint（.pptx）文件。用于创建幻灯片、设置演示文稿格式、管理占位符、添加图像、应用模板或从 .pptx 文件中提取文本。

P

product-taste-intuition

refoundai / lenny-skills

帮助用户培养产品品味和直觉。当用户希望提升产品判断力、难以评估设计质量、需要在数据不完整时做决策，或想培养更好的产品直觉时使用。

W

webgl-3d-object

mengto / skills

创建真实的 3D WebGL 对象，具备几何网格深度、基于物理的材质、定向光和环境光、透视相机、微妙旋转和悬浮运动。当页面需要带切面效果的 3D 主视觉对象或类似产品的视觉元素，并需要真实光照而非 CSS 变换技巧时使用。

S

scroll-world-storytelling

mengto / skills

使用以下三种渲染器之一，将文章、案例研究、品牌叙事、产品历程或长篇故事转化为电影感的滚动驱动落地页：视频逐帧控制、实时 Three.js 世界，或语义化 HTML/SVG 数据与排版。用户需要滚动世界、飞越式落地页、文章转网站、动画星球、数据滚动叙事、视频逐帧页面、连贯的视觉旅程，或以故事为主线替代普通堆叠区块时使用

B

building-blocks

adobe / skills

在 AEM Edge Delivery Services（EDS、Franklin、Helix）中实施代码更改时使用，无论是新增或修改 blocks、核心功能（scripts.js、styles、delayed.js 等），还是两者兼有。创建和修改 block 文件夹及 decorate 函数，更新核心脚本，限定 CSS 作用范围，并接入延迟加载。整体开发流程请使用 content-driven-development。

O

om-mockup-prototype

open-mercato / skills

在探索阶段，基于产品简介、在第一组合成面板之后且在更新简介或起草待办列表之前，构建中立的可点击低保真原型。保留业务规则和明确的假设，在本地模拟所选流程，并在浏览器中验证导航和相关状态。适用于探索阶段的线框图，或在详细设计前测试流程。

S

staggered-word-reveal

mengto / skills

创建细腻的编辑风格逐词文本显现动画：每个词进入视口时逐渐淡入并上移到位。适用于高端作品集标题、主视觉文案、章节引言，以及需要借助 IntersectionObserver 或视口内检测实现电影感错落显现效果的短篇营销文案。

I

icon-retrieval

antvis / chart-visualization-skills

通过 HTTP API 搜索图标，并使用 curl 获取 SVG 字符串