当前位置：首页 > news >正文

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

news 2025/4/19 13:33:05

前言

最近在开发颜色搭配主题的相关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>