Design Skills
精选可复用的设计与界面工作流 Agent Skills。
figma-use
Figma
可靠调用 Figma Canvas 工具前所需的基础 Skill。
Figma & Canvas · Workflow & Handoff
frontend-design
Anthropic
构建具有鲜明视觉风格、可直接用于生产环境的前端界面。
UI & Frontend · Visual Design
figma-code-connect
Figma
通过 Code Connect 模板将 Figma 组件映射到代码。
Figma & Canvas · Design Systems · Workflow & Handoff
canvas-design
Anthropic
按照明确的设计理念创建视觉艺术与画布作品。
Visual Design
figma-create-new-file
Figma
通过 MCP 创建新 Figma 文件所需的基础 Skill。
Figma & Canvas · Workflow & Handoff
brand-guidelines
Anthropic
按照 Anthropic 品牌色彩与字体规范制作设计内容。
Brand & Identity
figma-design-to-code
Figma
将 Figma 设计上下文转为可上线的前端代码。
Figma & Canvas · UI & Frontend · Workflow & Handoff
algorithmic-art
Anthropic
使用 p5.js 与交互参数生成算法艺术作品。
Visual Design · Creative Coding
figma-generate-design
Figma
基于设计系统资源从应用页面生成 Figma 界面。
Figma & Canvas · UI & Frontend
theme-factory
Anthropic
为幻灯片、文档和 HTML 布局应用统一视觉主题。
Visual Design · Brand & Identity
figma-generate-library
Figma
从代码库构建或更新 Figma 设计系统库。
Figma & Canvas · Design Systems
web-artifacts-builder
Anthropic
使用现代前端工具构建多组件 HTML 产物。
UI & Frontend · Creative Coding
figma-generate-diagram
Figma
通过 MCP 在 Figma 中生成图表所需的基础 Skill。
Figma & Canvas · Workflow & Handoff
figma-implement-motion
Figma
将 Figma 动效规格转换为生产环境应用代码。
Figma & Canvas · UI & Frontend · Creative Coding
figma-use-motion
Figma
借助动效上下文为 Figma 画布节点添加动画。
Figma & Canvas · Visual Design
figma-use-figjam
Figma
指导 Agent 在 FigJam 场景中使用 Figma MCP 工具。
Figma & Canvas · Workflow & Handoff
figma-use-slides
Figma
指导 Agent 在 Slides 场景中使用 Figma MCP 工具。
Figma & Canvas · Visual Design
figma-swiftui
Figma
在 SwiftUI 界面与 Figma 设计之间进行转换。
Figma & Canvas · UI & Frontend