【零代码AI编程实战】系列
3、 [【零代码AI编程实战】AI灯塔导航-总结篇(敬请期待)]
大家好，我是程序员码歌，本文是零代码AI编程实战-AI灯塔导航项目的第二篇，将详细介绍如何通过Cursor AI辅助，实现从原型设计到最终上线的全过程。【文末有网站链接和扩展程序安装包，免费使用，请手下留情，勿刷】
一、 开发前准备
1、AI编程助手选型
cursor和trae 8大核心功能对比
trae： 理解中文编程习惯与思维、IDE更友好，模型 国内版DeepSeek与豆包，
海外版：Claude和GPT，免费版本经常排队，受不了；付费版：首月3刀，次月10刀，价格是cursor的一半
cursor： Claude、GPT、Gemini，免费版150次的免费使用额度（包括代码补全、AI对话等功能），付费版：20刀/月，最近不断调整规则，claude模型也不能用了，要特殊手段
我最终选择了cursor，主要看中cursor在代码重构和复杂项目表现更优能力。前期我是用免费版，无限续杯使用了半个月，后面直接换付费版了，毕竟每次换账号刷机器码也要花点时间，时间就是金钱，我零碎时间不多。
2、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
二、 AI 开发 过程
1 、 网站命名--Deapseak生成
提示语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资源聚合在一起的平台。功能指向明确。2 、 网站logo设计--豆包AI生图
第一步：初步logo生成
第二步：颜色风格替换
第三步：百度ai修图助手百度图片 | 免费AI图像生成工具与海量高清图平台
第三步：ico图标转换网站：The best Favicon Generator (completely free) - favicon.io
3、 需求分析&原型设计
选择claude 3.7模型
（1）Prompt
我想要开发一个ai汇总网站，主要有网站和极简浏览器导航，在根目录新建一个ai-go文件夹放里面。请考虑遵守以下的规范:1.用户体验:先分析产品的主要功能和需求，确定下核心能力2.产品规划:希望你作为一个 20 年的产品经理，来设计我们的整个产品，确保架构非常合理3.U 设计:作为 30 年的 U1设计师，要保证符合目标人群的使用习惯、符合网页端和手机端的设计规范、使用比较现代化的 U1元素，注重产品体验和视觉4.输出:-请使用 HTML+ Tailwind CSS 来生成所有的原型图界面，可以使用 FontAwesome 来美化界面，接近真实的 app 效果。-请根据功能拆分代码文件，保存结构清晰，每个功能界面需要一个独立的 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.com6、三个端的页面平铺在index.html，标题分类号（2）cursor首次生成原型效果
极简导航网：
一站式导航网：
（3）通过多次小步调整，逐步完善原型效果，最后的原型效果：
（ 4 ） 经验 心得
● 使用精确的提示词
❌ 不好的提示："让页面更好看"✅ 好的提示："调整web.html的卡片间距，增加hover效果，使用更现代的阴影"● 分模块调整
- 先调整布局结构- 再优化样式细节- 最后完善交互效果- 每次只关注一个方面● 参考设计风格
- 明确指定参考网站- 说明具体的设计元素- 要求保持一致性- 注意品牌调性4、 前端代码编写
选择模型claude 3.5或者3.7
（1）主框架搭建
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 # 项目说明（2）实现左边添加分类功能
prompt：
1、点击添加，弹窗，一比一还原设计稿2、添加后的数据保存到本地，下次打开优先读本地缓存3、左边菜单栏也支持拖动排序，数据保存到本地请复述我的需求，我觉得没问题后再执行cusor首次回复：
我来复述您的需求，确保理解准确：需求复述1. 添加功能弹窗点击"添加导航"按钮，弹出添加分类的弹窗一比一还原您提供的设计稿包含：分类图标选择，分类名称输入框保存按钮关闭按钮2. 本地数据存储添加后的导航数据保存到浏览器本地存储（localStorage）下次打开页面时，优先读取本地缓存数据如果没有本地数据，则显示默认数据3. 左侧菜单栏拖拽排序左侧菜单栏支持拖拽排序功能排序后的数据也保存到本地存储重新打开页面时保持排序状态技术实现要点：使用HTML5的拖拽API实现排序使用localStorage进行数据持久化弹窗使用模态框实现图标选择使用网格布局请确认这个理解是否正确，如果没问题我就开始实现这些功能最终调试后效果：
（2）导航网站添加弹窗
prompt:
帮我实现添加网站导航弹窗：请一比一还原设计图，要求有：1、网络地址输入、链接名称、网址简介、文字图标、选择图标（带自动识别http链接的ico和文字图标）、背景颜色、保存按钮2、输入网站后，自动获取ico图标和站点简介填充到对应为止3、点击保存在对应栏目显示请复述我的需求，我决定没问题再执行cusor回复：
多次 调试后最终效果：
（3）底部程序坞
prompt:
新增底部程序坞，功能如下：1、固定显示在底部水平居中，上下滑滚动切页时不动2、程序坞分为三部分，左边三个位置显示最近点击过的应用网站图标、中间三个位置显示用户手动从内容网站内容面板拖动过来固定的网站图标，最多显示三个，最右边显示一个垃圾桶3、左边三个图标规则：用户从内容网站grid的item点击网站后，把对应网站图标插队列里，以左到右排序，先进先出4、中间三个位置规则：用户可以手动把内容网站grid的item拖动这个位置，把对应网站图标插队列里，以左到右排序，先进先出5、最右边垃圾桶规则：用户可把内容网站grid的item拖动这个位置后，执行删除操作6、这三部分用一个分割线隔开7、一比一还原设计稿，不要影响到其他功能，不要自由发挥请复述我的需求，我觉得没问题后再执行curs o r 回复 ：
最终 调试 后 效果 ：
（5）经验心得
● 聚焦核心 ， 优先主线 ，再细节
将80%精力投入20%的关键功能非核心功能延后处理精细化问答● 明确修改边界
每次新增功能或者修复问题，明确修改模块范围，防止cursor触发优化代码，引发新问题● 增加日志排查
修bug cursor一直没找到解决方法时，提示它增加日志排查5、 后端代码编写
选择模型claude 3.5或者3.7
（1） 接口 prompt
后端接口：请为我开发一个基于 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（ 2 ） cursor执行情况
.....一顿代码实现后，还给出了测试用例，并自测通过AI灯塔导航后端API接口测试用例以下是所有可直接访问的接口的curl测试用例，使用时请替换TOKEN为您的实际登录令牌。用户认证相关接口1. 用户注册curl -X POST http://localhost:50527/api/auth/register \ -H "Content-Type: application/json" \ -d '{ "username": "testuser", "email": "test@example.com", "password": "password123" }'2. 用户登录curl -X POST http://localhost:50527/api/auth/login \ -H "Content-Type: application/json" \ -d '{ "email": "test@example.com", "password": "password123" }' 菜单管理接口3. 获取用户的所有菜单curl -X GET http://localhost:50527/api/menus \ -H "Authorization: Bearer TOKEN"4. 获取用户的特定菜单curl -X GET http://localhost:50527/api/menus/home \ -H "Authorization: Bearer TOKEN" .......（3）后端接口目录结构
ai-dengta-api/├── 📁 src/ # 源代码目录│ ├── 📄 index.js # 应用入口文件 (9.4KB, 374行)│ ├── 📄 app.js # Express应用配置│ ││ ├── 📁 controllers/ # 控制器层│ ││ ├── 📁 models/ # 数据模型层│ ││ ├── 📁 routes/ # 路由层│ ││ ├── 📁 middleware/ # 中间件│ │ ├── 📄 auth.js # 认证中间件 (2.3KB, 98行)│ │ └── 📄 sign.js # 签名中间件 (3.0KB, 85行)│ ├── 📁 services/ # 服务层│ │ └── 📄 sealosStorage.js # Sealos存储服务 (5.8KB, 229行)│ ││ ├── 📁 config/ # 配置文件│ │ ├── 📄 db.js # 数据库配置 (1.5KB, 47行)│ │ ├── 📄 DefaultConfig.js # 默认配置 (53KB, 377行)│ │ └── 📄 OnlineDefaultConfig.json # 在线默认配置 (28KB, 785行)│ ││ └── 📁 utils/ # 工具函数│├── 📁 logs/ # 日志目录├── 📄 package.json # 项目配置├── 📄 ecosystem.config.js # PM2配置文件├── 📄 entrypoint.sh # 启动脚本└── 📄 README.md # 项目说明（4）经验 心得
● 原型先行或者前端先行
让AI从一开始就明确项目形态和功能框架，生成api接口并自动对接前端功能● 结构化描述 + 代码示例
提供完整的接口规范，包括请求/响应格式、错误处理、业务逻辑，如请帮我实现一个用户注册接口，要求：- 路径：POST /api/auth/register- 参数：{ email, password, username }- 验证：邮箱格式、密码长度≥6、用户名唯一性- 响应：{ success: true, data: { userId, token } }- 错误：邮箱已存在、参数无效等- 业务逻辑：密码加密、生成JWT请参考现有的 authController.js 代码风格，使用相同的错误处理模式。● 分步骤引导 + 迭代优化
先让 Cursor 生成基础框架，再逐步完善细节，避免一次性生成复杂代码出错6、管理后台代码编写
promt:
在根目录新建一个ai-dengta-admin网站后台管理项目，项目框架和ai-dengta-nav保持一致，主要使用ant design组件库，功能要求有：1、总体框架是，顶部导航左边logo，右边登录功能，导航下面：左边菜单，右边功能区2、用户模块，用户信息增删查改3、在线网站模块，增删查改4、默认导航网站模块，增删查改5、你作为经验丰富的全栈工程师和产品设计师，请根据现有后端接口和前端ai导航网站，完善下这个后台管理功能的设计请复述下我的需求，我觉得没问题再执行cursor:
五大功能模块1. 仪表盘模块● 用户统计图表(总用户数、活跃用户、新增用户趋势)● 网站访问统计(热门网站、点击量排行)● 系统状态监控(服务器状态、数据库连接)● 快捷操作入口2. 用户管理模块● 用户列表: 分页展示、搜索过滤、批量操作● 用户详情: 查看用户基本信息、导航数据、登录记录● 权限管理: 普通用户/管理员角色切换● 用户操作: 禁用/启用、重置密码、删除用户3. 在线网站管理模块● 分类管理: 创建/编辑/删除导航分类、拖拽排序● 网站管理: 批量导入、单个添加、编辑、删除● 网站审核: 用户提交的网站审核流程● 统计分析: 各分类网站数量、用户使用情况4. 导航管理模块● 默认导航设置: 为新用户设置默认导航结构● 模板管理: 创建导航模板供用户选择● 批量操作: 批量更新用户导航、推送新导航● 导航分析: 用户导航使用习惯分析5. 系统设置模块● 基础配置: 网站标题、Logo、主题色彩● 功能开关: 注册开关、审核开关等● 邮件配置: SMTP设置、邮件模板● 数据备份: 自动备份设置、手动备份/恢复多次调试最后效果：
7 、 A I 灯塔 完整 项目 结构
ai-dengta/├── 📁 ai-dengta-api/ # 后端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灯塔导航项目
极简AI灯塔导航网和后端接口部署在sealos
一站式AI灯塔导航网和管理后台部署在netlify（服务器在国外，不太稳定）
四、 总结
本文详细介绍了借助 Cursor 这一 AI 编程助手，从开发前的准备工作，包括 AI 编程助手选型、Cursor 的使用技巧、技术选型以及部署平台选择，到项目的具体开发过程，涵盖网站命名、logo 设计、需求分析与原型设计、前端代码编写、后端代码编写以及管理后台代码编写，再到最后的部署上线环节，完整呈现了 AI 灯塔导航项目从 0 到 1 的实现全过程。
六、后续
后面，我将为大家分享下这个项目的实战心得与独家经验，比如：如何精准拿捏提示词的 “分寸感”；面对 AI 生成代码中的 “隐形 bug”，有哪些快速排查的技巧；如何利用零散时间ai开发等等敬请期待！
AI时代，效率为王。希望这个极简导航网站能帮助到你，访问 www.aidengta.cn 即刻体验！
更多精彩AI咨询与编程首发，请关注公众号"程序员码歌"：这里将长期专注分享AI工具与AI编程实战，为开发者与AI爱好者提供帮助，让您每次阅读都有些许收获！
