1. 先搞清楚 HelloCard 到底在做什么HelloCard 网页贺卡生成器说白了就是一个单文件网页你在编辑页填「送给谁、我是谁、祝福语、主题」点一下按钮页面把内容拼进 URL 参数里生成一条带?toxxxmsgxxx的链接。朋友点开这条链接浏览器读取参数直接渲染出一张会飘彩纸的卡片。它适合谁适合第一次发帖、只会一点 HTML/CSS、不想碰后端和数据库、又想两小时内做出一个能转发出去的小作品的萌新开发者。核心认知只有一句话祝福内容存在 URL 里不需要服务器保存任何数据。没有后端、没有数据库、没有登录注册谁拿到链接谁就能看。这意味着你只需要一个index.html加上一个能放静态文件的托管位置就能上线。华为云码道CodeArts在这里扮演的角色是「帮你把代码写出来」的 AI IDE而 TaoToken 负责把模型调用统一到一个 Key、一个 API 通道上省去你到处找模型入口的麻烦。下面按「先配环境 → 再写代码 → 再验证 → 再排错」的顺序走每一步都能直接抄。2. TaoToken 前置一个 Key 打通模型调用在码道里让 AI 帮你写代码背后是要调模型的。TaoToken 的作用是把模型对话、编码补全这类请求收敛到统一入口你只需要申请一个 Key然后在码道的配置里指向它的 API 地址即可。官网入口在这里https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 这个不加 UTM。操作顺序建议这样先注册账号进控制台创建 API Key把 Key 复制到本地安全的地方然后确认你要用的模型通道比如做代码生成就选偏编码的模型做对话解释就选通用对话模型。如果你后面要长期在码道里做编码、跑 Agent 任务可以直接看 Coding Plan 页面了解额度与用法只是临时验证模型效果用模型对话页面就够了。Key 拿到后不要写死在代码里放到环境变量或码道的配置文件中这是基本习惯。3. 可复制配置AGENTS.md 与 settings.json 骨架这一步是整篇最关键的地方。我试过不写规约直接让 AI 生成结果它一上来就推荐 React、让你装 Node一晚上跑不起来。所以进码道新建空项目HelloCard后先写 AGENTS.md再开口说话。在项目根目录新建AGENTS.md内容如下# HelloCard · AGENTS.md ## 一句话规则 只要 1 个 index.html 能搞定的绝不分文件、绝不引入框架、绝不上 npm。 ## 我是谁 - 编程菜鸟一枚会基础 HTML/CSSJS 还在入门 - 最讨厌「装环境装一下午」 ## 子代理 buddy搭子 每次回复请 - 用轻松语气像朋友聊天 - 关键代码必须给出可直接复制的完整版 - 解释一律用类比 / 大白话 ## 禁止 - React / Vue / 任何需要 build 的东西 - Node.js 后端 - 任何需要 npm install 的依赖保存后码道会加载项目规约子代理buddy就位。接着配置模型通道在项目根目录新建settings.json把 TaoToken 的 API 基址和你的 Key 填进去Key 建议用环境变量引用不要明文提交{ modelProvider: { name: taotoken, baseUrl: https://taotoken.net/api, apiKey: ${TAOTOKEN_API_KEY}, model: your-coding-model-name }, agent: { defaultSubAgent: buddy, rulesFile: AGENTS.md }, editor: { autoFormat: true, tabSize: 2 } }然后在系统环境变量里设置TAOTOKEN_API_KEY或者在码道的密钥管理里录入。这样配置的好处是换模型只改model字段换通道只改baseUrl代码本身不用动。如果你还没建 Key去 API Keys 页面创建https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。4. 可复制代码单文件 HelloCard 完整实现配置就绪后让buddy生成骨架或者直接抄下面这版。整个index.html分三块编辑模式、展示模式、启动判断。核心逻辑是「URL 有没有参数」决定显示哪个模式。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHelloCard 网页贺卡/title style body { margin:0; font-family: system-ui, sans-serif; background: linear-gradient(135deg,#ffe0ec,#fff3e0); min-height:100vh; } .wrap { max-width:520px; margin:0 auto; padding:40px 20px; } .card { background:#fff; border-radius:20px; padding:32px; box-shadow:0 12px 40px rgba(255,150,180,.25); } input, textarea, select { width:100%; padding:10px; margin:8px 0 16px; border:1px solid #f3c6d6; border-radius:10px; box-sizing:border-box; } button { width:100%; padding:12px; border:none; border-radius:10px; background:linear-gradient(90deg,#ff9ec4,#ffb98a); color:#fff; font-size:16px; cursor:pointer; } #card { display:none; text-align:center; } #cEmoji { font-size:56px; } #cGreet { font-size:22px; margin:12px 0; color:#e0568a; } #cMsg { font-size:17px; line-height:1.7; color:#444; } #cFrom { margin-top:18px; color:#999; } .confetti { position:fixed; top:-10px; width:8px; height:14px; opacity:.9; animation: fall linear forwards; } keyframes fall { to { transform: translateY(105vh) rotate(720deg); } } /style /head body div classwrap div classcard ideditor h2做一张网页贺卡/h2 label送给谁/labelinput idto placeholder朋友A label我是谁/labelinput idfrom placeholder神秘人 label祝福语/labeltextarea idmsg rows3 placeholder生日快乐/textarea label主题/label select idtheme option value|生日快乐生日/option option value|节日快乐节日/option option value|天天开心日常/option /select button idgen生成专属链接/button /div div classcard idcard div idcEmoji/div div idcGreet/div div idcMsg/div div idcFrom/div button idcopy stylemargin-top:20px;复制链接/button /div /div script function escapeHtml(s) { return String(s).replace(/[]/g, c ({ :amp;,:lt;,:gt;,:quot;,:#39; }[c])); } function readParams() { const sp new URLSearchParams(location.search); return { to: sp.get(to)||, from: sp.get(from)||, theme: sp.get(theme)||, msg: sp.get(msg)|| }; } function buildUrl(data) { const sp new URLSearchParams(); Object.entries(data).forEach(([k,v]) v sp.set(k,v)); return location.origin location.pathname ? sp.toString(); } function confetti() { for (let i0;i40;i) { const d document.createElement(div); d.className confetti; d.style.left Math.random()*100 vw; d.style.background [#ff9ec4,#ffd166,#8ecae6,#b5e48c][i%4]; d.style.animationDuration (2Math.random()*2) s; document.body.appendChild(d); setTimeout(()d.remove(), 4500); } } function showCard(p) { document.getElementById(editor).style.display none; document.getElementById(card).style.display block; const [emoji, greet] (p.theme || |你好).split(|); document.getElementById(cEmoji).textContent emoji; document.getElementById(cGreet).textContent escapeHtml(p.to) escapeHtml(greet); document.getElementById(cMsg).textContent p.msg; document.getElementById(cFrom).textContent p.from ? —— p.from : ; confetti(); } function bindEditor() { document.getElementById(gen).addEventListener(click, () { const to document.getElementById(to).value.trim(); const from document.getElementById(from).value.trim(); const msg document.getElementById(msg).value.trim(); const theme document.getElementById(theme).value; if (!to || !msg) { alert(收件人和祝福语不能空哦~); return; } location.href buildUrl({ to, from, theme, msg }); }); } const params readParams(); if (params.to params.msg) { showCard(params); } else { bindEditor(); } document.getElementById(copy).addEventListener(click, async () { try { await navigator.clipboard.writeText(location.href); alert(已复制到剪贴板~); } catch { alert(请手动选中链接复制); } }); /script /body /html几个关键点解释一下。URLSearchParams是浏览器内置的网址参数管家你喂键值对它自动拼成?toxxxfromyyy并处理中文转码不然中文会变乱码。location.search就是网址里?开头那一段有to和msg就切卡片没有就让用户编辑逻辑像门口保安看票。escapeHtml是防 XSS 的用户输入永远不要直接当 HTML 塞进页面textContent会自动转义但模板字符串拼接的地方必须手动包一层。5. 验证请求本地跑通并转发代码写完后先本地验证。双击index.html用浏览器打开填「朋友A / 神秘人 / 生日快乐」点生成地址栏会变成类似...index.html?to%E6%9C%8B%E5%8F%8BAmsg...theme...页面切换成卡片并飘彩纸。这一步成功说明参数读取和渲染逻辑通了。接着验证转发。把这条带参数的完整链接复制发到手机或另一个浏览器打开确认卡片正常显示、彩纸动画正常。如果要在码道里验证模型通道是否配通可以在对话里让buddy解释一段代码看它是否正常返回想单独测模型效果就去模型对话页面https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite 。本地验证通过后把index.html上传到静态托管比如对象存储的静态网站托管拿到访问域名把「域名 参数」拼成的链接发给朋友对方点开即见卡片。整个链路就算跑通了。6. 本篇常见错排查报错一点了按钮没反应。多半是bindEditor没被调用或者gen按钮的 id 写错。检查启动判断那段没有参数时是否走了bindEditor()以及 HTML 里按钮 id 是否和getElementById(gen)一致。报错二中文变乱码。手写encodeURIComponent容易漏直接用URLSearchParams就不会。如果你看到%E7%94%9F...这种其实是正常的 URL 编码浏览器读取时会自动解码不用慌。报错三朋友输入script弹框。这是 XSS说明某处用了innerHTML或模板字符串直接拼用户输入。把所有用户输入在拼 HTML 前包一层escapeHtml(...)或者改用textContent。报错四复制按钮在老浏览器没反应。navigator.clipboard不是所有环境都支持所以代码里包了try/catch失败时提示手动复制这是兜底路径不要删。报错五模型调用 401 或超时。检查settings.json里的baseUrl是否为https://taotoken.net/api以及环境变量TAOTOKEN_API_KEY是否真的注入到了码道进程里。Key 失效就去 API Keys 页面重新生成https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite 。接入细节和参数说明看接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。报错六上传后访问 404。静态托管要确认默认主页填的是index.html且文件确实在桶根目录不是套了一层文件夹。7. 继续往下走把骨架变成你自己的跑通这一版后你可以让buddy继续加功能换主题配色、加背景音乐、加倒计时。长期在码道里做编码和 Agent 任务的话建议了解 Coding Plan 的额度方式https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite 。控制台里可以管理 Key 和用量https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。最后说个真实体会AI 编程工具的意义不是让程序员更快而是让原本不写代码的人也能创造点什么。我 HTML 才看了几节课照样做出了能转发的小作品。第一句话先写 AGENTS.md三分钟的事能省后面三小时每次让 AI 用人话讲讲为什么比代码本身重要得多。做的东西要有人会用朋友收到贺卡那一刻才是学习路上最大的奖励。