前言
最近在開發顏色搭配主題的相關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和你“信息對齊”，將大問題拆分成一個小問題，從而有條理有邏輯地解決問題。
?
二、開發過程（截圖展示）
溫馨提示：
程序的最終效果不止是以下的截圖展示，總結成一句話就是需要和ai不斷對話，自己不斷調試，最后達到想要的效果。
色彩方案組件代碼
<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的回答能解決當前的需求即可，及時打住，不要陷入盲目的自嗨。至于版本更新迭代，那是后面的事情。?
四、項目展示
這里展示通過調試后生成的第一版配色網站。
?
?
?
?
?
五、項目部署
考慮到一些細節還需要完善，所以項目部署還沒做，后續做了，再返回更新這部分的內容。
已更新，用的寶塔面板進行部署。詳細部署可參考我之前發的vue項目部署，流程都是一樣的。【【項目配置】vue3項目上傳到寶塔面板，圖文保姆級教程！ - CSDN App】https://blog.csdn.net/orbit4/article/details/142213726?sharetype=blogdetail&shareId=142213726&sharerefer=APP&sharesource=orbit4&sharefrom=link
?
?
)
