Skills
收录 97,501 个为 Agent 打包的专项能力与操作指引,复制一行命令即可安装。
设计与 UI
从零构建或更新一套完整的视觉识别:logo 标记及变体(SVG)、品牌色彩角色、品牌字体、图案、favicon/应用图标、社交头像,以及品牌规范页面。当用户需要的是品牌本身而非单一元素时使用。触发短语:“brand identity”、“logo design”、“brand guidelines”、“visual identity”、“brand system”、“favicon”、“logo variations”、“brand pattern”、“rebrand”。若只需要配色,用 color-palette;只需要字体,用 typography;UI token/组件,用 design-system。
当用户要求“画架构图/流程图/泳道图/时序图/组织架构图/状态机/漏斗/甘特/里程碑/矩阵象限/链路架构/手绘风格架构/复杂业务泳道图/ER 图/思维导图”等任一类型并落地到飞书,或用户给出飞书文档 URL 要求在其中画图,或用户说“同步到飞书/写到飞书画板”时,必须使用本技能。除上述 17 类内置模板外,本技能还提供「自由画图模式(freeform-drawing)」:当用户要求绘制油画/手绘插画/移动端 App 产品原型/地图/游戏画面/桑基图/任意参考图还原等模板覆盖不到的图,或显式说“自由绘图/自由发挥/不要套模板”时,同样必须使用本技能(输出依旧是可二次编辑的飞书画板)。生成路径严格遵循 Normalize → Select → Plan → Layout → Render → StaticCheck → VQA → Deliver 八步,禁止硬编码模板、禁止硬编码坐标、禁止补造用户未提到的业务内容。所有样式都从 assets/style-tokens/ 里读取(代码原生图、自由画图模式除外)。交付前必须通过质量门(按路由执行)与双 reviewer 视觉复核(任一评分低于 9 或出现 blocker 即失败)。
从已订阅的 Figma 团队库中发现并导入设计令牌到当前文件。适用于用户想复用共享库中的令牌时:触发词 'list library variables'、'what tokens are in our shared library'、'import a variable from our design system library'、'pull in the brand color token from the library'。通过 Plugin API 的 teamLibrary 方法在任意方案上均可用。本地变量请使用 figma-export-tokens / figma-manage-variables。
当有人想要改进、修复、测试或批评移动应用的引导流程时使用 —— 例如 "here's my onboarding"、"roast my flow"、"why do users drop off before the paywall"、竞争对手的注册流程、欢迎或激活流程、问卷,或用一句话描述的流程。当你自己正在设计或生成引导流程、且没有可参照的设计范本时也使用 —— 没有参考界面、没有可复制的现有流程、没有明确写出的流程顺序 —— 例如 "build me an onboarding"、"add a quiz before the paywall"、"make a flow that converts";这种情况下本库就是参考,它会评估并纠正你产出的流程。在审阅引导流程配置或由 flow-generator 技能生成的一组 `flows config preview` 渲染结果时也使用。不要等到被明确要求做 "teardown" 才使用。
为交接而记录 Penpot 设计,带一个可隐藏的标注层,位于设计旁边(绝不在其上方):上下文卡片(目标、业务规则、链接、状态)、UI 上的编号标记、与之对应的观察/建议说明、可选提示气泡。复用或提出标注组件套件 + token。不用于审计(penpot-audit-*)或重命名图层(penpot-rename-layers)。触发词:「document this design」「annotate this screen」「prepare this for handoff」「add observation notes」「create a critique card」「spec this screen for handoff」。
收录 74 个真实品牌设计系统的参考库(Claude、Linear、Stripe、Vercel、Figma、Apple、Tesla、Spotify、Notion、Supabase 等),以 DESIGN.md 文件形式记录——颜色、排版、组件、布局、层次。适用于用户想要符合某个品牌外观的 UI、落地页或组件;想从真实设计系统中挑选设计方向;说“像 <brand>”“让它有 Linear / Stripe / Apple 的感觉”;或在前端工作前需要具体的设计令牌起点时。可搭配 frontend-design 和 tailwind-design-system。
搭建 Expo / React Native 设计系统组件的脚手架,构造上即遵守 expo-design-system 规则——变体驱动的可按压基础组件、基于 slot 的卡片表面、类型化的文本基础组件、带标签的表单字段、FlashList 实体列表页、主题 token 组,以及 Storybook 变体目录。生成的代码使用 Unistyles v3 变体而非 style props、ref-as-prop、设计 token、内置无障碍支持,以及 Web/iOS 一致性(交互式基础组件上的 `_web` hover/focus/cursor),因此无需返工即可遵循 expo-design-system。输出为使用 react-native-unistyles 的 TSX/TS。只要用户想为 clinic 移动应用创建、添加、生成或搭建新的共享 UI 组件、基础组件、设计 token 组或页面,就触发——即使用户没有提到设计系统。
以细粒度控制创作 FigJam 白板——便签(单个 + 批量)、节点之间的连接线、带文本的形状、分区、表格、代码块和自动排列——并能读回白板内容和连接图。适用于用户想逐个元素构建或编辑 FigJam 白板时。触发词:'add stickies to FigJam'、'create a flowchart/diagram in FigJam'、'connect these nodes'、'make a section/table/code block in FigJam'、'auto-arrange the board'、'read what's on the FigJam board'、'map the connections'。比原生 generate_diagram(一次性生成整张图)更细粒度。仅限 FigJam 文件(figma.editorType === 'figjam')。需要 Figma 桌面应用(Plugin API)。
将 Figma COMPONENT_SET 的变体整理成整洁、带标签的网格——行和列由变体属性推导,行标签在左侧,列标题在上方,外加一个带标题的白色容器。适用于变体集杂乱堆积、想要可展示、便于文档化的布局时——触发语:'arrange my variants in a grid'、'organize this component set'、'lay out the variants with labels'、'make a variant matrix'、'clean up my component set layout'、'add row/column headers to my variants'。默认取最后一个属性(通常是 State)作为列,其余作为行。这不是原生 MCP 只读工具能做的事——它会向画布写入新的、整理好的布局。
使用此 skill 从 AI Agent(Claude Code、Cursor、任意 MCP 客户端)驱动 Compose HotSwan,让 Agent 可以编辑 Kotlin 文件、触发热重载、截取设备截图、对照设计意图评估结果,并在无人工介入的情况下持续迭代。涵盖七个 HotSwan MCP 工具(hotswan_get_status、hotswan_reload、hotswan_take_screenshot、hotswan_start_snapshot、hotswan_stop_snapshot、hotswan_select_variant、hotswan_build_and_install)、标准的编辑-重载-截图循环、基于快照的回滚,以及何时应在 schema 变更时回退到完整安装。适用于开发者说“让 AI 调整这个界面直到与 mock 一致”,询问“AI 能看到改了什么吗?”或“AI 能给设备截图吗?”,搭建需要 MCP 工具访问权限的 Claude Code 或 Cursor 工作流,或希望实现 AI 驱动的 UI 迭代时。
为文档和演示文稿应用专业的视觉主题。用于以一致的调色板和字体搭配为工件设计样式。可主动使用,以快速提升交付物的美学质量。示例: - user: "Apply a modern theme to this deck" -> use Modern Minimalist theme - user: "I want a tech aesthetic for this doc" -> apply Tech Innovation theme - user: "Create a custom theme for my project" -> generate new color/font specification
在 Vite 项目中初始化 shadcn/ui + Tailwind CSS v4(Vite 专用,非 Next.js/Remix)。在 Vite 项目搭建、shadcn 组件安装或 Tailwind v4 配置时主动使用。示例:- 用户:"在我的 Vite 项目中配置 shadcn" → 安装依赖,配置 tailwind v4 CSS-first,初始化 shadcn,验证组件可用 - 用户:"向现有 Vite 应用添加 shadcn" → 检查现有配置,安装 CLI,添加 components.json,更新 CSS 导入 - 用户:"将 Tailwind v4 与 shadcn 搭配使用" → 使用 @import 与 @theme 进行配置,移除 v3 配置,设置自定义 tokens - 用户:"创建 Vite + React + shadcn 项目" → 搭建 Vite,安装 shadcn,配置主题,添加示例组件
构建 Zalo Mini App——运行在 Zalo 超级应用内的轻量级 Web 应用。此技能提供 ZaUI 组件(Button、Input、Modal、Tabs、Avatar 等)、JavaScript API(authorize、getUserInfo、getPhoneNumber、getLocation、Storage、Camera)、用于支付的 Checkout SDK、设计指南和开发工具。当构建 Mini App、使用 ZaUI 组件、调用 Zalo API、集成支付、将 Web 应用转换为 Mini App,或遵循 Zalo 设计标准时使用。
以幻灯片设计规范 slide-rules.md 为核心,制作达到经营会议质量的幻灯片。每个阶段通过 scripts/rules.py 调取所需章节,使用经规范验证的组件(new_deck.py --list 列出的 20 种)进行组装,并通过 check_deck.py、check_layout.mjs 的机械检查,确保 FAIL 为 0。仅当用户提供现有 PowerPoint 并要求以 PPTX 格式制作插入页面时,才直接基于该资料的母版构建(slide-rules §8.7)。触发示例:“制作咨询级幻灯片”“制作符合规范的演示文稿”“按相同格式为这个 pptx 添加页面”。
在两个 Figma 文件版本之间生成人类可读的 markdown 变更日志——新增/删除/重命名的页面以及各组件的变更,并附带作者句柄和时间戳,可直接粘贴到发布说明、PR 或 Storybook MDX 中。当用户想要叙述式历史时使用——触发条件:"generate a Figma changelog"、"write release notes from Figma"、"what changed between these versions in markdown"、"summarize Figma changes for the PR"、"changelog between version A and B"、"design changelog since last release"。使用 Figma REST API 和个人访问令牌,因为版本历史无法通过 Plugin API / use_figma / 原生 Figma MCP 访问。如需原始结构化 diff JSON,请使用 figma-version-history;如需查明某个具体变更是哪个版本引入的,请使用 figma-blame-node。
编写 Figma Slides 演示文稿——列出/创建/复制/重排/删除幻灯片,读取幻灯片网格,向幻灯片添加文本和形状,设置幻灯片背景颜色,设置或读取幻灯片切换效果(dissolve、slide-from、push-from、smart-animate),聚焦某张幻灯片,以及切换跳过。当用户想要构建或编辑 Figma Slides 演示文稿时使用。触发条件:"create a slide"、"add a slide to the deck"、"reorder slides"、"set the slide background"、"add a transition between slides"、"add text/shape to slide 3"、"read what's on this slide"、"skip this slide in the presentation"。仅限 Figma Slides 文件(figma.editorType === 'slides')。需要 Figma 桌面应用(Plugin API)。
Open Graph 与社交分享图像设计,包含平台规格、文字排版与品牌呈现。涵盖 OG meta 标签、Twitter 卡片、LinkedIn 预览与动态生成。用于:社交分享图像、博客缩略图、链接预览、社交卡片。触发词:og image、open graph、social sharing image、twitter card、social card、link preview image、og meta、sharing preview、social thumbnail、meta image、og:image、twitter:image、linkedin preview。
面向 Instagram、LinkedIn 和 Twitter/X 的多页轮播图设计,包含版式规则和钩子。涵盖页面结构、文字层级、滑动心理和平台特定规范。适用:轮播帖、Instagram 轮播、LinkedIn 轮播、多页帖子、教育内容。触发词:carousel、instagram carousel、linkedin carousel、slide post、carousel design、swipe post、multi-image post、carousel template、educational carousel、carousel content、instagram slides、linkedin slides
来自 ui.inference.sh 的 React/Next.js 工具生命周期 UI 组件。展示工具调用:待处理、进行中、需要批准、结果。能力:工具状态、进度指示器、批准流程、结果展示。适用场景:展示 Agent 工具调用、人在环路中的批准、工具输出。触发词:tool ui、tool calls、tool status、tool approval、tool results、agent tools、mcp tools ui、function calling ui、tool lifecycle、tool pending
生成语调与品牌系统文件,供 PPTX Generator 及其他识别品牌的技能使用。触发条件 - 当用户说以下内容时使用此技能: - "帮我创建品牌系统" / "设置我的品牌" - "生成我的语调" / "创建我的语调指南" - "为演示文稿配置我的品牌" / "为幻灯片设置品牌" - "创建品牌文件" / "初始化我的品牌" - 任何关于为内容创作定义品牌标识、语调或视觉系统的请求 创建 brand.json、config.json、brand-system.md 和 tone-of-voice.md 文件。
一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。
