与GPT-5对话6次，一小时完成“图片转像素画”应用的基础结构

2025/10/17
- 编程
0阅读

零、背景

早上刷公众号文章看到，最近国外有个图片转像素画网站火了，月访问量高达230万次，究其原因是Wplace（多人协同创作的像素绘画平台）爆火带动了同类型的像素画风格盛行。

Wplace

我打开电脑看了下，这个图片转像素画网站很简洁，甚至感觉像是AI就能生成的，于是我准备试试靠ChatGPT能不能生成同类型的应用。

PixelArtVillage的主要功能

一、对话

01、完成基础框架

提示词：

使用tailwind+js，实现一个图片转像素画的单页面应用，有以下几个要求：

1、PWA应用，支持离线运行；

2、支持Pixel Size、Brightness、Contrast、Saturation等选项设置；

3、增加一个比例生成功能，可以按1:1、16:9、9:16、4:3、3:4进行缩放生成，对于尺寸不匹配的图片，采用cover形式进行缩放适应；图片尺寸调节提供一个进度条拖选框，宽度范围为32-图片自身宽度，高度则根据选择的宽度和比例进行换算；

4、提供各选项的重置按钮，可以重置到初始值；

技术栈可以按自己想要的来，主包使用tailwind+js主要是两个原因：

便于把应用集成进Blog（因为之前我已经把Tailwind集成到Hexo了，详情可以参考这篇文章）；

不用管理维护css类名，有效避免了重名导致的样式冲突；

第一版效果

从样式上看第一版就已经满足了我的要求，但当我尝试在预览页面里上传图片进行测试时发现，上传图片功能失效。查看控制台存在报错信息，我当时猜测是PWA部分存在问题，为了尽快调试和完成页面，我只能让AI先移除和PWA有关的代码。

浏览器报错信息

可能的问题原因：

事后我才发现，如果我下载网页代码在本地运行时，页面功能其实是可以正常使用的。在ChatGPT的预览沙盒里不可用的原因，我猜测是PWA离线加载功能和沙盒的资源跨域配置冲突了（参考上图报错信息里：Refused to load the image ‘blob:https://web-sandbox.oaiusercontent.com/****’ because it violates the following Content Security Policy directive: “img-src ‘self’ data）。

02、移除PWA

提示词：

你的serverwork似乎有问题，上传的图片无法进行预览，我决定放弃支持PWA，删除这部分代码吧

第二版效果

移除了PWA部分的代码后，就能正常上传预览图片了（但他把Tailwind样式也给移除了😅）。

03、恢复样式和修复问题

提示词：

ok，现在预览可用了。现在有几个问题和优化需要完成：

1、目前只有宽度选项有了值展示，请给像素大小、亮度、对比度、饱和度也添加上值展示；

2、宽度的进度条能否增加几个快捷选项值？如64px、128px、256px等？

3、目前的下载图片按钮无法正常使用，需要修复；

4、删除PWA的过程中，tailwind也被删除了，请恢复tailwind样式，设计出一个响应式的页面

第三版效果

在这一步提出了4个点，其中1、2被解决了(但效果仍不算好)，3验证发现仍未修复，4看不出啥变化。那就继续解决…

04、修复问题和优化细节

提示词：

修复当前存在的1个问题和优化2个点：

1、下载图片仍不可用，我查看控制台发现存在warn提示：Host API method notifyIntrinsicHeight not found；

2、像素大小的值展示增加px单位，亮度、对比度、饱和度等增加%单位；

3、宽度的快捷选项增加一个“跟随图片”选项，选择该选项则按图片宽度设置（即最大值）

ChatGPT的回复

这时候出现了BUG，AI告知已修复却没有给出代码，我还以为是我网络波动，才看不到后面输出的内容…😅

05、代码拿来！

提示词：

修复完成请更新代码，我没有看到代码上有改动！

OK啊，AI接着更新了

第四版效果

再次验证，下载图片的问题被修复，几个滚动条增加了数值显示，“跟随图片”选项也添加上了。看着一切都没啥问题，但随后我又发现“跟随图片”的快捷选项有问题，每次选择该选项都会把宽度设置成100px，而且128px、256px再也选不上了。

这时候如果只是让AI去修复这个问题，它的做法大概率会让代码变得更糟(拆东墙补西墙的感觉😅)。个人推荐手工排查问题，给出一个明确的切入点，以及想要如何解决的清晰思路。这样AI修复代码的质量就好一些，不容易影响其它地方的代码。

06、修复问题和优化细节2

提示词：

现在还存在1个问题和3个待优化点，请调整完之后提供完整的页面代码！

1、现在的“跟随图片”按钮失效，原因是因为图片上传后，未更新widthRange的max值，所以点击“跟随图片”后会被设置为100，请修复这个问题，并将宽度的默认值改为“跟随图片”（即最初可以为空，上传图片后默认选择跟随图片）。

2、“比例”选项可以参考快捷栏的样式进行按钮选择；

3、图片上传的样式请美化一下，并支持拖拽上传！

4、快捷栏的按钮增加选中样式；

第五版效果

这里我给出切入点（原因是因为图片上传后，未更新widthRange的max值），提供解决思路（最初可以为空，上传图片后默认选择跟随图片），修复的效果就和我预期的一致了（不然可能这个地方又要对话微调好几次了😂）。

AI也更新了一下这个界面UI，我觉得设计还挺不错的。以前开发网页的时候最头疼的就是页面布局了，想不到咋排版的时候只能参考一些知名UI框架的页面布局，这一点很省心。

二、优化

现在一共263行

现在的代码体量已经接近300行，再往后对话生成的代码质量就会逐渐下降了。剩下几个小需求就自己优化吧，同时也把单页面项目集成到博客中，需要做一些微调。

01、移除重复函数

在IDE中打开AI生成的页面代码，很显眼的发现它声明了3个setSelectedButton函数，功能和用法都一致，注释掉前两个就行了。

setSelectedButton函数重复创建了多次

02、增加像素大小的快捷选择

参照AI提供的宽度设置快捷键，我依样画葫芦的完成了像素大小设置的快捷键：

调整后的效果

03、调整页面布局

一开始我就觉得左上方的上传图片区域不是很协调，决定将其挪到右侧，又考虑到原图和效果预览放一列可能会把页面撑的非常高（例如9:16尺寸的图片…），于是决定共用一个区域，通过按钮切换的形式浏览原图和像素画，现在看起来就舒服多了。

另一个调整项是给左侧的设置功能区增加了一个内部滚动条，让图片设置和效果预览更舒服一些。同时把重置和下载按钮固定到左侧底部，不受滚动条影响。

重构之后的页面布局

04、增加调色板

直到整体布局调整完毕，我才发现漏了一个调色板功能。这时候如果在原对话框中继续提问，那意味着我前几步的改动可能要白费了。后面我尝试把html文件上传给ChatGPT，让他在这个基础上进行修改，效果竟然还不错。

ChatGPT续写调色板功能

应用了“艳丽”效果的像素画

调色板配色方案可以从这个网站找：lospec。

05、适配Blog的颜色风格

最后将页面集成到Hexo中，替换色调适配Blog的色彩风格，一切就搞定啦！

最终效果

体验地址：像素风格图片生成。

三、复盘

应用开发的整体用时约5小时，分为以下几个步骤：AI对话（1.5小时，包含对话过程中的BUG排查和解决）、优化工作（3小时）、适配工作（0.5小时，从完整单页面适配到Hexo博客里）。我觉得这是非常迅速的过程了，如果让我独立开发这个应用，5个小时还在搭建页面和查图片处理资料的阶段🤣。

最初我尝试用豆包的AI编程来完成这个应用，但多次对话后的效果仍不可用，我就转战ChatGPT了。

豆包有点拉了...

对话初期，ChatGPT表现非常好，几乎立刻构建了一个可用的基础应用。但在对话后期，也会出现内容过长导致的文件截断问题（此时让他单独输出HTML和JS部分的代码可以临时解决该问题）；以及随着代码量增加，越来越严重的丢代码现象（比如调色盘颜色预览功能：存在HTML结构、存在变量定义、方法里却丢失了调用函数，而在历史的文件版本里却又存在这些函数）。这导致我在优化阶段检查出非常多的细节问题，并在这些问题上花了大量时间去做调整。

文件内容截断

但总的来说，对于一些功能单一、逻辑不复杂的应用，目前用ChatGPT辅助开发是非常舒服的，即使描述模糊、表达较差，ChatGPT的回答质量和生成效果也还是不错的。