我不是科班出身。以前编程都是为了解决一些手头的问题。这几年AI兴起，让我感受到了AI写代码的超级能力。看大家不断提Vibe Coding，又刚好看到 @songguoxiansen 分享的每日一色这个创意，觉得很有意思，就想着自己也来试试，实现了这个较为完整的每日一色网页应用。我没有任何 npm 开发的经验，对 JavaScript 的了解也不多。这应该能让我真切体会到Vibe Coding的乐与苦。

开发工具自然而然的选择了 Google 最新发布的 Antigravity。发布很多天了， Antigravity 目前依然可以免费使用，额度也挺多。Antigravity 的界面设计的非常好，左边栏是经典的VS Code样式的文件目录、Git、扩展管理等面板，中间是编辑器，右边栏是与AI进行交互的界面，非常适合我这样没有软件开发经验的人。

根据我有限的编程经验，项目开发就是直接在右边栏向AI提要求。AI IDE发展到现在，已经不再是简单的一股脑儿根据要求生成代码了。Antigravity 会自动分析意图，提出开发方案，架构，并分解出任务列表，然后按照任务计划一步步实现。这个过程中我还可以检查AI的部署方案，直接在方案中添加评论，AI会根据我的评论调整执行过程。

这个每日一色的网页APP，采取了单页方案，使用的技术栈如下：

• 核心框架：Next.js 15/16 (App Router) – 采用 React Server Components (RSC) 和静态导出功能。
• 开发语言：TypeScript – 全面类型安全，提升代码质量。
• 样式方案：Tailwind CSS v4 – 原子化 CSS，快速构建响应式布局。
• 动画引擎：Framer Motion – 实现平滑的页面过渡和微交互动画。
• 图标库：Lucide React – 轻量、风格统一的 SVG 图标。
• 字体优化：next/font – 自动优化加载 Google Fonts (Noto Serif SC, LXGW WenKai TC)。

在基础的每日一色的功能的基础上，我陆陆续续要求AI做了以下事情：

• 根据 zhongguose.com 提供的中国传统色数据，扩展了静态的中国传统色数据。因为数据量大，这一过程AI花了很长时间，遇到了很多次额度受限的问题。
• 根据颜色名称，搜索了相关的古诗词，添加到中国传统色数据中。这一过程也是费时费力（当然是费的AI的力），再次遇到了多次额度受限的问题。
• 从网上找了一些中国传统色的图片，添加到项目中。但是图片不多，也难以跟颜色的意境相匹配。后来干脆放弃了，只保留了最初的那几个好一些的图片背景。这个背景图片会在鼠标悬停在颜色上时显示。
• 添加了智能搜索的功能，用户可以输入汉字名称、拼音、HEX 代码等进行搜索。
• 调整了默认的颜色名称的字体，使用了有古风的霞鹜字体。
• 要求AI调整页面样式，竖排展示颜色名称，同时控制区块高度和字体大小，以免页面上的按钮因为内容长度变化而变换位置。
• 自动生成了APP图标。
• 当然，如何手工调试和部署到服务器，也是AI给我解释的。

虽然我对这里的核心框架、开发语言、样式方案、动画引擎等都不了解，但是整体开发过程还算顺利。

这次 Vibe Coding 让我感受最深的是，AI编程已经从纯粹的代码生成，发展到了具备软件工程能力的阶段。Antigravity 表现出来的软件工程能力，让我在看他开发的过程中学习到了很多我之前没有接触过的东西。

这也让我意识到，对于编程这件事，像基础语法等写代码的能力好像已经没那么重要了，但是软件工程思维、架构设计能力、以及对业务逻辑的理解，反而变得更加重要。AI 可以帮我们写出完美的代码，但它需要我们告诉它“做什么”以及“为什么这么做”。未来的程序员，可能更像是一个产品经理+架构师的结合体，指挥着 AI 这个超级工程师去构建数字世界。疑问是，对于初学者而言，是否可以跳过基础语法的学习，直接学习软件工程思维、架构设计能力、以及对业务逻辑的理解呢？恐怕不尽然。©

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/vibe-coding-web-app-daily-chinese-color/>。转载请保留此信息及相应链接。