我一个后端,用AI做了个导航页,发现开发模式真的变了

说起来,春节前几天,我突然想做个自己的导航页。

为什么?因为浏览器书签太乱了。常用的开发工具、设计资源、AI工具散得到处都是。每次找都要半天。我想有个地方,把常用的链接都集中起来,还能按类别整理。

虽然我已经在用现成的自定义导航页产品了，但是我没法给他们提需求，他们也不可能会听，有些功能我想改，根本不可能！

我想拥有一个符合自己审美的导航页，于是它来了：

dh.huhage.fun/

作为后端开发,这个需求挺简单的。但问题来了,我不会写前端。

之前也试过学React、Vue,但每次都坚持不下来。组件、状态管理、样式------对我来说就像天书。所以这个想法就一直拖着,直到春节前几天,我突然想:能不能用AI试试?

结果,两天时间就搞定了。

用的工具链也很简单:Lovable做初版前端,Claude Code和Codex打磨,Supabase接入登录注册。整个过程出奇地顺利,几乎没有遇到什么阻碍。

让我先说说我为什么会选这几个工具。

为什么是Lovable

一开始,我其实对比了好几个工具。

市面上的AI开发工具挺多的:Gemini、Bolt.new、ClaudeCode...我都试了一圈。

测试方法很简单,我用同样的Prompt让它们生成导航页:

markdown 复制代码

# 个性化导航页开发需求
## 核心定位
开发一款以极致UI设计为核心竞争力的个性化导航页产品"呼哈导航"，所有视觉元素需经过深度打磨，拒绝同质化、俗套化设计，将UI/UX体验作为核心优先级。

## 1. 设计要求
- 视觉风格：追求高级感与独特性，每个UI元素（按钮、卡片、图标、动效、配色、排版）均需精细化设计，避免通用模板化风格
- 主题色切换：用户可以自己切换喜欢的主题色
- 布局方案：提供至少3种差异化核心布局（如网格瀑布流、分类抽屉式、极简单列式），支持用户一键切换，每种布局需适配不同使用场景（高效查找、视觉沉浸、极简操作）
- 多端兼容：全站采用响应式设计，移动端需做专属适配（如触控交互优化、竖屏布局重构、操作按钮放大），保证移动端体验与PC端一致优质
- 支持暗黑模式和亮色模式切换
- UI设计必须符合大厂设计规范，有大厂的设计风范

## 2. 核心功能
### （1）自定义分类管理
- 用户可自主创建/编辑/删除网址分类（支持分类名称、分类图标、分类排序、分类背景自定义）
- 分类支持层级管理（必须包含一级/二级分类），满足多维度整理需求

### （2）网址个性化管理
- 每个分类下支持用户添加自定义网址，可配置项包括：网址链接、显示名称、自定义图标（支持上传/选择内置图标/自动抓取网站favicon）、备注信息
- 网址展示形式需精美化：支持卡片悬停动效、图标渐变、信息分层展示，避免单调列表式呈现

### （3）分享功能
- 支持用户生成自定义分享链接（可自定义链接后缀），分享后访客可直接查看该用户的导航页（只读权限）
- 分享页需保持原设计风格，且适配移动端访问

### （4）用户系统
- 基础登录功能（支持邮箱/手机号验证，优先考虑Supabase Auth集成）
- 登录后数据与用户账号绑定，支持多端同步

### （5）搜索功能
- 主页顶部展示搜索功能，可以切换搜索引擎，比如bing、百度、google
- 也支持快速检索用户添加的网址

## 3. 技术与开发规划
- 数据库：使用Supabase，所有数据表统一前缀为dh_（如dh_users、dh_categories、dh_bookmarks）
- 开发优先级：先完成前端UI/交互、核心功能逻辑，数据库相关开发后置（需预留数据对接接口）
- 技术要求：前端需保证性能与视觉一致性，交互动效流畅不卡顿

## 4. 交付期望
- 清晰的设计稿（含多布局方案、移动端适配稿）
- 可运行的前端原型（核心功能可交互）
- 明确的数据库表结构设计（dh_前缀）
- 功能实现的技术方案说明

Gemini生成的代码能用,但界面有点普通。

Bolt.new也不错,但默认的设计模板太程序员审美了。

Claude Code搭配GLM4.7不知道搞出了个什么玩意。

最后试了Lovable,一对比就发现了差距------它的UI更美观,默认生成的界面就很有设计感,不是那种"工程师审美"。

这就是我选Lovable的原因:简单直接,好看就够了。

就这样,大概用了2小时,一个能用的导航页初版就出来了。

为什么用Claude Code和Codex

初版能用,但还不够好。

比如,响应式布局有问题,在手机上打开会乱掉。还有一些细节:链接点击后的颜色、hover的效果、分类的展开收起动画...这些都需要调整。

这时候就需要Claude Code和Codex了。

Claude Code我之前就常用,它是个终端AI助手,能直接操作你的代码库。我先把Lovable生成的代码导出到本地,然后用Claude Code打开。

这个过程和我之前用Cursor有点像。但Claude Code的优势在于"项目级理解"------它不只是看单个文件,而是理解整个项目的结构,所以它能找到一些隐藏在多个文件之间的关联问题。

Codex的作用更偏向"细节打磨"。比如我想要给每个网站链接加上favicon图标,这个需求比较琐碎,需要逐个处理。

"帮我给所有外部链接加上自动获取favicon的功能",我对Codex说。

Codex自动分析了需求,写了一段JavaScript代码,调用Google的favicon API,自动为每个链接获取图标。

整个过程大概花了3小时,从初版到一个"看起来挺专业"的导航页,就完成了。

为什么用Supabase

做到这一步,导航页已经能用了。但我觉得还缺了点什么。

既然是自己用的工具,能不能加上用户系统?这样我可以分享给朋友,大家都可以有自己的收藏夹。

后端这块我比较熟,所以第一反应就是需要一个数据库和用户认证系统。

之前用过Firebase,但配置起来挺麻烦的。后来听说了Supabase,说是开源版的Firebase,而且和AI工具集成得很好。

春节前那天下午,我注册了Supabase,创建了一个新项目。

然后我用Claude Code连接了Supabase的MCP:

"帮我为这个导航页添加登录注册功能,使用邮箱和密码认证。"

Claude Code自动创建了必要的数据库表,配置了认证策略,然后生成了登录和注册的前端组件。

整个过程不到1小时,登录注册功能就搞定了。

而且Supabase不仅做了基本的认证,还自动包含了邮箱验证、密码重置这些功能。这些都是现成的,我不用自己写。

这时候我突然意识到,作为一个后端开发,如果是传统开发方式,光是用户认证这块,至少要花大半天时间。但现在用AI,1小时就搞定了。

2天完成一个全栈项目

整个项目花了2天。

第一天用Lovable做初版,2小时搞定。

第二天用Claude Code和Codex打磨,3小时;用Supabase加登录注册,1小时。

剩下的时间主要是测试和微调。

而且整个过程没有遇到什么大坑。

这个速度让我有点意外。作为一个后端开发,如果自己从零学前端做这个项目,保守估计也要一周。而且做出来的效果肯定不如现在。

我学到了什么

这个项目做完了,但我最大的收获不是导航页本身,而是对AI时代开发模式的思考。

技术门槛真的降低了。

我以前觉得,做全栈开发需要懂前端、后端、数据库、部署...这些东西要学几年。但现在有了AI工具,一个后端开发也能在两天内做出一个像样的全栈项目。

这不是说技术知识不重要了,而是说,AI把很多"重复劳动"和"模板代码"都自动化了。你只需要懂核心概念,剩下的交给AI。

工具的选择也很重要。

这个项目我用了4个AI工具,每个工具都有它擅长的地方:Lovable擅长快速原型,Claude Code擅长代码理解,Codex擅长细节处理,Supabase擅长后端集成。

没有哪个工具是万能的,但组合起来就很强大。

但我依然需要懂技术。

虽然AI帮我写了大部分代码,但我还是得知道什么是响应式布局,什么是JWT认证,什么是数据库表结构。不然我连需求都描述不清楚,更别说验证AI生成的代码对不对了。

AI不是让开发者变懒,而是让开发者把精力花在更重要的事情上。

给其他后端开发的建议

如果你也是个后端开发,想做点前端相关的东西,我有几个建议------

从简单项目开始。别一上来就做复杂的SaaS,先做些工具类、展示类的小项目。
用好可视化工具。Lovable这类工具能让你快速看到结果,建立信心。
AI是助手,不是替代。你依然需要理解基础概念,只是不用抠细节了。
多尝试不同的工具。没有最好,只有最适合你项目的工具组合。

最后说一句

做这个导航页之前,我以为自己这辈子都不会碰前端了。

但现在发现,有了AI,后端开发也能做全栈项目。这不是说我会转行做前端,而是说,我的可能性变大了。

以后再想做个小工具,不用再"等我先学学前端"了。直接开干,反正有AI帮忙。

这可能就是AI时代最让我兴奋的地方------技术门槛降低了,但创造的门槛反而更高了,因为限制你的不是技术能力,而是你的想法。

所以,别再"等我学会了什么"才开始动手。现在就可以开始了。

相关链接:

我的导航页: dh.huhage.fun/
Lovable: lovable.dev/
Claude Code: claude.ai/code
Supabase: supabase.com/