前言

题目或许有些标题党，先大概交代一下上下文吧。一周多前用ChatGPT做了一个AI算命的微信小程序：“赛博运势丨AI测命理”。后来觉得似乎有点单调，差点意思。于是趁周末又加了一个每日运势的小功能。这个小功能在ChatGPT和AI绘画程序MidJourney的帮助下，花费两天时间就做的差不多了。这里还是大概总结一下过程，然后记录一些想法，大概是关于这些工具能给个人开发者带来什么样的加成。（个人总结向）

正式开始之前，先猜猜看下边成品图中哪些部分和ChatGPT或者AI绘画有关吧：

应该还是比较明显的，除了年份、今日运势这几个字以外，其他部分的文案和设计都和ChatGPT/AI绘画有关。我想先从个人工作流开始写起，一步步记录一下这些AI工具在整个小产品上线的过程中到底做了什么。

个人工作流

在公司里要做一个需求时，通常会纠集一批不同角色的人去讨论，搞各种各样的评审、写各种各样的文档。作为个人开发者来说，在这一方面还是非常自由的 —— 因为只有自己一个人。但在整个“产品”迭代上线的过程中，我们仍然会需要在不同的阶段扮演“产品经理、设计师、前端、后端、运营、测试”等不同的角色。以这次做的“每日运势”小需求为例（只是示意，不一定严格按下边的顺序）：

最开始时需要明确整体的需求：想做一个每日运势，每天进来点一下可以看到当天的运势、幸运色、幸运数字，并且需要做出一些解释。（产品）
然后大概设计一下要做成什么样子：界面大概是个比较神秘又有点可爱的画风，因为毕竟是娱乐为主，所以色调不能太严肃。上半部分需要展示一个整体的运势，下半部分展示类似签文或者解释之类的东西（设计）
接下来想一想文案怎么搞：每日运势有4种，可以调整概率；幸运数字有10个，幸运颜色有几十个，它们对应的签文或者解签的文案都是可能会在后期不断的添加。（产品&运营）
整体设计的差不多了，接下来看看界面怎么写：在Pixso/Figma/PhotoShop上简单比划几下，然后想想页面拆分和模块设计，在哪调接口怎么存数据之类的。（前端&设计）
前端好像做的差不多了，想一想数据要怎么处理吧：写几个接口，组织一下数据存到数据库/redis。UV没几个，凑合过吧。（后端）
试试看功能有没有坏：好像没有专门的测试阶段，因为在开发的过程中已经在顺便测试了。（测试）

以上过程每个阶段都还是比较占时间的。对于部分个人开发者的业余项目来说，可能在实际做的时候，流程就变成了：

冒出个好玩点子！
想想具体做成啥样，周末去做一下。
设计成啥样呢，怎么配色都不好看，画的图也又土又丑…
画图就画了两三个小时，还是没改好。。。算了，功能优先…
要这么多文案，百度直接抄好像也不太好… 那还是写个爬虫爬一下吧，不过也不是原创的…
写个自己都嫌弃的前端，再写个自己都嫌弃的后端，甚至还没来得及写完一个周末就过去了
算了，不做了。。。

但现在，有了ChatGPT和AI绘画模型的帮助，中间的某些阶段或许可以稍微简化一点，或者少浪费一点时间、少费点脑子。回到最初的目标，需求已经明确了，接下来想一想要界面要长什么样子。

设计：AI绘画

过程

这里直接说是怎么用的了。我的想法是：界面需要比较神秘又有点可爱的画风，不要太严肃。由于是每日运势，所以界面可以长得像个日历。简单翻译一下给几个关键词：

1	Generate a cute anime style daily calendar UI, Mystical

把这段Prompt喂给AI绘画程序（这里用的是MidJourney网站），然后我们就可以去做别的事情了（比如其他和设计阶段无关的事情）。过了一会就给出了一些候选项：

看上去都还是比较符合预期风格的，做背景图比较合适，并且配色也都比较完美（比我自己瞎写的好多了..）。由于最终的页面上需要展示比较多的元素，因此需要背景图中有多一些的空白区域。因此最终选择了主体形象最小的右上角图，尽管这个猫有三只耳朵。接下来就可以根据这张缩略图生成一张1024x1536的大图了：

从这张图中我们可以得出以下信息：

图中上半部分含义不明的文字部分可以抹去，变成我们自己的UI区域，用来放一些文字信息；下半部分颜色太杂，就用一个模糊遮罩盖住；这样我们就有了三大块文字区域；
文字颜色可以用#F5BB9B或#835B5B（直接取图中的色号）；
为了让内容区域大一些，需要做一些裁剪；
需要稍微修剪一下猫耳朵。

接下来就比较省事了：

1、4用PhotoShop搞定（相对来说，要抹去或者修剪的部分以纯色为主，并且删总是比添快的）
接下来导出图片，直接拖到Pixso里面，并建一个750x1624的画板，发现放上去内容区域正好差不多够，于是3搞定。
最后打两行文本，画一个带透明度和模糊的圆角矩形，简单的设计稿就做完了：

除此之外，一些素材也可以用AI绘画+AI抠图搞定，比如生成一些神秘的筒筒：

总结

速度：从拿到AI画的图，到最终做完一个简单的视觉稿，加起来不过十几分钟。
效率：对于个人项目来说，可以轻轻松松拿到一个无版权风险的、低重复的、符合想象的底图；并且可以直接根据底图获取到合适的配色。

以上这两点足以增加个人项目的精美度、减少个人在这种不擅长的事情上浪费的时间。反正不管怎么说，给我一个星期我也画不出来这样的背景图。

文案：ChatGPT

实时调用与离线数据

这个小程序的另一半功能：AI测运势，是直接实时调用的ChatGPT的API。具体可以看上一篇文章。调这个API其实还是有很多限制的：比如每个key每秒请求数、每秒token数等，如果要用它做一些小服务之类的，要么给OpenAI氪金（充钱限制会少一点），要么给验证码收发平台氪金（多申请几个账号做账号池）。但无论哪种，速度都比较慢。

但是如果我们需要的数据是离线的，使用ChatGPT的成本似乎会更低一些：如果把它当作一个拥有很强的创造力，并且大多数情况下会给出正确答案的“百科全书” —— 我们可以用它预先生成大量的数据存储起来，然后接下来对ChatGPT创作出来的“素材仓库”做文字游戏。最重要的是，我们可以调教它生成特定结构的文本，这可以大大减少后续处理花费的时间。

批量生成离线数据

还是以这次的小程序为例。我需要大量的签文以及不同幸运数字、不同幸运色的解释文案。恰好以前做过类似的需求，可以对比一下：

如果用人工配置，会需要花费至少1天的时间引经据典搜集文案，并把这些批量添加到配置平台中去。而这些搜索到的文案也往往受限于我们的“想象力” —— 因为我们的搜索结果肯定是和我们的输入相关，甚至最后搜不出来用比较尬的文案凑上。

对于类似这样的事情，ChatGPT可以很好的辅助解决。比如对于生成幸运色的文案，我们可以这样问：（总共有55种幸运颜色，每个颜色都需要>10条文案）

假如你是一个算命先生，请帮我测算一下我今天的幸运色，并进行详细的解析。候选颜色有：天蓝、米白、金黄、粉红。你的回答需要以“今天的幸运色是……；它代表着……”为开头。请开始吧。

ChatGPT会对此给出一段十分规整的回答：

接下来就好办了：只需要一段循环、一段正则：

import fetch from "node-fetch";
import fs from 'fs/promises';
import path from 'path';
import { ChatGPTAPI } from "chatgpt";
import { fileURLToPath } from "url";

const chatgpt = new ChatGPTAPI({
    apiKey: YOUR_API_KEY,
    fetch
});

const allColors = ['星灰', '玫瑰灰', '枫红','樱草紫', '冰山蓝', '月影白', ...]; // 略过了

/** 循环生成文案 **/
async function query(){
    for(let color of allColors) {
        // 每个颜色生成15条文案
        for(let i = 0; i < 15; ++i) {
            try {
                const color = allColors[i];
                const result = await chatgpt.sendMessage(`假如你是一个算命先生，请帮我测算一下我今天的幸运色，并进行详细的解析。候选颜色有：${color}。你的回答需要以“今天的幸运色是……；它代表着……”为开头。请开始吧。`, {
                    promptPrefix: ' ',
                    promptSuffix: ' '
                });
                
                // 写入文件，略过了

            } catch {

            }
        }
    }
}

/** 处理文案 **/
async function handle(){
    // 读入文件，略过了
    const raw = await fs.readFile('xxx', 'utf-8');
    const [_, _colorName, _colorDesc] = raw.match(/今天你的幸运色是(.+?)色?[；，;。](.*)/) ?? [];

    // 还可以做一些简单的正则替换，比如把两个字的XX替换为XX色
    const format = (n) => n.length === 2 ? n + '色' : n;
    let colorDesc = _colorDesc.replace(new RegExp(`${_colorName}(?!色)`, 'g'), format(_colorName));

    // 保存文件 略过了
}

需要注意的是，如果给定一系列的候选颜色，那ChatGPT的回复结果不是均匀分布的，而会是更倾向于其中的某一个或某几个颜色，我试了好几组，大概几百组数据（花掉了一个号的额度）都是如此。因此为了保证每个颜色都有足够的文案，直接把候选颜色设置成1个就可以精确控制了（也就是query函数中做的那样）。

同时，为了省钱，其实还可以一次让ChatGPT多生成几条文案，无非是到时候我们正则匹配时候的规则变一变：

总结

离线文本：ChatGPT可以快速生成满足特定结构的文本，这些文本可以被很方便地处理用于后续操作；
不均匀：如果给定ChatGPT一系列（可能没有正确答案的）选项，它的回答的分布可能是不均匀的；
批量：可以通过特定的用语诱导ChatGPT按照预期的行为回答，也可以一次生成多条文案。

除了ChatGPT以外，顺带还试了一下New Bing，感觉被它拿捏的死死的…

开发

相对来说，以上两节中提到的内容和开发阶段对比，如果没有ChatGPT和MidJourney的帮助，花费的时间应该是差不多的。ChatGPT暂时在直接写项目代码方面可能还不太行，（比如某次我让问它一个css效果怎么实现，它告诉我用background-image: url图片…)
但如果把它当作除了google和stackoverflow以外的“第三种搜索引擎”，那效果还是很不错的，比如：

前端和后端的开发部分就普普通通了，和上次写的没啥区别，就正常的业务代码。简单写一些关于前端部分的小点：

我们AI绘画生成的背景图顶部和底部都是比较规律的颜色，因此如果我们需要让这个页面的高度大于底图的高度，我们可以直接把背景图的底部裁下来一点，然后 background-repeat: repeat-y; 就可以把多出来的部分填满了。
尽管AI生成的图虽然不可以直接变成动图/视频，但是我们仍然可以通过一些简单的特效让它看起来好像有动画。比如上边生成的抽签筒素材，我们只需要简单的加个filter的动画就能营造出近似发光的效果：
1
2
3
4
5
6
7
8
9
10
11
@keyframes button-shine {
0% {
filter: brightness(0.9);
}
50% {
filter: brightness(1.3);
}
100% {
filter: brightness(0.9);
}
}

总结

到这里就结束了。从这个小项目总结下来，体感上AI绘画可以在视觉上提供一些参考，比如背景图、配色；也可以生成一些素材；ChatGPT除了可以提供一些创意、当作搜索引擎之外，还可以辅助我们生成大量我们需要的文本素材。

或许以后text2img还可以做text2ui；对于想做一些小游戏的个人开发者来说，这些工具还可以辅助直接生成想要的素材和背景；说不定以后还会有由AI制作的vtuber和galgame之类的吧。。。反正能降低自己折腾的成本的东西都是好东西~

随便写写~ demo直接微信小程序搜“赛博运势丨AI测命理”，不贴二维码了~

猫头猫

用ChatGPT和AI绘画做一个微信小程序

前言

个人工作流

设计：AI绘画

过程

总结

文案：ChatGPT

实时调用与离线数据

批量生成离线数据

总结

开发

总结