越是临近放假，越是容易遇到这样的场景：我要是休假了，如果有临时需求怎么办，我无法立马支撑处理，但是其实运营的改动并不大，只需要一张设定为固定尺寸的图片。

最近不是在玩CodeArts嘛，我尝试让他帮我写一个设计工具

我的prompt：帮我设计一个网页版的可以做设计图工具，要求页面干净美观，可通过输入尺寸、要求生成用户要求的平面视觉设计，所有的代码都写进一个HTML里面，左边是可供选择的设置区，可以设置宽度和高度，可以输入主标题和副标题，可选居中，左右对齐，可以选择字体和字号，字号选择改为标准像素值（从 12px 到 120px），这样可以精确控制标题的大小。还有字体颜色，视觉风格有多种风格可选，并可以选择一个主色调，风格也要多样性可供选择

然后就直接帮我新建了一个文件，并完成了所欲的代码，最后给我的结论如下：

主要功能

📐 画布设置

• 可自定义宽度和高度（200px-2000px）

• 实时预览尺寸变化

✏️ 文本编辑

• 主标题和副标题输入

• 三种对齐方式：左对齐、居中、右对齐

• 10种字体选择（包括中文字体）

🔤 字号控制

• 精确的像素值选择

• 主标题字号：12px - 120px

• 副标题字号：12px - 120px

• 17个标准字号可选

🎨 颜色设置

• 字体颜色选择器 + 6个预设颜色

• 主色调选择器 + 6个预设颜色

• 实时颜色值显示

🎭 14种视觉风格

1. 简约白 - 干净简洁

2. 现代紫 - 渐变紫蓝

3. 优雅黑 - 深色高端

4. 自然绿 - 清新自然

5. 日落粉 - 温暖浪漫

6. 海洋蓝 - 清新明亮

7. 森林青 - 自然和谐

8. 火焰橙 - 活力激情

9. 赛博朋克 - 科技感

10. 经典蓝 - 专业稳重

11. 柔粉 - 温柔甜美

12. 霓虹绿 - 酷炫发光

13. 奢华金 - 高端大气

14. 玫瑰红 - 优雅浪漫

界面特点

• 左侧设置区：所有设置选项一目了然，分类清晰

• 右侧预览区：实时显示设计效果

• 响应式设计：适配不同屏幕尺寸

• 美观界面：渐变背景、圆角卡片、阴影效果

• 所有代码都整合在一个HTML文件中，您可以直接在浏览器中打开使用。修改任何设置都会实时更新预览效果，所见即所得！

于是我便得到了。当时我只有一个感觉：这东西，比我预期聪明多了。

迭代：让AI听懂“再多一点”

作为一个设计师，看到初版后本能地想要更多功能。我又补了一条prompt：

“可以再增加一些背景风格，比如模糊、毛玻璃等效果，但是没有导出下载按钮，下载如果是带动画的，图片格式要有JPG/gif/png等

装饰元素可以多选，增加一个可以上传本地图片的按钮，并可以设置为左右滑动调整摆放位置。”

这次它给我的升级版可以上传图片了，但是上传的图片还不能满足设计功能，只能变换位置，但作为demo展示，完全够用了。

惊喜：这成了我的效率工具和设计备份

以前要搭建一个这样的工具，我得去找开发同学，排期、沟通、测试，一周能上线都是快的。现在我可以说需求，几分钟就拿到一个可交互的网页，而且全部代码都在一个HTML里，我可以随时下载、修改、保存到本地。以后再遇到需要快速验证设计想法的场景，我不需要再依赖别人，也不需要从头画，直接打开这个自己“定制”的网页，输入参数就能看到效果。

更重要的是，这个网页是本地版的，本身也成了我的设计小助手，一个设计备份。它像一个属于我自己的设计组件库，但比组件库更直观：它直接输出可视化的预览。

虽然还是一个简易版本，但是已经刷新了我对AI变成的认知，真的开始改变世界了。

但到底会不会取代工种和岗位呢。。我觉得是不会的。真正让设计师失业的不是AI，而是只会用一种工具的设计师。当AI能3秒生成一个布局合理的页面时，我们的价值不再是“我会用PS”，而是“我知道什么样的设计对用户是好的”。审美、策略、同理心，这些东西AI还学不会。而且你看，连prompt都是我写的，它只是执行我的想法——我是它的甲方。

所以我的感受是：AI是我们手里的新画笔，而不是替代我们的画师。 它帮我省去了从想法到实现之间的代码门槛，让我能更专注于设计本身。

最后分享一个我的prompt技巧：尽量把需求说具体，比如“要有渐变效果”“右侧预览区要有阴影”“默认尺寸可以是1080x1080”。AI理解得越好，生成的代码越接近你想要的效果。

如果你也试成功了，记得来告诉我你做了什么工具～希望我们都能从重复劳动里解放出来，把时间花在更有创造力的设计上。