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

使用 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
• 审查报告

为 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、主题基础设施、组件架构。

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

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

• UX 与研究

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 的手势、物理运动和空间层次转译到网页端。

• UX 与研究
• UI 代码

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

• UX 与研究
• 在 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 代码

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

• UX 与研究

遵循 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 与研究