为 Claude Code、Codex 和 你的 Agent 设计的 Skill

用真实的极端数据和仅限开发环境的对比开关对现有 UI 进行压力测试;先报告故障,再修复。

组件源码、现有演示数据和字段限制;用于视觉验证的运行中应用和浏览器。

• UI 压力测试
• 边界情况测试数据
• 审查报告

诊断网页动画中的掉帧:渲染开销、主线程争用、逐帧 React 更新和继承的 CSS 变量。

需要动画源码和可复现的交互;还需要浏览器性能分析工具和真实的目标设备来验证性能。

• 网页动画
• 帧性能
• 诊断审查

在现有应用中还原提供的截图,然后按参考视口渲染并修正可见差异。

请提供清晰可读的参考图、目标视口、项目访问权限和可用素材。需要浏览器渲染来验证视觉是否一致。无需 UIZZE 账号或 MCP 连接。

• 截图转代码
• 参考图还原
• 界面实现

将视频请求路由到合适的工作流,恢复已有项目,并协调 HTML 的合成、媒体、预览和渲染。

CLI 需要 Node.js 22+ 和 FFmpeg。请先从核心技能开始;创作工作流按需安装。媒体服务和云端渲染可能带来额外要求。

• HTML 转视频
• 工作流路由
• 视频制作

通过精心制作的等距 SVG 机构和由模型驱动的交互来解释技术概念。

该工具包需要 Node.js 20.10+,检查时需要 Chrome 或 Chromium。skills CLI 有自己的 Node 要求;README 记录 CLI 1.7.1 需要 22.20+。

• 等距 SVG
• 技术讲解
• 交互式图示

使用 p5.js 生成艺术：种子粒子、流场和可调参数。

需要：p5.js

• 图像与生成艺术
• 生成艺术
• 在 OpenDesign 中

将 Anthropic 的官方品牌颜色和排版应用于任何产物。仅限 Anthropic 品牌。

• 品牌与设计系统
• 在 OpenDesign 中

以 PNG 或 PDF 形式交付的原创海报和静态视觉作品。

• 图像与生成艺术
• PNG / PDF
• 在 OpenDesign 中

为新建或现有的网页 UI 设定独特的视觉方向、字体和布局。

• Web 与 UI
• UI 代码
• 在 OpenDesign 中

符合 Slack 大小和尺寸限制的动态 GIF。

• 动效与视频
• GIF
• 在 OpenDesign 中

为页面、幻灯片和文档应用或生成配色和排版主题。

• 品牌与设计系统
• 在 OpenDesign 中

使用 React、Tailwind 和 shadcn/ui 构建多组件交互式 HTML 产物。

• Web 与 UI
• HTML
• 在 OpenDesign 中

产品设计咨询，提出完整的设计系统：美学、排版、配色、布局、动效。

• 品牌与设计系统
• 设计系统
• 在 OpenDesign 中

根据已确定的设计方向生成生产级 HTML/CSS。

• Web 与 UI
• HTML

以设计师视角对已构建页面进行 QA：发现不一致、间距、层级、粗糙模式等问题，然后修复它们。

• Design Review & Accessibility
• 审查报告
• 在 OpenDesign 中

并行生成多个设计变体，并打开对比面板以收集反馈。

• Web 与 UI
• UI 代码

将描述或 Mermaid 源代码转换为可编辑的 Excalidraw 文件，并附带渲染的 SVG 和 PNG。

需要：Excalidraw

• Diagrams & Data Visualization
• Diagram

在真实硬件上对 iOS 应用进行视觉设计审计。

• 移动应用
• 审查报告

在实施前审查设计计划的完整性和体验风险。

• Design Review & Accessibility
• 审查报告
• 在 OpenDesign 中

社交媒体、广告、网站头图和印刷品的横幅设计。

• 图像与生成艺术
• Image

品牌声音、视觉识别、信息框架和品牌一致性。

• 品牌与设计系统

品牌识别、design token、UI 样式、logo 生成和企业识别系统。

需要：图像生成服务（Gemini、Atlas Cloud 或 MuAPI）

• 品牌与设计系统

三层级设计 token、组件规范和幻灯片生成。

• 品牌与设计系统
• 设计系统

使用 Chart.js、design token 和响应式布局的战略性 HTML 幻灯片。

需要：Chart.js

• Presentations
• HTML 幻灯片
• 在 OpenDesign 中

使用 shadcn/ui、Tailwind CSS 和基于 canvas 的视觉效果实现无障碍 UI 样式。

需要：shadcn/ui、Tailwind CSS

• Web 与 UI
• UI 代码

针对 Web、移动端和桌面的 UI/UX 设计智能：布局、配色、排版和 UX 规则。

• Web 与 UI
• UI 代码
• 在 OpenDesign 中

在项目中添加、搜索、修复、设计和组合 shadcn 组件。

需要：shadcn/ui

• Web 与 UI
• UI 代码

构建生产级、可访问、响应式的用户界面。

• Web 与 UI
• UI 代码

通过图像生成提供高级品牌指南面板、标志系统和识别手册。

需要：Image generation service

• 品牌与设计系统
• Image
• 在 OpenDesign 中

为着陆页、作品集和重新设计提供反平庸的前端设计。

• Web 与 UI
• UI 代码
• 在 OpenDesign 中

集编辑式布局、多样化排版和 GSAP 动效于一体的前端 skill。

需要：GSAP

• Web 与 UI
• UI 代码

传授高端机构级设计细节：字体、间距、阴影、卡片和动效。

• Web 与 UI

首先生成并分析设计图像，然后实现匹配的页面。

需要：Image generation service

• Web 与 UI
• UI 代码

通过图像生成创建高保真移动端界面概念和流程。

需要：Image generation service

• 移动应用
• Image
• 在 OpenDesign 中

通过图像生成提供逐节网站设计参考。

需要：Image generation service

• Web 与 UI
• Image
• 在 OpenDesign 中

融合瑞士字体与终端美学的粗野主义界面。

• Web 与 UI
• UI 代码

简洁、单色、编辑风格的界面。

• Web 与 UI
• UI 代码

审查现有网站或应用并将其升级至高端视觉质量。

• Design Review & Accessibility
• UI 代码

为 Google Stitch 编写 DESIGN.md，强调视觉辨识度。

需要：Google Stitch

• 品牌与设计系统
• DESIGN.md

一个用于设计、评审、审计、优化、动画和改进界面的 skill。

• Design Review & Accessibility
• UI 代码
• 在 OpenDesign 中

将文本、笔记或文章转换为带有创造性场景视觉的无真人出镜讲解视频。

需要：HyperFrames

• 动效与视频
• Video

将 Figma 资产、品牌 token 和故事板导入 HyperFrames 合成。

需要：HyperFrames、Figma

• 动效与视频
• Video

在没有合适模板时创作或编辑自定义多场景 HyperFrames 视频。

需要：HyperFrames

• 动效与视频
• Video

HyperFrames 的动画规则、场景蓝图、转场和运行时适配器。

需要：HyperFrames

• 动效与视频
• Video

HyperFrames 视频的创意指导：色板、字体、构图、旁白、节奏。

需要：HyperFrames

• 动效与视频
• Video

HyperFrames 的推近、缩放、重构图、Ken Burns 移动和 2D/3D 关键帧。

需要：HyperFrames

• 动效与视频
• Video

简短的设计驱动动态图形：动态文字、统计数字递增、标志动画、下三分之一字幕。

需要：HyperFrames

• 动效与视频
• Video

将产品 URL、脚本或 brief 转化为产品发布或宣传视频。

需要：HyperFrames

• 动效与视频
• Video

交互式 HyperFrames 幻灯片演示，支持片段、分支和演讲者模式。

需要：HyperFrames

• Presentations
• HTML 幻灯片

开发者幻灯片：支持 Markdown、Vue 组件、代码高亮和动画。

需要：Slidev

• Presentations
• HTML 幻灯片

符合 WCAG 2.2 标准的界面，支持移动端无障碍和辅助技术。

• Design Review & Accessibility
• UI 代码

先进行品牌识别访谈，然后通过 Stitch 生成并迭代落地页。

需要：Google Stitch

• Web 与 UI
• UI 代码

可扩展的设计系统：token、主题基础设施、组件架构。

• 品牌与设计系统
• 设计系统

微交互、动效、过渡和用户反馈模式。

• 动效与视频
• UI 代码

KPI 仪表盘：指标选择、图表类型、布局和实时模式。

• Diagrams & Data Visualization
• Dashboard

原生 Android UI，遵循 Material Design 3 和 Jetpack Compose。

• 移动应用
• UI 代码

原生 iOS UI，遵循 Apple Human Interface Guidelines，使用 SwiftUI。

• 移动应用
• UI 代码

验证并修复可编辑 PPTX 文档的几何结构、无障碍性和包完整性。

• Presentations
• PPTX

分析参考 PPTX 的主题、排版、布局节奏和诊断信息。

• Presentations
• 审查报告

为可编辑的 PPTX 演示文稿编写坐标明确的 JSON 规范。

• Presentations
• PPTX

在 PPTX 演示文稿中选择并放置经批准的图标、图片、SVG 和信息图。

• Presentations
• PPTX

React Native 样式、导航和 Reanimated 动画。

需要：React Native

• 移动应用
• UI 代码

使用容器查询、流式排版、CSS Grid 和移动优先断点实现响应式布局。

• Web 与 UI
• UI 代码

使用 VoiceOver、NVDA 和 JAWS 屏幕阅读器测试 Web 应用。

• Design Review & Accessibility
• 审查报告

使用 Tailwind CSS v4 构建设计系统：token、组件库、响应式模式。

需要：Tailwind CSS

• 品牌与设计系统
• 设计系统

排版、色彩理论、间距系统和图标设计，打造统一视觉效果。

• 品牌与设计系统

WCAG 2.2 审计，包含自动化测试、人工检查和修复指导。

• Design Review & Accessibility
• 审查报告

可复用的 React、Vue 和 Svelte 组件模式与组合策略。

• Web 与 UI
• UI 代码

创建和编辑 draw.io 图表文件（.drawio、.drawio.svg、.drawio.png）。

需要：draw.io

• Diagrams & Data Visualization
• Diagram

从自然语言生成 Excalidraw 图表和思维导图。

需要：Excalidraw

• Diagrams & Data Visualization
• Diagram

视差、固定区块、横向滚动和文字滚动动画。

需要：GSAP

• 动效与视频
• UI 代码

通过 MCP 工具在 Penpot 中进行专业 UI/UX 设计、组件和设计系统工作。

需要：Penpot MCP

• Web 与 UI
• 设计文件

Power BI 报表设计：图表选择、布局、可读性、无障碍性。

需要：Power BI

• Diagrams & Data Visualization
• Dashboard

可视化检查正在运行的网站，定位并修复布局问题。

• Design Review & Accessibility
• 审查报告

从零开始构建动画，依次确定目的、工具、属性、曲线和时长。

• 动效与视频
• UI 代码

为 React Native 和 Expo 提供手势、弹簧和过渡。

需要：React Native / Expo

• 移动应用
• UI 代码

反向查询词汇表，将模糊的动效描述转换为精确术语。

• 动效与视频

将 Apple 的手势、物理运动和空间层次转译到网页端。

• Web 与 UI
• UI 代码

Emil Kowalski 关于 UI 精致度、组件设计和动效决策的理念。

• Web 与 UI
• 在 OpenDesign 中

找出 UI 中应该添加动画的位置，提供参数建议，并剔除其余部分。

• 动效与视频
• 审查报告

审查现有动效代码，生成按优先级排列的独立实现方案。

• Design Review & Accessibility
• 审查报告

构建同一 UI 组件的多个真正不同的版本，通过实时可视化选择器切换。

• Web 与 UI
• UI 代码

以高标准审查动画代码的时序、交互和完成度。

• Design Review & Accessibility
• 审查报告
• 在 OpenDesign 中

使用 React 的 View Transition API 实现原生感的页面过渡。

需要：React

• 动效与视频
• UI 代码

从头创建或从 PowerPoint (PPT) 文件转换的动画丰富型 HTML 幻灯片。

• Presentations
• HTML 幻灯片
• 在 OpenDesign 中

将 JSON 规范渲染为使用 Ink 的交互式终端 UI。

需要：Ink

• Web 与 UI
• 终端 UI

生成或编辑位图图像：插画、照片、纹理、精灵图、样机。

需要：Image generation service

• 图像与生成艺术
• Image
• 在 OpenDesign 中

单文件横向 HTML PPT 演示，采用杂志或瑞士风格，支持演讲者视图和同步。

• Presentations
• HTML 幻灯片
• 在 OpenDesign 中

为任何产品定义或应用品牌指南：颜色、字体、标志和语调。

• 品牌与设计系统

通过 10 个问题的向导一次性捕获品牌标识，用于后续文档和演示文稿。

• 品牌与设计系统
• 设计系统

将 Markdown 文档转换为品牌化幻灯片。

• Presentations
• HTML 幻灯片

设计 token、组件文档、响应式计算和开发者交接。

• 品牌与设计系统
• 设计系统

数据驱动的用户画像、旅程地图、可用性测试框架和研究综合。

• UX 与研究
• 研究文档

高保真 HTML 原型、幻灯片、动画和可视化；从三个草稿开始。

• Web 与 UI
• HTML

针对设计或页面的 WCAG 2.1 AA 审计：对比度、键盘、触摸目标。

• Design Review & Accessibility
• 审查报告

针对可用性、层级和一致性的结构化设计反馈。

• Design Review & Accessibility
• 审查报告

从设计生成开发者交接规范：布局、token、组件状态、断点。

• 品牌与设计系统
• 交付规范

审计、记录或扩展现有设计系统。

• 品牌与设计系统
• 设计系统

将访谈、调查和测试笔记综合为主题和建议。

• UX 与研究
• 研究文档

规划、执行和综合用户访谈、调查和可用性测试。

• UX 与研究
• 研究文档

编写或审查 UX 文案：微文案、错误消息、空状态、CTA。

• UX 与研究

GSAP 核心 API：to/from/fromTo、缓动、交错、matchMedia、减少动画。

需要：GSAP

• 动效与视频
• UI 代码
• 在 OpenDesign 中

在 Vue、Svelte 及其他非 React 框架中使用 GSAP：生命周期、作用域、清理。

需要：GSAP

• 动效与视频
• UI 代码
• 在 OpenDesign 中

GSAP 性能：transforms、避免布局抖动、will-change、批处理。

需要：GSAP

• 动效与视频
• UI 代码
• 在 OpenDesign 中

GSAP 插件：ScrollTo、ScrollSmoother、Flip、Draggable、SplitText、SVG 和物理效果。

需要：GSAP

• 动效与视频
• UI 代码
• 在 OpenDesign 中

在 React 和 Next.js 中使用 GSAP，包括 useGSAP hook、refs、context 和清理。

需要：GSAP

• 动效与视频
• UI 代码
• 在 OpenDesign 中

使用 ScrollTrigger 实现滚动链接动画：固定、擦除、触发器、视差。

需要：GSAP

• 动效与视频
• UI 代码
• 在 OpenDesign 中

GSAP 时间轴：position 参数、嵌套和播放控制。

需要：GSAP

• 动效与视频
• UI 代码
• 在 OpenDesign 中

gsap.utils 辅助函数：clamp、mapRange、interpolate、snap、wrap、pipe。

需要：GSAP

• 动效与视频
• UI 代码
• 在 OpenDesign 中

适用于 PPT 和设计任务的演示级配色方案和字体配对。

• 品牌与设计系统

从圆角和间距配方为 PPT 幻灯片建立一致的视觉系统。

• Presentations

将人物、宠物、物体或 logo 照片转换为四张带说明的 GIF 贴纸。

• 动效与视频
• GIF
• 在 OpenDesign 中

生成、编辑和读取可编辑的 PowerPoint（PPTX）幻灯片。

• Presentations
• PPTX
• 在 OpenDesign 中

GLSL 着色器：光线行进、SDF、流体、粒子、程序化视觉效果。

需要：GLSL / WebGL

• 图像与生成艺术
• 生成艺术
• 在 OpenDesign 中

使用 PptxGenJS 实现单个 PowerPoint 幻灯片。

需要：PptxGenJS

• Presentations
• PPTX

快速修复 UI 代码中的间距、层次、排版和小型布局问题。

• Design Review & Accessibility
• UI 代码

从现有产品仓库或公开网站创建或更新 DESIGN.md。

• 品牌与设计系统
• DESIGN.md

审核并修复 ARIA、键盘、焦点、对比度和表单错误。

• Design Review & Accessibility
• 审查报告

查找并修复卡顿的 CSS/JS 动画和滚动联动效果。

• 动效与视频
• 审查报告

根据产品自身的设计证据进行审查，并编写实施计划。

• Design Review & Accessibility
• 审查报告

分析 Stitch 项目并编写语义化的 DESIGN.md。

需要：Google Stitch

• 品牌与设计系统
• DESIGN.md
• 在 OpenDesign 中

将模糊的 UI 想法改写为精炼的、Stitch 优化的提示词。

需要：Google Stitch

• Web 与 UI
• 在 OpenDesign 中

将 Stitch 设计转换为 React + Vite 仪表板，使用 TanStack Query。

需要：Google Stitch

• Web 与 UI
• UI 代码

使用 Remotion 转场和缩放从 Stitch 项目生成演示视频。

需要：Google Stitch、Remotion

• 动效与视频
• Video
• 在 OpenDesign 中

集成和自定义 shadcn/ui 组件：发现、安装、最佳实践。

需要：shadcn/ui

• Web 与 UI
• UI 代码
• 在 OpenDesign 中

通过静态 HTML 和设计系统提取，将前端代码转换为 Stitch 设计。

需要：Google Stitch

• Web 与 UI
• 设计文件

从任何框架的前端源代码中提取完整的 DESIGN.md。

• 品牌与设计系统
• DESIGN.md

提取内联 CSS 和图像的独立静态 HTML 快照。

• Web 与 UI
• HTML

通过文本或参考图像在 Stitch 中生成、编辑和变化屏幕。

需要：Google Stitch

• Web 与 UI
• 设计文件

通过 MCP 工具在 Stitch 中创建、更新和应用设计系统。

需要：Google Stitch

• 品牌与设计系统
• 设计系统

将 Stitch 设计转换或同步为模块化 React + Vite 组件。

需要：Google Stitch

• Web 与 UI
• UI 代码

将 Stitch HTML 设计转换或同步为 React Native 组件。

需要：Google Stitch、React Native

• 移动应用
• UI 代码

为仪表板、管理面板、SaaS 工具和设置页面提供专业级界面设计。

• Web 与 UI
• UI 代码

针对悬停、阴影、边框、图标、排版和微交互的设计工程原则。

• Web 与 UI

遵循 WCAG 2.2 审查并改进 Web 无障碍性。

• Design Review & Accessibility
• 审查报告

应用动效设计原则：时序、缓动、编排和动画基础。

• 动效与视频

端到端用户研究助手：定性和定量、指南和计划。

• UX 与研究
• 研究文档

实现 Material Design 3 token、组件和自适应布局。

• 移动应用
• UI 代码

有目的的交互动效，或对现有动画的审查，遵循 Kowalski、Krehel 和 Tompkins 的原则。

• 动效与视频

色彩命名、理论、色彩空间、调色板、渐变色阶、渐变、转换和对比度。

• 品牌与设计系统
• 在 OpenDesign 中

通过 AntV API 将数据渲染为条形图、折线图、饼图、雷达图、桑基图、思维导图和流程图。

需要：AntV API

• Diagrams & Data Visualization
• 图表图像

根据给定文本创建信息图表。

需要：AntV API

• Diagrams & Data Visualization
• Image

以用户为中心、易于访问的微文案：按钮、标签、错误提示、表单、引导流程。

• UX 与研究

将每项无障碍问题与受影响的元素、建议的修复方案和验证结果关联起来。

需要用于运行随附工具的 Python、源代码访问权限，以及用于情境验证的浏览器或辅助技术环境。

• 无障碍
• 设计审查
• 前端

围绕论证、证据和幻灯片标题规划学术演示；使用单独的工具创建 PPTX 文件。

需要单独的 PPTX 技能。该条目将 markitdown、PptxGenJS、LibreOffice 和 Poppler 列为与实施相关的依赖项。

• 演示文稿
• 学术研究
• PowerPoint

编写 ExtendScript 脚本，以创建和编辑 Illustrator 文档、图稿及导出内容。

需要 Adobe Illustrator CC 或更高版本；生成的脚本在其 ExtendScript 环境中执行。

• 矢量设计
• 自动化
• Illustrator

将研究观察归纳为主题，同时保留它们与原始证据的关联。

使用能够读取所提供访谈记录或笔记的智能体。提供参与者 ID 和设计问题；该技能用于综合现有证据，而非收集访谈。

• 用户体验研究
• 综合分析

让一项过渡具有明确目的，并采用与界面状态变化相匹配的动态特征。

提供界面变化前后的状态、触发方式和目标设备。使用可运行的预览检查时序、中断和减少动态效果时的行为。

• 界面动效
• 设计指南

先从产品的真实对象和约束出发，再选择视觉表现方式。

需要能够读取项目文件的智能体；视觉检查需要渲染支持。付费的 UIZZE MCP 为可选项。

• UI 设计
• 设计评审

使用 AntV G2 v5 的标记、编码、比例尺和交互功能创建图表。

需要 @antv/g2 v5 或文档所述的浏览器包。可选的参考资料检索使用外部 AntV 上下文服务。

• 数据可视化
• 图表
• JavaScript

使用 AntV G6 v5 可视化网络数据，包括图布局和交互式探索。

需要一个使用 @antv/g6 v5 的应用、一个浏览器图容器；如果需要使用文档所述的参考资料检索服务，还需具备网络访问条件。请根据已安装的版本核验 API。

• 图可视化
• 网络
• AntV

使用 AntV X6 构建节点-边图表编辑器，包括连接、编辑行为和所需插件。

使用文档所述的 @antv/x6 v3 API、浏览器画布和所需插件。获取其他参考资料需要网络访问。请根据已安装版本核对示例。

• 图表编辑器
• 节点界面
• AntV

制作原创、有来源依据的讲解视频，配有旁白和精心统一的视觉语言。

需要所提供的Remotion/Node项目、Python 辅助脚本、渲染能力和合适的 TTS 途径。文档所述的中文和英文默认方案使用不同的语音引擎；多智能体构建是该工作流的一部分。

• 动态图形
• 视频
• Remotion

利用截图、文案和视觉素材,制作一组协调统一的应用商店展示图片。

需要打包好的 Next.js 编辑器、受支持的 Node 与包管理器环境和浏览器。PNG 导出使用 html-to-image;源截图、字体及其他素材需要具备相应的使用权。

• 应用营销
• 截图
• 本地化

依据平台特定的设计和无障碍指南审查 Apple 平台界面。

检查器需要 Python 3，且仅使用标准库；还需要最新的 Apple《人机界面指南》(HIG)，以及用于行为检查的设备或模拟器。

• 原生 UI
• 无障碍
• 设计审查

规划并生成插图，在文章中的相关位置解释关键概念。

需要可用的栅格图像生成后端以及该技能的参考与配置文件；后端访问权限和费用需另行解决。

• 编辑插图
• 内容设计

在生成漫画页面之前，先规划每个分镜要讲授的内容。

可用的图像后端；运行随附的 PDF 合并脚本需要 Bun 或基于 npx 的 Bun 运行时。

• 漫画
• 教育设计
• 叙事

围绕一个中心创意生成文章封面，并明确构图和视觉风格。

需要可用的光栅图像后端，以及该技能的配置和艺术指导参考资料。

• 编辑设计
• 封面图像

采用基于文件的设计工作流，制作原型、演示概念和可复用的视觉系统。

需要具备文件操作能力的智能体，以及仓库中的方法论、内置指南、参考文档和脚本。导出和导入路径各有其前置条件。

• 原型设计
• 设计系统
• 演示文稿

在可检查的矢量文件中明确呈现关系、标签和连接线路径。

用于 SVG 的文本/代码环境；运行所提供的 PNG 转换脚本需要 Bun 或基于 npx 的 Bun。

• 图表
• SVG
• 信息设计

通过受支持的提供商运行图像生成和编辑任务，包括批处理工作流。

需要 Bun 或基于 npx 的 Bun 运行环境、完整的提供商适配器，以及所选受支持路由所需的凭据或登录状态。

• 图像生成
• 批处理工作流
• 视觉素材

根据材料选择合适的比较、层级、流程或概览布局，将内容转化为信息图。

需要可用的栅格图像后端，以及布局、风格和配置参考资料。

• 信息图
• 信息设计

生成插画式幻灯片并组装成用于分享的图像式演示文稿；无法单独编辑幻灯片中的各个对象。

需要一个光栅图像生成后端，以及用于运行 PPTX/PDF 组装脚本的 Bun 或基于 npx 的 Bun。

• 演示文稿
• 编辑设计

创建一组视觉风格一致的小红书图片卡片，每张卡片聚焦一个核心观点。

一个可用且具备适当参考支持的光栅图像后端，以及配置和卡片布局参考资料。

• 社交媒体图形
• 内容设计
• 图片卡片

将源材料转化为一篇易于阅读的HTML文章，并配以编辑排版、版面设计和插图。

文档所述的构建方式使用Node/npm、Vite、React、TypeScript和 Reacticle。文档提取及可选的PDF输出可能需要其他工具；生成图像需要另行提供的后端。

• 编辑设计
• HTML
• 长篇内容

分析参与者的卡片分组，以提出导航类别并识别模糊项目。

请提供完整的卡片分类结果，包括每位参与者的放置方式、标签和研究方法。此技能分析所提供的证据；参与者招募和数据收集需另行开展。

• 用户体验研究
• 综合分析

规划首次点击测试，以检查用户能否判断从何处开始执行任务。

提供界面或原型、用户目标和招募标准。该技能会创建测试计划；执行测试场次和收集点击数据需要另行设置研究。

• 用户体验
• 设计指南

将源材料转化为带插图的幻灯片，并组装成PPTX；幻灯片内容采用图像形式，而非可单独编辑的对象。

需要 Python 3、可用的图像生成后端，以及仓库中的组装和状态记录脚本。实际执行时必须具备所引用的工作流文档。

• 演示文稿
• 图像生成

将品牌色转化为一套可用的界面角色及前景与背景配色组合。

提供品牌色、界面角色和无障碍目标。使用实际组件状态和对比度检查工具评估拟议的颜色组合。

• 色彩设计
• 设计指南

对组件行为和外观给予同等细致的说明，使其可供实现。

请提供组件用途、视觉变体和目标平台。产出是用于实现和测试的规范，而不是已经实现的组件。

• 设计系统
• 规范

设计系统说什么、期待用户回应什么,以及两者不一致时如何恢复。

请提供支持的任务、渠道限制和确认要求。语音流程还需要进行设备和语音识别测试;仅凭书面对话无法确定识别质量。

• 用户体验
• 设计指南

将界面层级转换为深色表面，而不是反转其颜色。

从现有的浅色模式调色板、组件示例和媒体资源开始。使用渲染后的界面检查深色模式对比度、主题切换和图像处理。

• 色彩设计
• 设计指南

从同一内容来源生成备选幻灯片版式,然后使用本地编辑器预览并导出。

需要 Node.js 20+、npm，以及技能随附的生成器。编辑和导出功能请使用其本地预览服务；通用静态服务器不提供这些 API。

• 演示文稿
• HTML 幻灯片
• PPTX

选择能让比较易于理解的图形，而不是看起来最复杂精巧的图表。

请提供实际数据、字段定义、读者的问题和显示约束。此技能用于指导图表设计；数据验证和图表实现仍属于独立任务。

• 数据可视化
• 设计指南

为视觉决策赋予可供组件复用的名称和关系。

请提供现有视觉值、组件示例和命名约束。此技能负责定义令牌名称及其关系；导出工具和框架集成需要单独设置。

• 设计系统
• 规范

采集在多次研究环节之间逐渐展开的体验，而不是试图在一次访谈中重构这些体验。

请提供研究目标、参与者标准、时间跨度和可行的记录工具。输出是一份研究计划；招募、定期沟通和参与者数据收集仍需另行开展。

• 用户体验研究
• 研究规划

先确定所需的截图，再将其作为实现目标。

需要目标图像；如果未提供，则需要图像生成权限。具体工具要求取决于所选的引用工作流，仅根据入口文件无法确定。

• 视觉迭代
• 游戏设计
• 原型设计

呈现用户视角，同时明确区分直接证据与解释。

一个能够读取研究笔记的智能体、明确定义的用户或细分群体，以及该地图应为之提供依据的设计决策。

• 用户体验研究
• 综合分析

让故障说明发生了什么，并在不丢失用户工作的情况下提供解决途径。

需要一个能够读取受影响流程、已知故障情况以及产品实际支持的恢复操作的智能体。

• 用户体验
• 设计指南

使用 Code Connect 将已发布的 Figma 组件映射到匹配的代码组件。

已连接的 Figma MCP、对已发布组件和代码库的访问权限，以及当前有效的 Code Connect 使用资格和编辑权限。

• Figma
• 设计系统
• 开发交接

记录代理在实现 Figma 设计时应使用的仓库路径、组件和约定。

需要 Figma MCP 连接并具备目标代码库的访问权限；目标规则格式取决于编码代理宿主。

• Figma
• 设计系统
• 代理规则

创建可编辑且与其设计系统保持关联的 Figma 设计稿。

需要已连接的 Figma MCP、目标文件访问权限、已发布的设计系统，以及用于画布操作的配套 figma-use 技能。

• Figma
• UI 设计
• 设计系统

构建一个可复用的 Figma 组件库，先从设计令牌开始，再添加组件。

Figma MCP，具备可编辑文件访问权限、代码库访问权限，并配有配套的 figma-use 技能及辅助参考资料。

• Figma
• 设计系统
• 组件库

使用目标代码库的组件和约定实现 Figma 设计，然后将结果与设计进行比较。

已连接的 Figma MCP、对选定设计和目标代码库的访问权限，以及用于视觉验证的可运行预览。

• Figma
• 前端设计
• 开发交接

明确从第一个字段到成功提交的完整路径，包括更正和再次访问。

需要一个能够读取表单简述、必填字段、验证规则以及任何现有表单界面的代理。

• 用户体验
• 设计指南

将带尺寸的建模任务转化为可检查、可调整的 FreeCAD 对象。

需要 FreeCAD 及其自带的 Python;GUI 工作还会用到自带的 PySide,场景图工作则使用 Pivy。

• 3D 设计
• CAD
• Python

使用项目已配置的凭据，通过受支持的提供商生成并保存图像资产。

需要受支持提供商的 API 密钥和网络访问权限；模型可用性和使用费用必须另行确认。

• 图像生成
• 视觉资产

设计手势之前、期间和之后会发生什么,而不仅仅是最后的滑动操作。

需要一个能够读取交互需求说明、目标平台,以及可通过按钮或菜单执行的操作的智能体。

• 用户体验
• 设计指南

准备图像提示词，并通过可用的原生图像工具或已配置的本地 API 工作流进行生成或编辑。

本地 API 模式要求在 Garden 中明确启用、具备 Node 脚本并配置凭据。原生模式依赖宿主图像工具。必须在相应环境中核实模型访问权限、定价和支持的参数。

• 图像生成
• 提示词设计
• 图像编辑

评审界面可用性，并记录每项发现背后的证据，不将专家判断表述为参与者研究。

需要一个能够检查界面的智能体、一组明确的用户任务，以及相关的领域约束。

• 用户体验
• 设计指南

在制作卡片之前，选择烫箔效果或随视角变化的全图转换效果。

需要图像生成工具、Python、Blender，以及用于运行交付查看器的 Web 运行环境。来源提到会在流程中安装本地依赖项。

• 3D 设计
• 收藏卡
• Blender

依据艺术方向制作短片，而不是一连串幻灯片转场。Huashu Art Motion 在本地渲染工作流中结合了代码绘制的场景、角色精灵和动效审查。

本地渲染需要 uv、FFmpeg 和 Playwright Chromium。请提供现有的角色帧,或使用单独的图像生成流程制作类人精灵;音频和字体需要自备素材并取得相应授权。

• 艺术动画
• Canvas
• 短片

根据视觉参考资料、设计规则和令牌创建可复用的设计 Skill。

需要文件访问权限、合适的参考资料检查工具、用于运行 validate.mjs 的 Node，以及通过浏览器审查来增强视觉效果方面的可信度。工具的可用性会影响信息提取的保真度。

• 设计系统
• Skill 创建
• 设计令牌

为图标建立一致的构造与命名系统，而不是收集彼此无关的符号。

需要一个能够检查代表性图标、预期尺寸以及所需设计和代码格式的智能体。

• 设计系统
• 规范

让委托创作或反复使用的插画拥有统一的视觉语言，并在界面中发挥明确作用。

需要一个能够检查视觉参考、产品配色以及插画将出现的界面和尺寸的智能体。

• 用户体验
• 设计指南

把视觉幻灯片转换为结构化演示文稿,而不是在截图上方叠放可编辑文字。

需要 editppt CLI、合适的图像生成能力,多页运行还需要多智能体执行。PaddleOCR 是可选的已配置辅助工具;离线提示的质量表现有所不同。

• 演示文稿
• PowerPoint
• 重建

先确定信息应归于何处，再决定导航的呈现形式。

需要产品内容和用户任务证据；来源未要求使用特定的设计应用程序。

• 用户体验策略
• 内容结构

将研究目标转化为鼓励受访者提供证据、而非暗示答案的问题。

研究目标、参与者标准和访谈限制是主要输入；不提供录制或招募服务。

• UX 研究
• 访谈

围绕人们试图完成的事情,重新审视产品决策。

需要用户研究资料或明确标注的假设;它本身不会收集访谈。

• 用户研究
• 产品战略

把零散的触点连接成用户真正经历的完整体验。

使用现有的用户画像、研究和分析数据;未设定任何自动情绪测量。

• 用户体验研究
• 用户旅程图

围绕一个预期转化目标，统一页面的论述逻辑与视觉规则。

不要求使用特定的应用运行时；实现示例引用了 Tailwind 值、IntersectionObserver 和可选的动效工具。

• 落地页
• 文案写作
• 网页设计

在生成组件之前，将真实的产品主张与页面区块关联起来。

需要一个兼容的、使用 Tailwind 的 React 或 Next.js 项目；引用的 UI 组件和可选的品牌分析工具可能需要单独设置。

• 落地页
• 文案写作
• 前端

为相关页面布局定义共用的列、外边距和响应式行为。

没有指定的运行时依赖；需要真实的内容约束才能选择有用的网格值。

• UI 设计
• 响应式布局

在等待期间说明正在发生什么，同时不对进度造成误导。

准确的操作耗时和进度能力必须由产品或实施团队提供。

• 交互设计
• 加载体验

让界面适应语言差异，而不只是替换翻译后的字符串。

需要目标区域的文本、字体以及适当的语言或文化审查；不附带自动化本地化平台。

• 设计系统
• 本地化

先构建并测试标志，再将其扩展为完整的品牌套件。

来源描述了不依赖第三方库的 Python 辅助脚本，但实际图像渲染需要可用的渲染器，例如 CairoSVG、Inkscape、Chrome 或其他受支持的选项。

• 品牌设计
• Logo Design
• SVG

向工程团队交付小型交互背后的行为，而不只是动画参考。

不要求使用特定的动效库；仍需在目标设备上进行测试。

• 交互设计
• UI 交付

让动画决策可跨组件和团队复用。

需要令牌实现或平台上的等效机制；来源并未规定必须使用某个动画框架。

• 设计系统
• 动态效果

使用参考图像和附带的 Python 脚本，通过 OpenRouter 生成或编辑图像。

需要 uv、附带的 Python 脚本，以及具有相应模型访问权限和额度的 OPENROUTER_API_KEY。

• 图像编辑
• 图像合成

将信息层级转化为易于识别的导航控件，以及通往各个目的地的清晰路径。

需要信息层级和任务优先级；不提供导航组件包。

• 交互设计
• 导航

先帮助新用户获得有用的结果，再要求他们了解整个产品。

后续的任何衡量都需要针对具体产品定义激活标准并部署监测。

• 交互设计
• 新用户引导

将品牌系统应用于 HTML 页面或幻灯片演示文稿,并根据所选格式使用合适的布局规则。

基于 URL 的品牌提取需要 Firecrawl。默认输出避免依赖外部 JavaScript,但字体或图片资源仍可能需要各自的可用性和使用权利。

• 网页设计
• 演示文稿
• 品牌系统

一份立场鲜明的前端指南,适用于富有表现力的落地页、作品集和交互式演示。

需要一个前端项目,以及任何经过审慎选择的动画库;该指南不要求特定的单一运行时。

• 前端设计
• 动效
• 字体排印

在视频时间线上设置样式之前，先以明确的数据结构保存字幕文本和时间信息。

一个 Remotion 项目、@remotion/captions，以及相关的转录、导入和显示参考文件。

• 视频
• 字幕

根据视频需求设置 Remotion 项目和合成,并在开发期间提供可用的预览。

Node.js、Git、包安装、Remotion Studio,以及相关的合成与布局参考资料。

• 视频
• React

通过调整 React 源码公开图层、时间和控件的方式，使视频可在 Studio 中编辑。

需要支持文档所述 Interactive API 的 Remotion 版本；所述可编辑路径插值还需要 @remotion/paths。

• 视频
• React
• 交互

在 Remotion 中制作动画地图，并根据预期镜头选择地图技术、服务提供商和数据。

需要 Remotion，以及所选技术的库和数据；根据所采集的来源，Mapbox 需要密钥。

• 视频
• 地图

编写行为类似视频时间线的 React 标记，而不是使用 CSS 动画的网页。

需要与项目版本匹配的 Remotion 和特定功能软件包；链接的参考资料决定额外的媒体、效果、字体或导出要求。

• 视频
• React
• 动态效果

固定的命令序列使用宏；建模任务需要逻辑时使用脚本。

需要 Rhino 7 或更高版本；来源建议在 Rhino 8 环境中使用统一脚本编辑器。

• 3D 设计
• CAD
• 自动化

由滚动控制的预渲染镜头旅程，而非实时 3D 世界。

文档所述流程使用 Higgsfield 和 Monid 视频路径，以及 ffmpeg/ffprobe 和浏览器环境。提供商账户、点数、模型能力及任何可选图像路径都需要重新核实。

• 滚动动画
• 视频
• 落地页

设计完整的信息检索体验，包括搜索失败的情况。

搜索服务以及搜索查询的埋点与监测，需要在本指南之外另行实现。

• 交互设计
• 搜索

揭示客户所见体验背后的运营工作。

需要利益相关者和流程证据；本身不会访问运营系统。

• 用户体验策略
• 服务设计

编写 Slang 着色器，并检查其输入、资源和输出如何连接到渲染器。

需要适用于目标后端的 Slang 编译和渲染器环境；有关集成的结论还需通过宿主端验证。

• 着色器
• GPU 图形
• 3D 设计

根据关系和用途选择间距，而不是孤立地调整像素值。

不要求使用特定的令牌工具；具体应用取决于现有组件系统。

• UI 设计
• 设计令牌

描述组件在每种状态下接下来可能发生什么。

无需指定的 state-machine 软件包；实际实现和测试仍属于后续工作。

• 交互设计
• 行为建模

让同一个组件库无需复制结构即可改变外观。

实现时使用项目的令牌系统或平台上的等效方案；运行时切换功能必须构建并经过测试。

• 设计系统
• 主题化

以项目所需的形式获取现有品牌标识或服务图标。

需要通过网络访问注册表或 CDN。对于简单的 URL 获取，React、CLI、Figma 和 MCP 集成只是可选接口，并非前置条件。

• 品牌资源
• SVG
• 云架构图

为已加载的角色或产品模型制定明确的播放与混合策略。

需要一个可运行的 Three.js 项目和渲染器;请对照已安装的版本核实来源中的示例。其他控制器和加载器取决于所选方案。

• 3D
• Three.js

在添加表面样式或动画之前,先选择形状的表示方式。

需要一个可运行的 Three.js 项目和渲染器;请对照已安装的版本核实来源中的示例。其他控件和加载器取决于所选路径。

• 3D
• Three.js

使用画布和相机的实际坐标，将手势与目标 3D 对象关联起来。

需要一个可运行的 Three.js 项目和渲染器；请根据已安装的版本核对来源示例。其他控件和加载器取决于所选方案。

• 3D
• Three.js

通过有明确意图的照明设置让模型清晰可辨，而不是不加区分地提高亮度。

需要一个可正常运行的 Three.js 项目和渲染器；请根据已安装的版本核对来源示例。额外的控制器和加载器取决于所选方案。

• 3D
• Three.js

让着色模型与表面相匹配，然后在预期光照下检查效果。

需要可正常运行的 Three.js 项目和渲染器；请根据已安装的版本核对来源示例。是否需要其他控件和加载器取决于所选方案。

• 3D
• Three.js

将屏幕特效视为有序的渲染管线，而非互不相关的滤镜。

需要一个可运行的 Three.js 项目和渲染器；请对照已安装的版本核实来源示例。其他控件和加载器取决于所选方案。

• 3D
• Three.js

当材质预设无法表达所需效果时，使用自定义顶点或像素行为。

需要一个可运行的 Three.js 项目和渲染器；请根据已安装的版本核对源代码示例。其他控件和加载器取决于所选实现路径。

• 3D
• Three.js

在诊断表面拉伸或褪色问题之前，先为每张图像分配正确的角色。

需要一个可运行的 Three.js 项目和渲染器；请对照已安装的版本核查来源示例。其他控件和加载器取决于所选方案。

• 3D
• Three.js

基于一小组有文档记录的文本样式,创建清晰易读的层级。

需要实际的字体文件或可用的平台字体,才能进行有意义的视觉验证。

• UI 设计
• 字体排印

在安排研究场次之前，先明确研究需要了解什么。

需要可用的测试材料并能接触到参与者；不提供招募服务或研究场次平台。

• UX 研究
• 可用性测试

展示用户为完成一个目标可以采用的路径。

来源未要求使用任何绘图应用程序；所选输出格式必须保留清晰的符号表示。

• 原型设计
• 用户流程

为产品决策提供一致的用户参照，同时避免虚构客户故事。

基于研究的论断需要真实的用户证据；所提供的产品网址可能需要另行调查。

• 用户体验研究
• 用户画像

根据界面截图、镜头指令和定时编排，规划并制作一部 Remotion 产品视频。

需要 Remotion/Node 环境、浏览器截图工具和 ffmpeg。部分组件需要 Three.js 相关软件包；可选的音乐分析和剪映导出还会引入额外依赖。请单独审查 Remotion 的适用许可证。

• 产品视频
• Remotion
• 动态设计

先决定最应该被注意到的内容,再让构图支持这一选择。

需要真实内容并在渲染后审阅;不附带视觉评分工具。

• UI 设计
• 构图

先确立视觉方向,构建一个有代表性的界面并在浏览器中审阅,然后再扩展设计。

需要具备编码能力的智能体,以及可在浏览器中渲染的前端环境。所选模式可能会用到 React、Babel、图表或其他库;浏览器验收需要合适的浏览器工具。

• 前端设计
• 原型设计
• 设计系统

构建带有定时视觉场景和可选旁白的浏览器演示;录制是单独的一步。

使用 Vite、React、TypeScript 和 Node 工具链。可选的 TTS 取决于所选服务商、凭据和适配器;最终录制需要浏览器捕获或录屏软件。

• 演示文稿
• 动效
• 旁白

让低保真屏幕足够精确，以便讨论其行为和内容。

不要求使用特定的线框图工具；可用的需求简报必须包含内容和状态信息。

• 原型设计
• 线框图