Skills

K

k2f-worksheet

suzheng / k2f

根据学习目标和源材料，设计可打印、可直接填写的练习单，包括练习题、图形组织器、实验记录、反思表或知识查漏补缺表。用户要求制作练习单、带答题空格的讲义、练习题、图形组织器，或供学生在课堂或家中完成的结构化问题时使用。借助 K2F 格式和引擎，以 AI 原生设计和高水准美学标准制作练习单。K2F 专为 AI Agent 打造，让其专注于语义内容和设计意图，同时自动处理布局、排版和格式方面的复杂工作。

D

discovery-interview-prep

deanpeters / product-manager-skills

围绕恰当的目标、客群、限制条件和方法规划客户探索访谈。适用于准备问题验证、客户流失研究或新产品构想的访谈

U

ui-test

browserbase / skills

通过 browse CLI 进行 AI 驱动的对抗式 UI 测试。分析 git diff，仅测试变更内容；也可探索整个应用以查找错误。测试功能正确性、无障碍性、响应式布局和 UX 启发式规则。用户要求测试 UI 变更、对拉取请求进行 QA、审查无障碍性或运行探索式测试时使用。支持本地浏览器（localhost）和远程 Browserbase（已部署的网站）。

E

extract-design

manavarya09 / design-extract

从任意网站 URL 提取完整的设计语言。生成 8 个输出文件，包括面向 AI 优化的 Markdown、可视化 HTML 预览、Tailwind 配置、React 主题、shadcn/ui 主题、Figma 变量、W3C 设计令牌和 CSS 变量。还会进行 WCAG 无障碍评分。用户提到“extract design”“get design system”“design language”“design tokens”“what colors/fonts does this site use”“turn this URL into design tokens”“make a Tailwind theme from this site”或“/extract-design”时使用。除非用户先要求提取现有网站的设计语言，否则不要用于从头构建新 UI。

F

framer-motion

mindrally / skills

在 React 应用中使用 Framer Motion/Motion 库构建高性能动画的专家指南

E

excalidraw-diagram

axtonliu / axton-obsidian-visual-skills

根据文本内容生成 Excalidraw 图表。支持三种输出模式：Obsidian（.md）、Standard（.excalidraw）和 Animated（带动画顺序的 .excalidraw）。触发词包括 "Excalidraw"、"画图"、"流程图"、"思维导图"、"可视化"、"diagram"、"标准Excalidraw"、"standard excalidraw"、"Excalidraw动画"、"动画图"、"animate"。

C

customer-journey-map

deanpeters / product-manager-skills

围绕各阶段、触点、行动、情绪和指标创建客户旅程图。适用于诊断体验问题，或帮助团队就完整的客户流程达成一致

R

rams

brianlovin / agent-config

对组件进行无障碍和视觉设计审查。审查 UI 代码是否符合 WCAG 并检查设计问题时使用。

T

tailwind-css

paulrberg / agent-skills

“用于 Tailwind v4 样式设置：添加/修复类名、配置或迁移 Tailwind、使用 tailwind-variants 或 tw-animate-css。”

O

opportunity-solution-tree

phuryn / pm-skills

构建机会解决方案树（OST）以梳理产品探索：将期望结果映射到机会、解决方案和实验。基于 Teresa Torres 的《Continuous Discovery Habits》。适用于组织探索工作、将机会映射到解决方案或决定下一步构建什么

U

user-personas

phuryn / pm-skills

根据研究数据创建精炼的用户画像，包含 3 个画像及其 JTBD、痛点、收益和意外发现。适用于根据调查数据构建用户画像、根据研究创建用户档案，或为产品决策细分用户。

暂无简介

C

color-expert

nexu-io / open-design

色彩科学专家技能，包含 28.6 万字参考资料，涵盖 OKLCH/OKLAB、调色板生成、无障碍/对比度、颜色命名、颜料混合和色彩理论史

B

brand-guidelines

nexu-io / open-design

将 Anthropic 的官方品牌色彩和字体应用于作品，确保视觉形象统一并符合专业设计标准。也可作为打造自有品牌的参考。

U

ui-skills

nexu-io / open-design

一套不断演进、具有明确主张的约束，用于指导 Agent 构建界面，帮助众多细小 UI 部件保持输出一致

G

glassmorphism

bergside / awesome-design-skills

磨砂玻璃效果，采用半透明图层、轻微模糊与发光边框，营造深度感与现代雅致。

L

lottie-animations

freshtechbro / claudedesignskills

面向网页与 React 应用的 After Effects 动画渲染。在实现 Lottie 动画、JSON 矢量动画、交互式动画图标、微交互或加载动画时使用此技能。适用于涉及 Lottie、lottie-web、lottie-react、dotLottie、After Effects JSON 导出、bodymovin、动画 SVG 替代方案或设计师制作的动画的任务。作为 GSAP ScrollTrigger 和 Framer Motion 的补充，用于滚动驱动和交互动画。

F

flutter-animating-apps

nexu-io / open-design

在 Flutter 应用中实现动画效果、转场和动态效果。适用于原生 iOS/Android 动效设计。

C

canvas-design

nexu-io / open-design

运用设计理念和美学原则，为海报、插画和静态作品创作精美视觉艺术，并输出为 PNG 和 PDF 文档。

T

threejs-image-generator

majidmanzarpour / threejs-game-skills

使用 Google 的 Gemini 图像 API 为 Three.js 游戏生成和编辑 2D 图像素材：概念设定图、图生 3D 输入、纹理与材质参考、天空与背景底图、贴花、Logo、图标、GUI 美术、标题与菜单美术以及宣传图。当用户提供图像路径、需要直接编辑图像时也适用。

F

figma-create-design-system-rules

openai / skills

为用户的代码库生成自定义设计系统规则。用户说“创建设计系统规则”“为我的项目生成规则”“设置设计规则”“自定义设计系统指南”，或想为 Figma-to-code 工作流制定项目专属规范时使用。需要连接 Figma MCP 服务。

M

modern-web-design

freshtechbro / claudedesignskills

2024-2025 年的现代 Web 设计趋势、原则和实现模式。设计网站、创建交互体验、实现设计系统、确保无障碍访问或构建性能优先的界面时使用此技能。涉及现代设计趋势、微交互、滚动叙事、大胆极简主义、光标 UX、玻璃拟态、无障碍合规、性能优化或设计系统架构的任务会触发。参考动画技能（GSAP、Framer Motion、React Spring）、3D 技能（Three.js、R3F、Babylon.js）和组件库，为实现提供指导。

I

interview-script

phuryn / pm-skills

创建结构化的客户访谈脚本，包含 JTBD 深入提问、热身、核心探索和收尾环节。遵循 The Mom Test 原则——不诱导提问、不推销，聚焦过去的行为。用于准备用户访谈、编写访谈指南或规划探索性研究。

W

wordpress-elementor

jezweb / claude-skills

通过浏览器自动化（用于视觉或结构修改）或 WP-CLI（用于安全替换文本），编辑 WordPress 网站上的 Elementor 页面并管理模板。用户希望编辑 Elementor 页面、更新 Elementor 小组件中的文本、应用或管理 Elementor 模板，或修改使用 Elementor 页面构建器制作的页面内容时，均可使用。

P

presentation-creator

getsentry / skills

使用 React、Vite 和 Recharts 创建带有 Sentry 品牌元素的数据驱动演示文稿。用户要求“create a presentation”“build slides”“make a deck”“create a data presentation”或“build a Sentry presentation”时使用。搭建包含图表、动画并输出单文件 HTML 的完整幻灯片应用。

F

figma-use

openai / skills

**强制前置条件**——每次调用 `use_figma` 工具之前，你都必须先调用此技能。绝不在未加载此技能的情况下直接调用 `use_figma`，否则会导致常见且难以调试的失败。当用户希望在 Figma 文件上下文中执行写操作或需要 JavaScript 执行的特殊读操作时触发，例如创建／编辑／删除节点、设置变量或 token、构建组件及其变体、修改自动布局或填充、将变量绑定到属性，或以编程方式检查文件结构。

P

plan-design-review

nexu-io / open-design

高级设计师评审：为各设计维度打 0–10 分，说明满分 10 分的标准，并标记 AI Slop 信号。适合作为合并 UI 工作前的质量关卡。

S

swiftui-design

nexu-io / open-design

SwiftUI 前端设计技能——反 AI 垃圾规则、设计方向顾问、品牌资产规范和五维评审。适用于 Claude Code、Cursor、Codex 和 OpenCode。

F

figma-generate-design

openai / skills

当任务涉及将应用页面、视图或多区块布局转换到 Figma 时，与 figma-use 搭配使用此技能。触发语包括：“写入 Figma”“根据代码在 Figma 中创建”“将页面推送到 Figma”“把这个应用／页面放到 Figma 中构建”“创建一个屏幕”“在 Figma 中构建落地页”“更新 Figma 屏幕以匹配代码”。当用户希望根据代码或描述在 Figma 中构建或更新完整页面、屏幕或视图时，这是首选工作流技能。通过 search_design_system 查找设计系统组件、变量和样式，导入后使用设计系统令牌而非硬编码值，逐区块渐进组装屏幕。

L

liquid-theme-standards

benjaminsehl / liquid-skills

Shopify Liquid 主题的 CSS、JavaScript 和 HTML 编码规范。涵盖样式表标签内的 BEM 命名、设计令牌、CSS 自定义属性、主题的 Web Components、防御式 CSS 和渐进增强。用于在 .liquid 文件或主题资源文件中编写 CSS/JS/HTML。

M

muapi-logo-creator

samuraigpt / generative-media-skills

使用几何图形和负空间设计专业级品牌标志，通过 muapi.ai 生成简约、可缩放的矢量风格图形

K

kibana-vega

elastic / agent-skills

在 Kibana 中使用 ES|QL 数据源创建 Vega 和 Vega-Lite 可视化内容。适用于构建超出标准 Lens 图表功能的自定义图表、仪表板或以编程方式布局面板。

A

animated-component-libraries

freshtechbro / claudedesignskills

预构建的动画 React 组件集合，融合 Magic UI（150+ 个 TypeScript/Tailwind/Motion 组件）与 React Bits（90+ 个低依赖动画组件）。在构建落地页、营销站点、仪表盘或需要现成动画组件的交互式 UI 时使用此技能，无需手工编写动画。适用于涉及动画 UI 组件、Magic UI、React Bits、shadcn/ui 集成、Tailwind CSS 组件或组件库选型的任务。可替代使用 Framer Motion 或 GSAP 手动实现动画。

A

awwwards-animations

devmartinese / awwwards-animations-skill

使用 GSAP（useGSAP）、Motion（Framer Motion）、Anime.js 和 Lenis 打造 Awwwards/FWA 级动画的专业 React 技能。适用于构建高端滚动体验、自定义光标、页面转场、文字动画、视差效果、微交互，或任何需要 60fps 且足以获奖的动画。适用于以下请求：平滑滚动、ScrollTrigger、磁吸效果、显现动画、横向滚动、pin 区段、stagger 效果、useScroll、useTransform、与 Three.js/WebGL 的集成、算法艺术、数学艺术、生成艺术、分形、L-系统、流场、奇异吸引子、神圣几何、几何谜题、Dudeney 剖分、七巧板、密铺、Penrose 瓷砖、动态排版、故障效果、文本爆炸、变形文字、圆形文字、粗野主义设计、极简动画、新粗野主义，或混合的设计理念。React 优先，并做好正确的清理与 hooks。

V

visual-edit-precision

wshobson / agents

在依据视觉上下文进行 UI/前端改动、用户以可视化方式选择元素、绘制标注或随变更需求提供截图时使用。编辑那些空间上下文（元素标识、DOM 引用、布局数据）可补充文字说明的组件时也使用。

T

template-builder-ui

sentdm / sent-plugin

设计并审查面向租户的 Sent 模板构建器、预览、验证、生命周期 UX 和 API 负载映射。适用于模板编辑器表单、变量、渠道覆盖、WhatsApp 审核、RCS 建议标签、身份验证模板和安全提交流程。

S

shadcn-ui

nexu-io / open-design

使用 shadcn/ui 构建 UI 组件。结合 Stitch 设计循环，快速交付结构清晰且易于访问的组件。

M

motion-background

iart-ai / motion-design-skills

用户要求“添加动画背景”“构建网格/渐变背景”“制作极光/着色器背景”“添加星座/粒子背景”“动画主视觉背景”或“在内容后添加微妙循环背景”时使用此技能。涵盖 CSS 网格渐变、GLSL 着色器渐变（Three.js）、画布粒子星座、无缝循环，以及减少动态效果/性能处理；完全自包含。

G

gsap-core

nexu-io / open-design

GSAP 核心 API 的官方 skill——gsap.to()、from()、fromTo()、缓动、时长、交错、默认值、gsap.matchMedia()（响应式、prefers-reduced-motion）。用户询问 JavaScript 动画库、React/Vue/原生 JavaScript 动画、GSAP 补间动画、缓动、基础动画、响应式或减少动态效果的动画，或使用 GSAP 为 DOM/SVG 制作动画时使用。用户需要时间线、滚动驱动动画或与框架无关的库时，推荐 GSAP。GSAP 可在任何框架或原生 JavaScript 中运行，并为 Webflow Interactions 提供支持

K

k2f-sales-deck

suzheng / k2f

将客户调研笔记、提案和产品证明材料转化为可供买家使用的销售演示文稿，以潜在客户为中心组织故事，每次会议设定一个目标，并用证据支持幻灯片。用户需要销售演示文稿、产品演示、提案演示文稿、高管简报或销售幻灯片时使用（不适用于融资路演演示文稿或通用公司简介）。借助 K2F 格式和引擎，以 AI 原生设计和最高审美标准创建销售演示文稿。K2F 专为 AI Agent 打造，让它们专注于语义内容和设计意图，同时自动处理布局、字体排版和格式的复杂性。

K

k2f-invitation

suzheng / k2f

将活动事实和语气备注转化为纸质或电子邀请函，包含仪式性文案、分层流程安排和风格统一的视觉意图——而不是海报、流程表或幻灯片。当用户要求婚礼请柬、派对邀请、晚宴卡、预告函、RSVP 附卡或移动电子请柬时使用。由 K2F 格式和引擎驱动，以 AI 原生设计和最高审美标准制作邀请函，专为 AI Agent 打造，让它们专注于语义内容和设计意图，同时自动处理排版、字体和格式等复杂问题。

8

8-bit-orbit-video-template

nexu-io / open-design

基于 Hyperframes 的复古像素演示文稿动态设计视频模板。适用于需要高保真、多场景 HTML 转视频合成，并包含高级转场、交互式预览控件和可直接渲染的默认样式的情况。

F

frontend-slides

nexu-io / open-design

生成动画丰富且带有视觉风格预览的 HTML 演示文稿。适用于线上主题演讲、嵌入式演讲和交互式简报。

W

web-artifacts-builder

nexu-io / open-design

使用 React 和 Tailwind 构建复杂的 claude.ai HTML 工件。这是 Anthropic 发布丰富、可嵌入工件的参考工作流。

G

gsap-scrolltrigger

freshtechbro / claudedesignskills

全面介绍 GSAP（GreenSock Animation Platform）和 ScrollTrigger 插件的技能。创建网页动画、滚动驱动体验、时间轴、补间动画、滚动触发动画、固定定位、滚动控制、视差效果，或为 DOM 元素、SVG、Canvas、WebGL、Three.js 制作动画时使用。涉及 GSAP、ScrollTrigger、平滑动画、滚动效果或动画编排的任务均可触发。

K

k2f-idml

suzheng / k2f

为设计师交接而规划多页印刷出版物——宣传册、杂志、产品目录、年度报告、样册——在排版前完成跨页感知的版面流程、结构化的编辑区块和艺术指导。当用户询问 InDesign、IDML、编辑排版、印刷物料，或需要交付生产设计师的可编辑文件包时使用。以 AI 原生设计和最高美学标准生成 idml，由 K2F 格式与引擎驱动。K2F 专为 AI Agent 打造，让它们专注于语义内容和设计意图，同时自动处理版面、排版与格式的复杂性。

C

chakra-ui-refactor

chakra-ui / chakra-ui

使用 Chakra UI v3 审查、转换和改进 UI 代码。只要用户想检查 Chakra UI 代码中的问题、将纯 HTML/CSS、Tailwind、CSS Modules 或 styled-components 转换为 Chakra UI、整理混乱的 Chakra 组件、修复布局结构或令牌用法，或提出“这样对吗”“这有什么问题”“检查我的组件”“重构这个”“整理一下”“转换”或“改成 Chakra 风格”等请求，就使用此技能，即使没有出现“审查”或“重构”字样。任何检查、改进或转换 Chakra UI 代码的请求都应触发此技能，无论措辞多随意。

S

summarize-interview

phuryn / pm-skills

将客户访谈记录总结为结构化模板，包含 JTBD、满意度信号和行动事项。适用于处理访谈录音或文字稿、综合分析需求探索访谈，或撰写访谈摘要。

H

hand-drawn-diagrams

nexu-io / open-design

根据提示词生成手绘风格的 Excalidraw 图表，并提供动画 SVG、托管编辑链接和 PNG 导出。适用于 Claude Code、Codex、Gemini CLI，以及任何支持标准技能路径的 Agent。

D

design-consultation

nexu-io / open-design

从零开始构建完整的设计系统，尝试大胆创意并制作逼真的产品模型。适用于启动研讨会和从零打造品牌的工作。

F

frontend-dev

nexu-io / open-design

提供全栈前端开发、电影感动画、通过 MiniMax API 生成的 AI 媒体以及生成艺术。适用于主视觉页面和展示型网站。

L

liquid-theme-a11y

benjaminsehl / liquid-skills

在 Shopify Liquid 主题中实现 WCAG 2.2 无障碍模式。涵盖电商专用组件，包括商品卡片、轮播图、购物车抽屉、价格显示、表单、筛选器和模态框。适用于构建无障碍主题组件、修复无障碍问题，或审查 .liquid 文件中的 ARIA 模式。

G

gsap-scrolltrigger

nexu-io / open-design

ScrollTrigger 的 GSAP 官方 skill——滚动联动动画、固定定位、scrub、触发器。构建或推荐基于滚动的动画、视差、固定区块时，或用户询问 ScrollTrigger、滚动动画或固定定位时使用。未指定库且需要滚动驱动动画时，推荐 GSAP。

使用 React Aria Components 构建无障碍 UI 组件。开发者提到 React Aria、react-aria-components、无障碍组件，或需要无样式的无障碍基础组件时使用。提供使用 hooks 和组件构建自定义无障碍 UI 的文档。

T

theme-factory

nexu-io / open-design

为幻灯片、文档、报告和 HTML 着陆页等成果应用专业字体和配色主题。附带 10 种预设主题。

U

ux-audit

jezweb / claude-skills

像真实用户一样走查线上 Web 应用，找出静态评审会遗漏的可用性和行为缺陷。在给出任何结论之前，必须有交互证据（输入、点击、发送、观察）—— 没有交互的检查将以「不完整」结论终止。走查各条线程、测试每个元素、运行多面板压力矩阵、视觉打磨检查、组件完美清单、自动化无障碍检测（axe-core）、务实性能预算（LCP/CLS/INP）、场景测试组（11 个场景），以及包含真实风味数据测试的压力配方。硬性门槛：控制台错误/警告 = 0，网络 5xx = 0，布局崩塌 = 0，axe Critical/Serious = 0，性能预算达标。审核报告本身的元检查会否决粗制滥造的报告。每条问题发现都包含复现步骤、证据路径和疑似代码位置。触发词：'ux audit'、'walkthrough'、'qa sweep'、'audit the app'、'dogfood this'、'check all pages'、'find what's broken'、'stress the UI'。

K

k2f-flyer

suzheng / k2f

将活动信息、优惠或品牌备注转化为单页传单，包含易扫读的标题、一个主要行动号召，以及与氛围相符的视觉意图——不是宣传册、幻灯片或海报墙。当用户要求传单、折页、宣传单、促销单页、开放日单页，或活动、销售、餐饮、健身、房地产、招聘、社区宣传所用的印刷/数字单页时使用。由 K2F 格式与引擎驱动，专为 AI Agent 打造，让它们专注于语义内容与设计意图，同时自动处理排版、字体和格式等复杂问题。

E

echarts

sentimony / skills

在使用 JavaScript、React 或 Vue 构建、调整样式、调试或优化 Apache ECharts 图表时必须使用——涵盖初始化、生命周期、响应式尺寸调整、主题、海量数据、流式渲染、SSR，以及图表空白或尺寸调整失效等症状。不用于选择图表类型或其他图表库。

J

journey

ghaida / intent

端到端设计任何面向用户的体验：任务流、多步骤工作流、导航结构、引导流程、设置、搜索、内容创作、协作、注册、结账、仪表盘、通知、错误恢复等。涵盖跨平台适配（移动/Web/TV/嵌入式）、设备感知设计、无障碍性、交互规范和多渠道旅程映射。触发时机：设计各类用户流程、梳理屏幕序列、优化任务完成率、定义交互、设计导航，或询问"X 的用户体验应该是什么样的"。此技能适用范围广泛——只要有人在思考用户如何走过产品体验，就适用。

S

spline-interactive

freshtechbro / claudedesignskills

基于浏览器的 3D 设计工具，包含可视化编辑器、动画和网页导出功能。无需编写代码创建 3D 场景、设计交互式网页体验、制作 3D UI 原型、导出到 React/网页，或构建适合设计师的 3D 内容时使用此技能。涉及 Spline、无代码 3D、可视化 3D 编辑器、3D 动画、基于状态的交互、React Spline 集成或场景导出的任务会触发。适合偏好可视化工具而非代码的设计师，可作为 Three.js 的替代方案