零基础上手AI 编程工具 Qoder,一键做网页

很多人看到 AI 现在这么火，想试试 AI 编程，却不知道第一个项目该做什么？

今天我会从下载安装开始，直接从零做一个本地记账工具，把记录、分类和简单统计做出来，做完你就能用。

一、认识一下 Qoder IDE

Qoder IDE 是阿里巴巴面向程序员专门推出的 AI 原生编辑器，类似 VSCode。

前身就是大家熟知的「通义灵码」，后来阿里基于这个工具延伸出了独立 Qoder。

这两者的定位不一样，Qoder IDE 核心是编辑器窗口。

主要还是在编辑器内写代码，看文件，做调试，适合自己写代码，AI 在旁边辅助写代码。

独立 Qoder 是从 Qoder 的 Quest 模式独立出来的产品。

主要是用户带来想法，Qoder 把它一键做完，合适直接丢任务给 Agent，不怎么需要写代码的人。

这两者是并行存在的，互不替代，对话历史以及记忆是分开存储的，不过账号和额度都是共享的。

二、下载安装并登录

一）从官网下载 Qoder IDE

打开 Qoder 国内官网：qoder.com/zh/ide

目前 Qoder IDE 支持三种系统，点击对应你系统的按钮选择下载安装包。

这里以 Windows 为例子，Windows 官方提供两种安装包，分别是系统版本（下载页标为 X64 (System)）和用户版本（下载页标为 X64 (User)），这两个安装包功能是完全一致的，区别只在于安装范围和权限。

简单来说，系统版是给电脑所有 Windows 账户都可以使用的，安装需要管理员权限。

用户版是安装到当前当前用户目录，只对当前登录的账户可用，不需要管理员权限。

如果不清楚自己属于哪种情况，跟我一起选择用户版就好了，不用操心管理员权限的事情。

二）安装软件

下载完之后，双击安装包，可能会弹出安全警告，点击「运行」即可

因为我们选择的是用户版，Qoder IDE 会提醒你这个这个版本是只针对当前用户安装的，问你是否继续，我们点击「确定」继续往下走。

紧接着选择目标位置，Qoder IDE 默认是装在 C 盘的，建议大家安装在其他盘。

这里以 E 盘为例子，点击浏览选择 E 盘下的文件夹，然后点击下一步。

需要注意的是，选择的磁盘空间至少 500 MB，避免安装过程中空间不足。

选择开始菜单文件夹，这里不需要操作，直接点击下一步。

选择附加服务，勾选「创建桌面快捷方式」便于后续使用，其他的使用默认即可。

准备安装前会有一个信息预览，大家确定好信息后，点击 「安装」即可。

接下来我们等待进度条走完就行。

安装完成后打开 Qoder IDE，首次打开会有初始设置。

界面语言选择简体中文，主题按自己的喜好选亮色，暗色或者是高对比色，选择完毕之后点击Continue。

简单介绍 Qoder IDE 的功能，我们点击「Start Now」开启我们的 AI 编程之旅。

三）注册登录

如果你是新用户，注册即可领取新人专属 300 额度，并且有两周的免费试用。

如果你已经有账号，点击右上角的人头小图标，点击登录，点击Qoder 中国站登录（全家桶），按照步骤登录后即可。

登录成功后，右上角会出现 Qcoder CN  的标识，这个是独立 Qoder 安装指引。

感兴趣可以下载，每天登录签到会有 100 的积分领取，这里就不展开说啦～

三、熟悉界面和常用功能

一）界面布局介绍

这个布局跟我们常用的编辑器 VSCode 长得很相似，典型的编辑器布局。

为了给大家更好界面布局，我们点击画面中间的打开项目，点击新建文件夹，输入Qoder-project，点击选择文件（select folder）。

出现是否信任此文件夹中的文件的作者弹窗，选择是即可。

跟普通的编辑器的区别在于，右侧有一个 Qoder 编码助手会话，用于与 AI 进行交互。

我们可以通过右上角的按钮或者快捷键（macOS ⌘L / Windows Ctrl L）打开或关闭。

二）左侧常用入口

1、Repo Wiki

我们在写代码时候最害怕出现幻觉，或者是漏上下文的情况，Qoder IDE 针对这一点加强了项目长期上下文的积累。

简单来说，Repo Wiki 就是给选中的代码仓库建一份会实时更新的说明书，让人和 AI 不需要从零开始了解项目。

我们可以点击右侧栏，选择Repo Wiki，选择仓库，点击生成，等待进度条跑完即可。

生成后可以在左侧看到文档目录，能够系统性地看到这个项目怎么设计的，模块之间是咋协作的。

生成 Repo Wiki 同时也会生成知识卡片，方便 AI 快速了解项目的关键预规则和约定。

2、扩展

右侧的扩展可以安装插件，同时支持搜索找到你想要的扩展，如果点击扩展发现没有没有内容，点击上方的刷新按钮刷新即可。

三）右侧会话面板

这个就是我们熟悉的右侧会话面板了，我们输入快捷键 Ctrl+L / ⌘L 就可以打开右侧面板，这里有几个比较常用的模块，给大家分别介绍一下：

1、模型推荐

初次登陆，一般 Qoder IDE 会自动选择 Auto，我们点击 Auto 可切换模型。

目前 Qwen3.8-Flash 和 DeepSeek-Flash 是限时免费，大家可以大胆用起来。

比较细心的小伙伴会留意到错峰折扣已生效的字眼，Qoder 的错峰时间是每天晚上的 22:00 到次日的早上 8:00，最高可节省 60%。

当然，我们也可以点击「添加自定义模型」来添加我们想要的模型

第一步：点击添加会弹出添加模型弹窗

目前的提供商只支持以下几种，这里以DeepSeek为例子，给大家分享怎么添加自定义模型。

第二步：选择好我们想要引入的模型后，点击下方获取 API 密钥

会自动打开对应的 AI 的页面，引导你登录

第三步：登录成功之后，点击 API Key，点击添加 API Key

第四步：创建 API key，输入 API Key 名称

第五步：点击的复制并保存好 API key

第六步：回到 Qoder IDE 输入 API key，点击添加就完成了自定义模型添加了

第七步：如果发现添加模型失败，请检查你这个 API 用量是否已经空了

2、模式切换

在 AI 助手会话的对话框下支持切换三种模式，核心区别在于 AI 的协作的程度：

1）智能问答(Ask)

顾名思义只在对话框内问答，解释或者给建议，基本不会主动去修改你的代码，适合看不懂代码的阶段使用。

比方说，在会话框选择智能问答，输入@ 符号，选择报错的 demo.js 文件，输入帮我解释这个报错是什么意思，按下回车，我们就能看到报错的解释

我们可看到，AI 回答完毕之后，并不会帮我们主动修改代码的。

2）智能体(Agent)

单个智能体执行，会主动修改文件，跑命令以及使用工具，我们一般会用于明确的小功能，单个模块的修改。

比方说，在会话框选择智能体，输入@ 符号，选择报错的 demo.js 文件，输入帮我解决报错，按下回车。

2）专家团(Experts)

相当于一个专家团队帮你干活，里面包含一个领导 Agent + 多个不同专项的技术专家 Agent，会并行分工多个 Agent 干活。

一般用于复杂的全站功能，多模块的，需要调研 - 实现 - 测试 - 审查一条龙的复杂业务。

这里以简易的密码生成器为例子，选择「专家团」，点击GLM-5.3-Flash模型，复制下方的文案到输入框

帮我生成一个密码生成器网页。功能包括：1. 可以生成随机强密码；2. 实时显示密码强度（弱/中/强）；3. 支持自定义规则（密码长度、是否包含数字、大小写字母、特殊符号）。请生成完整的 HTML/CSS/JS 代码，并测试自定义规则切换时生成逻辑是否正确。

在等待的过程中，可以看到专家团模式会自动拆解任务，并调度不同角色的专家并行工作，分配了一支小团队给你干活一样。

3、优化输入

如果你只有一个大概的想法，具体细节还没想清楚，可以先在输入框输入大概大概的想法，然后点击右下角的优化输入，AI 会帮你优化补全思路。

四、实操做个人记账网页

界面熟悉完毕之后，我们趁热打铁动手做一个记账网页案例，来给大家分享怎么使用 Qoder IDE 来开发自己的项目。

第一步：新建文件夹

在电脑新建一个文件夹，命名为 my-ledger，专门放这次个人记账网页的文件。

第二步：在 Qoder IDE 打开文件夹

回到 Qoder IDE 的界面，点击右上角的文件，选择打开文件夹，选择我们刚刚新建的my-ledger文件夹打开。

第三步：如果出现弹窗确认，点击左下角的是，我信任此作者

选好以后，我们点击右侧的资源管理器，看到有MY_LEDGER证明我们已经打开成功了，后面我们生成的内容都会在这个文件夹内进行。

第四步：在右侧的会话窗口，输入我们的想要做的事情

帮我做一个单文件 HTML 记账网页。支持记录日期、分类、金额、备注，数据存在本地缓存。顶部显示本月支出总额和分类饼图（不用外部库）。支持按月份和分类筛选，手机浏览器可用，配色清爽。

第五步：等待 Qoder IDE 开发完成之后，会自动打开内置浏览器自主验证功能并截图关键画面，最后会输出一份报告

如果 Qoder IDE  没有自动打开也没关系，我们可以打开对应的文件夹，双击 index.html 即可在浏览器查看效果

第六步：输出报告后，Qoder IDE 根据自己的验证反馈，优化几处视觉与交互细节，我们点击执行即可

我们同时可直接操作页面，自己再检查开发的功能是否符合我们的预期。

第七步：继续跟 Qoder IDE 在同一个任务对话细化需求

比方说，我们希望增加一个总预算，目前只有总支出不知道一个月的花销是否超预算。

优化需求：在顶部支出区域增加本月预算的设置，可以点击修改并保存到本地缓存。同时显示进度条，用已用与预算的比例来呈现。当快要超出预算（例如90%）时，进度条显示橙色；超出预算时，进度条变为红色，预算为空的时候不显示进度条

修改完成之后，Qoder IDE 会刷新页面自主进行测试，我们可以看到顶部已经出现了进度条。

如果出来的实际效果和我们预期有所偏差，把问题描述出来，继续跟 Qoder IDE 对话，让它继续修改。

当然，你也可以让它可以直接通过饼图来联动做筛选，例如：

饼图点击分类可联动筛选。1、顶部的饼图点击每个分类扇区，自动选择对应的分类，并且刷新明细表。2、再次点击或者点击全部恢复。3、点击时，扇区有轻微的放大、高亮的效果。

通过这种提出具体需求，改完 AI 自主测试，再结合自己测试全流程后，慢慢就会熟悉这种边写边改的节奏。

到这里，我们就已经完成了 Qoder IDE 的安装以及三大核心用法，最后还做出了可增删查改的可视化个人记账网页。

以后要是有啥好想法，就可以按照这个思路去操作，不断跟 AI 对话最后调试出我们最终想要的小工具。