AI-Native Design Workflow

Overview

ChatGPT Images 2.0 / 即梦AI / Figma Make / Cursor / CodeX — 一条可复用的 AI 设计流程

很多人用 AI 画图，本质是「多试几次 prompt，碰运气拿一张能看的」——结果难复用，也接不上后面的设计和开发。

我这套流程的区别在于：

• 每一步输入、输出都清楚，不会做到一半又从头乱来
• 海报、质感图、视频帧等都能回到 Figma 继续改结构和组件
• 最终能落到可交接的页面和组件，而不只是一张「好看但用不了」的图

一句话总结：AI 不替你做判断；它帮你省掉重复、机械的体力活，让你把时间花在风格、系统和优先级上。

The Pipeline

需求 / 品牌调性 / 投放目标
   │
   ▼
1. ChatGPT Images 2.0
│   → 海报、运营主视觉、带排版的宣传图
│      ★ 先理解 brief 再出图；文字排版明显更可用
│
└── 需要统一质感或做视频时
     │
     ▼
2. 即梦AI
│   → 统一光影和材质，局部精修
│   → 出短视频、动效版 hero 等动态素材
│
└── 回到页面结构
   │
   ▼
3. Figma Make
│   → 用文字 / 草图 / 现有稿快速生成可点击原型
│
   ▼
4. Cursor / CodeX（配合 Figma MCP、设计系统）
    → 对齐组件库，规范间距与 Auto Layout，补齐状态页和交接说明

Tools by Role

下面按分工说明：每个工具负责什么、不负责什么。

1. ChatGPT Images 2.0 — 稳定出海报和主视觉

2026 年 4 月这版最大的变化：从「直接画一张图」变成「先理解你要说什么，再画」。

先理解 brief： 会先理清信息层级、情绪和构图，再出图，废稿明显变少。

文字更清晰： 海报、运营图、分享图里的标题和说明字，终于能直接用在稿子里。

系列稿更稳： 同一 campaign 要多尺寸、多张图时，风格更容易保持一致。

我只让它做： 主视觉构图、标题层级、排版骨架、投放用图——不负责维护整套 UI 组件库。

常见产出： 主视觉、海报、广告图、OG 图（进 Figma 拆层或直接投放）。

2. 即梦AI — 统一质感，并延展成视频

即梦是字节旗下的 AI 创作平台。在我的流程里，它主要做两件事，而不是当普通素材库：

一句话： 即梦负责「后期精修 + 动起来」——让静态稿更有品牌感，也能直接产出可发的视频。

3. Figma Make — 快速做出能点的原型

用文字描述、手绘草图或现有 Figma 文件，生成带基本布局、可点击的交互原型。

用文字： 从 0 搭 dashboard 区块、流程骨架、空状态 / 结果页等。

用草图： 纸上随便画 → 先验证流程能不能走通，再细修视觉。

用现有稿： 在已有 Auto Layout 和命名规范下续写，减少风格跑偏。

最大价值：不用只靠口述对齐预期——大家对着可点的原型讨论，少几轮「理解不一致」的返工。

4. Cursor / CodeX — 把草稿整理成符合设计系统的稿

对设计师来说，Cursor 更像是 Figma 侧的「批量助手」，而不是单纯的写代码工具：

接 Figma MCP： 根据你的描述在 Figma 里建 frame、文案、间距和 Auto Layout。

认组件库： 有设计系统上下文时，优先用现有组件，避免每页新造样式。

批量页面： 订单结果、权限提示、空状态、响应式变体等——必要但特别耗时的页面。

它不负责替你定审美；负责一致性和规模化。最后拍板仍是设计师。

⚡️ 自研 Figma 插件（多语言文案）

问题： 多语言项目里，手工复制文案到 Figma 很容易对错图层、难维护。

做法： 用 Cursor 写了一个小插件：从 JSON 文案库一键读取，按图层名称自动替换、回填。

结果： 多语言适配从「最容易出错的手工活」变成「点一下就能完成」。

Design Skills 推荐

除了上面的工具链，再分享 2 个我实测下来确实好用的 design skills（用在 Cursor 等 AI 编辑器里）：

1. impeccable

综合表现比 uiuxpromax 这类热门设计 skill 更实用——不只是「好看一点」，而是更贴近真实交付：排版、层级、组件感都更稳。

链接： impeccable.style

2. taste skill

这个仓库里 skill 很多，但日常其实下载两个就够，覆盖「出参考图 → 还原成页面」：

• imagegen-frontend-web skill：配合 image2，生成高质量的前端/UI 设计参考图，用来定方向、对齐审美。
• image-to-code skill：把参考图尽量 1:1 还原成可开发的网页结构，减少从图到稿的手工翻译成本。

我的用法很简单：先用 imagegen 拉出几版靠谱的视觉参考，再用 image-to-code 落到页面骨架，最后仍回到 Figma / Cursor 里按设计系统收口。

Why It Holds

1. 分工清楚： 构图海报 → ChatGPT Images；质感与视频 → 即梦；流程原型 → Figma Make；规范与组件 → Cursor / CodeX。
2. 资产能回流： AI 出的图不是终点，都会进资源库和 Figma，方便后续改版（尤其即梦处理后的质感层、视频截帧）。
3. 最后必须进系统： 再快也要对齐组件、间距、命名和页面状态，否则只是「更快地堆出一堆难维护的稿」。

Impact

• 方向更快： 从 brief 到多款主视觉候选，压缩到分钟级，定方向不用空聊。
• 动效更早： 即梦让「要不要做视频版」在设计阶段就能试，不必等外包。
• 对齐更早： Figma Make 让流程早点能点，减少后期大改。
• 交付更稳： Cursor 把草稿推进到符合设计系统的状态，后续迭代不用每页重写。

即梦和 ChatGPT Images 是前后工序：一个管主视觉和排版，一个管质感和视频，功能不重叠，整条链更顺。