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

背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下面是 GPT4 返回代码的效果

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

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

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

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

感觉是图一乐

现在的疑问是

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

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