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

原创已于 2025-07-08 09:51:49 修改 · 置顶 · 3.5k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #javascript #人工智能

于 2025-04-13 17:11:10 首次发布

博主简介

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

前言

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

一、开发准备-确定需求

向AI要答案结果之前，一定要清楚自己想要做什么。

如果不是清楚自己的需求（具体的任务描述、产出、实现所需的技术难度等等）

可以让AI整理思路（给出尽可能多的关于问题的内容），然后再正常向AI要答案。

我一开始的需求如下：

我想用vuepress制作一个色彩搭配的网站，需要进行页面适配，也就是需要做响应式设计。

每个色彩搭配方案以展示色块和颜色编码为一个整体，色彩方案分为双色、三色和四色，每个方案需要你各出十条数据。

我用的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>