一天时间,我用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项目上传到宝塔面板,图文保姆级教程!

### 使用 DeepSeek 构建法律行业 AI 应用的方法 #### 方法概述 为了构建专门面向法律行业的AI应用,可以利用DeepSeek的强大功能来处理复杂的文本分析任务。这包括但不限于合同审查、法规检索以及案件预测等具体应用场景。通过定制化的微调和优化,能够显著提高这些特定任务的效率与准确性。 #### 数据准备 收集并整理大量的法律文档作为训练数据集是非常必要的一步。这类数据应当覆盖广泛的法律法规条文、判例文书以及其他相关材料。确保所使用的语料库具有足够的多样性和代表性对于提升模型的表现至关重要[^1]。 #### 模型选择与调整 鉴于DeepSeek具备出色的编程能力和逻辑推理技巧,在面对涉及大量专业知识和技术细节的任务时表现尤为突出。因此,基于此特性可以选择适合版本如V2或更新迭代后的V3来进行开发工作。此外,还可以考虑采用混合专家架构(MoE),它允许根据不同类型的输入动态分配计算资源给最擅长相应子领域的组件,从而实现更高的精度和更快的速度响应[^2]。 #### 特定领域适应性改进 为了让通用性的预训练模型更好地服务于特定行业需求,通常还需要对其进行针对性增强。例如增加对专业术语的理解能力;强化因果关系识别机制以便更精准地解析法理依据之间的内在联系;引入外部知识图谱支持以补充内部记忆不足之处等等措施均有助于改善最终成果质量[^3]。 ```python from deepseek import Model, FineTuner # 加载基础模型 model = Model('deepseek-v3') # 准备法律专用的数据集路径 data_path = 'path/to/legal_documents' # 创建FineTuner实例用于进一步调优 fine_tuner = FineTuner(model=model) # 开始细调过程 fine_tuned_model = fine_tuner.fit(data_path=data_path) ``` #### 实际案例分享 在一个真实的项目中,某律师事务所成功运用经过特别配置过的DeepSeek实现了自动化的合同审核流程。该解决方案不仅大幅减少了人工成本支出,同时也极大缩短了业务周期时间。更重要的是,借助于先进的算法技术保障了每一份文件都能得到细致入微的安全合规检查,有效规避潜在风险隐患的发生概率。
评论 28
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十八朵郁金香

感恩前行路上有你相伴

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值