Skills

F

figma-generate-library

nexu-io / open-design

根据代码库在 Figma 中构建或更新专业级设计系统库。适用于让 Figma 中的事实来源与已发布的组件保持同步。

P

philosopher

ghaida / intent

一种跨领域认知模式，用于先深入思考设计问题，而不是急于求解。属于 Intent 设计策略系统的一部分。它会开启发散式头脑风暴：增强联想、保持初学者心态、识别跨领域模式，并抑制过早否定想法。与每个 Intent 技能协同工作：strategize 用它重新构建设计简报，blueprint 用它质疑结构假设，journey 用它重新思考交互模型，specify 用它对规格进行压力测试。用户提出“发散模式”、“哲学家模式”、“先陪我想想”、“头脑风暴”、“探索这个问题”，或说“大胆奇特一点”、“别过滤想法”、“有哪些联系是你没想到的”、“换个角度思考”或“我卡住了”时触发。这是一种推理协议，而非角色——Claude 的表达仍然务实，但认知过程会显著改变

S

stitch-loop

nexu-io / open-design

迭代式设计到代码的反馈循环。通过“评审 → 调整 → 发布”循环，提升设计简报与已构建 UI 之间的视觉还原度

F

figma-code-connect-components

nexu-io / open-design

使用 Code Connect 将 Figma 设计组件与代码组件关联起来，让设计系统更新自动同步到代码库

T

transpose

ghaida / intent

为不同平台和使用情境重新构思体验——不只是调整尺寸，而是重新构想。属于 Intent 设计策略系统的一部分。当体验从桌面转向移动端、从 Web 转向电视、从消费级应用转向自助服务终端，或从视觉界面转向语音时，交互模型、信息优先级和用户情境都会随之改变。触发场景包括：为新平台调整设计、规划多设备体验、审查跨平台一致性、为电视/自助服务终端/语音/嵌入式设备做设计，或有人说“让它在手机上能用”而你需要反驳“只是缩小一下”时。此外，跨设备体验旅程的连贯性、平台惯例审查、针对具体情境的信息优先级映射也会触发此技能。

C

customer-journey-mapping-workshop

deanpeters / product-manager-skills

以自适应提问与产出运行客户旅程地图工作坊。当需要为某个人物角色和场景梳理阶段、行动、情绪、痛点与机会时使用。

F

figma-create-new-file

nexu-io / open-design

创建一个新的空白 Figma Design 或 FigJam 文件。适合作为脚本化设计系统或工作坊工作流的第一步。

C

card-xiaohongshu

nexu-io / open-design

小红书风格的知识卡片，以可滑动的多卡片轮播形式呈现。

K

k2f

suzheng / k2f

使用 K2F 创建、设计、编辑、验证和导出精美的 Word（docx）、可编辑 PDF、可填写 AcroForm PDF 和 Adobe InDesign（IDML）文档。使用 AI Agent 创建美观的 Word、可填写 PDF、AcroForm、IDML 或 InDesign 文档时使用，例如菜单、证书、计划表、邀请函、练习册等。K2F 是一种成熟的文件格式，旨在让 AI Agent 精确而轻松地设计和编辑精美文档，并拥有丰富的生态系统。

D

design-taste-frontend

nexu-io / open-design

用于登陆页、作品集和重设计的反模板化前端技能。Agent 读取需求，推导合适的设计方向，交付不显得模板化的界面。在需要时使用真实设计系统，重设计时优先进行审计，严格的飞行前检查。

M

mockup-device-3d

nexu-io / open-design

静态的 iPhone 和 MacBook 3D 风格展示，屏幕上嵌入真实 HTML，呈现玻璃镜头折射效果与 360 度旋转台构图。

W

wpds

nexu-io / open-design

WordPress 设计系统。将 WordPress 官方设计令牌、排版和组件模式应用于主题和站点

A

animate-text

pixel-point / animate-text

精选文本动画目录，提供标题、标签、计数器和文本切换的精确 JSON 规格。当 Agent 需要为 WAAPI、Motion、Framer Motion、GSAP、CSS、Lottie、Rive 或类似技术栈选择或转换软模糊进入、打字机、共享轴、线条显现、交错、交叉淡化或动感构建等命名效果时使用

P

pixelbin-media

nexu-io / open-design

通过 Pixelbin 提供的 85 多种 API 生成和编辑图像与视频，并构建视觉效果出色的网站页面

R

resume-modern

nexu-io / open-design

现代简约风格简历，单页 A4，适合打印或导出为 PDF

F

figma-create-new-file

openai / skills

创建一个新的空白 Figma 文件。当用户想创建新的 Figma 设计或 FigJam 文件，或在调用 use_figma 之前需要新文件时使用。如需可通过 whoami 解析套餐。用法 — /figma-create-new-file [editorType] [fileName]（例如 /figma-create-new-file figjam My Whiteboard）

6

60fps-animation

iart-ai / web-animation-skills

当用户询问“修复卡顿的 CSS 动画”“让动画达到 60fps”“避免布局抖动”“平滑地动画处理 width/height/top/left”“将动画转换为 transform”“高效地动画处理 box-shadow”“动画处理 height auto”“FLIP 动画”或“为什么滚动/悬停动画卡顿”时，应使用此技能。

P

playground

cline / skills

创建交互式 HTML playground —— 自包含的单文件探索器，让用户通过控件可视化地配置内容、查看实时预览，并复制出提示词。当用户要求为某个主题制作 playground、explorer 或交互式工具时使用。

V

video-hyperframes

nexu-io / open-design

兼容 Hyperframes / Remotion 的连续帧动画，支持自动播放。

D

deck-swiss-international

nexu-io / open-design

16 栏网格、单一高饱和度强调色，以及 22 款锁定版式（Klein Blue、Lemon、Mint、Safety Orange）。

A

article-magazine

nexu-io / open-design

受 Huashu / huashu-md-html 启发的杂志文章排版，将 Markdown 或笔记变成精美的长篇 HTML 文章。

A

android-native-dev

minimax-ai / skills

Android 原生应用开发与 UI 设计指南。涵盖 Material Design 3、Kotlin/Compose 开发、项目配置、无障碍以及构建问题排查。开始 Android 原生应用开发前请先阅读本指南。

P

pptx-visual-assets

wshobson / agents

在可编辑的 PPTX 演示文稿中选用并放置已批准的辅助图标、图片、SVG、图表和信息图时使用。

C

color-expert

meodai / skill.color-expert

在处理颜色命名、色彩理论、色彩空间、颜色定义或任何涉及颜色知识的任务时使用——调色板、色阶、渐变、转换、无障碍性、感知匹配、颜料混合、印刷与屏幕颜色差异、CSS 颜色语法，以及历史色彩术语。无论用户是否明确提到「color theory」，只要他们在选择、比较、生成、命名、转换或解释颜色，就使用此技能。

P

pptx-slide-specification

wshobson / agents

在编写或修复可编辑 PPTX 演示文稿的坐标显式 JSON 规范时使用。

L

lean-ux-canvas

deanpeters / product-manager-skills

引导团队完成 Lean UX Canvas v2。适用于梳理业务问题、识别假设、明确下一步需要了解的内容。

D

deck-open-slide-canvas

nexu-io / open-design

锁定 1920x1080 画布的演示文稿，可用 React 组件进行自由排版，不受固定模板束缚。

M

mantine-form

mantinedev / skills

使用 @mantine/form 构建表单。适用场景：（1）用 useForm 设置表单；（2）添加校验规则、schema 校验（zod、valibot、arktype）或异步校验；（3）处理嵌套对象或数组字段；（4）用 createFormContext 在组件间共享表单状态；（5）在受控与非受控模式之间选择；（6）在渲染期间用 form.useWatchValue 读取表单值；（7）使用独立的 useField hook；（8）任何涉及 useForm、getInputProps、onSubmit、insertListItem 或表单校验的任务。

P

pptx-reference-deck-analysis

wshobson / agents

用于在只读模式下分析参考 PPTX：结构、主题、字体排印、布局节奏、诊断信息、派生模板目录，或进行安全的 OOXML 包检查。

U

user-story-mapping

deanpeters / product-manager-skills

创建用户故事地图，梳理活动、步骤、任务和发布切片。当围绕用户旅程规划工作流、待办事项或 MVP 时使用。

F

focus-engine

dpearson2699 / swift-ios-skills

在 SwiftUI 和 UIKit 中实现键盘、方向键和场景级焦点行为。在管理以下内容时使用：@FocusState、defaultFocus、焦点值、可聚焦交互、焦点区块、tvOS 几何焦点与 Siri Remote 导航、watchOS Digital Crown 输入、visionOS 连接设备焦点与注视悬停/输入目标的区别、macOS 键视图循环与全键盘访问、呈现变更后的焦点恢复、使用 UIFocusGuide 的自定义焦点路由，或使用 UIFocusDebugger 调试焦点问题。

E

experience-lwc-base-components-integrate

forcedotcom / sf-skills

为给定的 UI 任务挑选合适的 Lightning 基础组件（`lightning-*`），从内置的按组件参考资料中获取其完整 API（属性、方法、事件、插槽），并在不破坏 SLDS 的前提下将其接入 LWC（LWC 的 `.html`、`.js` 和 `.css` 文件）。当用户说“我需要一个 Lightning 模态框 / 数据表 / 组合框 / 记录表单”、询问哪个 `lightning-*` 组件适合某个用例、想要一份 LBC 候选清单、正准备自行实现某个基础组件已经提供的 UI，或正在编辑 LWC 包的 `.html` / `.js` / `.css` 并需要选择或接入基础组件时，请使用此技能。触发词还包括“Lightning base component”“LBC”“lightning-combobox”“lightning-datatable”“使用 `lightning-` 标签”。在需要应用 SLDS 设计令牌、蓝图或通用样式指导时不要触发 —— 那属于 `design-systems-slds-apply`；本技能只负责选择并接入 `lightning-*` 基础组件。

P

pptx-deck-context

wshobson / agents

在准备新的可编辑 PPTX 演示文稿的叙事结构、素材来源与设计上下文时使用。

E

experience-lwr-site-generate

forcedotcom / sf-skills

通过 DigitalExperience 元数据创建、修改或管理 Salesforce Experience Cloud LWR 站点。任务涉及 LWR 站点配置时始终触发，例如创建或修改页面、路由、视图、主题布局、品牌套件，预览站点，创建或修改访客共享规则（元数据类型 sharingGuestRules）、访客用户访问权限或共享记录，或用户提供以 005 开头的访客用户 ID（15 或 18 个字符）。绝不要用于 React 或任何其他 UI bundle 框架。仅限 LWR 站点。

G

godot-ui

zate / cc-godot

深入掌握 Godot 的 UI 系统，包括 Control 节点、主题、样式、响应式布局，以及菜单、HUD、库存和对话系统的常见 UI 模式。适用于 Godot UI/菜单的创建与样式设计。

S

svg-animation

iart-ai / web-animation-skills

当用户要求“为 SVG 添加动画”“让线条自行绘制”“制作描边绘制/签名动画”“将一种形状变形成另一种形状”“让元素沿路径移动”“为图标/徽标添加动画”或“为 SVG 渐变或滤镜添加动画”时，应使用此技能。涵盖通过 CSS、SMIL 和 GSAP 实现的 stroke-dashoffset 绘制、路径变形、沿路径运动，以及动态图标/渐变/滤镜。

D

drawio-diagrams

stark-ai-de / agent-skills

创建、编辑、审阅或导出可编辑的 draw.io 图表。适用于用户需要 .drawio 格式的架构图、流程图、时序图、网络图或其他技术图表；不适用于数据图表或艺术图片。

O

om-ux-shape

open-mercato / skills

将模糊的产品、UI/UX 或 AI 功能构想转化为明确方向。在规划功能、简化过于复杂的流程、决定是否以及如何使用 AI、定义屏幕状态、规划验证或准备交接给工程团队的设计方案时使用。

A

animated-readme-logo

stark-ai-de / agent-skills

创建、变换、制作动画或审查 GitHub README 标志，并验证 SVG/PNG/GIF 交付效果。适用于仓库需要品牌素材的场景，而非普通 README 文案或应用/站点动效。

L

lightweight-3d-effects

freshtechbro / claudedesignskills

使用 Zdog、Vanta.js 和 Vanilla-Tilt.js 为装饰元素和微交互提供轻量级 3D 效果。适用于在不使用重量级框架的情况下添加伪 3D 插画、动态背景、视差倾斜效果、装饰性 3D 元素或微妙的纵深感。涉及 Zdog 伪 3D、Vanta.js 背景、Vanilla-Tilt 视差、卡片倾斜效果、首屏区块动画或轻量级落地页视觉的任务会触发。适合注重性能的设计。

M

minimal

bergside / awesome-design-skills

精简设计，强调留白、简洁的排版和克制的色彩，以实现清晰聚焦。

R

rive-interactive

freshtechbro / claudedesignskills

基于状态机的矢量动画，支持运行时交互和 Web 集成。创建交互式动画、状态驱动的 UI、带逻辑的动画组件，或需要运行时控制的设计师制作动画时使用此技能。适用于涉及 Rive、状态机、交互式矢量动画、带输入处理的动画、ViewModel 数据绑定或 React Rive 集成的任务。适合需要状态机和双向交互的动画，可作为 Lottie 的替代方案。

D

doc-kami-parchment

nexu-io / open-design

温暖的羊皮纸画布（#f5f4ed）、单色墨蓝强调色（#1B365D）、单一衬线字体家族，以及编辑级排版。

T

tailwind-v4-shadcn

jezweb / claude-skills

使用 @theme inline 模式和 CSS 变量架构配置 Tailwind v4 与 shadcn/ui。四步模式：CSS 变量、Tailwind 映射、基础样式、自动暗色模式。可避免 8 种有文档记录的错误。适用于初始化使用 Tailwind v4 的 React 项目，或修复颜色不生效、tw-animate-css 报错、@theme inline 暗色模式冲突、@apply 失效、v3 迁移问题。

F

frame-liquid-bg-hero

nexu-io / open-design

WebGL 风格的流体置换背景，配有引文叠加层，适合视频片头、落地页主视觉或海报。

F

frame-light-leak-cinema

nexu-io / open-design

用于电影感片头或章节卡片的胶片漏光、颗粒、16:9 遮幅和大幅衬线字体排版。

F

frame-data-chart-nyt

nexu-io / open-design

NYT 编辑部排版、错落显现动画，以及编辑级的图表（折线图、柱状图或区间带）。

F

frame-flowchart-sticky

nexu-io / open-design

SVG 曲线连接线、便利贴节点，以及带有白板头脑风暴风格的光标交互。

F

frame-logo-outro

nexu-io / open-design

用于视频片尾或品牌收尾画面的分段式 Logo 合成、辉光光晕和标语显现效果。

P

problem-framing-canvas

deanpeters / product-manager-skills

引导团队完成 MITRE 的问题界定画布。当你在直接跳到解决方案之前需要更清晰的问题陈述时使用。

M

micro-interaction

iart-ai / web-animation-skills

用户要求“添加悬停/按压效果”、“为切换控件或开关添加动画”、“制作动画点赞按钮”、“让 toast/snackbar 滑入”、“为抽屉或模态框添加动画”、“为列表重排或添加/移除添加动画”、“实现共享元素布局过渡”或“优化 UI 反馈”时，应使用此技能。涵盖使用 Framer Motion（motion/react）和现代 CSS 实现 UI 动效

F

frame-glitch-title

nexu-io / open-design

用于视频转场或赛博朋克主角的数码故障、色彩偏移和数据损坏风格标题画面。

T

typography-scale

owl-listener / designer-skills

创建包含字号、字重和行高关系的模块化字体比例。适用于建立排版结构。若仅关注行宽，请使用 `readable-measure`；若要评估现有屏幕上的排版，请使用 `critique-typography`（visual-critique）。

S

svg-animations

supermemoryai / skills

创建美观且高效的 SVG 动画和插图。当用户要求创建 SVG 图形、图标、插图、动态 logo、路径动画、变形图形、加载动画或任何动态 SVG 内容时使用此技能。涵盖 SMIL 动画、CSS 驱动的 SVG 动画、路径绘制效果、形状变形、运动路径、渐变、蒙版和滤镜。

C

card-twitter

nexu-io / open-design

用于搭配推文使用的 Twitter 引用卡片或数据卡片。

O

onboarding-optimization

appeeky / aso-skills

当用户希望改善应用的新手引导体验、提高激活率、降低第 1 天流失或优化首次运行流程时使用。当用户提到 "onboarding"、"first-run"、"activation"、"tutorial"、"day 1 retention"、"new user flow"、"permission prompts"、"sign-up conversion"、"onboarding funnel" 或 "users dropping off early" 时适用。关于整体留存策略，请参阅 retention-optimization；关于付费墙位置，请参阅 monetization-strategy。

V

vfx-text-cursor

nexu-io / open-design

为视频片头逐字显示的引言添加光标光轨、色散光束和定向光晕。

C

clean

bergside / awesome-design-skills

以简洁为核心的设计，采用充足留白、清晰易读的字体和有限的配色，以减少视觉杂乱。

S

social-x-post-card

nexu-io / open-design

逼真的 X 帖子卡片，含互动指标（点赞、转发、浏览量），适合作为视频叠加层或可分享的图片卡片。

F

frame-macos-notification

nexu-io / open-design

逼真的 macOS 通知横幅，包含应用图标、标题和正文，适合用作视频叠加层或产品预告。