前言
最近在开发颜色搭配主题的相关H5和小程序，想到需要补充一个web网站，因此有了这篇文章。
一、确定需求
**向AI要答案之前，一定要清楚自己想要做什么。**如果你没有100%了解自己的需求，可以先让AI帮你理清逻辑和思路，然后再正常向AI要答案。
我一开始的需求如下：
我想用vuepress制作一个色彩搭配的网站，每个色彩搭配方案以展示色块和颜色编码为一个整体，色彩方案分为双色、三色和四色，每个方案需要你各出十条数据。我用的node版本是21.4.0，用的是npm工具，请你使用vuepress的旧版本进行开发，确保程序可以正常运行和使用。不要出现有bundler等报错问题，请你从0到1告诉我如何搭建这个网站。
技术栈：Vuepress+Vue+Chroma.js
编码工具：VsCode
为什么会提到"旧版本"和"bundler"等字眼？
如果你没有特别说明你的vuepress版本，一般情况下，AI会默认用vuepress最新版本（2.x+）进行开发，而用了2.x+版本创建和初始化项目的时候，会有一些坑，一些关于bundler的相关设置等等（不太想去调试）。简单地说，为了方便起见（且旧版本可能比较稳定） 就用了vuepress旧版本（1.x+）
提供一个精细化需求的思路：不断通过确定"边界"，通过信息描述，让AI和你有个"信息对齐"，将大问题拆分成一个小问题，从而有条理有逻辑地解决问题。
二、开发过程
色彩方案组件代码
javascript
<template>
<div class="color-palette">
<h2>{{ title }}</h2>
<div class="palette-container">
<div
v-for="(color, index) in colors"
:key="index"
class="color-block"
:style="{ backgroundColor: color }"
@click="copyToClipboard(color)"
>
<span class="color-code">{{ color }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
},
colors: {
type: Array,
required: true
}
},
methods: {
copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert(`已复制: ${text}`);
}).catch(err => {
console.error('复制失败:', err);
});
}
}
}
</script>
<style scoped>
.color-palette {
margin: 2rem 0;
padding: 1rem;
border: 1px solid #eee;
border-radius: 8px;
}
.palette-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 1rem;
}
.color-block {
width: 120px;
height: 120px;
border-radius: 8px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 8px;
cursor: pointer;
transition: transform 0.2s;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.color-block:hover {
transform: scale(1.05);
}
.color-code {
background-color: rgba(255,255,255,0.8);
padding: 2px 6px;
border-radius: 4px;
font-size: 12px;
font-family: monospace;
}
</style>
三、项目调试
注意：无论是使用什么AI工具（这个配色网站我是用的Deepseek）生成代码，一定要重点关注"调试环节"！不要100%相信AI编程！
部分非常基础的编程案例，AI可能是100%正确..，但我相信我们的(业务)需求不是一两句prompt和几行代码就能搞定，所以需要自己动手调试代码、根据报错，提出问题，让A继续修改，最后达到你想要的效果。
我更加相信：AI编码+人工调试，可以让程序员的编程效率有质的飞跃（前提也要是有基本相关知识/技术，以及确定自己的需求是什么）
项目调试，总结成一句话："不断和AI对话、不断抛出问题、不断调试，获得自己想要的结果"
注意：AI生成内容是没有边界、无穷无尽的，你想要多大多难的产出都是有可能的，但那不一定是我们需要的。只要AI的回答能解决当前的需求即可，及时打住，不要陷入盲目的自嗨。至于版本更新迭代，那是后面的事情。
四、项目展示
这里展示通过项目调试后的第一版配色网站。
五、项目部署
考虑到一些细节还需要完善，所以项目部署还没做，后续做了，再返回更新这部分的内容。
