再不转型为ChatGPT程序员，有遭受降维打击的危险-优快云博客

Open AI在演示GPT-4的时候，有这么一个场景：给一个界面草图，就可以生成网页代码。

这个演示非常简单，如果界面原型比较复杂呢？像这样：

ChatGPT能不能直接生成HTML, CSS,JavaScript代码，把这个网页给实现了？

如果ChatGPT能独自把这个活儿给干了，前端开发真有失业的风险。

实际上，现在GPT-4根本没有开放“给一个图片，生成代码”这个功能，现阶段我们还是只能靠文字去和ChatGPT交流。

但是“ChatGPT基地”星球的球友@潇迪确实把它完成了，效果如下：

GPT-3.5效果图

GPT-4效果图

经过和ChatGPT交互，微调以后（在已经生成的代码中进行微调，ChatGPT的能力实在是逆天，可以吊打所有其他代码生成工具），效果如下：

（点击阅读原文，可以查看@潇迪用ChatGPT生成的效果图和源码）

是不是很惊艳？如果再花点儿时间微调，效果肯定会更好。

关键点就是@潇迪用的prompt：

页面名称：咨询情况大屏展示页
页面目的：通过卡片以及图表展示实时咨询情况
页面结构：
顶部：占整体页面长度的1/5,包含4个卡片，每个卡片占用平均宽度，卡片里面包含左边为一个图标，右边分为上下两个元素，分别为标题与数字
○ 卡片1：图标为笑脸，底色为浅绿色，
○ 卡片2：图标为握手，底色为浅蓝色，
○ 卡片3：图标为饼图，底色为浅黄色，
○ 卡片4：图标为国际化，底色为浅红色，
2. 中部：占整体页面长度的2/5，包含一个饼图，占1/2个宽度，另外一半与底部，右四分之一宽度为一个块，包含三个折线图，每个折线图有一根线，x轴为人名，y轴为0-400
○ 饼图：标题为慢性疾病预警，包含六个标签
■ 标签1：风湿，30%
■ 标签1：慢性呼吸系统疾病，30%
■ 标签1：精神、心理疾病，15%
■ 标签1：心血管疾病，15%
■ 标签1：营养代谢疾病，5%
■ 标签1：恶性肿瘤，5%
3. 底部：占整体页面长度的2/5，包含一个环形图，占1/4个宽度。一个雷达图，占1/4个宽度。另外一半为上述折线图。
● 环形图：标题为心理健康预警，包含五个标签，分别为敌对，焦虑、敌对、敌对、躯体化。
● 雷达图，五个角分别为，竞争压力、职场压力、家庭压力、人际压力、学习压力
请帮我生成静态页面，不要省略代码，给出代码。图标请使用fontawesome库完成。

这些prompt用结构化的方式，清楚地描述了界面上有什么东西，至于细节，完全交给ChatGPT来生成。

相比埋头哼哧哼哧敲代码，工作效率提升了10倍，甚至100倍。

恐怕你也有这种感觉，有了ChatGPT以后，程序员关注的点要改变了。

不仅是前端界面，后端开发也是这样，原来不但需要考虑整体，还需要考虑很多细节，不仅要考虑细节，还得一行行把代码敲出来。现在程序员来把控全局，用自然语言不断给ChatGPT提示，很快就能生成代码。

这样的提示越精准越好，例如“图标请使用fontawesome库完成”，“支付时间和薪水计算策略是两个概念，把它们两个拆分开。” （详情参见这篇文章：《ChatGPT开始威胁程序员的核心能力了》）

如何提示ChatGPT，真有可能变成一门学问，提示得好，ChatGPT就配合得好，工作效率就高。

我自己刚接触ChatGPT时，首先是感到震撼，其次有强烈的危机感：如果不会用ChatGPT，肯定干不过熟练使用ChatGPT的程序员。

别人用自然语言生成代码，我还在一行行敲，效率差了十倍百倍。这将直接影响一个人的工作绩效，工作机会，工资，奖金。

一个初级程序员使用好ChatGPT，有可能可以和中级，甚至高级程序员抗衡。

我觉得会使用ChatGPT程序员，已经从一片黑暗森林进入另一片黑暗森林。如果我还是对ChatGPT选择性地无视，可能很快就会遭受降维打击了。

所以我得赶紧把自己用ChatGPT武装起来，但是编程领域这么多，到底怎么用ChatGPT才有效呢？

这就是我和闪客建立“ChatGPT基地”的本意，探索ChatGPT的能力，尽快转型为ChatGPT程序员！