小桌签 —— 一个编程小白用华为云码道CodeArts1 小时做出自己的第一个网页 App案例介绍这是一篇编程小白也能跟着做的实战记录。我的背景HTML 学了 3 周CSS 大概知道color、backgroundJavaScript 只会alert(hello)。我的目标做一个只属于我自己的每日待办网页关掉浏览器再打开数据还在。我的工具华为云码道CodeArtsAI IDE1 个index.html文件0 行后端代码。我的耗时1 小时 7 分钟从打开 IDE 到把网页发布到华为云 OBS 让朋友访问。如果你也在学前端或者你只是想体验一下AI 帮我写代码是种什么感觉这篇文章就是写给你的。⚠️ 全文没有一行你看不懂的术语 —— 看到生词码道都帮我解释了。最终产出1 个index.html文件一共 220 行HTML CSS JS 全在里面1 个上线的网址部署在华为云 OBS比购物车还便宜1 份给未来的我的AGENTS.md让码道每次都用我能听懂的方式说话下面是我的 1 小时全流程。案例流程1. 我为什么要做这个我手机上装了 7 个待办类 App。要么收费要么广告多要么把番茄钟、打卡、社交全塞进来 —— 我只想要一个干净的、关掉浏览器再打开数据还在的小页面。朋友说“你不是在学前端吗自己做一个嘛。”我心想HTML 我就会个div、h1做不出来吧。直到我看到这次活动 ——「华为云码道CodeArts代码智能体 新特性完成应用开发」。我心想让 AI 帮我写代码那我会不会就行了试试呗反正不要钱。2. 准备3 件事2.1 注册华为云账号按官网指引注册 实名认证10 分钟。这一步本文不展开。2.2 打开码道进华为云开发者空间点「码道CodeArtsAI IDE」浏览器直接打开也可以下载桌面版本文用浏览器版。2.3 新建项目点 「新建项目」名字填XiaoZhuoQian小桌签的拼音。项目类型选「空项目」—— 我们什么模板都不要从零开始。小贴士项目名只能用英文/数字。中文我也试过码道会提示项目名只能含英文、数字、下划线。3. 第一招写一份员工手册 AGENTS.md这是码道4-5 月新特性「新增 AGENTS.md 文件支持」。你可以把它理解成 ——「我对 AI 的使用说明书」。写一次以后每次找 AI 都不用重复废话。我在项目根目录新建一个文件AGENTS.md写了下面这些我自己写的没让 AI 写因为这是给 AI 看的规则# 小桌签 · AGENTS.md新手友好版 一句话规则任何代码必须能在浏览器双击 index.html 直接跑起来 不允许引入任何需要 npm install 的依赖。 ## 为什么这么严 我是编程入门 3 个月的小白下面这些一旦出现我就跑不起来 - ❌ React / Vue / TypeScript要 npm、要编译 - ❌ 后端服务器要装 Node / Python - ❌ 数据库要装 MySQL / Redis ## 允许的东西 - ✅ HTML / CSS / 原生 JavaScript - ✅ localStorage 做本地存储 - ✅ 不用 npm不用 build ## 子代理 teacher 每次回复必须包含 1. 怎么做步骤 123 2. 为什么用比喻让我听懂 3. 完整代码复制粘贴就能跑保存。然后码道左下角弹出一行字✅ 已加载项目规约AGENTS.md子代理teacher已就位。新手疑惑为什么要写这个因为 AI 默认会用程序员的方式和你说话 —— 张嘴就是你 npm install 一下、“用 webpack 配一下”。写了 AGENTS.md码道就知道这哥们是个新手别整花活每次都用我能听懂的方式说话。我一开始没写这个AI 给我推荐用 React 写我光是装 Node.js 就装了 40 分钟还没成功。写了之后再也没出现过类似情况。4. 第二招和teacher对话一步步把页面搭起来4.1 先要一个能输入的输入框我对码道说teacher我想做一个待办列表网页。先给我一个输入框 一个添加按钮长得好看一点圆角、有点阴影。一个index.html文件能双击打开就行。teacher回复我精简一下怎么做新建index.html用input做输入框button做按钮用 CSS 给它们加圆角、阴影为什么把网页想象成一张纸。input是纸上挖了个洞让你填字button是按钮像门铃。CSS 是装修。完整代码给了 60 行代码我把代码复制进index.html双击打开。✨第一次有了是我做的的感觉。虽然按钮按了没反应。4.2 让按钮真的能添加待办我接着说teacher现在按按钮没反应。我要点一下按钮输入框里的字变成一条待办显示在下面。teacher关键代码// 5. 添加待办 functionaddTodo(){constinputdocument.getElementById(new-todo);consttextinput.value.trim();if(!text)return;todos.push({text,done:false,createdAt:Date.now()});input.value;save();render();}它给我解释为什么addTodo是一个动作按钮被点的时候执行它。input.value是输入框里你打的字.trim()是把前后空格删掉不然你输入一个空格也能添加怪难看的。todos.push(...)是把新待办塞进数组。todos是个清单push是在清单末尾追加一行。save()我们下一步会写先放着。render()是重新画一遍列表因为数据变了。我把代码加进去按钮真的能用了。这一刻我笑出声了。新手收获AI 不是给你代码就完了码道里的teacher是真的在教。为什么那一段我读完之后第二次自己就能写类似的东西。4.3 让待办能勾选完成、能删除// 列表事件委托勾选 / 删除document.getElementById(todo-list).addEventListener(click,e{constidxe.target.dataset.idx??e.target.dataset.del;if(idxundefined)return;if(e.target.tagNameINPUT){todos[idx].donee.target.checked;}elseif(e.target.dataset.del!undefined){todos.splice(idx,1);}save();render();});这一段我看不太懂。我直接问teacher这一段我没看懂给我用人话讲讲它说为什么想象你管的不是 1 个按钮而是 100 条待办每条都有勾选框和删除按钮。笨办法给每个按钮都绑一个事件100 条就要 200 个事件浪费。聪明办法只在最外层的ul上绑一个事件不管你点哪个里头的小按钮事件都会飘上来被这个最外层抓到。这叫事件冒泡但你只要记住在大盒子上听就够了。e.target就是你具体点的那个东西。我们看它身上的data-idx、data-del标签决定是勾选还是删除。—— 这是我第一次明白事件冒泡是干啥的。HTML 课本讲了 5 页没这个比喻好懂。4.4 关掉网页再打开数据还在这是整个项目最关键的一步teacher我刷新一下网页待办全没了。我希望关了浏览器再开还在。teacher给的方案是localStorage// 1. 数据从 localStorage 读没有就给空数组 lettodosJSON.parse(localStorage.getItem(xiaozhuoqian_todos)||[]);// 2. 工具函数保存到 localStorage functionsave(){localStorage.setItem(xiaozhuoqian_todos,JSON.stringify(todos));}它解释为什么localStorage是浏览器自带的小冰箱每个网站都有自己的一格可以塞字符串进去。关了浏览器冰箱不会被偷走下次打开还在。但是冰箱只能存字符串。我们的待办是数组所以要JSON.stringify把它压扁成字符串读的时候JSON.parse还原回来。我加完这段代码刷新页面 ——待办还在我关掉整个浏览器、重启 Mac、再打开 ——还在那一刻的感觉是我做出了一个真的能用的东西。5. 一个翻车现场被teacher救回来了我做完上面这些得意地问朋友要不要看。朋友输入了一条待办scriptalert(你的网页被我黑了)/script—— 然后页面真的弹出来一个框 我吓了一跳赶紧问teacher我的网页被人输入了一段奇怪的代码就弹框了怎么回事teacher没批评我这点很好它说这个错误叫 XSS跨站脚本攻击听起来很吓人其实很简单用户输入的字不能直接当成 HTML 塞进页面。想象成你点外卖老板让你写啥我就照做啥。如果你写把店关了老板真去关店了那不就坏了。修复办法把用户输入里的特殊字符转义一下。变成lt;变成gt;浏览器看到lt;就会显示成但不会再当成标签去执行。它给了我这段代码// 4. 防 XSS把用户输入里的 HTML 标签转义 functionescapeHtml(str){returnstr.replace(/[]/g,c({:amp;,:lt;,:gt;,:quot;,:#39;}[c]));}加上之后朋友再输入那段代码只是显示成一行文字不会再执行了。这一段是我整个 1 小时里学到最多的部分。没有teacher我根本不知道有XSS这种东西知道了也不知道怎么修修了也不会自己解释给别人听。这就是AI 当老师和AI 当代笔的区别。6. 让它好看1 句话CSS 全靠码道代码功能都对了但页面长得像 1995 年的网页 —— 灰底、Times New Roman、按钮像砖头。我直接说teacher把样式做好看一点。要现代风、卡片式、配色清爽。码道一口气给了 80 多行 CSS关键片段body{font-family:-apple-system,PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,#fdfbfb 0%,#ebedee 100%);min-height:100vh;display:flex;justify-content:center;padding:40px 20px;}.card{width:100%;max-width:480px;background:#fff;border-radius:16px;box-shadow:0 8px 32pxrgba(0,0,0,0.08);padding:28px;}它解释为什么字体优先-apple-system让 Mac 用户看苹方、Windows 用户看微软雅黑不用下载任何字体文件背景是 135 度斜向的浅灰渐变比纯白柔和卡片用border-radius: 16px圆角 box-shadow一抹淡淡的影子立体感就出来了。刷新页面 ——宛如换了一个 App。7. 部署上线让朋友打开就能用华为云 OBS 静态托管7.1 为什么选 OBS我问了teacher「我这个网页只有一个index.html怎么让朋友也能访问」它推荐了华为云 OBS 静态托管方案月费用难度买云服务器¥80难要装 Nginx国内 CDN看流量难要备案华为云 OBS 静态托管几乎为 0按存储量计费1GB 约 ¥0.0099/月简单点几下鼠标Vercel/GitHub Pages免费国内访问慢— 对我这种就一个 html 文件 几张图的小白来说OBS 性价比最高。7.2 7 步搞定 OBS 静态托管下面是我的真实操作登录华为云 → 控制台 → 搜索 「对象存储 OBS」点 「创建桶」桶名xiaozhuoqian必须全网唯一加自己拼音就行区域选离你最近的我选了「华北-北京四」存储类别标准存储桶策略公共读这样别人才能访问创建好后进入桶 →上传对象→ 把index.html拖进去左侧菜单 →基础配置 → 静态网站托管→启用默认主页index.html默认 404 页index.html图省事反正只有一个页面点「保存」在「概览」页找到「静态网站托管访问域名」浏览器打开这个域名 ——网页上线了我把链接发给朋友朋友秒开开始往里面加待办“买猫粮”“周三还书”“把鱼缸刷一下”朋友说“这真是你做的”我说“是我和码道一起做的。”8. 1 小时账单8. 1 小时账单码道给我烧了多少 Token打开码道**「数据看板 → Token 消耗监控」**这是 4-5 月新特性1 小时消耗阶段我说了什么Token大概几毛钱写 AGENTS.md自己写的—00输入框 按钮“做个待办列表先要输入框”4.2K~¥0.5加事件让按钮可用“按钮没反应”5.8K~¥0.7持久化“刷新数据没了”3.1K~¥0.4修 XSS 漏洞“网页被人弹框了”6.4K~¥0.8美化样式“做好看一点”7.9K~¥1.0部署引导“怎么发给朋友看”4.5K~¥0.5合计—~32K~¥4¥4 1 小时 一个上线的网页应用。我之前学前端的时候光看一本《JavaScript 高级程序设计》前 3 章就花了一周啥也没产出。9. 我作为新手从这 1 小时里学到的 7 件事AGENTS.md 是新手最好的护身符。把我是新手、不要装环境、不要新框架写在文件里AI 就不会让你装 Node.js 装到失眠。teacher子代理要求 AI 必须解释为什么。比复制粘贴跑通重要 100 倍 —— 因为下次没有 AI 你也能写。localStorage是新手做小项目的神器。不用学数据库、不用学后端、不用学服务器浏览器自己有冰箱。HTML 转义防 XSS 是必学的。哪怕你只是想做个玩具也别让朋友轻易把你网页搞挂。CSS 不用全自己写。做好看一点这种模糊指令AI 给的常常比我自己手搓还顺眼。OBS 静态托管是新手部署的最佳起点。不用买服务器、不用学 Nginx、不用域名备案几毛钱搞定。遇到看不懂的代码再问一句用人话讲讲。我整个 1 小时里说了 4 次用人话讲讲每一次都收获巨大。10. 我想对同样是新手的你说我以前一直觉得做项目是高手才能干的事。学完 HTML 才发现做一个小网页门槛比我以为的低 100 倍。有了码道之后门槛又低了 10 倍。我没有写过 React没有用过 npm没有装过 Node。我就用一个浏览器、一个码道账号、一个 OBS 桶做出了一个我每天都在用的小工具。如果你也在学前端 / 学 Python / 学任何东西别等学完了再做项目。今天就打开码道写一句teacher我想做 XX让它带你做。做出第一个能跑的东西是世界上最爽的事之一。