在使用了AI编程做了几个经典小游戏，包括贪吃蛇、俄罗斯方块之后，我开始想AI编程是不是可以做一些更复杂的东西，比如搭建一个网页。我个人没有任何前端基础，如果可以用AI搭建网页，那我计划下一步就去申请一个服务器域名，做一个自己的主页出来（美好的愿望
先看看成品：
一、操作路径
1. 网页要求
- 继续我之前对于AI生成穿搭的需求，我想做一个时尚穿搭介绍的网站，我参考了一些AI生成网站的实例，最终将我的需求以下面的格式告诉Cursor
我是一个穿搭博主，帮我写一个网站主页。
主要包含几个模块：
- home 页面（具有时尚极简主义的风格）
- product 页面（包含商品的画册）
- blog 页面（分享穿搭知识）
- contact us
设计要求：
- 采用 react 框架
- 请引入 tailwindcss CDN 来完成，而不是编写 style 样式，图片使用 unslash
- 符合 UX 设计规范
- 这里Cursor会主动根据我的设计要求去添加必要的react框架依赖等等，直接无脑accept就可以了
- 很可惜这里没有保存第一次生成网页的更多截图，可以说效果还是比较完善的
2. 网页优化
- 最初的网页出现了几个问题，我都是告诉AI，然后让AI帮我解决的
- 首先是网页无法打开，我在网页中查看了报错信息，返回给AI发现是浏览器安全策略的问题，给我提了一个新的方案打开生成的网页
- 第二个是发现网页的交互比较简单，希望增加一点动感，直接让AI给我改造交互
- 第三个是发现网页的图片有些显示不出来，这里就直接让AI换了一下，没想到这里居然把所有页面的图都换了
- 我后面也没有在做更多的优化了，根据网页的结构，很容易定位到各个模块的代码，需要调整内容也非常方便
二、效果反思
- 虽然这个网页做得还挺漂亮的，但是我感觉到对于AI生成的东西没有很好的掌控感，我很难把我想要的网页样子用准确完善的提示词告诉Cursor，只能给个大致的框架让AI自由发挥
- 然后完全没有前端网页开发基础的我，做完这个项目后，感觉有代码基础和没有代码基础对于AI编程的使用还是有很大差异的，这里我扮演了一个毫无基础的小白，其实就经常会需要调整报错的问题，好在Cursor对于报错的理解还是非常到位的，如果我有代码基础的话可能会更明白如何与AI进行沟通吧
0 条评论