我用华为云码道 Agent 一天独立完成全栈作品：PromptForge 提示词工作台（附完整开发实录）
一、应用介绍
PromptForge 是一款面向 AI 使用者的本地提示词（Prompt）管理工具。解决三个痛点：提示词散落在各处难复用、每次都要手改变量、改坏了无法回退。
核心功能：
- 提示词 CRUD：标题/正文/分类/标签管理，卡片式界面，搜索与分类过滤
- 模板变量渲染：正文中写
{{变量}}，编辑时自动生成变量输入框，实时预览最终提示词，一键复制 - 版本管理：每次保存自动归档旧版本，可视化对比任意两个版本的行级 diff
- 导入导出：JSON 全量备份，事务原子性导入（一条不合法整体回滚）
技术栈：React 18 + TypeScript + Vite / Express + TypeScript + SQLite（Node 内置 node:sqlite，零原生依赖）/ 前后端共享 zod schema / Vitest 93 用例、行覆盖率 97%+。
仓库地址：https://atomgit.com/2301_79441716/promptforge （Apache-2.0 开源，README 含一键运行步骤）
二、架构设计
┌──────────────┐ /api/* (JSON) ┌──────────────┐ 参数化SQL ┌────────────┐
│ client (SPA) │ ────────────────▶ │ server (API) │ ───────────▶ │ SQLite 文件 │
│ React18+TS │ ◀──────────────── │ Express+TS │ ◀─────────── │ node:sqlite│
└──────┬───────┘ 统一错误结构 └──────┬───────┘ └────────────┘
│ │
└──────── shared (zod) ────────────┘
前后端共享同一份输入校验 schema
（提示词 schema / 导入文件 schema / 渲染请求 schema）
- npm workspaces 三包结构：
client/（前端）、server/（后端）、shared/（共享校验层）。校验规则只写一份，前端提交前safeParse提前拦截，后端路由再校验一次——“前后端双重校验、单一事实来源” - 仓储层工厂模式：
createPromptStore(db)支持注入:memory:数据库，测试无需文件系统、天然隔离 - 纯函数渲染：模板替换+XSS 转义独立成
render.ts纯函数模块，无副作用、可穷举测试 - 选择 node:sqlite 而非 better-sqlite3：避免原生编译依赖，Node ≥ 22.5 开箱即跑，
npm install永不失败
三、码道 Agent 开发实录（四轮对话驱动）
第 1 轮：从一句话到全栈骨架（8 分 33 秒）
工作台点"创建一个新仓库"快捷卡片，Agent 弹出交互式问卷（仓库类型 → 远程仓库），我选 Other 填了技术栈描述。它自主完成：环境检查 → 检测到已登录的 ag CLI → 规划目录结构 → 写全部代码 → npm install → 编译验证 → 建远程仓库 → 推送。
期间它还自己做了技术决策：为避免原生模块编译风险选了 node:sqlite——这个选择后来证明非常关键。
第 2 轮：安全加固 + 共享校验 + 测试（评审权重最高的 60 分）
提示词只描述"做什么"，不干涉"怎么做"：helmet、写接口限流 30 次/分钟、CORS 白名单仅本地前端、请求体 1MB、错误处理不泄露堆栈；shared 包让 zod schema 前后端复用；Vitest 42 用例（含 SQL 注入原样存储用例），行覆盖率 97.92%。
第 3 轮：核心能力（版本/渲染/导入导出，测试扩到 93 例）
值得记录的 Agent 自主设计：事务原子性放仓储层 importMany()（单一职责），schema 校验留路由层；渲染函数对变量值做 HTML 实体转义，<script>alert(1)</script> 会被转成 <script>...。冒烟验证全过：XSS 转义✓ 5001 字符模板 400✓ 非法导入整体回滚✓
第 4 轮：前端升级（换模型续命的实战经验）
这轮最有波折：deepseek 系和 glm-5.3-flash 接连报**“当前模型配额不足”**（这几个限时模型是全站每日共享池，下午高峰期会被耗干）。切换 OpenPangu-2.0-Flash 后新开会话、挂上同一仓库，4 分 38 秒完成全部前端升级：自写 LCS 行级 diff（不引依赖）、渲染面板 300ms 防抖、暗色主题 CSS 变量、SVG 空状态、<768px 响应式。
换会话不丢进度的原理：远程仓库就是共享状态，新会话挂仓库重新 clone 即可；唯一注意点是未提交的工作区改动会丢，所以"小步提交"很重要。
四、代码质量与测试
- 93 个 Vitest 用例：仓储层 20（参数化查询、注入字符串原样存储）、渲染纯函数 21（含 XSS 注入、missing 收集、长度边界）、路由层 52（supertest 覆盖 400/404/413/429/CRUD）
- 行覆盖率 97%+，CI 可直接
npm test - 全程 git 粒度提交，commit message 中文描述变更与验证结果
五、安全合规设计清单
| 威胁 | 防护 |
|---|---|
| SQL 注入 | 全部参数化查询（node:sqlite prepare/run） |
| XSS（渲染变量） | HTML 实体转义后再替换 |
| 恶意/超大请求体 | 1MB 上限 + 限流（写接口 30 次/分） |
| 跨域滥用 | CORS 白名单仅 http://localhost:5173 |
| 信息泄露 | 统一错误处理，响应不含堆栈 |
| 脏数据导入 | zod 逐条校验 + 事务原子回滚 |
| 传输头 | helmet（CSP 等安全响应头） |
| 密钥泄露 | 仓库零密钥，数据仅存本地 SQLite |
六、本地一键运行
git clone https://atomgit.com/2301_79441716/promptforge.git
cd promptforge
npm install
npm run dev # 前端 http://localhost:5173，API http://localhost:3001
npm test # 93 用例
要求 Node ≥ 22.5（node:sqlite）。
七、华为云码道使用体验与建议
提效感受：四轮对话、累计约 30 分钟的 Agent 执行时间，完成从零到 93 用例全绿的全栈项目。对我最有价值的三点：1) 交互式问卷把模糊需求变清晰；2) 每轮主动做冒烟验证再提交，交付质量高；3) commit message 自动写变更摘要+验证结果，仓库历史可直接阅读。
优化建议：1) 限时模型配额提示可以更明确（显示池子余量或建议切换的模型）；2) 长任务跑完后会话偶尔卡在"后台正在处理"，希望能主动恢复或支持会话内重试；3) 模型下拉若能标注各模型当日可用状态，选型会更省心。
本文参加 华为云码道 CodeArts AI 编程挑战赛（AtomGit 主办）。作品源码：https://atomgit.com/2301_79441716/promptforge
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/2301_79441716/article/details/166600069
