AI生成代码

本文最新更新于 2025/02/08 晚上

AI问答形式生成代码

今天无意间在b站看到一位up主用AI写代码的过程，无比惊讶，不需要会前端，就能使用问答的形式生成好看的前端页面。我也亲自体验了一下。

https://v0.dev/chat/

这是我使用这个网站生成的前端页面，但是每天有限制次数，一定要谨慎使用，想好了问题再问。

预览

https://v0.dev/chat/GvO3hYBppbW

问答生成

有样学样，首先给他生成网站的目的及类型。

1
I want to make an app for university applicants. To learn about major. I want to display a list of major, and their coresponging subject, and comparisons between majors. Now generate the major list page.

image-20241123143611587​

但显示的内容过于多，而不是自己想要的，我想要在主页面能呈现更多的专业

1
but make it more concise, because there are bundreds of majors i want to display in the home page

image-20241123143748042​

它还贴心的加上了搜索功能，但是我想着美化一下，添加一个主题颜色

1
use clean color themes

但是单词打错了，clear写成了clean，它把所有颜色删除了。当时我没意识到，只是让它在搜索栏右侧添加一个筛选按钮，可以筛选分类。

1
add a category button at search box right, I can choose different category

image-20241123144043521​

还是不甘心，加点颜色主题吧

1
use gradient color theme

image-20241123144129571​

但这个紫色系不是我想要的，想要个蓝色系的。

1
use gradient color theme about blue

image-20241123144236324​

生成一个详情页面

1
generate a new page for major detail, this page should contain subjects related to 10 majors.

image-20241123144410492​

这个页面有些简单，增加一下问答功能

1
detail page should have comment and question / answer seciotn below

image-20241123144451374​

但是推荐的专业里面推荐的是大分类，想改成大分类中的小分类

1
The recommended major is the minor major in the larger category in the detail page

image-20241123144604904​

生成专业对比页面

1
generate a new page about major compare. Side-by-side compare 2 major majors interm of suject to study, related jobs, and more. be creative.

image-20241123144639352​

image-20241123144650053​

还想优化一下，但是今日的生成次数用尽了。总之这个网站对我的冲击还是比较大的。一时间让我感觉自己之前学的东西都白费了，自己一天写的网站，它使用几分钟就能搞定，而且还美观。不得不惊叹目前AI发展的速度，自己还是要掌握一些核心技能，不然免不了被淘汰。

全部页面

image-20241123143233687​

image-20241123143249198​

image-20241123143259159​

image-20241123143337907​

image-20241123143346607​

技术
#AI代码生成 #大模型 #v0.chat
AI生成代码
http://example.com/2025/02/08/035 AI问答形式生成代码/
作者
DB
发布于
2025年2月8日
许可协议