设计与 UI
界面设计、视觉系统和产品 UI
Skills 列表
talking-head-recut
对现有的口播/访谈/播客视频进行视觉包装：在完整播放的原视频上，结合逐字稿时间轴，叠加设计感十足且时序对齐的图文卡片（包括标题、下三分之一花字/人名条、数据高亮、名言金句、侧边栏、画中画等）。原视频全程完整播放；Agent 会在对话中直接设计并编写每张卡片的 HTML，再通过 hyperframes 渲染导出为 MP4。适用于用户要求“视频图文包装”、“添加花字/人名条/数据卡片/动态标题”、“帮我的视频做个包装/美化”、“加点浮窗卡片/图文卡片”，或对已有视频进行 AI 视觉包装的场景。不适用于纯字幕生成（请用 embedded-captions）或凭空从零制作视频（请用 creation 工作流）；如果不确定该选图文包装还是纯字幕，请参阅 /hyperframes。
heygen-commotion-graphics
当用户想要一个简短、以设计为主导的动态图形时使用，其中运动本身就是信息：动态排版、统计数据或数字计数、图表/数据可视化展示、Logo 出场、品牌组合、下三分之一标题、标注、社交媒体叠加层、动画标题/推文/新闻条目、动态海报或快速捕获的页面高亮。通常时长在10秒以内，最长约30秒，没有叙事弧线、画外音或真人拍摄主体。可渲染为MP4或透明叠加层。不适用于较长、多场景、带旁白或品牌宣传片的作品（请使用 /general-video）、带旁白的网站视频（/website-to-video）、主题讲解（/faceless-explainer）、产品推广（/product-launch-video）、公关视频（pr-to-video）或为现有素材添加字幕（/embedded-captions）。如果不确定是快速动态优先的作品还是较长/带旁白的处理方式，请参阅 /hyperframes。
heygen-comgeneral-video
用于创作自定义 HyperFrames 视频合成（任意长度或格式）的通用工作流——适用于较长或多场景作品、品牌/精彩集锦、蒙太奇、标题卡片、静态循环及自由形式合成。与输入和长度无关。如果某个专门工作流明显适合输入（如已上市产品、网站、主题讲解、GitHub PR、现有素材、短动态图形或 Remotion 移植），则优先使用该工作流（参见 /hyperframes）；仅当无合适工作流时，才将此作为通用回退方案。
heygen-comwebsite-to-video
抓取通用网站/URL 并将其转换为 HyperFrames 视频（基于网站自身视觉元素制作的网站巡览、展示视频或社媒短片）。使用无头 Chrome 截图 + 品牌资产。适用于通用展示需求——如作品集、博客、落地页展示或网站社媒剪辑。不适用于：产品/SaaS 发布或宣传（→ /product-launch-video，即使有 URL 也用此项）；无网站的主题讲解视频（→ /faceless-explainer）；GitHub PR（→ /pr-to-video）；为已有视频添加字幕（→ /embedded-captions）；无配音的短版页面高亮动态图形（→ /motion-graphics）。如果不确定属于产品发布还是通用网站展示？提一个问题澄清，或先查看 /hyperframes。
heygen-comgraphic-overlays
对现有的口播、访谈或播客视频进行精美包装：根据逐字稿时间轴，在完整播放的源视频上叠加精心设计的动态图形卡片（如标题、人名条、数据标注、金句卡、侧边栏、画中画等）。源视频全程完整播放；Agent 会在对话中设计并直接编写每张卡片的 HTML 代码，最后通过 hyperframes 渲染导出为 MP4。当用户需要添加视觉贴片、屏幕花字/人名条/数据高亮/动态标题，或提出“帮我包装/美化视频”、“添加图形卡片”，以及对现有视频进行 AI 视觉包装时使用。注意：本 Skill 不适用于生成纯字幕（请使用 → embedded-captions）或从零从头制作视频（请使用 → 创建类工作流 creation workflows）；若无法确定使用贴片还是字幕，请先参考 /hyperframes。
heygen-comproduct-launch-video
将产品、营销URL、粘贴的脚本或简报转化为产品发布视频，包括SaaS宣传片、功能展示、应用发布、公司宣传和产品营销视频。当用户想要营销、发布、推广或展示产品时使用此技能。请勿用于一般的非发布类网站导览、非产品主题的解说视频、GitHub拉取请求、为现有素材添加字幕或短篇无旁白动态图形。如果意图不明确，请先通过/hyperframes路由。
heygen-comembedded-captions
为单人口播视频添加字幕。由两大底层引擎驱动 32 种视觉风格（详见 CATALOG.md 目录）：栏式流动引擎（Column-flow，字幕融入场景合成 —— 人像遮罩遮挡 + 混合模式；包含 cream/ink/editorial/keynote/documentary/loud/neon/glitch/chrome/velocity）与主题宪章引擎（Themed constitutions，包含 anchor/ordnance/terminal/neonsign/stardust/stomp/scoreboard/transit/vhs/arcade/dossier/laser/thunder/hologram/biolume/aurora/spectrum/papercut/popup/chalkboard/graffiti/brush/inkwater/ransom/lastpage/nightcity —— 例如符文解码高潮特效、逐笔画写出的霓虹灯牌，或默认安静的 `anchor` 轨字幕）。请始终按视觉风格（identity）进行路由调度，切勿按模式（mode）路由。当用户提到“captions/subtitles”、“embed/cinematic captions”、“VFX captions”、“炸/特效/酷炫字幕”、具体的风格名称，或高规格动效包装需求时触发。对绝大多数口播内容而言，把每个字都做成嵌入特效是错误的 —— 默认使用逐字轨字幕 `anchor`。处理管线：语音转写 → hyperframes 扣像抠背景 → HTML 渲染 → ffmpeg 叠加合成。依赖 hyperframes 以及单人主体视频片段。
heygen-comfaceless-explainer
将任意文本（文章、笔记、主题、简报）转化为无人物出镜的解说视频，时长最长约3分钟（最佳30-90秒），所有视觉元素均为原创（排版、抽象图形、图表、数据可视化），而非实拍素材。不涉及URL、网站抓取或真实资产。此技能适用于主题解说、概念拆解、教程、列表文章和叙事型解说。请勿用于产品发布/推广（请使用/product-launch-video）、真实网站导览（请使用/website-to-video）、GitHub PR（请使用/pr-to-video）、现有素材加字幕（请使用/embedded-captions）或短篇无旁白动态图形（请使用/motion-graphics）。若意图不明确，请先通过/hyperframes路由。
heygen-com
animate-expo
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.
emilkowalski
nature-paper2ppt
根据科学论文、预印本、PDF、文章正文、图注或阅读笔记，构建完整的Nature风格中文PPTX演示文稿。适用于期刊俱乐部、组会、论文研讨会、论文分享、会议或答辩演示，以及中文需求如论文做PPT、论文汇报、组会PPT、文献汇报、学术汇报、做幻灯片、读书报告PPT。它会分类论文类型，构建以证据为导向的故事，选择关键图表，撰写中文幻灯片内容和演讲者备注，创建实际的.pptx文件，并运行纠正性QA以确保图表裁剪完整、对齐稳定、文本不溢出，以及去除模板化的中文学术表达。当需要改进质量较差的论文转PPT输出（如图表裁剪、对齐松散、明显的AI风格措辞或大量手动返工）时，也应触发此技能。
yuan1z0825
web-design-guidelines
审查UI代码是否符合Web界面指南。当用户要求“审查我的UI”、“检查可访问性”、“审计设计”、“审查用户体验”或“对照最佳实践检查我的网站”时使用。
vercel-labsanimate
从零构建动画，按决定手感是否对味的顺序进行决策——是否需要动画、出于何种目的、选用什么工具、作用于哪些属性、使用什么曲线与时长、如何处理中断以及如何退场。自动生成代码实现。适用于被要求制作动画、添加动效、赋予组件生机或构建过渡效果的场景。如需评审现有动效请使用 review-animations；如需审计整个代码库请使用 improve-animations。
emilkowalski
cmux-workspace
在当前 cmux 工作区与终端内进行操作。适用于 cmux 工作区、当前工作区、调用方 surface、pane、surface、指定 socket 目标以及无干扰的 cmux 自动化任务。
manaflow-ai
figma-generate-design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.
openai
product-skills
Use when coordinating product work across the 12 bundled product sub-skills (RICE, OKRs, UX research, design tokens, competitive teardown, analytics, experiments, discovery, roadmaps, spec-to-repo, landing pages, SaaS scaffolding) or the 4 standalone product-team plugins (user stories, Apple HIG, code-to-PRD, research summarizer). Triggers on 'help me prioritize', 'plan a product experiment', 'we ship features nobody uses', 'run the discovery loop', 'is our OST sound'. Forks context to route to one sub-skill via a deterministic signal router and returns a digest; can also drive a continuous-discovery loop (Torres cadence tracker + OST linter as machine gates) or a full goal→plan→execute→verify→close run through the repo-wide agent-harness. Distinct from project-management (how to deliver vs what to build), marketing/landing (from-scratch pages), and engineering/agent-harness (the generic loop engine this orchestrator plugs into).
alirezarezvani
ce-work
端到端执行方案或具体开发 Prompt。适用于根据方案文档、Spec 路径或明确的构建需求进行代码实现；对于开放式 Bug 调试请使用 ce-debug。独立使用时包含完整的后续交付流程；外部编排器可通过传入 `mode:return-to-caller [implementation_engine:<compact-json>] [implementation_run:<safe-id>] <plan path>` 仅执行代码实现、恢复以及本地验证。
everyinc
baoyu-infographic
提供 21 种布局类型与 22 种视觉风格，轻松生成专业级信息图。自动分析内容，推荐最佳“布局×风格”组合方案，一键生成出版/发布级的高质量信息图。当用户要求创建“infographic”、“信息图”、“visual summary”、“可视化”或“高密度信息大图”时使用。
jimliubaoyu-xhs-images
提供 12 种视觉风格、8 种信息布局和 3 种调色盘，生成系列图文资讯卡片。可将内容拆解为 1-10 张卡通风格的图片卡片，专为提升社交媒体互动与传播效果而优化。当用户提到“小红书图片”、“小红书种草”、“小绿书”、“微信图文”、“微信贴图”、“image cards”、“图片卡片”、baoyu-xhs-images，或需要社交媒体图文资讯系列图时使用。
jimliubaoyu-slide-deck
根据输入内容生成专业级幻灯片（Slide Deck）图片。先创建带有风格指令的大纲，再逐张生成幻灯片图片。适用于用户提出“制作幻灯片”、“做 PPT”、“生成演示文稿”、“制作 Slide Deck”等需求时。
jimliubaoyu-comic
支持多种画风与情绪基调的知识漫画创作工具。能够自动生成包含详细分镜布局的故事板，并支持批量生成图像，轻松打造原创教育漫画。当用户提出创建“知识漫画”、“教育漫画”、“人物传记漫画”（biography comic）、“教程漫画”（tutorial comic）或“Logicomix 风格漫画”（Logicomix-style comic）时调用本 Skill。
jimliuprototype
根据你的描述，构建多个真正不同的UI组件版本，并通过可视化选择器呈现，让你可以实时切换浏览并推广最合适的那一个。仅在显式调用时运行；不会自动触发。
emilkowalski
prd
为一项新功能生成产品需求文档（PRD）。在规划功能、启动新项目或要求创建PRD时使用。触发词：创建PRD、为...编写PRD、规划此功能、需求、规格说明。
snarktank
huashu-design
花叔Design——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审。根据任务embody对应专家（UX/动画师/幻灯片设计师/原型师），避免web design tropes。触发词：做原型、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、做个HTML页面、做个可视化、app原型、iOS原型、导出MP4/GIF、60fps视频、设计风格、设计方向、配色方案、推荐风格、选个风格、做个好看的、评审、好不好看、review this design、带解说的动画、解说视频、长视频科普、voiceover、narration、5分钟讲清楚什么是XX。需求模糊时进设计方向顾问（三套逻辑并行出3版真实视觉，HTML原生40种风格库网页20+PPT20为弹药）；另含品牌资产协议、反AI slop、Junior工作流、Tweaks变体、动画→MP4/GIF导出、带解说长视频pipeline、5维评审。
alchaincyf
guizang-ppt-skill
生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。
op7418