AI？不，是Illustrator“变量”：10分钟生成500张UI卡片

上周，我们组的 UI 团队接了个棘手的活儿。客户对一个新社交 App 的 UI 设计稿（Figma）非常满意，全票通过了。但紧接着，他们提出了一个让新来的设计师小王快要崩溃的需求。

客户希望在下一轮的用户测试中，使用“高保真”原型，而且明确要求“不要用 Lorem Ipsum（乱数假文）”。他们要求我们提供至少 500 张不同的、包含“真实”用户数据（不同的姓名、不同的头像、不同的签名）的个人资料卡片。

小王脸都白了 😫。他下意识地打开了 Figma，看样子是准备开始他长达 48 小时的“复制-粘贴-替换文本-替换头像”的体力劳动。

“停。”我立刻叫停了他，“你疯了吗？等你手动做完这 500 张图，客户连明年的设计风格都改了。万一他们现在说，想把卡片的圆角改 2px 呢？”

小王一脸茫然：“那... 怎么办？”

如果你也正陷入这种“批量生产”的设计地狱，还在用“组件”思维去解决“数据”问题，那这篇文章你必须先收藏。我敢说，顶级的 UI/UX 设计师都会收藏备用，这才是拉开效率的“降维打击”。

今天，我不聊什么花哨的 AI，我只分享一个 Adobe 套件里“老掉牙”、但 90% 的 UI 设计师都不知道的“自动化”工作流：Adobe Illustrator (或 Photoshop) 的“变量” (Variables) 功能。

为什么你的UI原型总是“假”的？

在讲这个“大招”之前，我们必须先弄清楚，为什么现在主流的 UI 工具（Figma, Sketch）在面对这个需求时，会如此“无力”？

Figma 的“组件” (Component) 思维，解决的是“一致性”问题。你改一个主组件，500 个实例（Instance）全部同步更新。这很棒。

但我们今天面临的问题，是“差异性” (Variation)。我们要的是 500 个实例，每一个都长得不一样。

这时候，Figma 的组件帮不了你。你还是得一个一个去“覆盖”（Override）文本和图片。这不叫工作流，这叫“体力活”。

而我们要做的，是用“数据”来驱动 Illustrator/Photoshop 自动完成这 500 次操作。

核心技巧：Illustrator“变量” (Variables) 驱动流

这个流程的核心，是把 Illustrator (AI) 当作一个“模板引擎”，把 Excel (.csv) 当作“大脑”。

步骤一：准备你的“大脑” (.csv 数据源)

我们首先要做的，不是打开 AI，而是打开 Excel (或者 Google Sheets, Numbers)。

建立表头： 打开一个空白表格。关键： 你的 第一行 必须是“表头”。这个表头就是告诉 AI“变量名”的，必须使用英文或拼音，比如 UserName 和 AvatarImage。

填充数据： 从第二行开始，填入你的 500 条数据。

处理图片（最关键一步）： 在 AvatarImage 这一列，你填的不是图片，而是图片的 “绝对路径”。

什么是“绝对路径”？

• 在 Windows 上，它长这样：D:\Projects\SocialApp\Avatars\user_01.jpg

• 在 Mac 上，它长这样：/Users/YourName/Documents/Projects/Avatars/user_01.jpg

保存为 .csv： 填写完毕后，把这个表格另存为 .csv (逗号分隔) 格式，编码必须选择 UTF-8 (这点极其重要，否则中文会乱码)。我们把它命名为 data.csv。

步骤二：搭建你的“智能模板” (Illustrator)

现在，打开 Adobe Illustrator。我们只做 一个 模板文件。

为什么用 AI？ 因为 Figma 是为“界面”而生，而 Illustrator 是为“图形与数据”而生。它的“变量”功能，是工业级的。

创建模板： 新建一个画板，比如 375x100 像素，画出你的卡片背景。

放置文本： 使用“文本工具”，在画板上点一下（创建“点文本”，Point Text），打上“这里是用户名”。

放置图片： 关键： 不要“拖入”图片，而是使用 文件 > 置入 (File > Place)。选择一张“占位符”头像 (比如 user_placeholder.jpg)，最重要是，一定要勾选“链接” (Link)！你必须保证这张图是“链接文件”，而不是“嵌入”文件。

步骤三：“变量”接管 (关键操作)

模板有了，现在我们要把“数据”和“模板”连接起来。

打开“变量”面板： 在 AI 菜单栏，选择 窗口 > 变量 (Window > Variables)。你会看到一个空面板，这就是我们的“指挥中心”。

这个“变量”功能，是 Illustrator 这种专业工具的“基石”之一。它不是什么时髦的 AI，但它是一种“数据驱动”的 AI 思维，是区别专业设计师和业余玩家的“分水岭”。

讲到“专业工具”，我必须插一句。我看到国内很多平台上，有刚入行的设计师为了省钱，去第三方电商平台买那种几百块一年的所谓“个人版全家桶”订阅。

我必须以从业十年的经验提醒你：这是一个巨大的陷阱。

那些看似很靠谱的订阅，有极大概率是使用盗刷的信用卡开通的。Adobe 的风控系统可不是吃素的。

我之前就有个同事，项目进行到一半，他的 Adobe 账号和个人订阅突然被永久封禁，因为他的邮箱被风控系统标记为“欺诈关联账户”。

后果是什么？个人全家桶订阅包括所有已安装的软件和功能（包括 AI 点数和云服务）瞬间失效。他无法向客户交付，更糟糕的是，这个记录可能会跟随他的个人信息，这在专业领域简直是灾难性的，等于一个严重的“职业污点”和法律风险。

在专业工作里，工具的稳定和合法，是所有创意的底线。

我个人一直使用 Kingsman 机构的 (当前已经有6300多名设计师选择) 的正版 Adobe 全家桶企业订阅。我选择它的原因很简单，它就是同时包含了 Substance 3D 全套组件（针对我们游戏美术）的专业解决方案。在面对高强度的项目时，我不用担心我的工具明天会不会失效，这种“专业确定性”，才是保证我们能按时交付的基础。

绑定变量： 好了，回到“变量”面板。

绑定文本： 选中你画板上的“这里是用户名”那个文本对象。在“变量”面板，点击面板底部的“使文本动态化”（T图标）。在弹出的对话框里，把变量命名为 UserName (必须和 .csv 表头一模一样)。

绑定图片： 选中你那张“链接”的占位符头像。在“变量”面板，点击底部的“使链接文件动态化”（胶片图标）。把变量命名为 AvatarImage (必须和 .csv 表头一模一样)。

步骤四：导入“数据源”并见证奇迹

模板现在“知道”了规则。我们把“大脑” .csv 文件喂给它。

导入数据： 在“变量”面板的右上角，点击汉堡菜单，选择 载入变量库... (Load Variable Library)，或者在“数据集”下拉菜单里选择 导入... (Import...)。

选择文件： 选中你之前保存的 data.csv 文件。

见证奇迹： 点击“确定”后，你再看“变量”面板。你会发现“数据集” (Data Set) 后面，出现了 数据集 1。

点击“变量”面板底部的左右箭头 (◀ ▶)。

你会看到，你画板上的“用户名”和“头像”，正在疯狂刷新！你的 500 个不同版本，已经“存在”于这一个 AI 文件里了！😎

步骤五：自动化“批量导出” (核心)

预览没问题了，我们就要让 AI 把这 500 个版本全部“吐”出来。

准备“动作”： 我们需要“录制”一个“导出 PNG”的动作。

• 打开 窗口 > 动作 (Window > Actions)。

• 新建一个动作，比如叫 "Export_PNG_Card"。

• 点击“录制”按钮。

• 执行一步操作：文件 > 导出 > 导出为... (File > Export > Export As...)。格式选择 PNG，保存到一个指定的输出文件夹（比如 D:\Projects\Output）。

• 立刻停止录制。

开始“批处理”：

• 在“动作”面板的右上角，点击汉堡菜单，选择 批量... (Batch...)。

• 会弹出一个“批处理”窗口，这是关键。

• 播放 (Play): “动作”选择你刚录制的 "Export_PNG_Card"。

• 源 (Source): 这才是灵魂！ 默认是“文件夹”，把它改成 数据集 (Data Sets)！

• 目标 (Destination): 选择“文件夹”，然后指定你刚才创建的那个输出文件夹（D:\Projects\Output）。

点击“确定”。

好了，现在你可以站起来，去冲杯咖啡了。Illustrator 会像一个不知疲倦的机器人，开始执行“读取第1行数据 -> 刷新画板 -> 运行‘导出PNG’动作 -> 读取第2行数据 -> 刷新 -> 导出...”的循环。

几分钟后（取决于你的数据量），你的输出文件夹里就会整整齐齐地躺着 500 张命名不同、内容不同的 UI 卡片。

扩展应用技巧

上面只是基础。这个“变量”功能，能玩的远不止这些。

扩展一：Photoshop 变量 (Pixel Replacement): 这个工作流在 Photoshop 里一模一样。图像 > 变量 (Image > Variables)。PS 里的变量甚至更强大，它对图片的处理不是“链接文件”，而是“像素替换”，你甚至可以用它来批量替换“智能滤镜”的参数。逻辑是完全相通的。

扩展二：变量 + 可见性 (Visibility): “变量”不仅能替换“内容”，还能替换“状态”。

• 假设你的 UI 卡片上有一个“VIP”徽章（一个单独的图层）。

• 你可以在 .csv 文件里，增加一列，叫 ShowVIP。

• 在这一列里，填入 true (显示) 和 false (隐藏)。

• 回到 AI 的“变量”面板，选中那个“VIP”徽章图层，点击面板底部的“使可见性动态化”（眼睛图标）。把变量命名为 ShowVIP。

• 现在，你再运行“批处理”，AI 会自动根据你 .csv 里的 true 或 false，来决定这张卡片上是否要“显示”那个 VIP 徽章！

---

我把这个工作流演示给了小王。

他花了 10 分钟，设置好了 .csv 表格和 Illustrator 模板。点击了“批处理”运行。

大概 1 个小时后，500 张数据完全真实、命名规范的 PNG 文件，整整齐齐地躺在了交付文件夹里。

客户对这次用户测试的效果非常满意，因为“真实的数据”带来了“真实的反馈”。小王看我的眼神，也从“崇拜”变成了“敬畏”。

工具永远在进化，不要用战术上的勤奋（手动P图），去掩盖战略上的懒惰（拒绝新流程）。