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 classhexagram-container svg v-for(line,index) in lines :keyindex rect v-ifline1 classyang-line/ path v-else classyin-line/ /svg button clickgenerateNew求签/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分钟写出卦象生成算法但要优化随机数分布还是需要人工干预。
