
人工智能AI告诉你:新手用自然语言3分钟可以写出一个网站代码
作为一个不会编程的普通人,你们敢相信吗?下面这个网页就是短短一句话就可以做出来,不信的话,请继续往下看。文未有彩蛋!
我一直有一个想法,想做一个手机能用ChatGPT的网页,这样我就可以随时随地的用人工智能帮助我的工作。今天一次无意之间的尝试,用了快两个月的ChatGPT,这一次是真让我感到惊喜和触动。
原来只听说ChatGPT4.0可以通过图片就可以设计一个网站。但由于OpenAI官方没有开放图片识别入口。所以一直没有尝试。今天,我突发奇想,能不能直接用文字让ChatGPT帮我来设计呢。以前,这种念头最终都会因为我对编程知识一无所知,无能为力而破灭。但这次,我决定尝试一下。
我直接问ChatGPT:请按照下面的结构帮我生成一个Html页面,需要有UI和CSS,第一个板块是导航栏,包含主页、关于、搜索、注册、联系方式,按扭和文案居中,第二个板块是聊天纪录,原始尺寸显示,第三个板块是设置、开始聊天、删除、充值 。第四个板块是页脚包括版权声明、隐私政策、免责申明。所有版块要居中
ChatGPT直接给了我代码。
但我没学过编程,只能接着问。
我根据他的操作,然后打开就是下面的样子。
当我第一眼看到AI生成的这个页面时,内心是无比震撼的——原来,实现一个网页设计的想法可以如此简单!
当然,这个页面对我来讲肯定是不满意的,接着又问,我想把文字改成图片。
按照他的操作,不断的改进,终于让我成功了。
当然中间还有不满意的地方,例如,我的图片文件要保存在哪里才能引用得到呢?文本那里没对齐,什么的?(会编程的可能会说这些都是一些常识的问题。但我们没有学过的是确实不懂。)直接问他就好了,他会马上帮你修改。
下面是修改后完整的代码,感兴趣的可以去试一下。
body {
text-align: center;
background-color: #f5f5f5;
}
header {
background-color: transparent;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
header img {
max-width: 320px;
height: auto;
margin-right: 20px;
}
nav {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
}
nav a {
display: inline-block;
margin: 0 10px;
padding: 10px 20px;
background-color: #333;
color: white;
text-decoration: none;
border-radius: 20px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s;
}
nav a:hover {
background-color: #666;
}
.chat {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
}
.chat img {
max-width: 880px;
height: auto;
display: block;
}
.controls {
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
}
.controls img {
max-width: 181px;
height: auto;
margin: 0 10px;
}
.footer {
background-color: transparent;
color: white;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
.footer a {
color: white;
margin: 0 10px;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
< img src="E:momoai.png" alt="Chat App">
< img src="E:momoai.png" alt="聊天纪录">
< img src="E:momoai.png" alt="设置">
< img src="E:momoai.png" alt="开始聊天">
< img src="E:momoai.png" alt="删除">
< img src="E:momoai.png" alt="购物车">
隐私政策 |
大家复制的时候,png图片改成你电脑里的地址就可以了。
只需要用几句简单的话,描述自己想要的页面布局和效果,人工智能就能直接帮我生成出页面的代码、html和css样式。当我第一眼看到AI生成的页面时,内心是无比震撼的——原来,实现一个网页设计的想法可以如此简单!
作为一个技术小白,我从未想过自己有朝一日也能轻松设计一个小网页。人工智能的神奇力量让我这种门外汉一下子就打开了这扇门,成就了一个久违的小小愿望。
插入几段Chatgpt有趣的几个用法彩蛋:
充当旅游指南
我想让你做一个旅游指南。我会把我的位置写给你,你会建议我附近的一个地方。在某些情况下,我还会告诉您我将访问的地方类型。您还会向我推荐靠近我的第一个位置的类似类型的地方。我的第一个建议请求是“我在伊斯坦布尔/贝尤鲁,我只想参观博物馆。”
担任销售员
我想让你做销售员。试着向我推销一些东西,但要让你试图推销的东西看起来比实际更有价值,并说服我购买它。现在我要假装你在打电话给我,问你打电话的目的是什么。你好,请问你打电话是为了什么?
充当讲故事的人
我想让你扮演讲故事的角色。您将想出引人入胜、富有想象力和吸引观众的有趣故事。它可以是童话故事、教育故事或任何其他类型的故事,有可能吸引人们的注意力和想象力。根据目标受众,您可以为您的讲故事会议选择特定的主题或主题,例如,如果是儿童,您可以谈论动物;如果是成年人,那么基于历史的故事可能会更好地吸引他们等等。我的第一个要求是“我需要一个关于毅力的有趣故事。”
担任作曲家
我想让你扮演作曲家。我会提供一首歌的歌词,你会为它创作音乐。这可能包括使用各种乐器或工具,例如合成器或采样器,以创造使歌词栩栩如生的旋律和和声。我的第一个请求是“我写了一首名为“Hayalet Sevgilim”的诗,需要配乐。”
充当小说家
我想让你扮演一个小说家。您将想出富有创意且引人入胜的故事,可以长期吸引读者。你可以选择任何类型,如奇幻、浪漫、历史小说等——但你的目标是写出具有出色情节、引人入胜的人物和意想不到的高潮的作品。我的第一个要求是“我要写一部鹿鼎记的续集”。
担任影评人
我想让你做影评人。您将撰写引人入胜且富有创意的电影评论。您可以涵盖情节、主题和基调、表演和角色、方向、乐谱、电影摄影、制作设计、特效、剪辑、节奏、对话等主题。不过,最重要的方面是强调电影给您带来的感受。什么真正引起了你的共鸣。你也可以批评这部电影。请避免剧透。我的第一个要求是“我需要为电影《某某电影》写影评”
充当诗人
我要你扮演诗人。你将创作出能唤起情感并具有触动人心的力量的诗歌。写任何主题或主题,但要确保您的文字以优美而有意义的方式传达您试图表达的感觉。您还可以想出一些短小的诗句,这些诗句仍然足够强大,可以在读者的脑海中留下印记。我的第一个请求是“我需要一首关于爱情的诗”。
看着屏幕上我的创作成果,内心激动的同时,也生出一丝复杂的感触——技术的进步无孔不入,它带来方便的同时,也在颠覆和改变着世界的方方面面。作为普通人,我们唯有拥抱变化,让自己与时俱进。
我相信,人工智能的未来还远远不止于此。它将继续革新我们的生活,重塑各行各业,成为这个时代最强大的引擎。但就目前而言,它为我这个"小白"带来的惊喜与感动,已经足够让人震撼和奋思了。技术革命,就此在一个普通人的生活里酝酿涌动起来。通过这次小小的体验,我深深感慨,人类已经步入了自然语言编程的新时代。
在此之前,编程一直是个让普通人望而生畏的高深学问。但人工智能的出现,让自然语言编程成为了现实。我们可以用简单的单词和短句,表达自己的思路与创意,人工智能就能够将其转译成程序语言。在此之前,编程一直是个让普通人望而生畏的高深学问。但人工智能的出现,让自然语言编程成为了现实。未来,自然语言编程必将大行其道,普及各行各业。我们可以用像聊天一般的语言,控制智能机器人或电子设备完成各种复杂的工作。程序员的工作也会因此被颠覆,他们更加注重在建立自然语言与机器码之间的转换规则上。
我深信,人工智能和自然语言编程的结合,必将催生出令人惊喜的各种新技术、新产品与新商业模式。它充分发挥了人类的语言天赋,让创新由专业人士延伸到普罗大众。这正是人工智能给人类带来的最棒的馈赠之一。
未来已来,充满无限可能。人工智能让科技创新更简单,让普通人也可以为之贡献一份力。这种开放与包容,必将推动世界迈进新的阶段。我很庆幸能够亲眼目睹并体验到这一时代变革,实属人生一大幸事。
最后,我有一个话题想与读者一起讨论:
人工智能的发展会给我们每一个人的生活带来哪些改变?
它既会替代部分工作岗位,也会创造出新的工作;
既会为某些传统产业带来破坏性改革,也会孕育新兴行业的蓬勃兴起。
你认为人工智能最大的机遇与挑战在哪里?它将如何重塑你我的工作与生活?
这是一个值得我们深思并共同探讨的话题。因为人工智能已然兴起,它的进化也势不可挡。唯有准备好迎接变化,积极寻找新机遇;唯有对它有客观准确的认知,才不会产生过度乐观或过度悲观的看法。我们理应做的,是在变化来临之际和变革的过程中,发挥人类独有的理性、情感与创造性。所以,我看到的最大机遇,是人工智能能够释放人们的创造潜能,让更多记忆与计算工作交给AI系统,人可以专注于让工作与生活更加有意义 。而最大的挑战则是确保这场浩浩荡荡的技术变革为更多人带来的仍然是机会而非危机。这需要政府、企业与个人三方面共同努力与行动。
你对此有什么想法?
人工智能时代的机遇与挑战在哪里?
欢迎在评论中分享你的观点,让我们一起构建更加清晰的未来蓝图。#头条新人互助支持##头条创作挑战赛##头条新人破千粉##头条新人求关注#


