摘要：大家好，我是程序员码歌，本文是零代码 AI 编程实战-ai 灯塔导航项目的第二篇，将详细介绍如何通过 Cursor AI 辅助，实现从原型设计到最终上线的全过程。【文末有网站链接和扩展程序安装包，免费使用，请手下留情，勿刷】
【零代码 AI 编程实战】系列
1、【零代码 AI 编程实战】AI 灯塔导航-成果展示篇
2、【零代码 AI 编程实战】AI 灯塔导航-从0到1实现篇(本篇)
3、【零代码 AI 编程实战】AI 灯塔导航-总结篇
大家好，我是程序员码歌，本文是零代码 AI 编程实战-ai 灯塔导航项目的第二篇，将详细介绍如何通过 Cursor AI 辅助，实现从原型设计到最终上线的全过程。【文末有网站链接和扩展程序安装包，免费使用，请手下留情，勿刷】
cursor 和 trae 8大核心功能对比 #技术分享
trae： 理解中文编程习惯与思维、IDE 更友好，模型 国内版 DeepSeek 与豆包，
海外版：Claude 和 GPT，免费版本经常排队，受不了；付费版：首月3刀，次月10刀，价格是 cursor 的一半
cursor： Claude、GPT、Gemini，免费版 150次 的免费使用额度（包括代码补全、AI 对话等功能），付费版：20刀/月，最近不断调整规则，claude 模型也不能用了，要特殊手段
我最终选择了 cursor，主要看中 cursor 在代码重构和复杂项目表现更优能力。前期我是用免费版，无限续杯使用了半个月，后面直接换付费版了，毕竟每次换账号刷机器码也要花点时间，时间就是金钱，我零碎时间不多。
无限切账号或者更换邮箱（用无限邮箱，一个主，无数副），jaydenxiao11@2925.com
● 刷机器码：GitCode - 全球开发者的开源社区,开源代码托管平台
● 更新账号：修改机器码>重新启动 cursor>换账号登录
3、 技术选型前端：React - 核心前端框架、Create React App 脚手架、React Router - 路由管理、Ant Design- UI 组件、ant-design/icons - 图标系统、Node.js 环境
后端：Node.js 、Express 框架、mongoDb 数据库
4、前端部署Netlify ，为 Web 应用程序和静态网站提供托管和无服务后端服务
● 免费版，100GB 免费流量、300 分钟的译时长，1 个同时编译队列，部署小网站绰绰有余
● 关联 github 仓库，自动拉取代码来编译、生成、部署静态站点
5、后端部署Sealos Cloud ，是一个无需云计算专业知识，就能在几秒钟内部署、管理和扩展应用的云操作系统，通过该平台可以轻松实现私有化部署，集群管理和应用程序的全生命周期管理
费用：仅需为容器付费，自动伸缩杜绝资源浪费，大幅度节省成本。
1、cpu 和内存费用，0.21(每天)*30(天)=6.3元/月
2、网络费用，0.78元/GB，按流量计费 image
提示语 prompt：我要做一个 AI 导航网站，帮我起个名字，要求简洁易懂，给10个参考
最终选择了：AI 灯塔
以下是10个建议的名字，并附上简要说明：1、智导 说明：“智”代表 AI 智能，“导”代表导航、引导。非常简洁直接，点明核心功能。发音清晰有力。2、AI 集 说明：极其简洁明了。“AI”直接点明领域，“集”代表集合、聚合。一看就知道是 AI 工具集合站。3、寻模 说明：“寻”代表寻找、探索，“模”指 AI 模型、工具。寓意帮助用户寻找合适的 AI 模型/工具。简洁独特。4、智钥 说明：“智”代表 AI 智能，“钥”代表钥匙、开启。寓意网站是开启 AI 世界大门的钥匙。形象且有价值感。5、AI 领航 说明：直接点题。“AI”领域，“领航”代表导航、引领方向。表达清晰，有一定气势。6、星智图 说明：“星”象征众多 AI 工具如繁星，“智”是 AI，“图”代表地图、导航图。寓意网站是探索 AI 星空的导航图。富有想象力。7、智聚合 说明：“智”指 AI，“聚合”强调集合功能。清晰传达网站是将 AI 资源聚合在一起的平台。功能指向明确。第一步：初步 logo 生成
第二步：颜色风格替换
第三步：百度 ai 修图助手 百度图片 | 免费 AI 图像生成工具与海量高清图平台
第三步：ico 图标转换网站：The best Favicon Generator (completely free) - favicon.io
选择 claude 3.7模型
我想要开发一个ai汇总网站，主要有网站和极简浏览器导航，在根目录新建一个ai-go文件夹放里面。请考虑遵守以下的规范:1.用户体验:先分析产品的主要功能和需求，确定下核心能力2.产品规划:希望你作为一个 20 年的产品经理，来设计我们的整个产品，确保架构非常合理3.U 设计:作为 30 年的 U1设计师，要保证符合目标人群的使用习惯、符合网页端和手机端的设计规范、使用比较现代化的 U1元素，注重产品体验和视觉4.输出:-请使用 HTML+-请根据功能拆分代码文件，保存结构清晰，每个功能界面需要一个独立的 HTML 文件，比如 home.html、games.html、me.html 等等 -尽可能使用 Tailwind Css 的样式，如果需要自定义的话，请用独立的 css 文件，然后引入到 HTML 代码中来 -用 index.htm! 作为主入口，不直接写入所有界面的代码 -这里我们使用 iframe 的方式来嵌套其他页面，并将所有页面直接展示在 index 页面上 -页面里面需要使用到的图片，可以从 unsplash、pexels 获取图片 -尽最大的可能降低页面的 TOKEN -保证我们的代码页面最后能够很顺畅的转为 Figma 文件进行二次编辑 4、原型要包含网页端、网页极简导航端、手机端（尽可能模拟 iPhone 15 的真实外观） 5、网页端风格参考@https://www.faxianai.com/ ，极简导航端风格参考@https://i.faxianai.com/?ref=www.faxianai.com 6、三个端的页面平铺在 index.html，标题分类号极简导航网：
● 使用精确的提示词
❌ 不好的提示："让页面更好看"✅ 好的提示："调整web.html的卡片间距，增加hover效果，使用更现代的阴影"● 分模块调整
- 先调整布局结构- 再优化样式细节- 最后完善交互效果- 每次只关注一个方面● 参考设计风格
- 明确指定参考网站- 说明具体的设计元素- 要求保持一致性- 注意品牌调性选择模型 claude 3.5或者3.7
cursor prompt
帮我实现上面设计稿的网站，要求：● 本项目采用react.js框架，create-react-app脚手架搭建● 路由使用react-router-dom，App.js文件是配置页面路由的地方，每增加一个页面需在里面注册● 基本UI组件库使用阿里蚂蚁金服ant-design● 默认数据如设计稿所示，要一比一还原设计稿，不要自由发挥● 图标使用FontAwesome矢量图标cursor执行情况
多次调试后，主界面效果
前端完整项目结构
ai-dengta-nav/├── src/ # 源代码目录│ ├── App.js # 主应用组件 (15KB, 454行)│ ├── index.js # 应用入口点│ ├── index.css # 全局样式│ ├── App.css # 应用样式│ ├── components/ # 组件目录│ │ ├── popup/ # 弹窗组件│ │ ││ │ └── common/ # 通用组件│ ├── services/ # 服务层│ ├── redux/ # 状态管理│ ├── config/ # 配置文件│ ├── utils/ # 工具函数│ ├── pages/ # 页面组件│ └── assets/ # 静态资源│ └── icons/ # 图标资源├── public/ # 公共资源├── build-extension/ # 构建输出目录├── build-extension.js # 扩展构建脚本 (9.7KB, 293行)├── package.json # 项目配置└── README.md # 项目说明prompt：
1、点击添加，弹窗，一比一还原设计稿 2、添加后的数据保存到本地，下次打开优先读本地缓存 3、左边菜单栏也支持拖动排序，数据保存到本地 请复述我的需求，我觉得没问题后再执行cusor 首次回复：
我来复述您的需求，确保理解准确：需求复述1.点击"添加导航"按钮，弹出添加分类的弹窗 一比一还原您提供的设计稿 包含：分类图标选择，分类名称输入框 保存按钮 关闭按钮2.添加后的导航数据保存到浏览器本地存储（localStorage） 下次打开页面时，优先读取本地缓存数据 如果没有本地数据，则显示默认数据3.左侧菜单栏支持拖拽排序功能 排序后的数据也保存到本地存储 重新打开页面时保持排序状态 技术实现要点：使用 HTML5的拖拽 API 实现排序 使用 localStorage 进行数据持久化 弹窗使用模态框实现 图标选择使用网格布局 请确认这个理解是否正确，如果没问题我就开始实现这些功能最终调试后效果：
prompt:
帮我实现添加网站导航弹窗：请一比一还原设计图，要求有：1、网络地址输入、链接名称、网址简介、文字图标、选择图标（带自动识别 http 链接的 ico 和文字图标）、背景颜色、保存按钮 2、输入网站后，自动获取 ico 图标和站点简介填充到对应为止 3、点击保存在对应栏目显示 请复述我的需求，我决定没问题再执行新增底部程序坞，功能如下：1、固定显示在底部水平居中，上下滑滚动切页时不动2、程序坞分为三部分，左边三个位置显示最近点击过的应用网站图标、中间三个位置显示用户手动从内容网站内容面板拖动过来固定的网站图标，最多显示三个，最右边显示一个垃圾桶3、左边三个图标规则：用户从内容网站grid的item点击网站后，把对应网站图标插队列里，以左到右排序，先进先出4、中间三个位置规则：用户可以手动把内容网站grid的item拖动这个位置，把对应网站图标插队列里，以左到右排序，先进先出5、最右边垃圾桶规则：用户可把内容网站grid的item拖动这个位置后，执行删除操作6、这三部分用一个分割线隔开7、一比一还原设计稿，不要影响到其他功能，不要自由发挥请复述我的需求，我觉得没问题后再执行cursor回复：
将80非核心功能延后处理精细化问答● 明确修改边界
每次新增功能或者修复问题，明确修改模块范围，防止cursor触发优化代码，引发新问题● 增加日志排查
修bug cursor一直没找到解决方法时，提示它增加日志排查后端接口：请为我开发一个基于 Node.js 和Express 框架的后端项目。项目需要实现ai灯塔导航项目的相关RESTfuI API 接口:1.登录接口·接口名: POST /api/login2.注册接口接口名: POST /api/register3.菜单和对应的网站数据，请和网站保持到本地的数据基本保持一致技术要求：1.使用 Express 框架构建 API2.使用 MongoDB 作为数据库，通过 Mongoose 进行数据操作3.实现适当的错误处理和输入验证4.使用异步/等待(async/await)语法处理异步操作5.遵循 RESTfu API 设计原则6.添加基本的日志记录功能以下是数据库连接方式:mongodb://root:l78tljzc@ai-denta-db-mongodb.ns-zvp7hefz.svc:27017.....一顿代码实现后，还给出了测试用例，并自测通过AI灯塔导航后端API接口测试用例以下是所有可直接访问的接口的curl测试用例，使用时请替换TOKEN为您的实际登录令牌。用户认证相关接口1.curl -X POST http: "username": "testuser", "email": "test@example.com", "password": "password123" }'2.curl -X POST http: "email": "test@example.com", "password": "password123" }' 菜单管理接口3.curl -X GET http:4.curl -X GET http: .......ai-dengta-api/├── src/│ ├── index.js│ ├── app.js│ ││ ├── controllers/│ ├── models/│ ││ ├── routes/│ ├── middleware/│ │ ├── auth.js│ │ └── sign.js│ │ └── sealosStorage.js│ ││ ├── config/│ │ ├── db.js│ │ ├── DefaultConfig.js│ │ └── OnlineDefaultConfig.json│ ││ └── utils/├── logs/├── package.json├── ecosystem.config.js├── entrypoint.sh└── README.md● 原型先行或者前端先行
让 AI 从一开始就明确项目形态和功能框架，生成 api 接口并自动对接前端功能● 结构化描述 + 代码示例
提供完整的接口规范，包括请求/响应格式、错误处理、业务逻辑，如请帮我实现一个用户注册接口，要求：- 路径：POST /api/auth/register- 参数：{ email, password, username }- 验证：邮箱格式、密码长度≥6、用户名唯一性- 响应：{ success: true, data: { userId, token } }- 错误：邮箱已存在、参数无效等-请参考现有的 authController.js 代码风格，使用相同的错误处理模式。● 分步骤引导 + 迭代优化
先让 Cursor 生成基础框架，再逐步完善细节，避免一次性生成复杂代码出错promt:
在根目录新建一个ai-dengta-admin网站后台管理项目，项目框架和ai-dengta-nav保持一致，主要使用ant design组件库，功能要求有：1、总体框架是，顶部导航左边logo，右边登录功能，导航下面：左边菜单，右边功能区2、用户模块，用户信息增删查改3、在线网站模块，增删查改4、默认导航网站模块，增删查改5、你作为经验丰富的全栈工程师和产品设计师，请根据现有后端接口和前端ai导航网站，完善下这个后台管理功能的设计请复述下我的需求，我觉得没问题再执行cursor:
五大功能模块1.● 用户统计图表(总用户数、活跃用户、新增用户趋势) ● 网站访问统计(热门网站、点击量排行) ● 系统状态监控(服务器状态、数据库连接) ● 快捷操作入口2.● 用户列表: 分页展示、搜索过滤、批量操作 ● 用户详情: 查看用户基本信息、导航数据、登录记录 ● 权限管理: 普通用户/管理员角色切换 ● 用户操作: 禁用/启用、重置密码、删除用户3.● 分类管理: 创建/编辑/删除导航分类、拖拽排序 ● 网站管理: 批量导入、单个添加、编辑、删除 ● 网站审核: 用户提交的网站审核流程 ● 统计分析: 各分类网站数量、用户使用情况4.● 默认导航设置: 为新用户设置默认导航结构 ● 模板管理: 创建导航模板供用户选择 ● 批量操作: 批量更新用户导航、推送新导航 ● 导航分析: 用户导航使用习惯分析5.● 基础配置: 网站标题、Logo、主题色彩 ● 功能开关: 注册开关、审核开关等 ● 邮件配置: SMTP 设置、邮件模板 ● 数据备份: 自动备份设置、手动备份/恢复ai-dengta/├── ai-dengta-api/├── ai-dengta-nav/├── ai-dengta-web/└── ai-dengta-admin/三、 部署上线1 、 前端 部署（1）关联 github 仓库，在 Netlify 绑定 github 对应项目仓库和分支，添加好编译脚本
（2）后行每次修改代码推送到 github，netlify 会自动拉取代码来编译、生成、部署静态站点
2、 后端 部署（1）关联 github 仓库
（2）在 sealos 新增接口 dexbox，选择对应配置后，选择 cursor 打开，把项目代码直接拷贝到打开的工程，同步代码后，发布版本，会生成 docker 镜像，直接一键发布即可
（3）后续在本地改代码后，sealos 打开对应 cursor 项目，git 更新代码后，直接发布即可
3 、 AI灯塔导航项目本文详细介绍了借助 Cursor 这一 AI 编程助手，从开发前的准备工作，包括 AI 编程助手选型、Cursor 的使用技巧、技术选型以及部署平台选择，到项目的具体开发过程，涵盖网站命名、logo 设计、需求分析与原型设计、前端代码编写、后端代码编写以及管理后台代码编写，再到最后的部署上线环节，完整呈现了 AI 灯塔导航项目从 0 到 1 的实现全过程。
后面，我将为大家分享下这个项目的实战心得与独家经验，比如：如何精准拿捏提示词的 “分寸感”；面对 AI 生成代码中的 “隐形 bug”，有哪些快速排查的技巧；如何利用零散时间 ai 开发等等敬请期待！
AI 时代，效率为王。希望这个极简导航网站能帮助到你，访问 www.aidengta.cn 即刻体验！
来源：墨码行者