前言
最近在开发颜色搭配主题的相关H5和小程序，想到需要补充一个web展示网站，因此有了这篇文章，与大家一起分享交流。 （这是本人第一次在掘金发表文章，如有不足，还请大佬们多多担待/包涵~）
一、需求描述
技术栈：Vuepress（1.x+）+Vue+Chroma.js
向AI要答案之前，一定要清楚自己想要做什么。
如果不了解自己的需求/目标，可以让AI整理思路、理清逻辑。
我一开始的需求描述如下：
我想用vuepress制作一个色彩搭配的网站，同时要做响应式设计，色彩搭配方案以【展示色块和颜色编码】为一个整体。色彩方案分为双色、三色和四色，每个方案需要给出十条数据。PS:我用的node版本是21.4.0，请使用vuepress的旧版本（1.x+）进行开发，确保程序可以正常运行。不要出现有bundler等报错问题，请从0到1告诉我如何搭建这个网站。
为什么会提到“旧版本”和“bundler”等字眼？
如果没有特别说明vuepress版本，那么一般情况下，AI会默认用vuepress最新版本（2.x+）进行开发，而用2.x+创建和初始化项目的时候，会有一些坑，一些关于bundler的相关设置等等（主要因为我比较少接触vueprss，不太想去调试）。简单地说，为了方便起见（且旧版本可能比较稳定） 就用了vuepress旧版本（1.x+）
一个精细化需求的思路：
不断确定“边界” ，尽可能提供更多的信息给AI，让AI和你“信息对齐”，将大问题拆分成一个个小问题，有条理、有逻辑地解决问题。
二、开发过程（截图展示）
温馨提示：实际的程序效果不止下文这些代码截图。需要不断和AI对话，调试，最后获得想要的结果。
三、项目调试
温馨提示：无论是使用什么AI工具（这个配色网站我是用的Deepseek）生成代码，一定要重点关注“调试环节”！
部分非常基础的编程案例，AI可能是100%正确..但我相信(业务)需求不是一两句prompt和几行代码就能搞定，所以需要自己调试代码，根据报错，提出新问题，让A继续修改，最后达到想要的效果。
项目调试，总结就是一句话： “不断和AI对话、不断调试、不断抛出问题（如此反复循环），最后获得自己想要的结果”
四、项目展示
五、项目部署
因为之前有购买过云服务器，也用宝塔面板成功部署过vue3项目，因此这次还是用宝塔面板进行项目部署。
在掘金的第一篇文章就到这里就结束啦！欢迎大家一起学习交流！
