Cursor 新上线的 COMPOSER 功能中的 Agent，进一步降低了0 编程基础小白的开发难度。来看看，如何三句话写一个网站吧。这里我用了一个创建数据分析师简历网站的案例，带您体验一下，AI 编程的魅力。
- 输入任务
打开 Crusor 的 COMPOSER 功能，输入需求“生成一个数据分析师的建立网站”。点击右下角的“agent”模式。
和 normal 模式不同的是，agent 模式可以逐步工作，还可以创建对应的文件。
2. 项目结构：构建网站框架
通过Agent模式的引导，您可以快速搭建起项目的基本结构，为后续开发打下坚实基础。
3. 主页面开发：创建index.html
在Agent的帮助下，您将创建主页面index.html，并进行linter error check，确保代码的规范性和可读性。
4. 美化网站：创建.css文件
通过创建.css文件，可以为网站添加个性化的样式，使其更具吸引力。
5. 交互效果：设置JavaScript
JavaScript的加入，网站不仅仅是静态的展示，增加了动态交互效果。
6. 查看效果：一个完整的简历网站
经过上述步骤，一个包含响应式设计、现代简约界面风格、平滑滚动效果和动画的数据分析师简历网站便呈现在您面前。
网站结构包括个人简介
专业技能
项目经验
联系方式等模块
7. 本地预览与自定义
通过以下方式在本地预览网站：
$ cd resume && python3 -m http.server 8000
在浏览器中访问 http://localhost:8000 来查看网站。
还可以根据需要自定义以下内容：
- 在 index.html 中修改个人信息、项目经验和联系方式
- 在 css/style.css 中调整颜色主题和布局
- 在 js/main.js 中添加更多交互效果
8. 调整优化：提升网站视觉效果
网站太于素净，我又让 Cursor 重新优化。提了如下要求：
- 网站的主色调调整为有科技感的蓝色
- 在第一屏添加背景图
Cursor 的响应如下：
因为首屏的背景需要我手动上传图片，这时，Cursor 还是很贴心的告诉我如何一步一步上传。
先是在我的运行路径上创建了 images 文件夹
并且提供一步一步指引：
你需要在 resume/images 目录下添加一张名为 tech-bg.jpg 的背景图片。
这张图片最好是：
科技感强的图片（比如数据可视化、代码、科技元素等）
分辨率至少 1920x1080 像素
颜色偏深色系，这样可以更好地衬托文字
我对首屏做了以下优化：
添加了渐变遮罩层，使文字更容易阅读
添加了视差滚动效果（background-attachment: fixed）
优化了标题文字效果，添加了渐变色
增强了文字阴影效果，提高可读性
添加了径向渐变遮罩，让中心区域更突出
你可以将任何喜欢的科技感背景图片重命名为 tech-bg.jpg 并放到 resume/images
目录下。然后刷新页面就能看到效果。如果效果不理想，我们可以继续调整渐变和透明度。
9. 科技感背景图：Recraft AI的助力
如果您需要一张具有科技感的背景图，可以访问Recraft网站，使用现实主义风格绘制一张图，并将其放置到指定的文件目录下。Recraft提供了200个免费额度，让您可以免费绘制200张高质量图片。
10. 最终效果：令人满意的成果
经过优化后，网站将拥有渐变遮罩层、视差滚动效果、优化的标题文字效果、增强的文字阴影效果和径向渐变遮罩，使中心区域更加突出。
怎么用？
感兴趣的小伙伴，可以上去注册一个 Cursor 账号。
注册地址如下：https://www.cursor.com/refer-a-friend?code=BVY3K452332609
注册首个月可以免收 20 美元费用。哈哈。
对AI 绘制图像感兴趣的小伙伴，可以注册这个网站。注册可得 200 个免费额度，免费画 200 张高质量图片。