这是 Sketch MCP（Model Context Protocol）和 AI 工具联动时的一组示例 Prompt。
核心思想是：AI 不只是聊天，而是能直接读取、分析、修改 Sketch 文档。
1. Explain the visual layout of the selected Sketch frame
解释当前选中的 Sketch Frame 的视觉布局
AI 会做什么
AI 读取你当前选中的页面/Frame，然后分析：
- 页面结构
- 布局方式
- 间距
- 对齐关系
- 视觉层级
- 颜色与字体
类似于
让 AI 帮你做：
- UI Review
- Design Review
- 设计稿讲解
举例
AI 可能输出：
页面采用纵向布局：
- 顶部是导航栏，高度 64
- 主按钮使用品牌蓝
- 卡片之间间距 16
- 整体遵循 8pt Grid
适合
- 新人接手设计稿
- AI 自动分析 UI
- 设计审查
2. Are there any symbol masters in my active Sketch document that don’t have any instances?
当前 Sketch 文档中，有哪些 Symbol Master 没有被使用？
什么是 Symbol Master
Sketch 里的组件定义。
类似：
Button/Primary
Icon/Search
Card/Product
实例（instance）就是页面里真正使用的组件。
AI 会做什么
扫描整个 Sketch 文件：
- 找出所有 Symbol Master
- 检查是否存在实例引用
- 输出“未使用组件”
作用
用于：
- 清理垃圾组件
- 减小设计系统体积
- 删除历史遗留组件
类似于
前端里的：
dead code analysis
unused component detection
3. List all design tokens used in my Sketch selection
列出当前选中区域使用的所有 Design Token
Design Token 是什么
设计系统变量。
比如：
颜色:
color-primary
字体:
font-body-sm
间距:
spacing-16
圆角:
radius-md
AI 会做什么
分析选中区域：
- 用了哪些颜色 token
- 哪些字体 token
- 哪些阴影 token
- 哪些 spacing token
适合
- 设计系统审计
- Token 迁移
- Design QA
4. Create a vertical stack of four rectangles in Sketch and add a unique gradient pattern to each
在 Sketch 中创建 4 个垂直排列矩形，并给每个添加不同渐变
AI 会做什么
直接操作 Sketch：
- 创建图层
- 自动布局
- 设置尺寸
- 添加渐变
类似于
AI 自动画图。
实际生成
可能得到：
Rectangle 1:
蓝紫渐变
Rectangle 2:
橙红渐变
Rectangle 3:
绿色渐变
Rectangle 4:
黑金渐变
本质
AI 在“写 Sketch”。
5. Fix grammar and spelling mistakes on the selected Sketch frame
修复当前选中 Frame 中的拼写和语法错误
AI 会做什么
读取所有文本层：
Login sucessful
自动改成：
Login successful
还能做
甚至可以：
- 统一大小写
- 改文案风格
- 美化 UX 文案
适合
- UI 文案校对
- 英文产品页面检查
- 国际化前检查
6. Export all Sketch symbols prefixed with “icon/” from the current page as SVGs to my Desktop
导出所有以 icon/ 开头的组件为 SVG
AI 会做什么
扫描：
icon/home
icon/user
icon/search
然后：
- 批量导出 SVG
- 保存到桌面
适合
设计转前端：
Sketch → SVG → React Icon
本质
AI 变成自动化导出脚本。
7. Show the full component hierarchy of my Sketch selection as a tree
以树结构展示当前选中内容的组件层级
AI 会输出
类似：
Page
└── Header
├── Logo
├── Nav
└── Avatar
用途
帮助：
- 理解复杂设计稿
- 分析嵌套关系
- 调试 Auto Layout
类似于
前端里的：
React Component Tree
DOM Tree
8. Generate my current Sketch selection in React
把当前 Sketch 选区生成 React 代码
AI 会做什么
读取：
- 布局
- 颜色
- 字体
- 图层结构
然后输出：
function Card() {
return (
<div className="...">
甚至可能支持
- Tailwind
- CSS Modules
- Styled Components
- React Native
本质
设计稿 → 前端代码
这是最强能力之一。
9. Replace every text layer on the selected frame with a random Apple product name
把所有文本替换成随机 Apple 产品名
AI 会做什么
比如：
原文：
Username
Password
Submit
变成：
MacBook Pro
Vision Pro
iPhone Air
为什么有用？
这是：
UI 压力测试
因为不同文本长度：
- 会撑爆布局
- 导致换行
- 导致组件错位
实际用途
测试：
- 动态文案
- 国际化
- Auto Layout
- 响应式设计
举例
Generate React + Tailwind code for the selected frame.
Requirements:
- Use semantic HTML
- Use flex layout
- Extract reusable Button component
- Preserve 8px spacing system
- Use TypeScript
- Ensure mobile responsiveness
Validation:
- No absolute positioning unless necessary
- No inline styles
本质总结
Sketch MCP 的核心能力：
| 能力 | 本质 |
|---|---|
| 读取设计稿 | 理解 UI |
| 修改设计稿 | 自动设计 |
| 导出资源 | 自动化 |
| 分析组件 | Design QA |
| 生成代码 | Design-to-Code |
| 批量处理 | AI Agent 自动化 |
