腾讯云 AI 代码助手：从 0 到 1 打造自己的专属产品网页

手把手教零基础前端小白运用腾讯云 AI 代码助手，从 0 到 1 打造自己的专属产品网页：

安装腾讯云 AI 代码助手

在开始编码之前：我在IDE插件市场搜索腾讯云AI 代码助手，本教程以在 Visual Studio Code 中为例。

1、下载Visual Studio Code

2、在插件时长搜索—腾讯云AI代码助手，秒安装

第一步 

可以直接向 腾讯云 AI 代码助手的技术对话框中提问：

“请帮我创建一个 AI 产品落地页的基础框架，包含导航栏和 Hero 区域。产品名称是'智慧精灵 AI',主标语是'世界链接，触手可及'，使用简单的 HTML 和 CSS即可，配色以蓝色为主。”

生成代码新建文件保存到一个文件夹里。

点击网页文件

第二步 

网页现阶段还需要增加产品功能介绍，我可以继续向 AI 助手求助：

请给网页添加一个产品功能介绍，要求使用卡片式布局并给每个功能配上简单的图标。需展示的功能有如下四个：

对话体验——基于中文模型的对话体验；

对轮对话——具备上下文理解和长文记忆能力，流畅完成各专业领域的多轮问答；

内容创作——支持文学创作、文本摘要、角色扮演能力，流畅、规范、中立、客观；

知识增强——有效解决事实性、时效性问题，提升内容生成效果。

直接启用腾讯云 AI 代码助手独有的能力；

在右侧全选（command+A）第一步生成的代码，启用内联对话（command+I）

 

内联对话生成代码

文件保存覆盖

在腾讯云 AI 代码助手的协助下，我成功为页面添加了产品功能介绍。

 

 第三步 

如果还想让页面信息更加全面，可以向 腾讯云 AI 代码助手提出：

“请在页面底部添加版本信息、展示区域、下载引导区域，工单区域，制作简单的页脚并保持简洁的设计风格。”

继续在右侧全选（command+A）第一步生成的代码，启用内联对话（command+I）

 

在腾讯云 AI 代码助手的协助下，成功为页面添加了页脚。

这样，在腾讯云 AI 代码助手的帮助下，快速地制作了网页，脑海中的 idea 得到了实现！