ARTICLE · 1231125
保姆级教程:快速入门智谱 AI 编程工具 ZCode,附网站案例
保姆级教程:快速入门智谱 AI 编程工具 ZCode,附网站案例大家好,我是小林,今天给重新定了位:探索 AI 时代程序员的可能性。 接下来,我会把当下所有的模型、编程 Agent 全部产出保姆级教程,我们先从智谱的 ZCode 开始。 今天带大家从零开始使用 ZCode,先完成软件安装和模型配置,再做一个能添加、完成和删除事项的待办清单。 没有编程基础的朋友也可以跟着操作。 第一步:访问 ZCode 官网 https://zcode.z.ai/cn 官网通常会根据当前使用的电脑,在页面中央显示对应系统的立即下载 ZCode 按钮。 下载前,先核对按钮中标明的系统跟自己的电脑系统是否一致,如果与自己的电脑一致,点击按钮即可下载安装包。 
如果首页按钮显示的系统不对,或者想手动选择安装包,就点击按钮下方的查看全部下载。 这里列出了 ZCode 当前提供的不同电脑系统的安装包,选好与自己电脑对应的安装包后,点击下载。 
下面以 Windows 系统为例,演示如何安装 ZCode。 第二步:找到刚下载的安装包,双击打开,随后按安装向导操作。 安装向导先询问为哪位用户安装该应用。截图中选择了为使用这台电脑的任何人安装(所有用户),如果只想给当前账户安装,也可以选择仅为我安装,选好后点击下一步。 
第三步:如果选择为所有用户安装,Windows 可能弹出用户账户控制窗口。 点击是,允许安装程序继续。若没有出现这个窗口,直接看下一步即可。 
第四步:来到选定安装位置页面,可以保持安装向导给出的默认文件夹,直接点击下一步。 如果想换一个位置,点击浏览选择文件夹,点击下一步,等待软件安装完成。 
第五步:看到正在完成 ZCode 安装向导,就说明软件已经安装好了。 截图中运行 ZCode 默认已勾选,点击完成后会打开软件。 
首次启动时会看到初始设置或登录页面。 这里先确认软件能正常打开,下一部分再连接模型。 安装完成并打开 ZCode 后,会看到欢迎来到 ZCode 页面。 这里提供 3 种连接方式:连接 Z.ai 用于全球账号,连接 BigModel 用于国内智谱 BigModel 账号,使用 API Key 则需要自己准备并管理模型密钥。 这篇教程面向国内读者,接下来统一选择连接 BigModel 继续使用,后续还可以在软件里面配置 API Key 的方式使用。 第一步:点击页面中间的这个连接 BigModel 继续使用按钮,会在浏览器中打开 BigModel 登录页面。 
第二步:按照页面提示,选择手机号或者账号登录方式,完成登录或者注册。 
第三步:登录完成后,浏览器会提示此站点正在尝试打开 ZCode,点击弹窗右下角红框中的打开,让浏览器唤起 ZCode 桌面端。 
第四步:回到 ZCode 后,如果出现你的主要工作方向是页面,可以按自己的实际情况选择最接近日常工作的一项,再点击下一步。 暂时不确定选什么,也可以点击页面底部的跳过继续。 
第五步:登录完成后,可以看到软件的界面如下图所示 查看输入框附近的模型选择位置,确认已有可用模型。 对新注册的账号会有免费的模型额度,可以在输入框右下角管理模型的位置切换模型。 如果你的账号免费额度已经过期了,会提示你没有可用模型,那就需要购买订阅服务。 
第六步:点击管理模型,会出现模型设置界面,在这个界面里面,购买对应的套餐。 除了购买对应的套餐,也支持配置 API Key。 
第七步:点击右上角的添加供应商 会出现很多 AI 平台的供应商,可以在这里选择自己已经购买过 API Key 的服务平台,填写对应平台的 API key 即可。 
第八步:以 BigModel API 为例,这是智谱官方的 API 只需在 API Key 这个输入框中输入自己的 API Key,如果不知道从哪里获取 API key,可以点击下图中的获取 API Key 按钮,就会跳转到获取 API Key 的页面。 点击页面右上角新建 API Key 这个按钮。 
第九步:在出现的新建 API Key 的弹窗里面 自己设置一个名称,这个名称就只是用来起标识作用。 
点击确定,就会出现一个 API Key。 
第十步:就会看到生成的 API Key 把这个 API Key 可以复制出来,后面就可以在其他地方使用了。 
基于安全考虑, 生成的 API Key 只会出现一次。以后如果找不到的话,就只能重新新建,没有办法再看到这个 API Key。 API Key 申请成功以后,我们就可以在模型配置这里填入我们刚才申请的 API Key。 模型列表右侧有一个开关,可以选择要使用哪些模型,开启之后就会把选择的模型展示到界面上。 可以根据自己的情况,选择适合自己的模型。 
配置成功之后,就可以回到我们软件的主界面了。 在这个输入框下面有两个很核心的配置,权限模式和模型列表。 权限模式默认选择的是变更前确认。 这意味着它每次有改动的时候,都会先停下来,需要我们确认。 建议一般选择自主模式。 AI 会判断风险,风险低的时候就自己去执行,只有判断有风险的时候,才会让我们去确认。 新人不建议选择完全访问模式,这样有可能会有比较高的风险。 
在模型列表这里,我们可以选择使用哪个模型,以及思考强度。 这里展示的模型就是我们刚才在配置页面开启的那些模型。 思考强度可以根据自己的需要去选择,强度越高,消耗的 token 也会多一些。 看自己的情况,拖动这个滑块的位置,就可以选择不同的思考强度。 
我们可以先用简单的问题测试一下模型是否可以正常使用。 比如请用一句话介绍你能帮我做什么。出现正常回复,就说明我们当前模型可以正常使用。 
我们会以一个常见的待办清单网页案例,来给大家分享如何使用 ZCode 来开发自己的项目。 在自己电脑上新建一个名为待办清单的空文件夹,后续会用到。这个文件夹就是本次案例的工作区,ZCode 会在这里保存生成的文件。 第一步:在输入框上方点击选择项目,再点击创建项目 项目的意思就是说,后面所有相关的操作都只会在当前这个文件夹里面进行,不会操作电脑上其他目录下的文件。 
第二步:填写要创建的项目名称,并且选择本地的文件夹。 这里就可以选择我们刚才在本地创建的那个待办清单文件夹。 
第三步:点击右下角的创建项目 
第四步:如果出现弹窗确认提示,点击右下角的信任文件夹并创建。 
后续我们所有的改动,都只会在我们当前的这个待办清单文件夹中去修改。 第五步:现在我们就可以在输入框中输入我们自己的想法,就是我们希望它来帮我们做什么样的事情。 在对话框输入上述内容: 
第六步:等待 ZCode 开发完成之后,它会自动打开一个浏览器来展示我们这次做的效果。 
我们就可以在页面上操作,来检查他开发的功能是否符合我们的预期。 现在点击整条待办事项就能切换完成状态,功能已经可用,但操作位置不够明显。 第七步:我们可以继续在同一个任务中告诉 ZCode 想把这个交互改成常见的圆形勾选按钮: 
修改完成后,刷新页面,先点一次圆形按钮,确认事项变为已完成、完成数量增加; 再点一次,确认事项和数量恢复。还可以点击事项文字,检查它不会误触发状态切换。 如果实际效果与要求不符,就把看到的问题具体告诉 ZCode,让它继续修改。 
页面风格也可以按自己的喜好继续调整,如果生成的样式不合自己的要求,可以直接告诉 ZCode 希望使用什么颜色、排版和视觉风格。 这次的待办清单文件夹可以保留下来,下次重新打开同一个项目,可以试着给事项增加截止日期,或者调整页面布局。 每次提出一个具体要求,改完就测试一遍,慢慢就能熟悉这种边用边改的方式。 到这里,我们已经完成了 ZCode 的安装和模型连接,还做出了一个可以添加、标记完成、删除事项的待办清单。 以后想做自己的小工具,也可以沿用同样的过程:选好工作区,说清楚要做什么,打开生成的结果亲自试用,再把不满意的地方告诉 ZCode。 AI 编程正在让更多人亲手实现想法。
一、下载安装 ZCode






二、配置模型















三、实战案例




请在当前工作区制作一个简易待办清单,保存为 index.html。页面需要能够添加待办事项、把事项标记为完成,以及删除事项。请把样式和功能都放在这一个文件里,不要安装额外软件包。完成后告诉我文件保存在哪里、怎样打开,以及我应该依次测试哪三个功能。


请优化待办清单的交互方式:在每条事项左侧加一个圆形勾选按钮,只有点击这个按钮才切换完成和未完成状态。标记完成后,按钮显示对勾,事项文字加删除线,上方的已完成数量同步更新;再次点击可恢复未完成。保留现有的添加和删除功能。


例如:保留待办清单的现有功能,把页面调整成简洁的浅色风格,缩小卡片间距,主色改为绿色。描述得越具体,修改结果越容易接近预期。















































































