原型

ui-demo 帮你用 Playwright 录制更精致的 Web 应用演示视频，支持可见的光标移动和自然的节奏。适用于产品走查、入门引导、功能演示和教程式录屏。建议按“发现 → 预演 → 录制”的流程操作，结果更稳定，尤其适合原型和快速变化的 UI。

frontend-slides 可帮助你从零创建动效丰富的 HTML 演示文稿，也可以通过转换 PowerPoint 文件来完成。适合用于演讲、路演 deck、工作坊、内部演示，以及做 frontend-slides for UI Design 时的视觉探索；当你需要零依赖的浏览器输出、并且希望幻灯片刚好适配单个视口时，这个 skill 很合适。

algorithmic-art 用两步工作流帮助你在 p5.js 中创作原创生成艺术：先写出算法化创作理念，再产出可运行的 .html 和 .js 文件，并支持 seeded randomness、参数控制和交互式 viewer。

ux-designer 是一套结构化的 UX 设计技能，覆盖用户研究、无障碍、信息架构、交互流程、线框图指导和 UX 文案。它通过 `AGENTS.md` 与聚焦的规则文件，帮助团队把粗略的产品想法转化为更清晰、基于评估标准的设计决策。

prototype 技能可帮助你先做一段临时代码，在真正实现之前，先回答一个具体问题。它适合用可运行的原型来验证逻辑、状态流转、数据结构或 UI 方向，并且能符合宿主仓库的约定。它特别适合你需要的是一份快速的 prototype 指南，而不是最终功能的时候。

使用 figma 从 Figma MCP server 中拉取设计上下文、截图、变量和资源，然后把 Figma 节点转化为可直接落地的 UI 决策。这个 figma skill 适合你手头有 Figma URL 或 node ID，需要用于设计转代码、配置或排障的准确 figma 用法时使用。

brandkit 是一款面向品牌设计工作的高端品牌套件图像生成技能，适用于 logo 系统、品牌识别 deck、视觉规范板和带明确艺术指导的品牌展示。它专为创业公司、开发者工具、安全、游戏、消费级应用和奢侈概念等场景生成统一、工作室风格的结果而设计。当你想要的是完整、精致的品牌世界，而不是通用的 AI moodboard 时，就该用 brandkit。

shader-dev 是一个面向 ShaderToy 风格实时视觉效果的实用 GLSL 着色器技能。使用 shader-dev 技能可以更少靠猜测地构建或调试 ray marching、SDF 场景、光照、粒子、流体运动、后期处理，以及用于 UI Design 的 shader-dev。

使用 remotion 技能将 Stitch 项目界面转为精致的讲解视频，支持转场、缩放和文字叠加。内容包含安装步骤、示例文件，以及一套可重复执行的 remotion 视频编辑与适合渲染的合成指南。

pol-probe-advisor 帮助产品经理为某个假设、风险和资源水平选择合适的 Proof of Life（PoL）probe。使用 pol-probe-advisor 技能，可以避免过度设计，并把成本最低、最有价值的验证方式与真正的学习目标对齐。它非常适合用于产品管理场景下的 pol-probe-advisor，并提供实用的 pol-probe-advisor 使用指南和方向建议。

storyboard 技能能把产品创意转化为一个六格叙事，从问题一路推进到解决方案。适合在需要快速、以人为中心地判断一个想法是否能引发共鸣时，用于干系人对齐、概念评审、演示，以及面向原型的 storyboard。

pol-probe 帮你定义一个 Proof of Life（PoL）探测，用低成本先验证高风险假设，再决定是否投入真正的产品建设。使用 pol-probe 技能，可以减少“原型表演”，设定严苛的成功标准，选对探测类型，并在获得结论后规划如何处置。该技能适合希望在动手做之前，先快速判断想法是否值得继续推进的人。

hyperframes-registry 帮助你更少靠猜测地安装并接入可复用的 HyperFrames registry 项目。可用它来执行 `hyperframes add`，区分 blocks 和 components，合并 snippets，将 blocks 接入 `index.html`，并按照 `hyperframes.json` 的路径映射完成设计落地和 registry 发现。

gsap 是面向 HyperFrames 作品的实用动画参考。它能帮你在 gsap.to()、from()、fromTo() 和 gsap.timeline() 之间做出选择，并正确应用 vars、easing、stagger、transform 以及性能模式。需要可直接落地的入场动画、过渡效果和可复用设计动效时，可以用这份 gsap 指南来确定实现方案。

excalidraw-diagram 用于创建 Excalidraw JSON 图表，让图表不仅是摆放方框和箭头，而是能清晰地“论证”关系。适合工作流、架构、时序流程、决策路径和概念图等场景，尤其在你需要结构清楚、可读性强、真实关系明确时更合适。它包含安装指引、面向渲染的检查，以及一套实用的绘图工作流，帮助你做出更好的图表。

infocard 通过在页面中直接嵌入 HTML 和 CSS，帮助你用 Markdown 创建编辑风格的信息卡片。它适用于摘要、主题速览、重点面板、活动卡片、对比模块以及其他希望呈现出“刻意设计感”的 UI 设计友好内容。它不适合图表或数据可视化；这类需求应改用专门的图表或流程图技能。

canvas 可创建带自由摆放和明确 x/y 坐标的 JSON Canvas 图。适合思维导图、知识图谱、概念图、规划板，以及其他以空间布局比顺序更重要的制图工作流。它不适合流程图或数据图表。需要可编辑的节点、连线和结构化布局时，请使用 canvas 技能。

imagegen-frontend-mobile 是一项面向高端移动端应用界面和多屏流程的图像生成技能。它适合为 iOS、Android 以及跨平台概念创建更具原生感的应用视觉稿，强调清晰层级、易读文字、受控配色和轻量级手机样机效果。请将它用于图像生成，不适合代码、网站或桌面端 UI。

gpt-taste 是一项面向设计的 skill，专注于打造更精致的 UI 页面，强调编辑式视觉指导、严谨的留白控制和 GSAP 动效。对于营销页、落地页和展示型站点，当你希望获得更丰富的布局变化、更好的排版控制，并减少千篇一律的前端模式时，可以使用 gpt-taste skill。该指南包含可落地实现的安装与使用说明。

hand-drawn-diagrams 技能可将自然语言提示词转成手绘风格的 Excalidraw 图表、流程图、说明图、线框图和页面原型。它会校验输出，并可返回可编辑 URL 以及可导出的图片。适合需要快速出图、想要草图感而非精致矢量风格的场景。

world-builder 是一项以设计为导向的技能，用于在 Dorothy 的 Pokemon 风格俯视世界中创建和管理生成式游戏区域。使用 world-builder 技能，可以把主题、设定或地点想法转化为可玩的地图，并为 Design Implementation 提供氛围、布局、地形、NPC 布置和空间逻辑。

gif-sticker-maker 可借助 MiniMax Image Generation、MiniMax Video Generation 和 ffmpeg，将照片生成 4 张 Funko Pop / Pop Mart 风格的动态 GIF 贴纸。这个 gif-sticker-maker 技能涵盖安装前提、提示词模板、文案说明，以及完整的图片转 GIF 工作流。

figma-create-new-file 会在 drafts 中创建一个新的空白 Figma 或 FigJam 文件，并为编辑器类型和文件名提供默认值。这个 figma-create-new-file 技能适合设计落地、快速原型制作，以及在使用 use_figma 之前先搭建一个全新的画布。必要时，它还会通过 whoami 处理 planKey 的解析。

figma-use 是在 Figma Plugin API 工作流中安全调用 `use_figma` 的必备技能。请先安装并加载 figma-use，再用 JavaScript 编写、更新、检查或组织 Figma 文件。它尤其适用于设计实现、组件工作、变量、auto layout 以及程序化读取文件。