怎么快速的将简单的设计转为 HTML？ GPT 完全不能胜任！

背景

手里有一些零零散散的工作。都是用 Python 不同脚本完成

可以抽象的、简单的类比成，就例如 PDF 转换、分割、合并等操作。

（只是说可以这么理解，实际就是不同的任务，不同脚本执行罢了）

虽然我已经将相关脚本转换为一个脚本，从命令行就能调用。

但是总归还是有点繁琐（包括每次各种路径、参数等设置）

所以如果用一个网页版，点击就操作不是降低工作量了？

想法

这理论上应该不难吧，这肯定不难！

其实就是网页上，放置一些按钮，点击不同按钮执行不同的脚本罢了

通过和 GPT4 对话，很快的就用 Flask 实现了最小单元的功能。

就是页面上两个按钮，上传文件再下载文件，这并不困难。

但是问题是「太丑了」，具体的我做了挺多尝试

1 、直接让 GPT 发挥 ❎

我尝试过，让他美化页面，但是完全让 GPT 自己去规划，结果和想要的天差地别。

并且，虽然我不是专业的前端，但是我也能看出来，他写出来的 html 代码，是机器不规范的。

并且多交流几轮，可能每次返回的代码，都和之前的差太多。有时候突然样式全部没有了。

所以如果纯交给 GPT ，我觉得解决肯定能解决，但是返回的页面，我感觉比大学生作业都简陋。

2 、告诉 GPT 怎么写 ❎❎

我再尝试，和他描述清楚，需要几个几个按钮，都在哪里。

很遗憾，这样更不行，GPT 似乎很难完全理解你（个人感觉如果我交代事情，会尽可能说的比较详细）

而且调整样式，似乎用文字也很难描述

3 、画个原型图给 GPT ❎❎❎

又尝试，把我想要的文本、按钮，大概放在页面的什么位置。

在白板上画好，给 GPT4 ，结果依旧是十分崩溃的

4 、直接给目标页面给 GPT ❎❎❎❎

实在受不了了，我直接找了几个我期望实现的页面，发给 GPT 让他仿照着给我一个可以实现类似效果的代码。

然后我再魔改，因为之前搭建个人 wiki 或者 blog ，找个模板爆改还是可以的。

具体的，我很难描述，大家看图吧，下面是我让他实现的目标页面（想着先来个简单的）

下面是 GPT4 返回代码的效果

怎么说呢，就问你有没有实现把，理论上我只要用 flask 给每个按钮的功能绑定一下，就完事了

但这玩意吧，我都不好意思拿出来

5 、自己学吧

自己搜了些，html 的布局教程，怎么说呢，到不说跨技术栈如隔山。

就是什么 grid ，container 什么的，我能大概明白是啥，但让我从 0 开始写，我很难写出来。

6 、其他拖拉拽的在线零代码工具

感觉是图一乐

疑问

现在的疑问是

1 、我的方向应该没错吧，我觉得这么简单的一个页面的设计（最多加一个使用说明页面），用不到什么 vue/react 等，就 html+css 就完全 ok 了把

2 、像这种，单个页面，没有复杂设计，就是一个 header （上面几个按钮），然后中间是一些文本、按钮的排列（这里的排列希望能美观一些，我可以自己在纸上画出来）有没有什么比较好用的工具生成 html 和 css 。或者是比较好的教程，可以快速上手的？

aoguai

2024-08-07 23:55:17 +08:00

GPT 完全不能胜任是错误的。

或许你应该学习一下 Prompt 该如何编写。

在这里我给出一个初步 Prompt：
```
我需要快速转化为 HTML 。以下是我的需求和背景：

**背景：**
我手头有一些零零散散的工作，都是用不同的 Python 脚本完成的，例如 PDF 转换、分割、合并等操作。我已经将这些脚本整合到一个脚本中，可以通过命令行调用，但设置路径和参数等操作还是有点繁琐。因此，我想开发一个网页版应用，通过点击按钮来执行不同的脚本，以简化工作流程。

**想法：**
网页上放置一些按钮，点击不同按钮执行不同的脚本。这应该不难，我用 Flask 实现了基本功能：页面上有两个按钮，可以上传和下载文件。

**具体需求：**
- 我希望页面有一个 header ，上面有几个按钮，中间是一些文本和按钮的美观排列。
- 一个简单的页面设计，只能使用 HTML 和 CSS ，不需要 Vue/React 等复杂框架。
- 请你参考我上传是图片实现

请给出完整的代码。
```

输出效果如下：

https://files.catbox.moe/xd1dzp.png

https://files.catbox.moe/n8s8j9.png

这只是一个初步 Prompt 在此基础上你可以继续优化 Prompt ，甚至可以将前端页面代码全部丢给他，让它在此基础上继续完善。