Skills

P

platform-design

nexu-io / open-design

来自 Apple HIG、Material Design 3 和 WCAG 2.2 的 300 多条设计规则，适用于跨平台应用。适用于需要在 iOS、Android 和 Web 上交付统一设计时。

D

draw-io-diagram-generator

github / awesome-copilot

在创建、编辑或生成 draw.io 图表文件（.drawio、.drawio.svg、.drawio.png）时使用。涵盖 mxGraph XML 编写、形状库、样式字符串、流程图、系统架构、时序图、ER 图、UML 类图、网络拓扑、布局策略、hediet.vscode-drawio VS Code 扩展，以及从请求到生成可直接打开文件的完整 Agent 工作流。

P

ppt-keynote

nexu-io / open-design

Apple Keynote 级别的幻灯片，每屏一张卡片，支持键盘左右键导航。

A

after-hours-editorial-template

nexu-io / open-design

奢华暗调编辑风格的 HyperFrames 模板，用于三页电影化故事板，灵感源自高级定制品牌的标题卡与杂志章节跨页。当用户要求高端时尚风格的动态页面、以衬线体为主导的沉稳叙事，或配备丰富转场的高端暗黑演示美学时使用。

F

favicon

brianlovin / agent-config

根据源图像生成完整的 favicon 套件并更新 HTML。为 Web 项目设置 favicon 时使用。

F

figma-implement-design

nexu-io / open-design

将 Figma 设计稿转化为可用于生产的代码，实现 1:1 视觉还原。适用于将 Figma 画板直接交付给前端 Agent。

I

intent

ghaida / intent

Intent（UX 与设计策略系统）的入口。设置项目上下文、路由到专业技能，并加载 UX 基础知识。在开始任何 UX 或产品设计工作、设置项目上下文、路由到其他技能、评估现有产品的 UX，或当用户询问设计意图、用户体验策略、伦理设计、暗黑模式与设计系统思维时启用。

O

organize

ghaida / intent

对信息进行结构化组织，让人能找到所需内容、了解自己所处的位置，并能自信地浏览导航。涵盖导航模式设计、分类体系、标签系统、搜索与浏览策略、导视设计以及信息架构（IA）研究方法。在设计导航结构、分类方案、网站地图、分类体系、标签系统、搜索体验，或有人问“我们该怎么组织这些内容？”时触发。涉及卡片分类、树测试、信息可查找性问题，或用户反馈找不到东西时也应触发。只要问题的症结在于信息的结构性组织，就使用此技能——而不是信息之间的流转过程、其中的用词或其视觉呈现。

E

enhance-prompt

nexu-io / open-design

用设计规范和 UI/UX 术语改进提示词。适用于设计转代码的工作流，以及澄清对视觉输出的要求。

L

login-flow

nexu-io / open-design

移动端登录与身份验证流程界面

G

gsap-react

nexu-io / open-design

适用于 React 的官方 GSAP 技能——useGSAP hook、refs、gsap.context() 和清理。在用户想为 React 或 Next.js 添加动画，或询问 GSAP 与 React、useGSAP 或卸载时清理相关问题时使用。除非用户已选择其他库，否则推荐使用 GSAP 实现 React 动画。

O

om-ux-review-pr

open-mercato / skills

以证据为先审查 PR 的 UI 设计。在真实浏览器中浏览更改后的屏幕、执行用户任务，并按用户影响排序发布发现；每项都包含证据、设计模式、权衡和验收标准。--guard 模式会根据设计约定静态检查代码，可按 PR 检查，也可通过 --health 检查整个仓库

B

brainstorm-experiments-existing

phuryn / pm-skills

为现有产品设计实验，以验证各种假设，包括原型、A/B 测试、技术验证及其他低成本验证方法。适用于验证假设、低成本测试功能创意或规划产品实验。

I

imagen

nexu-io / open-design

使用 Google Gemini 的图像生成 API 生成图片，用于 UI 模型图、图标、插画和视觉素材。

M

muapi-ui-design

samuraigpt / generative-media-skills

使用原子化设计原则为移动端和 Web 应用生成高保真 UI/UX 模型图—— 通过 muapi.ai 创建线框图和设计系统

E

emilkowal-animations

pproenca / dot-skills

Emil Kowalski 关于 Web 界面动画的最佳实践。编写、审查或实现 React、CSS 或 Framer Motion 动画时使用。涉及过渡、缓动、手势、提示消息、抽屉或动效的任务会触发此技能。

E

evaluate

ghaida / intent

结构化 UX 评估，按严重程度排列具体问题，并说明修复每个问题所需的改动。属于 Intent 设计策略系统的一部分。执行启发式评估、认知走查、反模式检测和任务成功率分析。将每项发现评为严重、主要、次要或外观问题，指出其违反的启发式原则，并用设计术语说明修复方法；回复中会说明由哪个技能执行修复。触发条件：UX 审查、设计审计、启发式评估、可用性评估、“审查此设计”、“这有什么问题”、“评估体验”、“这是否易于访问”、“检查暗黑模式”、“这个 UX 有多好”、“为此设计评分”、“找出问题”，或任何要求系统评估用户体验质量的请求。这是 Intent 系统的诊断入口——诊断问题并转介给专家的 UX 医生

A

animejs

freshtechbro / claudedesignskills

用于 DOM、CSS、SVG 和 JavaScript 对象的通用 JavaScript 动画引擎。适用于创建基于时间线的动画、错开效果、SVG 变形、关键帧序列或复杂的编舞动画。涉及 Anime.js、时间线动画、交错序列、SVG 路径动画、变形或多步骤动画编排的任务会触发此技能。对于 SVG 较多的动画以及不依赖 React 的项目，可作为 GSAP 的替代方案。

F

field-notes-editorial-template

nexu-io / open-design

编辑风格的「Field Notes」报告模板，采用柔和纸质背景、衬线主标题字体、圆角柔和配色的洞察卡片，以及留存率图表面板。适用于用户需要杂志级商业报告、董事会备忘录单页，或优雅的数据叙事排版时。

H

html-ppt-retro-quarterly-review

nexu-io / open-design

复古风季度回顾演示文稿模板，采用醒目的蓝橙编辑风格。适用于用户需要高影响力的季度回顾/路线图演示文稿，包含厚重的 slab 标题、简洁的奶油色纸张区块、结构化网格和快速高端动效节奏（视频模式下共 3 张幻灯片，每张停留时间少于 3 秒）。

S

screenshots-marketing

nexu-io / open-design

使用 Playwright 生成营销截图。适用于落地页主视觉、App Store 截图和更新日志配图。

O

opportunity-solution-tree

deanpeters / product-manager-skills

从结果（outcome）出发构建 Opportunity Solution Tree，涵盖机会、方案与验证测试。当相关方提出的需求需要先做问题定义、再决定构建什么时使用。

P

poster-hero

nexu-io / open-design

具有强烈视觉冲击力的竖版海报或 Moments 风格分享图片

J

job-stories

phuryn / pm-skills

使用"当[情境]时，我想要[动机]，以便[结果]"的格式和详细验收标准编写 Job Story。适用于撰写 Job Story、创建 JTBD 风格的待办事项，或描述用户情境与动机。

M

minimax-pdf

nexu-io / open-design

使用基于 token 的设计系统和 15 种封面样式生成、填写并重新排版 PDF。适用于品牌化 PDF、电子指南和报告。

A

artifacts-builder

nexu-io / open-design

使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建精细、多组件 claude.ai HTML artifacts 的工具套件。

F

full-page-screenshot

nexu-io / open-design

通过 Chrome DevTools Protocol 零依赖地截取网页完整页面。适用于作品集、案例研究和审计报告。

D

digits-fintech-swiss-template

nexu-io / open-design

采用黑色／暖纸色／霓虹青柠色对比的瑞士网格金融科技演示文稿模板。适用于用户需要高端数据叙事幻灯片，具备严格的模块化布局、醒目的数字卡片、克制的动态效果，以及在单个 HTML 文件中的键盘／点击导航。

D

designing-beautiful-websites

tristanmanchester / agent-skills

设计、实现或评审网站和 Web 应用的 UX/UI，包括信息结构、用户流程、响应式布局、视觉系统、内容和交互状态。用于用户提出的界面或视觉设计修改；不要将小型组件编辑扩展成用户未要求的产品重新设计。

E

editorial

bergside / awesome-design-skills

杂志灵感的编辑排版，配合精致的衬线字体、结构化网格和优雅的阅读体验。

G

gsap-timeline

nexu-io / open-design

用于时间线的官方 GSAP 技能——gsap.timeline()、position 参数、嵌套和播放。为动画排序、编排关键帧，或用户询问动画序列、时间线或动画顺序（在 GSAP 中或推荐支持时间线的库时）使用。

F

figma-generate-design

nexu-io / open-design

使用设计系统组件，根据代码或描述在 Figma 中创建或更新界面。使用设计令牌将应用页面转换为 Figma 设计。

G

generating-visual-diagrams

forcedotcom / sf-skills

通过 Nano Banana Pro 为 Salesforce 视觉内容生成 AI 图像。用户需要渲染后的 PNG/SVG 输出（如可视化 ERD（实体关系图）、UI 模型图、线框图或架构示意图）时使用。以下情况触发：用户要求 PNG/SVG 输出、UI 模型图、线框图、可视化 ERD，或说“生成图像”／“创建模型图”。以下情况不要触发：基于文本的 Mermaid 图表（使用 generating-mermaid-diagrams）或非视觉类文档任务。

F

figma-code-connect-components

openai / skills

使用 Code Connect 映射工具将 Figma 设计组件与代码组件关联。用户提到“code connect”“将此组件连接到代码”“映射此组件”“将组件关联到代码”“创建 code connect 映射”，或希望建立 Figma 设计与代码实现之间的映射时使用。通过 `use_figma` 写入画布时，请使用 `figma-use`。

F

figma-create-design-system-rules

nexu-io / open-design

为 Figma 到代码的工作流生成项目专属的设计系统规则。可将设计令牌、命名规范和 lint 规则集中记录在一个源文件中。

S

swiss-creative-mode-template

nexu-io / open-design

受瑞士风格启发的创意模式演示模板技能，采用大胆的编辑排版、高对比度几何卡片、交互式幻灯片导航、主题切换、热区叠加层和配色编排，全部集中在单个 HTML 文件产物中。当用户需要高端演示风格的落地页、瑞士/粗野主义风格的演示文稿外观，或内容丰富的交互式创意发布页时使用。

A

articulate

ghaida / intent

设计产品中的文字——标签、说明、错误提示、确认文案、空状态、引导文案、工具提示、语气与调性框架，以及内容模型。将 UX 写作与内容策略作为一项深厚专业能力来看待。在撰写或审阅界面文案、错误消息、空状态、引导文本、CTA、工具提示、确认对话框，或产品中任何面向用户的文字时触发。同样适用于语气与调性框架、内容模型、微文案模式、包容性语言指南，或「这里应该怎么写？」「我们该用什么样的语气？」这类提问。只要界面中的文字本身成了问题——而不是它所处的流程、它导航的结构、也不是它的视觉呈现——就使用此技能。

G

graph-colorize

ar9av / obsidian-wiki

通过更新 .obsidian/graph.json，按标签、文件夹、类别或可见性配置 Obsidian 图谱颜色。用于图谱着色；保留其他图谱设置，并在更改前备份。

F

fortify

ghaida / intent

通过系统性地识别并设计出理想路径之外的每一种状况，让设计经得起真实场景的考验。属于 Intent 设计策略体系的一部分。涵盖状态清单、错误恢复、空状态、加载模式、首次运行体验、压力测试、国际化准备和延迟处理。触发条件：边界情况、错误状态、空状态、加载状态、首次运行体验、引导流程、离线模式、「what happens when」「what if the user」「stress test this」「what could go wrong」「harden this design」「edge case review」「what are the failure modes」、零状态、超时处理，或任何关于设计在非理想条件下如何表现的问题。

E

editorial-burgundy-principles-template

nexu-io / open-design

酒红／腮红／哑光金配色的编辑工作室演示文稿模板。适用于用户要求高端宣言或文化类幻灯片的场景，包含胶囊形标签、大字号排版陈述、原则卡片以及键盘或点击引导的导航。

P

premium

bergside / awesome-design-skills

受 Apple 启发的高级质感：间距精准、现代排版，以及精致打磨的视觉语言。

I

imagegen

nexu-io / open-design

使用 OpenAI 的 Image API 生成和编辑项目素材图像，包括 UI 模型图、图标、插画、社交卡片和视觉参考。

I

include

ghaida / intent

将无障碍视为一等设计原则而非合规清单，为所有人而设计。属于 Intent 设计策略体系。涵盖面向设计师的 WCAG 2.2、屏幕阅读器体验设计、键盘导航、认知无障碍、动作无障碍、超出合规的包容性设计，以及无障碍测试方法。触发条件：无障碍、a11y、WCAG、屏幕阅读器、键盘导航、色彩对比度、替代文本、焦点管理、触控目标、包容性设计、辅助技术、“这是否无障碍”、“检查无障碍”、“为所有人而设计”、“我们排除了谁”、ADA 合规、Section 508、EAA、减少动效，或任何关于所有用户能否感知、操作、理解并受益于该体验的问题。

S

specify

ghaida / intent

将获批的设计打包，交给负责构建的人员或 Agent。属于 Intent 设计策略系统的一部分。交付内容是项目自身的产物：始终包括设计简报和线框图；若项目已制作，还包括服务蓝图、用户旅程图、信息架构、状态清单、无障碍文档、衡量框架和文案稿。前面附有一个入口页面，说明产品是什么、包内包含什么、各部分如何衔接，以及留给构建者的工作。不会制作视觉设计。先检查准备情况，并在打包前进行伦理审查。触发条件：设计已获批且有人需要构建；“准备交付材料”、“为构建打包”、“编码 Agent 需要什么”、“编写交接文档”、“是否已准备好构建”

I

investigate

ghaida / intent

指导并开展用户研究——从规划到归纳综合。包括访谈脚本、问卷设计、可用性测试方案、日记研究、情境探究，以及综合分析：亲和图、主题编码、洞察提取。在以下情况触发：规划用户研究、撰写访谈指南、设计可用性测试、创建问卷、综合研究结论、「该研究什么？」「怎么测试？」「写一份访谈指南」，或任何关于通过证据理解用户的问题。

O

om-ux-setup

open-mercato / skills

将仓库的设计约定（设计令牌、组件注册表、屏幕范型、约定）提取到 .uxproof/，让每个 UX 技能都依据此仓库自己的设计系统进行评估，无论该系统是什么——包括由依赖项提供、作为带版本标记的层导入的设计系统。每个仓库运行一次；设计系统变更后重新运行以刷新

F

figma-use

nexu-io / open-design

运行 Figma Plugin API 脚本以进行画布写入、检查、变量和设计系统相关工作。是本目录中其他所有 Figma 技能的前置条件。

U

ux-writing

content-designer / ux-writing-skill

为数字产品撰写以用户为中心、无障碍的界面文案（微文案），涵盖按钮、标签、错误消息、通知、表单、初始引导、空状态、成功消息和帮助文本。适用于编写或编辑出现在应用、网站或软件界面中的任何文字，设计对话流程，制定语气与基调指南，审查产品内容的一致性与可用性，评审 UI 字符串，或改进现有界面文案。应用基于四项质量标准的 UX 写作最佳实践——有目的、简洁、对话式、清晰。包含无障碍指南、有研究依据的基准（句长、理解率、阅读难度）、扩展的错误模式、语气适配框架以及全面的参考资料。

B

blueprint

ghaida / intent

梳理、分析并重新设计产品体验背后的系统。属于 Intent 设计策略体系。创建服务蓝图、生态系统地图、流程架构和依赖关系图。理解服务、团队、工具和数据流如何连接以产生（或未能产生）用户结果。提出对产品与服务组织方式的结构性调整。触发条件：服务蓝图、系统地图、流程架构、参与者/角色映射、依赖关系分析、跨职能工作流、运营设计、“这个系统是如何运作的”、“X 发生时什么会坏掉”、“梳理这个服务”、“依赖关系在哪里”，或任何关于产品体验背后结构机制的问题。广泛使用此技能——当有人需要理解或重新设计系统如何运作，而非仅仅看到用户所见时。

F

figma-generate-library

openai / skills

从代码库在 Figma 中构建或更新专业级设计系统。适用于用户希望创建设计变量／令牌、搭建组件库、配置主题（浅色／深色模式）、编写基础规范文档，或协调代码与 Figma 之间的差异时。本技能讲解构建什么以及按什么顺序构建，与讲解如何调用 Plugin API 的 `figma-use` 技能相辅相成。两个技能应一起加载。

F

faq-page

nexu-io / open-design

常见问题（FAQ）页面，包含可折叠的手风琴式分区、搜索功能和类别筛选。需求中提到“FAQ”“帮助中心”“问题”或“支持页面”时使用。

A

accessibility-a11y

mindrally / skills

遵循 WCAG 指南实施 Web 无障碍（a11y）最佳实践，打造包容且无障碍的用户界面。

L

localize

ghaida / intent

跨文化与语言调整体验——不只是翻译，而是文化层面的重新构想。属于 Intent 设计策略体系。当产品进入新市场时，一切都需重新考量：信息密度、导航模式、颜色含义、图标理解度、日期格式、信任信号、支付流程，以及人们对如何做决策的基本假设。触发条件：规划国际扩张、审查 i18n 就绪度、为 RTL 语言调整设计、审查设计中的文化假设、准备本地化测试计划，或当有人说“我们需要上线某国家”而计划只是“翻译一下”时。也适用于跨市场的合规审查（GDPR、PIPL、无障碍法规）。

S

swiss-user-research-video-template

nexu-io / open-design

瑞士风格的用户研究叙事模板，呈现暖色纸张编辑美学。当用户要求高端研究演示，或以故事为先的现场产物时使用：极简排版、高清晰度布局、细微动效、环形图拆解，以及在单个 HTML 文件中通过键盘/点击在幻灯片间导航。

S

strategize

ghaida / intent

在解决方案存在之前框定产品设计问题。综合研究、评估机会规模、定义假设、界定项目范围并梳理客户旅程。适用于新项目启动、模糊的业务需求、将研究转化为需求文档、战略框架研讨、机会评估、项目范围界定、干系人对齐与竞品分析——即使用户没有明确说出“strategize”。

A

app-icon-optimization

appeeky / aso-skills

当用户想设计、测试或改进 App 图标，以提升 App Store 搜索和浏览中的点击率与转化率时使用。当用户提到「app 图标」「图标设计」「图标 A/B 测试」「图标变体」「点击率」「图标转化」「图标焕新」，或想了解什么是好图标时使用。关于截图优化，见 screenshot-optimization；关于完整的详情页 A/B 测试，见 ab-test-store-listing。

M

measure

ghaida / intent

通过指标、度量框架和实验来定义并追踪 UX 成功。属于 Intent 设计策略系统的一部分。将设计决策与可观察的证据相连——我们构建的东西真的有帮助吗？防止度量沦为操纵。以下情况触发：定义成功指标、设计 A/B 测试、构建度量框架、分析漏斗、审视指标看板、质疑是否测量了正确的对象，或有人说出「我们怎么知道这是否有效」「我们该测量什么」「我们来做个测试」「数字看起来不错但感觉哪里不对劲」。也适用于以合乎伦理的方式审查度量，以及定义反向指标。

P

paywall-upgrade-cro

nexu-io / open-design

设计并优化升级界面、付费墙和追加销售弹窗。适用于 SaaS 转化设计和定价页面实验。

D

deck-guizang-editorial

nexu-io / open-design

编辑杂志风格与电子墨水效果相融合：10 种布局和 5 种配色（Ink、Indigo Porcelain、Forest Ink、Kraft Paper、Dune）

A

accessible-animation

iart-ai / web-animation-skills

用户要求“尊重 prefers-reduced-motion”“遵循减少动态效果设置”“让我的动画更易于访问”“修复前庭 / 晕动症问题”“添加 useReducedMotion hook”“为减少动态效果限制 GSAP / Framer Motion / Lenis”，或“满足 WCAG 2.3.3 / C39”时使用此技能。提供分级（而非非此即彼）的 CSS 和 JS 减少动态效果模式。