基于 Claude Code + GLM-4.7 的前端生成与评测实战

同时创建（或确认）~/.claude.json：

{
  "hasCompletedOnboarding": true
}

生效提示

• 配置完成后请打开一个新的终端窗口以载入新的环境变量。
• 启动 claude，首次会询问是否使用该 API key（选择 Yes），并请在第一次访问时同意信任工作目录（允许读取文件以便代码功能）。

步骤三：常见排查

• 若手动修改 ~/.claude/settings.json 后不生效：
  • 关闭所有 Claude Code 窗口，重新打开新的终端。
  • 若仍不生效，尝试删除该文件并重新生成配置（注意备份原文件）。
  • 检查 JSON 格式是否正确（可用在线 JSON 校验工具）。
• 检查版本与更新：

claude --version
claude update

二、编码工具中使用 claude-code：三个端到端案例（含提示与实测评价）

每个案例先给出'需求 + 提示词'示例，然后给出对模型产出（代码/效果）的实测评价，评价尽量贴近工程实践：是否能直接运行、需要手工修改的点、功能完整性、性能与安全注意项。

案例 1：交互式个人血压记录网页 — 前端端到端生成

需求：希望 GLM-4.7 能够生成一个简单的个人血压记录网页应用，包括录入血压数据的前端界面和一个数据可视化大屏展示页面，要求界面美观，且支持单人登录功能。

提示词：我们向 GLM-4.7 输入了如下的自然语言提示：

请用 HTML、CSS 和 JavaScript 创建一个完整的个人血压记录网页应用。要求包括：1) 用户登录界面；2) 血压数据录入表单（收缩压、舒张压、测量日期）；3) 数据可视化大屏界面，以图表展示历史血压记录；4) 整体界面风格现代简洁，配色协调美观。5) 将前端代码与样式、脚本整合在一个 HTML 文件中，方便直接运行。

实测评价（工程视角）

• 可运行性：生成的单文件 HTML 通常能在本地直接打开并运行，图表（如用 Chart.js）能正常渲染——基本可直接跑通。
• 需要人工补充/注意点：持久化通常仅用 localStorage，真实生产需后端与加密；登录为前端模拟（不安全），若要求真登录需接入后端 API 与认证方案。
• 代码质量：结构清晰但注释与边界检查（表单验证、异常处理）需补充；样式可直接用但对响应式与无障碍要进一步优化。
• 总结：非常适合原型与内部演示；若要上线需补后端、认证与输入校验、数据导出等工程工作。

案例 2：Web 双人对战小游戏（Joy-Con 风格）

需求：开发一个基于 Web 的双人对战小游戏，界面风格模仿 Nintendo Switch 主机的 Joy-Con 手柄，包括左右两个虚拟手柄和中间的游戏屏幕。要求实现基本的游戏逻辑和简单的控制功能。

提示词：我们向 GLM-4.7 输入了如下提示：

请用 HTML5 Canvas 和 JavaScript 编写一个双人对战小游戏。界面要求模仿 Nintendo Switch 的 Joy-Con 手柄：左侧蓝色手柄，右侧红色手柄，中间为游戏屏幕。玩家 1 使用键盘 A/D 移动，J 攻击，K 跳跃；玩家 2 使用键盘 U/I/O 分别释放技能。游戏要求有基本的角色移动和攻击判定逻辑，界面风格统一美观。请将所有代码整合在一个 HTML 文件中，确保在浏览器中打开即可运行。

实测评价（工程视角）

• 可运行性：模型生成的 Canvas 游戏通常包含主循环、碰撞/判定的基本实现，能够进行本地试玩；帧率在普通浏览器和单页面逻辑下表现正常。
• 需要人工补充/注意点：物理判定、碰撞响应和输入去抖（debounce）常是'粗糙实现'，需手动修正以避免卡顿或误判；网络对战未实现（仅本地双人）。
• 代码质量：逻辑上可读，但没有模块化（全部放在全局），不利于维护；建议拆分为模块或使用简易引擎封装。
• 总结：适合快速原型与教学演示；若做成产品需重构输入处理、物理/判定逻辑、以及添加资源管理与关卡数据。

案例 3：前端可视化组件生成

需求：创建一个基于 Three.js 的 3D 场景，包含一个华丽的宝塔和周围盛开的樱花树，场景要求视觉精美、结构清晰，且支持用户通过鼠标或手势进行交互控制（如旋转场景、缩放视图）。

提示词：我们向 GLM-4.7 输入了如下提示：

请用 Three.js 编写一个包含宝塔和樱花树的 3D 场景。要求：1) 宝塔位于场景中央，装饰华丽；2) 周围环绕盛开的樱花树，营造花园氛围；3) 场景使用等轴测或俯视视角，光影柔和，有适当的环境光和定向光以产生投影；4) 支持鼠标拖动旋转场景和滚轮缩放查看；5) 所有代码整合在一个 HTML 文件中，使用 CDN 引入 Three.js 及其依赖，确保直接打开即可运行。

实测评价（工程视角）

• 可运行性：多数生成结果能在现代浏览器中打开并展示场景（依赖 CDN 的 Three.js），基础交互（OrbitControls）通常可用。
• 需要人工补充/注意点：模型与细节（如樱花树的粒子/贴图）可能是简单几何或贴图替代，若追求视觉精细需要自行替换高质量模型/贴图与烘焙光照或使用 PBR 材质；阴影与性能在低端设备上需做 LOD/简化处理。
• 代码质量：示例代码多为教学风格，未必包含资源加载进度管理与错误处理；建议加上纹理压缩、异步加载与内存释放逻辑。
• 总结：适合演示级视觉效果与交互交付；商业级视觉需投入美术资源并改造渲染管线与性能优化。

三、补充建议（快速 checklist）

• 环境：Node.js 用 nvm 管理、macOS 权限使用 sudo 谨慎；Windows 使用 PowerShell / Git Bash 测试命令。
• 配置：编辑 ~/.claude/settings.json 时注意 JSON 语法（逗号、引号、转义）；每次修改后重启终端。
• 模型选择：通过 ~/.claude/settings.json 修改 ANTHROPIC_DEFAULT_*_MODEL 字段来切换模型；切换后启动 claude 并在交互中用 /status 确认。
• 安全/上线：所有'示例仅前端'场景上线前必须接入安全认证、后端存储与输入验证（避免注入与隐私泄露）。

总结

从本次实际使用和多个案例的结果来看，Claude Code 在接入 MaaS 平台后，已经具备'工程可用级'的生成能力，尤其在以下几个方面表现比较稳定：

• 端到端能力明确：在单文件 HTML、前端 Demo、Canvas 游戏、Three.js 场景等任务中，生成结果大多可直接运行，减少了大量'拼代码'的前期工作。
• 适合作为原型与验证工具：非常适合用在需求验证、内部演示、方案评审和教学场景中，而不是一开始就手写全部代码。
• 开发者心智成本低：命令行方式接入，不改变现有工作流，比网页对话式工具更符合日常编码习惯。

当然，也需要客观看待它的边界：

• 生成代码在安全性、模块化、性能优化方面仍需要人工介入；
• 登录、数据存储、多人协作等生产级能力仍需配合后端体系完善；
• 更复杂的项目仍然离不开开发者的架构设计与工程判断。

整体来看，这套方案的价值并不在于'替代程序员'，而在于把开发者从重复、低价值的样板工作中解放出来，让时间更多地投入到业务逻辑、架构设计和体验打磨上。

如果你的目标是： 更快做出可运行的东西，而不是从零写样板代码，那么 Claude Code + MaaS 平台，已经是一个值得放进工具箱里的选项。