AIGC教程：Midjourney+ChatGPT高效开发网站，游戏官网不用愁！

图源：Midjourney

尽管早已进入移动互联网时代，网页这一形式在互联网形态的几番更迭后，仍旧是当下最主流的信息传递渠道之一。小到独立游戏，大到3A级别的多平台F2P游戏，往往都需要建立专门的官方网页，供玩家浏览获取信息所用。

一个大型产品的网页通常承载多项功能，如客服中心、充值渠道入口、游戏信息分发等等。此外，一款产品对网页的需求往往与其生命周期紧密相连，在新版本推出等关键节点，游戏方往往需要推出对应的网页以迎合活动的上线。在当下，游戏公司对网页的需求水平较高，而网站的开发成本又较为昂贵，往往需要采用大量外包的模式来降低支出。

而随着生成型AI的诞生与飞速迭代，网页设计的工作模式似乎也即将迎来更新换代。近日，YouTube的网页设计博主Codex Community就利用当下大火的ChatGPT与Midjourney工具摸索出了一套较为完整的零代码网页设计方案，受到海外网友的瞩目。

从原理上看，Codex Community主要使用了Midjourney进行了网页布局的概念草图设计与主要视觉元素的绘制。由于AI工具较强的迭代性能，用户可以通过调整文字prompt的方式在开发前期就对网站的整体视觉效果进行多风格的概念化预览。随后，该播主使用ChatGPT生成网站主要的文字元素，最后使用无代码网站编辑器工具EditorX进行网站的创建。

Codex Community针对Midjourney的使用提出了一些建议：

• 使用website关键词，告知AI你要生成的是“网站式”的图片
• 使用ui, ux, ui/ux等类似关键词，突出要求AI绘制出网站的UI内容
• 使用提示颜色的文字关键词，要求AI按照一定的主题色调进行生成
• Midjourney允许输入范例图片，因此可以输入所喜爱的外部网站URL要求AI进行样式参考

下图中为Codex Community最终使用的文字prompt及最终生成产物。

Codex Community选用左上角的生成结果，该图将担当网站主视觉图及网站的草稿模板。博主将其送入Photoshop，截取主图后擦除杂乱的文字内容，仅保留关键的图片元素。

随后，博主要求ChatGPT为他以“可直接复制粘贴到网页上的成品文字”的形式，输出标题、CTA按钮、顾客反馈、产品描述等电商网站上常见的文字内容。

接着使用Midjourney生成类似风格的图片作为辅助性的图片内容。

最后，打开EditorX进行网站的制作。此前利用AI生成的网站概念图将作为模板，为最终的制作提供页面布局，配色等信息，开发者只需按图索骥，并使用吸色工具提取由AI选择的颜色搭配就可完成网站的开发。

网站的最终成品如下图所示。尽管视觉上依然较为简单与粗糙，但由于主要的概念与策划流程都交给AI代理，开发者对这样一个两页的网页实际动手的开发时长可以压缩到半小时以内。

此外，Midjourney的最新版本V5在近期发布。据另一名YouTube博主测试，V5版本在网站风格的图片生成效果上实现了大步跨越。在配色、页面元素等方面的处理上表现出较大的进步。

Midjourney甚至可以设计出包含图标与信息图的网站页面，观感像模像样。排版、布局、配色，似乎都可以由AI一手包干。

目前，绝大多数AI工具还没有开始针对专业领域进行特化，而即便如此，以上展示的工作流已经在加速开发进程上表现出了相当高的潜力。随着更多开发工具的出现，GameLook毫不怀疑生成型AI将会在各个领域大幅提高人类生产力。