用Codex做工具-设计师的 AI 实践经验分享

最近，我用 Codex 做了一个小工具：用户打开网页，填写活动主题、分享人、时间、地点等信息，就能按固定模板自动生成一张海报，并下载图片。

这个工具不复杂，但对我很有启发。它让我意识到：设计师手里很多重复性、规则明确的工作，不一定每次都要手动做，也可以被整理成一个可复用的小工具。

一、为什么要做这个工具？

工作中经常会遇到这类需求：

模板基本固定，但内容需要反复替换。比如培训海报、节气海报、公众号长图通知等。每次可能只是换图上的文案信息，版式几乎不做改动，但设计师仍然要打开源文件、逐条改字、切图导出。

单次看不费事，但如果频率高，就会变成一种持续打断。

而且，这类需求还有几个常见问题：

• 需求方同事不一定会用 Figma、PS 等设计工具；
• 开放编辑权限字体、图层、排版规则容易被改乱；
• 多人处理时，视觉标准容易不统一。

所以我想尝试把这件事工具化：

把固定模板保留下来，把可变内容变成表单字段。使用者只需在表单填写信息，系统自动生成符合模板规范的海报。

二、我是怎么和 Codex 协作的？

1.先讲清楚场景，而不是直接让它写代码

我没有一开始就说：“帮我写一个海报生成器”。我先告诉 Codex我目前现状：

我有一套固定的活动海报模板，背景和视觉风格不变，变化的是活动文案信息。使用者是不会设计工具的同事，他们只需要填写内容并下载图片。我希望工具能降低使用门槛，同时保证模板视觉不被破坏。

Codex 给出的方案是：

将固定视觉部分从 Figma 导出成背景图，网页端只负责填写字段、按固定位置绘制文字，最后通过 Canvas 导出 PNG。

这个方案很适合当前需求，它只把真正需要变化的内容抽出来处理。

这一步让我感觉很明显：和 Codex 协作时，先让它理解场景，比直接让它写代码更重要。

2.把设计规则翻译成可执行规则

确定方案后，我开始把设计稿里的视觉规则，拆成 Codex 能实现的规则。

比如海报主题文案，我不能只说：

“标题要自适应，不要超出。”

这句话太模糊。

Codex 需要的是更具体的规则：

• 最大字号 128px；
• 最多输入 20 个字符；
• 只显示一行；
• 不允许换行；
• 不允许溢出；
• 不显示省略号；
• 左右边距各 96px；
• 行高 100%；
• 顶部对齐；
• 当文字超出可显示宽度时，自动缩小字号；
• 用户修改内容后，预览实时更新。

这些看起来是设计规范，但对 Codex 来说，就是实现条件。

这也是这次实践里最重要的经验：

Prompt 的关键不是写得长，而是规则要明确。

“做得好看一点”“文字自适应”“排版不要乱”这些表达，很难直接落地。

但当把字号、边距、限制、异常情况说清楚，Codex 输出的结果就会更接近可交付状态。

3.调试重点：让结果真的符合设计标准

这个工具稍微花时间调整的地方是文字适配。因为活动主题没办法字符数不固定，就不能用固定的字号来呈现。为了让短标题保持足够大的视觉张力；长标题又必须完整显示在一行内，不能换行、不能溢出、不能省略。

最后我和 Codex 调整出的逻辑是：

标题最大字号 128px 绘制文字；

再计算文字实际宽度；

如果超过可显示区域，就自动缩小字号；

直到文字可以完整显示在一行内。

同时，顶部对齐、左右边距、行高等规则都要保持不变。

再经过对细节的多处调试，最终生成符合我预期的最终版本。

三、从 demo 到可交付工具

工具在本地跑通后，我继续让 Codex 帮我整理项目文件和部署方式。

因为我最终想要的不是“我电脑上能打开”，而是“同事打开链接就能用”。

这个项目是纯前端静态页面，不需要服务器和数据库，所以可以部署到 Netlify 或 Vercel 这类平台上。

部署后，使用者只需要打开链接：

1. 选择海报类型；
2. 填写主题、时间、地点等信息；
3. 查看预览；
4. 点击下载图片。

这样，这个工具就从一个本地 demo，变成了可以真实交付的小工具。

工具界面截图：

四、从做设计到做流程：设计师的能力边界正在被拓宽

1.设计师也可以做自己的小工具

设计师不一定要完整掌握开发能力，才可以做出有用的工具。

更关键的是：

能不能发现重复流程；

能不能讲清楚使用场景；

能不能定义清楚规则。

设计师的优势不是写代码，而是理解场景、定义规则、判断体验。

Codex 只是把这些规则转化成了网页和代码。

2.AI 不只是用来出图，也可以用来做流程

很多设计师使用 AI，可能更多是生成图片、找灵感、写文案。

但这次实践让我觉得，AI 对设计师还有一个很重要的价值：

帮助我们把重复流程工具化。某些场景不一定要做成复杂系统，可能一个网页、一套表单就能解放我们的双手。

3.Prompt 本质上是一种需求表达能力

好的 Prompt 不是一句简单命令，而是一次需求拆解。

需要我们向AI讲清楚需求：

• 背景是什么；
• 谁来使用；
• 输入什么；
• 输出什么；
• 哪些内容可编辑；
• 哪些内容不可变；
• 视觉规则是什么；
• 异常情况怎么处理；
• 最终交付标准是什么。

这些内容越清楚，AI 越容易给出可用结果。

这其实也在训练设计师的需求表达能力。

五、结语

这次实践并不是一个多复杂的项目，但它让我真实感受到：AI 能帮设计师做的，不只是提升某一步效率，而是让我们有机会重新整理自己的工作流程。

未来我也会继续把 AI 用到更多真实工作场景中。对设计师来说，重要的或许不是立刻掌握多复杂的技术，而是开始用新的方式理解问题、表达规则，并把设计能力延伸到更高效的工作流程里。