分享我用 GPT-4 的一次快闪网页开发经历

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 192 天前的主题，其中的信息可能已经有所发展或是发生改变。

TL,DR

本文记录了我昨晚花了 3 小时(10pm-1am)，用 GPT-4 把自己脑海里的随机灵感变成网页的过程，侧重于讲述我对「不写代码做网页」的使用心得和技巧。

之前做PodFind时，很多人希望我出教程，如何用 ChatGPT 做网页。昨天晚上 10 点，我有了个新点子，就打开 ChatGPT 网页开始提需求，直到晚上凌晨 1 点完成，我特意做了一些中间过程的截屏，在这里分享一下自己的思路。

0. 灵感是啥

我经常需要在浏览器输入网址，而 Chrome 有自动填充功能，比如我输入'a'，它会想要帮我补全"apple.com"，这其实代表了对于字母'a'开头的网站，我访问最频繁的是苹果官网。那么，如果以此类推，从 a-z ，这些自动补全的 26 个网站是不是就是我的互联网光谱呢？

1. 开始上手

于是我想做一个网页，把这 26 个 URL 在同一个页面展示出来，方便我直观地感受自己主要在哪里冲浪🏄🏻。这时候就出现了第一个分叉：是做网页，还是 Chrome 插件？我提了第一个需求：

为方便阅读，这里使用插件翻译成了双语，原文我使用英语提问。

最早我是希望能读取 Chrome 历史，从而实现，用户打开网页直接可以看到 26 个 URL 。但 GPT 告诉我，这么高级别的隐私肯定拿不到，所以我只能退而求其次，尝试允许用户手动输入。

于是我提了第二个需求：我希望在最开始，网页上显示红色的字母"a"，你 Ctrl C + Ctrl V 粘贴了以’a‘开头的网页之后，将网页粘贴在右侧，自动换行，同时字母'a'变绿，下一行字母'b'继续。GPT 给出的代码是这个：

复制代码，打开文件编辑器，粘贴、保存文件名为 index.html ，然后双击这个文件，就可以在 Chrome 查看页面结果，长这样：

你输入以当前字母开头的网址，就会完成这一行，跳到下一行当然，这其中碰到了一些问题：有些网站是以"https://apple.com"开头，有些则是以"https://www.zhihu.com"开头，当你输入"z"的时候，虽然自动补全的是知乎，但当前代码无法判定(因为略去 https 后，是以 w 开头)，所以需要针对特殊情况处理，做法就是直接反馈：

2. 完善功能

核心功能算是实现了，现在我们来完善一些必要的基本功能。

2.1 本地缓存

假如你填了 10 个网站，不小心把网页关了，那之前填的内容就都没了，所以加一个浏览器本地缓存，可以让你下次打开页面时，仍然可以看到之前填写的 URL 列表。我是这么问的：

提问完，粘贴回答，这功能就做完了。

2.2 使用指南

总得告诉用户怎么使用吧？

结果如下：

至此，基本功能就全部完成了。

3. 美化

目前的网页看起来有一种 2003 年的美，所以必须让它变得好看起来。

我不做前端，所以也不知道怎么美化，但我听过 Tailwind CSS 这个很流行的框架。所以我问：

You're a web developping expert, plese using Tailwind CSS to make this website more elegant and beautiful. 你是一个网页开发专家，请用 Tailwind CSS 让这个网页变得优雅好看。

注意我会把整个网页代码(也就 50 行) + 这句话一起复制粘贴送给 GPT-4，它的结果是这样：

4. 注入灵魂

首先是给网站取个名字，叫啥好呢？就叫互联网光谱吧！英文是 Internet Spectrum 。既然叫光谱，那网页风格也得整点七色光吧？

I want to change the background in a gradient way, so it looks like a "spectrum" 我想以渐变的方式更改背景，使其看起来像一个“光谱”

这个需求提完，网页变成了这样：

5. 十国语言

多国语言支持只是我的个人偏好，对于这种小玩意儿，我就没想过会有多少人用，但既然可以做，又不费力，就做吧。方法也很简单：

告诉它哪些文字你希望支持多国语言。
告诉它你想支持的语言有哪些：如 English, French, German, Chinese, ..

它就返回类似的结果：

粘贴之后，当你使用 Chrome 打开网页，并且系统设置的语言是中文，就能看到中文版啦！

一个技巧是：尽量等你的功能全部做完，再做本地化(多语言支持)，否则万一新增的功能涉及到文字，那又得全部重新生成一遍多国语言。

6. 上线！

用 Github + Vercel ，不要钱。

如果你不会用也可以咨询 GPT ，简单来说：

注册 Github ，创建一个项目，然后 git clone 到本地。
将我们的代码文件 index.html 粘贴进去，然后上传到 Github 。
注册 Vercel ，导入 Github 项目，就可以生成网页地址了，打开应该就可以访问。

最后，我把 Github 地址也挂在了网页右上角：

7. 发给朋友！

这一步就是把炫酷的网页发给朋友们玩了 : )

网址：互联网光谱

另外，附上我和 GPT-4 的完整聊天记录。

网页

粘贴

GitHub

gpt-4

15 条回复 • 2023-10-20 15:10:00 +08:00

cnjs

192 天前

很棒

leahoop

192 天前

An excellent web, but I am a little confused about the website page. I copied it from another page and it didn't work. At last, I discovered it should be input in the search area on the current page. I mean you should tell input on the current page.

airyland

191 天前

大家 p 开头的第一个网站是什么分享一下[狗头]，我的是 platform.openai.com/account/billing/overview

wseani

191 天前

@leahoop You're right, will make the instruction more clear : )

tsja

191 天前

原来你是用 GPT 完成的，我说怎么没有做好样式适配，而且看了源码还是纯 HTML 而不是用前端框架。不得不说 GPT 是真强，我是前端开发，最近组里要写一个后端 Spring 项目，我不懂 Java 语法，更不懂 Spring 框架和项目部署，只有点面向对象和分层开发的概念。我也是靠着 GPT4 一步步实现了建表、CRUD 、和文件上传下载的功能。最终功能平稳落地。