一天时间，我用AI(DeepSeek)做了一个配色网站

博主简介

• 前端开发、思维干货、个人成长、知识社群。
• 前端开发(web/h5/小程序)、知识社群等，合作请私信。
• 福利：关注公众号（主页简介），回复：“学习礼包”，有我精心整理的100G+IT学习资源

---

前言

最近在开发色彩搭配主题的相关H5和小程序，想到需要补充web网站，因此有了这篇文章。

 一、开发准备-确定需求

向AI要答案之前，清楚自己的需求是什么，预期产物是什么。

本次项目的需求提示词如下：

用vuepress制作一个色彩搭配的网站，需要页面适配（PC端和移动端），做响应式设计。

色彩搭配方案以展示“色块和颜色编码”为一个整体（上下结构），方案分为双色、三色和四色，每个方案需要各模拟出十条数据。

node版本21.4.0，用npm进行初始化和安装。使用vuepress的旧版本进行开发，确保程序可以正常运行和使用，不要出现有bundler等报错问题。

请从0到1搭建这个网站。

---

为什么提到“旧版本”和“bundler”等字眼？

如果没有特别说明vuepress版本，一般情况AI默认用vuepress最新版本（2.x）进行开发，而用2.x+版本创建和初始化项目的时候，会有一些关于bundler的相关设置（需要配置，否则会报错）。方便起见，我用vuepress旧版本（1.x），因为旧版本可以正常运行。

二、开发过程-截图展示

温馨提示：

1、程序运行的最终效果，所需代码不止是文章中出现的代码。

2、如何实现完整的页面和功能？

与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），都要特别注意调试环节。

复杂的(业务)需求不是一两句提示词和几行代码就能搞定，所以需要调试 达到正确/满意的效果。

AI生成内容是没有边界的，多复杂多大的产出都有可能生成，但那不一定是我们需要的，因此提问的时候要界定预期结果的范围。

AI只要能解决我们当前的(业务)需求即可，及时打住，不要陷入盲目的自嗨。

四、项目展示

这里展示调试后生成的第一版配色网站。

 

 

五、项目部署（已更新）

用的宝塔面板进行部署。

详细部署可参考我之前发的vue项目部署，流程都是一样的。

【项目配置】vue3项目上传到宝塔面板，图文保姆级教程！