3 分钟完成产品网页搭建

< 教你 0 基础创建网页 />

将手把手教零基础前端小白

运用腾讯云 AI 代码助手

从 0 到 1 打造自己的专属产品网页

效果展示

腾讯云 AI 代码助手 是专为研发团队设计的 AI 辅助编程产品，以腾讯混元代码大模型为产品基座，支持上百种主流编程语言和主流 IDE ，提供代码补全、技术对话、单元测试、代码诊断和智能评审等能力，覆盖编码全流程场景，能够辅助开发者提升编码效率和质量并助力研发团队提质增效。

所以我准备借助这产品来快速搭建一个网页，一起来看看能有多快吧！！！

开始开发

安装腾讯云 AI 代码助手

在开始编码之前：我在 IDE 插件市场搜索腾讯云 AI 代码助手，即先下载这款神器——腾讯云 AI 代码助手，本教程以在 Visual Studio Code 中为例。

1、下载 Visual Studio Code

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

< 第一步 />

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

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

来展示文字转代码的魅力吧——技术对话能力

技术对话：AI 代码助手将对话问答功能与 IDE 进行了集成打通；开发者可以随时随地，以各种方式向 AI 代码助手进行技术对话咨询，所获取的代码内容可以一键插入编辑器当中

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

点击网页文件

< 第二步 />

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

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

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

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

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

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

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

内联对话（Inline Chat）是在代码编辑区中嵌入输入框，并在输入框里直接输入需求后，直接生成代码并插入到当前光标下。这种效果极大的加强并拓展了编码过程中代码生成的能力。

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

内联对话生成代码

文件保存覆盖

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

< 第三步 />

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

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

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

文件保存覆盖

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

免费体验

​