基于DeepSeek API和VSCode的自动化网页生成流程

huaqianzkh

已于 2025-02-07 16:27:45 修改

阅读量4k

点赞数 20

分类专栏：未来技术 Web开发实践文章标签：人工智能系统架构

于 2025-02-07 16:25:01 首次发布

本文链接：https://blog.csdn.net/huaqianzkh/article/details/145489774

版权

架构理解与实践同时被 3 个专栏收录

126 篇文章

订阅专栏

Web开发实践

21 篇文章

订阅专栏

未来技术

16 篇文章

订阅专栏

1.创建API key

访问官网DeepSeek ，点击API开放平台。

在开放平台界面左侧点击API keys，进入API keys管理界面，点击创建API key按钮创建API key，名称自定义。

2.下载并安装配置编辑器VSCode

官网Visual Studio Code - Code Editing. Redefined，安装过程不赘述，这里只讲配置。

我们可以把VS Code设置成中文，选择左侧菜单栏中的扩展选择项。在搜索栏中输入Chinese。

按住键盘上的“Ctrl+Shift+P”组合键，打开命令面板。在命令面板的输入框中输入“Configure Display Language”，然后选择该选项。

重启后生效，界面就是中文的了。

3.接入DeepSeek的API

在拓展中输入Cline，选择并安装。

安装完毕，左侧可以看到cline选项。

点击选项，可以看到刚才安装的Cline插件。

在API选项中，选择DeepSeek。

输入前面我们在DeepSeek官网注册的API key。复制APIKEY粘贴即可。然后点击Let's go！

可以在对话框中输入问题，比如你是谁？点击执行。

它会给出回答，如下所示吧啦吧啦，说明已经成功接入了DeepSeek API。

用户询问我的身份。我是一名高度熟练的软件工程师，拥有多种编程语言、框架、设计模式和最佳实践的广泛知识。我可以帮助用户完成各种编程和开发任务。

我是Cline，一名高度熟练的软件工程师，拥有多种编程语言、框架、设计模式和最佳实践的广泛知识。我可以帮助您完成各种编程和开发任务。

4.演示完成编程需求

接下来我们就让它帮我们完成一个编程需求。输入我们的提示词：

创建一个网页，标题为“赛博木鱼”，设计要求如下：

页面整体布局
背景与样式：

背景颜色为深色#121212,文字颜色为纯白#FFFFFF。
使用楷体'Kaiti SC'和现代字体'PingFang SC'，无对应字体时备用sans-serif。页面内容居中对齐，顶部为标题区，中央为木鱼点击区域，底部为提示文字，整体垂直分布。
标题区：
包含三个部分：
主标题：显示渐变文字“赛博木鱼”，字体大小为25vw，使用'Kaiti SC'，渐变从rgba(255,176,103,0.05)（浅绿色）到rgba(115,55,0,0.02)（浅棕色），方向为180度，通过webkit-background-clip:text和-webkit-text-fill-color:transparent实现渐变文字效果。
计分器：显示分数，初始值为0，字体大小10vh，字体为PingFang 5C，加粗900，垂直居中。
木鱼点击区：
包含一个木鱼和锤子图案：
木鱼图片链接：https://img.alicdn.com/imagextra/i1/O1CN012CO0YU1VSfNs506ZS_!!6000000002652-2-tps-284-236.png
锤子图片链接：https://img.alicdn.com/imagextra/i1/O1CN01tKb5Et1aSjWRjCHK3_!!6000000003329-2-tps-119-69.png
锤子的相对位置：锤子固定在木鱼的右上角，具体位置为相对于木鱼的右侧边缘偏上，保持一定距离以呈现动态打击效果。锤子的初始旋转角度为0度。静态时与木鱼形成俯视敲击的视觉关系。点击木鱼触发以下交互：播放点击音效，音频链接：https://qianwen.alicdn.com/resource/qiaomuyu.mp3
锤子短暂旋转（-25°），随后复位至0°，动画时间为0.1s，木鱼放大至scale（1.1）后复位，动画时间为0.1s.显示动态漂浮字幕“功德+1”。字体为PingFang SC,大小1.5em，位置从木鱼上方飘浮消失，动画时间0.4s。点击后分数加1，实时更新计分器内容。

执行任务，cline就会进行网页文件的创建以及对应代码的编写。创建完成以后，我们点击Save按钮保存。

这是自动生成的网页文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>赛博木鱼</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1 class="title">赛博木鱼</h1>
      <div class="counter">功德：<span id="score">0</span></div>
    </div>
    
    <div class="muyu-area">
      <div class="muyu-container">
        <img src="https://img.alicdn.com/imagextra/i1/O1CN012CO0YU1VSfNs506ZS_!!6000000002652-2-tps-284-236.png" 
             alt="木鱼" 
             class="muyu"
             id="muyu">
        <img src="https://img.alicdn.com/imagextra/i1/O1CN01tKb5Et1aSjWRjCHK3_!!6000000003329-2-tps-119-69.png"
             alt="锤子"
             class="hammer"
             id="hammer">
      </div>
    </div>

    <div class="floating-text-container" id="floating-text-container"></div>
  </div>

  <audio id="sound-effect">
    <source src="https://qianwen.alicdn.com/resource/qiaomuyu.mp3" type="audio/mpeg">
  </audio>

  <script src="script.js"></script>
</body>
</html>

运行效果：