Skills
收录 97,501 个为 Agent 打包的专项能力与操作指引，复制一行命令即可安装。
设计与 UI
从 Penpot 文件中提取 DESIGN.md 设计文档文件：一份可移植的 markdown 规范（YAML frontmatter 包含色彩/字体排版/圆角/间距/组件 token 映射 + 散文式章节：Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gaps），采用 design-md 格式，基于文件真实的 token、库资源和采样得到的组件样式——绝不虚构。对画布只读；写入一个本地 markdown 文件。触发词：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。
使用 slides-grab（NomaDamas，MIT）与 Agent 一起生成、可视化编辑并导出精美的 HTML/CSS 演示文稿——它是开源的 Claude Design 替代方案，也是 Claude Code / Codex 中最佳的幻灯片 harness + 编辑器 + linter。一个以路由为先的技能，贯穿 Plan（Agent 起草大纲）、Design（每张幻灯片都是独立的 slide-XX.html）、Edit（纯 JS 浏览器编辑器，可在任意区域拖出 bbox 并要求 Agent 只重写该区域，或手动调整文本/字号/加粗）和 Export（capture-or-print PDF、逐页 PNG，包括 Instagram 1:1 card-news，以及实验性/不稳定的 PPTX 和可导入 Figma 的 PPTX）。选择安装路径（npm 包 + npx skills add，或 clone）、演示文稿工作区（--slides-dir，多演示文稿 decks/<name>/）、35 种内置设计风格之一，以及受支持的资源流程（仅限本地 ./assets/<file>——图片通过 god-tibo-imagen/codex/nano-banana，视频获取通过 yt-dlp，tldraw .tldr→SVG），并在任何导出前用 slides-grab validate 进行验证。
以品味优先、拒绝 AI 味的工作流设计并改进任何网页或应用界面，然后把结果记录到项目的 DESIGN_SYSTEM.md 中，让后续每个页面都保持视觉一致。通用性：会把需求分派到合适的规则集——落地页/营销页、仪表盘/后台、产品/应用 UI、电商/店铺、内容/编辑/文档、移动端/原生应用、改版，或仅做设计系统的任务。引擎以 Web 为先（CSS/tokens/Tailwind）；针对 iOS/Android，会在该引擎之上叠加平台惯例指导，并把深度的平台组件工作交给 HIG/Material。适用于用户要求设计、构建、改版、审查或打磨任何界面的场景——尤其是提到品牌名、配色、氛围/风格、字体、动画、卡片样式、图片来源、框架或平台（Web / iOS / Android）时。触发词：“设计一个落地页”“搭建一个仪表盘”“设计一个移动应用”“构建店铺 / 产品页 / 结账流程”“设计文档或博客网站”“改版这个”“让 UI 看起来更高端”“创建设计系统”“审查 UX”“整理设计”“找设计参考 / 灵感”“让它更快”“优化性能 / Core Web Vitals”。
将线上网页克隆到本地 Next.js + Tailwind CSS 项目中，用于快速原型设计。每当用户分享 URL 或截图并希望在本地复制、重新设计或迭代该页面时，使用此 skill——无论用户说"clone this site"、"make a prototype based on this page"、"recreate this UI"、"build something that looks like this"，还是只是粘贴一个链接并要求你把它变成代码。当用户想要添加新页面、修改现有页面，或扩展此前由该 skill 创建的原型项目时也会触发。即使用户只是说"I want to build a page like X"并附上参考链接或图片，此 skill 同样适用。
把一张或多张图片整理成 PSD 图层文件的创作与转换 skill。当用户需要 image2psd、图片转 PSD、多张图片拼成 PSD、海报/设计稿拆成多个图层、白底转透明、颜色聚类拆层、把 Codex/AI 生图结果拆成元素图再合成 PSD、或希望输出 layered PSD、可在 Photoshop/Photopea 中编辑的分层栅格文件时，应该使用此 skill。在 Codex 中使用时，默认结合 imagegen skill：先用 Codex 视觉/生图能力理解、补齐或重建元素，再用本 skill 的脚本落地 PSD。
通过 CI + Gist 流程将代码令牌和页面结构同步到 Figma。适用于用户要求“设置 Figma 同步流程”“将代码同步到 Figma”“将设计令牌导出到 Figma”“更新页面遍历器”或“接入 tokens-sync-to-figma 插件”；路径包含 `figma-sync.config.json`、`figma-export.json`、`scripts/tokens-to-figma/` 或 `.github/workflows/figma-sync.yml`；或检查 figma-sync Gist 或 CI 状态的情况。不适用于由 Agent 驱动的一次性 Figma 写入，例如创建变量或编辑节点（使用 `figma-use`），也不适用于生成屏幕（使用 `figma-generate-design`）。
将 Figma COMPONENT_SET 作为状态机进行分析，用于代码生成——提取变体轴（状态/尺寸等），将状态变体映射到 CSS 伪类（hover→:hover、focus→:focus-visible、disabled→:disabled、error→[aria-invalid]），并计算各变体的视觉差异（仅每个状态下变化的部分）。适用于从 Figma 变体集生成交互式组件时——触发语：'analyze this component set'、'turn these variants into CSS states'、'generate a button/input/checkbox from Figma variants'、'what changes between the hover and default state'、'map Figma variants to component props'、'extract the state machine for this component'。将绑定的变量解析为 token 名称。原生 MCP 的 get_design_context/get_metadata 不覆盖此功能，它们无法提供变体轴→CSS 状态机的映射。
评估并改进现有前端界面的可用性——无论是本地源代码还是通过 URL 访问的线上网站。当用户已有前端代码或线上网站 URL，并想了解用户为何使用困难、找出可用性问题或让其更易使用时，使用本技能。触发于直接请求，如 “review my UI”“audit my interface”“check accessibility”“evaluate my design”“improve the UX”“audit this website”“review https://example.com”，也触发于间接的症状描述，如 “users keep abandoning this form”“something feels off about this page”“we're getting complaints about the checkout flow”“conversion dropped after the redesign”“people say it's confusing” 或 “make this less painful to use”。如果用户有前端组件、页面或 URL，且问题听起来像可用性、用户困惑或交互设计不佳，而非 bug 或性能问题，则使用本技能。不适用于从零构建新界面、性能优化或后端逻辑。
对照实现代码（源组件或 Storybook story）审查 Penpot 设计，并输出结构化的 DRIFT 报告。适用于工程师需要确认构建结果与设计一致时：从选区提取 HTML/CSS，将其 tokens/结构/状态映射到代码组件，进行差异比对，并列出双方各自缺失的内容及其严重程度和调和方案。未提供代码来源时，降级为设计系统 token 检查。触发词：'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。
查找需要 UX 关注的 CawPlan 工单，或汇总某个产品 UX 成员的设计完成情况：某个版本的待处理 UX、缺少 UX 设计的高优先级工单、某个团队的待处理 UX 队列，或某个产品设计师在指定日期范围内标记为 UX Ready 的工单。适用场景：用户询问某个版本有哪些工单需要 UX 跟进/评审/规格说明，哪些高优先级工单需要 UX 但还没有设计，哪个团队的工单尚未提供 UX，或要求某个产品 UX 成员的 UX/设计完成情况汇总。不适用于：创建或更新工单、设置工单的 UX 状态、一般工单搜索或发布跟踪（版本发布健康状况请使用 `cawplan-plan-track`）。
在 Figma 中以一个原子步骤引导搭建完整的设计 token 系统——同时创建一个变量集合、其模式（例如 Light/Dark），以及带有各模式取值的每个变量。适用于从零开始建立 token 系统：触发语「在 Figma 中设置设计 token」、「创建带浅色和深色模式的 token 集合」、「搭建变量」、「引导创建 Figma 主题」。适用于任何 Figma 套餐。要对现有系统做增量修改，请使用 figma-manage-variables；要从代码 token 文件同步，请使用 figma-import-tokens。
在代码中处理已有图像：CSS 滤镜、混合模式、双色调、遮罩和 clip-path、提升文字可读性的叠加层、拼贴、SVG 滤镜，以及响应式交付（picture/srcset/sizes、AVIF/WebP）。用于在页面上设置样式或提供照片时；若要创建新图像，请使用 image-generation。触发短语：“image effect”、“photo filter”、“image overlay”、“duotone”、“image mask”、“parallax background”、“clip-path”、“blend mode”、“image grid”、“responsive image”、“css filter”
独立的信息图，将数据、流程、对比和时间线以可分享的图形形式进行讲解，通过 HTML/CSS/SVG（数字必须精确时为默认选择）或 Gemini 3.1 Flash 图像生成（说明性、文字少的内容）实现。涵盖颜色编码、数据突出显示、SVG 图表和布局模板。用于单张视觉讲解；交互式应用仪表盘请使用 dashboard-design，信息流数据帖子请使用 social-media-graphic。触发短语："创建信息图"、"设计图表"、"数据可视化"、"流程图"、"对比信息图"、"时间线设计"、"数据图形"、"信息图设计"、"可视化数据"。
将 LLM 输出从纯文本升级为结构化、可渲染的格式，如 HTML、Marp 幻灯片或交互式仪表盘。当用户想要格式更好的输出、需要把笔记转成演示文稿、想要 LLM 输出 HTML、需要从文档生成幻灯片，或说出 "make this prettier"、"render this"、"output as HTML"、"make slides from this"、"structured output"、"Marp"、"better format" 时使用此技能。基于 Karpathy 19k 点赞的 HTML 输出帖子。
当用户想优化注册后的引导、用户激活、首次使用体验或价值实现时间时使用。用户提到“onboarding flow”“activation rate”“user activation”“first-run experience”“empty states”“onboarding checklist”“aha moment”“new user experience”“users aren't activating”“nobody completes setup”“low activation rate”“users sign up but don't use the product”“time to value”或“first session experience”时也使用。只要用户注册后没有持续使用产品，就适用此技能。注册流程优化请参阅 signup-flow-cro；持续邮件序列请参阅 email-sequence。
根据 WCAG 2.1/2.2 AA（可选 AAA）审查 Penpot 设计并生成结构化的严重程度报告：颜色对比度、触摸/目标尺寸、替代文本、标题层级和键盘/焦点顺序。提出修复建议——不会自动应用。也作为 brief-to-screen 和 brief-to-deck 循环中的评估器（scope:deck = 幻灯片对比度规则）。触发词：'check accessibility'、'accessibility audit'、'WCAG check'、'contrast audit'、'a11y review'、'check color contrast'、'is this accessible'。
自有渠道的横幅图形：网站 hero/区块横幅图、邮件页眉图、活动与会议横幅、侧边栏自家推广、公告栏，通过 Gemini 3.1 Flash 图像生成（默认）或 HTML/CSS 实现。涵盖标准尺寸、Gemini 比例与裁剪、CTA 位置、响应式艺术指导，以及邮件约束。付费展示广告/IAB 广告请使用 ad-creative-design；编码实现的首页首屏区块请使用 hero-section；完整邮件模板请使用 email-design。触发短语："设计横幅"、"创建网站横幅"、"hero 横幅图"、"邮件页眉"、"活动横幅"、"推广横幅"、"网页横幅"、"侧边栏横幅"、"公告栏"、"Eventbrite banner"。
将视觉设计决策建立在认知心理学原理之上——感知、注意、记忆、格式塔分组和视觉编码层级——解释某些设计为何有效。涵盖界面、数据可视化、教育内容和演示。当用户提到 cognitive load、visual hierarchy、working memory、preattentive processing、Gestalt principles、encoding hierarchy 或 cognitive design pyramid 时调用。设计评估请使用 `design-evaluation-audit`。谬误防范请使用 `cognitive-fallacies-guard`。数据叙事请使用 `visual-storytelling-design`。
通过 REST API 读取、发布、回复和删除 Figma 文件上的评论——包括将评论固定到特定节点以及线程化回复。当用户想以编程方式处理 Figma 评论时使用——触发词：“get Figma comments”“read comments on this file”“post a comment in Figma”“leave a comment on this node”“reply to a Figma comment”“pin a comment to this element”“delete a Figma comment”“notify designers of drift”“add a review note in Figma”。使用 Figma REST API + 个人访问令牌，因为评论无法通过 Plugin API / use_figma / 原生 Figma MCP 访问。
为 Figma 组件生成完整的 Markdown 文档——结构/图层树、设计令牌（颜色、间距、排版）、状态/变体矩阵、无障碍说明、内容指南，以及可选的代码一致性 + YAML frontmatter。当用户想要为某个组件或组件集制作文档页或交接规格时使用。触发词：'为这个组件写文档'、'生成组件文档/规格'、'为 Button 创建文档页'、'写出结构和变体'、'从 Figma 生成组件交接文档'、'把这个组件转成 Markdown 文档'。读取节点树、绑定的变量/令牌和设计师标注，然后由 Agent 组装 Markdown。需要 Figma Desktop 应用（Plugin API）。
使用 axe-core（Deque）在 JSDOM 上运行，扫描生成/编写的 HTML 中的无障碍违规——结构和语义规则：ARIA 属性与角色、可访问名称、alt 文本、表单标签、标题顺序、地标、语义 HTML、tabindex、重复 ID、lang 属性以及约 50 条其他规则。用于 Figma 转代码工作流的代码一侧：触发词 '扫描此 HTML 的无障碍问题'、'在我的组件上运行 axe'、'检查生成代码的 a11y'、'axe-core 扫描'、'对我的标记进行无障碍 lint'、'对代码进行 WCAG 检查'、'这个 HTML 是否有无障碍问题'。这是一个独立的 Node 脚本——无需 Figma 连接。视觉规则（color-contrast、focus-visible、link-in-text-block、target-size）已禁用，因为 JSDOM 没有布局——设计一侧的视觉无障碍请使用 figma-lint-design。两者结合可实现设计与代码的完整覆盖。
从网页中采集设计令牌并生成完整的 DESIGN.md 设计规范文档 + Tailwind CSS 主题文件。 当用户提供 URL 并要求"提取主题"、"生成设计规范"、"导出设计系统"、 "提取这个网站的设计令牌"、"帮我做一个主题"、"分析这个页面的设计风格"时使用。 产出包含 DESIGN.md（getdesign.md / DESIGN.md 9 段式标准）和 globals.css（Tailwind CSS v4）， 每个 token 类别均有推荐/允许/禁止三级规范，可直接放入项目根目录供 AI 编码工具使用。
使用 Material 3 进行 Flutter 主题化的最佳实践，将 ThemeData 视为颜色、字体排版、组件样式和间距的唯一真实来源。适用于创建、修改或审查 ThemeData、ColorScheme、TextTheme、组件主题、间距系统或浅色/深色模式支持，以及当 widget 代码自带样式时：硬编码的 Color、内联 TextStyle、原始 padding 或 gap 数值、在多个 widget 实例中重复的同一 decoration，或 build 内部的 brightness/深色模式条件判断，即使用户只说"review this widget"、"cut the duplication"、"stop repeating this"或"tidy this up"。
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。