后端 boy 用 GPT 写前端，效果惨不忍睹，求指路

独立开发者节点

愿每一位独立开发者都能保持初心,获得一个好的结果.

This topic created in 163 days ago, the information mentioned may be changed or developed.

后端 boy ，没有前端背景，了解点 html css(就这么一点点🤏)

我的流程是: 告诉 gpt 我的项目背景 -> gpt 设计页面架构 -> 再绘图 -> gpt 描述图片内容 -> gpt 实现代码。
效果非常差，包括用 lovable 、bolt 。

我认为是我的 prompt 写的太差，但是对前端不了解，很难写个符合预期的 prompt 。
网络上生成效果比较好的提示词，大部分都是写得非常明确，精确到颜色值、实现方式的粒度。

各位大佬，有无最佳实践分享🧎🧎🧎

prompt

前端

GPT

4 replies

dapang1221

Jan 29

首先你不要用 gpt 直接搞，从 0 到 1 的项目你先用 claude code 或者 cursor ，虽然默认 claude 会出来一套紫色风格的 UI ，之后再改就是了。你途中增加了生成图片这一步，无论是图片的编码还是解码，信息都是有损的，模型对你项目的理解肯定会有偏差

maichael

Jan 29

同样的方式：
1. 先找到一个套自己喜欢的风格
2. 最好能找到一个差不多的竞品
3. 用 agent-browser / playwright / 直接截图的方式让 LLM 去抄一个并且形成样式规范
4. 基于 3 生成的再去微调

说白了就是先找一个好看的来抄之后再改，不要尝试去写文字 prompt ，尽可能让 agent 自己去「看」

cheny233

Jan 30

@dapang1221 emmmm 但是默认生成的效果大概率是不太喜欢(尝试了很多次),所以我想提前预览下再生成

cheny233

Jan 30

@maichael 我去试试 agent-browser / playwright 的方式，没用过这两种🤔