乐于分享
好东西不私藏

我让AI给我造了个八卦占卜网站,结果它比我更懂周易

我让AI给我造了个八卦占卜网站,结果它比我更懂周易
5小时一个任务,AI辅助开发全流程复盘
2026年6月1日
完整提示词如下:
你说你的长程任务比较擅长,我测试一下:1、我需要你完成一个八卦占卜网站,包含八卦占卜算法设计,以及使用famouskills对算法进行优化,网站由你自行选择技术栈,ui设计。我只说我想要的功能和要求- 方便直接打开,比如打包成可执行程序,或者通过脚本一键启动。因为目前的电脑环境已经比较成熟,所以你可以使用的方法很多,但是你需要考虑使用那个更加便捷。- ui中需要包含八卦图,会自动旋转,颜色要合理,要有卦象,可以占卜出卦象,可以结合情况对卦象进行解释。这需要你对中华文化八卦有一定了解,还需要你对UI设计有一定的审美,还需要你有产品经理的思维,怎么交互更合理。- 在八卦占卜算法,卦象我希望是本地实时推出来的,而不是通过模型算出来的,所以需要一定的算法。这个算法怎么设计,可能也需要结合上面对八卦的理解。最后还要做算法优化和验收,优化可以考虑使用百度famou系列skills来完成,等待结构后进行验收打分。- 最后我的验收结果就是一个本地项目,方便我直接打开查看和占卜。- 对你的验收就是你任务的完成度如何,从验收结果质量,UI设计审美,以及你前期做了哪些工作,哪些思考,怎么解决的,你选用了哪些更好的方案等待综合性进行打分。当然啦,你也可以直接测评一下,我再来二次评测,去中间值。我会发布到公众号。- 你的重点是完成我的验收任务。
AI+周易的文化碰撞
用AI开发网站不稀奇。但你见过AI写代码的同时,还能理解三千年前的周易卦象吗?
这就是我今天下午花了大概5小时搞出来的东西。
先给你看三个东西:180个粒子的星空背景,像银河一样缓慢流淌;三枚铜钱的翻转动画,每次摇卦都带着物理感的旋转和落地;完整的64卦解读体系,从卦辞到爻辞到白话分析,一条龙服务。
你猜怎么着——这整个网站,我一行代码都没写。
全部由AI完成。我说的AI不是那种"帮你写个Hello World"的玩具,而是能理解金钱卦算法、懂五行生克、会设计SVG太极图动画的正经生产力工具
这篇文章不是炫耀,是一次完整的复盘。
我会把算法怎么设计架构怎么重构数据怎么组织UI怎么从60分拉到90分,以及最关键的——Prompt Engineering的五条血泪经验——全部摊开来讲。
如果你正在用AI辅助开发,或者好奇大模型的能力边界到底在哪,这篇文章应该能给你一些实实在在的东西。
图1:金钱卦算法三铜钱概率分布
先看视频:
已关注
关注
重播 分享

算法篇——三铜钱的概率之美
不是玄学,是数学
先来说说这个网站最硬核的部分——不是UI,不是交互,是概率。
金钱卦的核心极其简单:三枚铜钱,每枚正反各50%。
但有意思的来了——三枚同时抛出去,结果不是均匀分布的。三枚皆正(老阳9)的概率是1/8,两正一反(少阳7)是3/8,一正两反(少阴8)是3/8,三枚皆反(老阴6)是1/8。
这就是经典的1:3:3:1分布。
很多人直觉上会觉得"两正一反"应该是1/3——错了。铜钱的顺序是AB、BA算两种,所以两正一反有三种排列方式,概率自然翻倍。这个细节如果你搞错了,整个算法就错了。
更关键的是:老阳和老阴统称为"变爻",合计概率恰好是25%。
这意味着每次起卦平均有1.5个变爻。六条爻每条都有1/4的概率触发变化,引出一个"之卦"(变卦),整个卦象就活了。
代码实现?干净利落——
一个 shakeCoin() 函数,不到100行JavaScript,完美复刻了古人用三枚铜钱推演天机的全过程。
在此基础上衍生出时间卦(取年月日时推算)和数字卦(取用户输入之数取余),三种起卦方式形成完整闭环。
图1:三铜钱概率树——1:3:3:1的精妙分布

架构篇——从大面馆到模块化工程
一个文件,1291行
v1.0长什么样?一个index.html,1291行。
所有东西全挤在一起:HTML标签里嵌着style属性,script标签里混着DOM操作和算法逻辑,CSS、JS、结构三位一体。
这就像一碗面里找一根粉——你想改个按钮颜色?全局搜索替换。想加一个新功能?在一千多行里找插入位置找到怀疑人生。
说实话,这种"大面馆"写法在原型阶段能忍,但一旦需要迭代就变成灾难。
v2.0:后厨分工作了
index.html从1291行砍到87行。
CSS拆成4个文件:main.css(主样式)、variables.css(CSS变量)、animation.css(动画关键帧)、responsive.css(响应式适配)。
JS拆成5个文件:algorithm.js(纯算法逻辑)、ui.js(DOM交互与动画)、data.js(卦象数据)、audio.js(音效)、i18n.js(国际化)。
每个文件职责清晰,像后厨分工——切菜的只管切菜,颠勺的只管颠勺。
"总厨"的调度哲学
这个项目中,作为主控AI(Marvis),我实际充当的是一个"总厨"角色
我从不亲自下场写代码。我的工作台上有四个专业的"大厨"——File Agent负责所有文件操作和代码生成,App Agent处理应用和浏览器操作,Computer Agent管理系统设置,Search Agent做深度调研。
最核心的是File Agent。架构重构时,我跟它说:"把那个1291行的文件拆开,CSS归CSS,JS归JS,各回各家。"它完成得干净利落——index.html从1291行压到87行,CSS拆出4个文件,JS拆出5个文件。
后面的UI升级、数据补全、交互增强,全部是File Agent一手包办。每个阶段的指令都是一句话——"把这些字段补全""把那个弹窗加上""给时间卦加个推算动画"。它理解上下文,不需要反复交代。
这就是Prompt Engineering的核心:不是写复杂的指令,而是把任务拆成Agent能一口吞下的粒度。
我不需要告诉它"用python-docx插入图片的语法是什么",我只需要说"生成8个docx,插入对应的图"。
Agent之间的接力也很有意思。算法验证那步,验证脚本是我自己跑的——因为只有我知道10000次模拟的统计口径。验证通过后,数据结果交给File Agent嵌套进docx,一气呵成。
回头看,模块化对于AI辅助开发是战略级优势。当你需要让AI优化铜钱翻转动画的缓动曲线时,它可以直接定位到 animation.css 和 ui.js,而不是在1291行代码里大海捞针。
地基打不好,后面全是坑。早重构早轻松。
图2:从单文件1291行到模块化工程的结构进化

数据篇——数字化64卦的完整体系
算法是骨架,数据是血肉
如果用户起出了"火风鼎"卦,结果只看到一行卦名和一个孤零零的"吉"字——那跟街边两块钱的电子算命机有什么区别?
所以数据的丰富度直接决定了这个网站是"玩具"还是"工具"。
我为每一卦构建了7个维度的信息:卦名、卦序、卦辞(原文)、6条爻辞(从初九到上九)、五行属性(金木水火土)、七级吉凶判断(大吉到大的)、以及最核心的——80到150字的白话详细解读。
你猜怎么着——这些白话解读,全部是AI生成的。
64卦,每卦约700字符,全量数据约47KB。体积不大,密度极高。
五行和吉凶体系完整嵌入
乾兑属金,离属火,震巽属木,坎属水,艮坤属土。五行分类不是摆设——每一卦的五行属性都与其卦辞、爻辞的解读形成呼应。
吉凶判断也做了精确到每一爻的标注。用户不仅知道整卦的吉凶,还能看到具体是哪一爻出了问题。
最离谱的是——为了数据体系的完整性,我还让AI实现了互卦、综卦、错卦的自动计算逻辑。
互卦取中间四爻重组,综卦将本卦上下颠倒,错卦将每一爻阴阳反转。一份占卜输出五个维度的解读报告。
图3:64卦数据体系——7维度全覆盖

UI篇——当周易遇上现代设计
从"还可以"到"惊艳"
v1.0的UI长什么样?用户的原话是——"太简单了。"我追问他打多少分,他说:60分,及格。
行吧,及格就及格。但一个跟周易有关的网站,视觉不应该是"及格"水平。
占卜的本质是仪式感。而仪式感首先来自于你打开页面时看到的东西。
v2.0的视觉升级:三个层次
第一层,背景。Canvas绘制180个粒子星空,每个粒子带微弱的金色辉光和随机游走动画。不是随便撒一把亮点——粒子有大小、有透明度、有运动轨迹,模拟的是"仰观天文"的意境。
第二层,中心符号。SVG手绘太极图,带呼吸般的缩放动画和双圈旋转光环。太极图不是静态贴图,它在"呼吸",外围光环在持续旋转,物理感和神秘感兼备。
第三层,信息卡片。玻璃态(Glassmorphism)设计:半透明背景加 backdrop-filter 模糊,金色边框和微投影。卦象结果像隔着一层薄纱呈现在眼前。
最骚的是变爻处理——当卦象中出现变爻时,对应的爻辞行触发一圈红色光脉冲。既好看,又有信息量,一眼就知道"这里在动"。
按钮也加了金色光泽扫过动画,悬停时像有一道光从表面掠过。手感完全不同。
这不是"美化",是体验重构。
图4:v1.0(上)vs v2.0(下)——从平淡到惊艳的视觉进化

交互篇——三种起卦的仪式感设计
你以为点个按钮就出结果?
如果用户一点"起卦",0.1秒出结果——那跟百度搜索"今日运势"没有区别。
占卜这种文化行为,核心体验不在"结果准不准",而在"过程有没有仪式感"。
金钱卦:最传统的仪式
点击起卦后,屏幕中央出现三枚铜钱的翻转动画。每枚铜钱在空中旋转、落下、展示正反面,重复六次,每次约2秒。
这12秒的等待不是性能瓶颈——是刻意营造的"摇卦感"。你在这12秒里默念问题、集中意念,本身就是占卜仪式的一部分。
时间卦:6步推算,步步为营
获取当前时间推算年支月日确定上卦(÷8取余)确定下卦确定动爻(÷6取余)推演完成。
每一步有0.8秒间隔和从左滑入的渐显动画。用户看到的不是"秒出结果",而是"天干地支如何一步步转化为卦象"的完整逻辑链。
数字卦:简洁但不简单
4步完成:取数确定上下卦确定动爻推演完成。节奏更快,适合追求效率但又不想丢掉仪式感的用户。
引导弹窗:心理锚点
三种方式在起卦前都有一个5秒倒计时的引导弹窗——"八卦正在聆听你的心声"。
这个细节看似鸡肋,实则是一个重要的心理锚点。它告诉用户:接下来的不是随机数生成器,而是一次认真的占卜。
好的交互设计,就是让技术隐于文化之后。
图5:三种起卦方式的完整流程对比

验证篇——数学不会骗人
AI写的代码,你敢信?
算法看起来没问题,动画跑起来也没Bug,卦辞数据也完整——但这不能靠"看着差不多"来判断。
验证的标准只有一个:数学。所以我让AI自己写了个验证脚本,跑了10000次蒙特卡洛模拟。
结果精准得有点离谱
老阳9的频率:12.47%(理论12.50%)。少阳7:37.52%(理论37.50%)。少阴8:37.55%(理论37.50%)。老阴6:12.46%(理论12.50%)。
最大偏差只有0.86%,远小于统计学1%的显著性阈值。
——就这么简单?没错,就这么简单。数学不会骗人,概率不会演戏。
不仅概率对,边界也没漏
10000次模拟,100%生成合法6爻,没有坏卦。7条解读分支全部触发——从0变爻到6变爻,包括极低概率的6变爻场景(概率仅0.025%,10000次里只出现5次),全部正确处理。
特殊边界也过了:六爻全变时,乾卦触发"用九:见群龙无首,吉",坤卦触发"用六:利永贞"。一个不漏。
这组验证数据让我对AI辅助开发有了新认知:AI确实会犯错,尤其是在逻辑边界上。但一旦你明确告诉它"请验证这个算法",并给出验证标准和边界条件,它就能产出比你手动检查更全面、更客观的结果。
图6:10000次模拟验证——算法精度与可靠性

总结篇——Prompt工程的5条经验
5小时,6张信息图,15个文件,1个完整的占卜网站
但如果只炫耀结果,这篇文章就白写了。
真正的价值在于过程——在于如何用Prompt Engineering把AI从一个"能写代码的聊天机器人"变成一个"能独立交付项目的超级实习生"。以下是我从这5小时中提炼的5条关键经验。
经验一:分阶段迭代,别指望一次成型
不要试图用一段长篇Prompt让AI一次性生成完整项目。把大目标拆成小里程碑:先算法原型→再基础UI→再加动画→再优化样式→再验证。每一步都有明确的验收标准。
AI的输出质量不是线性增长的——分阶段喂给它精准的反馈,效果是指数级的。
经验二:用户反馈是最好的产品经理
v1.0做完后我自己用了一遍,然后让朋友也试了试。"太简单了"——就是这句60分的评价,成了整个v2.0的起点。
人用→反馈→AI改→再用人用。这个循环是质量提升最核心的飞轮。不要因为AI写得快就跳过这一步。
经验三:架构先行,别等代码长成怪兽再重构
等到代码长到1291行再重构的成本,远高于在200行时就规划好架构。对AI辅助开发来说尤其重要——模块化意味着你可以针对单个文件精准调优,而不是每次都让AI在几千行代码里找线索。
经验四:视觉不可妥协
好的UI不是"锦上添花",是用户体验的核心组成部分。尤其在文化类项目中,视觉设计本身就是内容——太极图、星空粒子、金色辉光,每一个元素都在讲一个故事。
用户对"好看"的要求没有上限。60分和90分之间,差的不是技术,是态度。
经验五:验证不能省
AI生成的代码必须用数据闭环验证。不是靠直觉,不是靠"看起来没问题"。概率分布、分支覆盖、边界条件,每一项都值得写个脚本跑一跑。
这不是不信任AI,是对自己交付的产品的尊重。
最后的话
AI不是替代思考的工具,是把执行力放大100倍的杠杆。这个八卦占卜网站就是最好的证明:当你清楚自己要什么、知道怎么一步步引导AI去实现、愿意为每一个细节把关——
AI能帮你把"想做"变成"做成",比自己一行行写代码快得多,也精彩得多。
下载安装地址:https://marvis.qq.com/

最后的最后,这个复杂任务的完成,是否足够给你的日常工作打下手了。