用AI对话开发算卦平台：Vibe Coding实践-开发者社区

1. 项目背景与核心思路

最近在开发者圈子里流行起一种被称为"Vibe Coding"的新型编程方式——不用打开传统IDE，完全依靠自然语言与AI对话完成项目开发。作为常年混迹在代码堆里的老鸟，我决定用ClaudeCode这个AI编程助手做个实验：能不能仅靠"嘴喷"（语音/文字交互）就搞出个能用的算卦平台？

这个项目的核心挑战在于：如何在不接触任何代码编辑器的情况下，通过精准的指令描述让AI理解需求，并输出可直接部署的完整项目。整个过程就像在玩一场高难度的编程版"你画我猜"，只不过这次我们只能用文字来"画"出整个系统。

提示：选择算卦平台作为案例有两个原因：一是业务逻辑相对独立完整；二是包含前后端交互，能充分测试AI的工程化能力。

2. 需求拆解与方案设计

2.1 功能需求清单

首先需要把传统PRD文档转换成AI能理解的对话形式。我给ClaudeCode的初始Prompt是这样的：

我需要创建一个现代风格的在线算卦平台，请帮我规划技术方案。核心需求包括： 1. 前端：响应式页面，包含卦象选择区和结果展示区 2. 后端：卦象计算逻辑（基于传统易经64卦） 3. 数据：卦辞数据库（中英文双语） 4. 交互：用户点击→生成卦象→显示解读

AI在30秒内返回了完整的技术方案建议：

前端：Vue3 + TailwindCSS
后端：Node.js + Express
数据库：SQLite（内置卦辞数据）
部署：Vercel一键部署

2.2 技术选型背后的思考

为什么AI会推荐这套技术栈？经过多次测试发现几个规律：

对轻量级项目，AI会优先选择文档丰富、社区活跃的方案
全栈JavaScript方案可以减少上下文切换
内置数据库比外部服务更符合"零配置"需求

避坑指南：初期尝试让AI用Python Flask实现时，出现了前后端分离导致的CORS问题。最终选择同构JS栈省去了很多配置麻烦。

3. 核心功能实现过程

3.1 卦象生成算法

这是最考验AI数学能力的部分。传统易经占卜需要复杂的推演过程，我们通过以下对话实现了简化版算法：

我：需要实现64卦生成逻辑。输入应该是随机数，输出对应卦象的ID和名称 ClaudeCode：明白，建议采用以下算法： 1. 生成6位随机二进制数（如011010） 2. 每位数代表爻线（0阴1阳） 3. 组合成卦象后匹配预定义的卦辞

最终生成的Node.js核心代码虽然简单但完全可用：

function generateHexagram() { const lines = Array.from({length:6}, () => Math.random() > 0.5 ? 1 : 0); const hexagramId = parseInt(lines.join(''), 2); return { id: hexagramId, lines }; }

3.2 前端交互设计

通过自然语言描述UI需求也能获得不错的效果。典型对话示例：

我：需要个美观的卦象展示区，点击按钮生成新卦 ClaudeCode：建议使用SVG绘制卦象，配合动画效果。这是Vue组件草案： <template> <div class="hexagram-container"> <svg v-for="(line,index) in lines" :key="index"> <rect v-if="line===1" class="yang-line"/> <path v-else class="yin-line"/> </svg> <button @click="generateNew">求签</button> </div> </template>

实测发现：对UI细节描述越具体（如"按钮要有按压反馈"），AI生成的代码完成度越高。

4. 数据库与国际化方案

4.1 卦辞数据建模

传统方式需要手动建表，而通过AI可以这样操作：

我：需要包含64卦的中英文解读，结构包含：卦ID、卦名、卦辞、解读 ClaudeCode：建议使用以下SQLite schema： CREATE TABLE hexagrams ( id INTEGER PRIMARY KEY, name_zh TEXT, name_en TEXT, judgment_zh TEXT, judgment_en TEXT, image_zh TEXT, image_en TEXT );

更神奇的是，AI还能帮忙生成示例数据：

INSERT INTO hexagrams VALUES (1, '乾', 'The Creative', '元亨利贞', 'Success through perseverance...');

4.2 多语言实现技巧

通过明确指令可以轻松实现国际化：

我：前端要根据浏览器语言自动显示中英文 ClaudeCode：推荐使用vue-i18n，配置示例： const messages = { en: { hexagramName: 'Hexagram {{id}}' }, zh: { hexagramName: '第{{id}}卦' } }

5. 项目部署与优化

5.1 一键部署方案

Vercel之所以被AI推荐，是因为它能完美对接这个工作流：

将AI生成的代码推送到GitHub仓库
在Vercel控制台导入仓库
自动识别并部署全栈应用

部署过程中发现一个关键点：需要明确告诉AI生成vercel.json配置：

{ "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }] }

5.2 性能优化实践

虽然是小项目，但AI也能给出专业建议：

使用SWR缓存卦辞数据
对SVG卦象进行CSS will-change优化
后端启用gzip压缩

6. 开发过程中的经验总结

6.1 有效Prompt编写技巧

经过20多次迭代，总结出与AI高效协作的秘诀：

分步骤描述需求（先框架后细节）
明确技术约束（如"不要使用jQuery"）
要求示例代码（"请给出具体实现"）
及时纠正偏差（"这个方案有问题，因为..."）

6.2 典型问题排查记录

卦象显示错乱原因：AI初始方案用unicode符号显示爻线，字体兼容性差解决：改用SVG绘制
数据库连接失败原因：AI默认生成的SQLite路径是相对路径解决：明确要求使用绝对路径
移动端布局异常原因：Tailwind配置未包含所有断点解决：补充完整配置文件

7. Vibe Coding的适用场景分析

虽然这个实验成功了，但经过实测发现这类开发方式最适合：

原型验证（快速验证想法）
个人工具开发（不需要长期维护）
教育演示（展示编程逻辑）
非关键业务（容错率高）

而对于复杂企业级应用，目前还存在以下局限：

缺乏端到端测试方案
架构文档难以自动生成
性能调优依赖人工干预

个人心得：AI编程就像有个随时待命的资深搭档，但它不能完全替代工程师的系统性思维。最适合的场景是把你的专业判断和它的快速实现结合起来。比如在这个项目中，AI可以3分钟写出卦象生成算法，但要优化随机数分布还是需要人工干预。

用AI对话开发算卦平台：Vibe Coding实践