从安装到实测：基于 Claude Code + GLM-4.7 的前端生成与评测实战

Lethehong
0 阅读1分钟

引言

近一年来，代码生成类工具逐渐从“写几行示例代码”走向“完整功能交付”，但真正落到工程实践时，很多工具仍停留在 Demo 阶段：要么跑不起来，要么改动成本过高。 本次评测的核心目标并不是追求“炫技”，而是站在开发者真实使用场景出发，验证一套组合方案是否具备以下能力：

  • 是否能在本地环境中快速跑通

  • 是否能端到端生成可演示、可交付的前端成果

  • 是否减少重复劳动，而不是制造新的维护负担

因此，本文选择了 Claude Code + 蓝耘 MaaS 平台 这一组合，从命令行工具****接入开始，结合多个真实前端需求案例，对模型在网页应用、小游戏以及 3D 可视化等场景下的表现进行实测分析。 评测重点不在“模型参数”或“理论能力”，而在于：它到底能不能帮开发者省时间、少踩坑。

最大输出和最大输入一比一，编码能力放在下面了，个人觉得是挑不出毛病的好吧。不信你试试

一、命令行使用 Claude Code（安装与配置）

步骤一：安装 Claude Code（命令行）

前提

  • Node.js ≥ 18（建议使用 nvm 管理版本以避免权限问题）。

  • macOS：推荐用 nvm 或 Homebrew 安装 Node.js，不建议直接双击 pkg 安装（可能有权限问题）。

  • Windows：请先安装 Git for Windows。

安装

npm install -g @anthropic-ai/claude-code

安装完成后验证：

claude --version

步骤二：配置蓝耘MaaS平台

1、注册 / 登录：访问**蓝耘MaaS平台**，完成账号注册并登录。

2、在「API KEY 管理」中创建 API Key，并复制备用。

在本机设置环境变量（推荐方式：编辑配置文件）

  • macOS / Linux：~/.claude/settings.json

  • Windows：%USERPROFILE%/.claude/settings.json

示例 settings.json（请替换your_lanyun_maas_api_key）：

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "your_lanyun_maas_api_key",
    "ANTHROPIC_BASE_URL": "https://maas-api.lanyun.net/anthropic",
    "API_TIMEOUT_MS": "3000000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": 1,
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "/maas/deepseek-ai/DeepSeek-V3.2",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "/maas/deepseek-ai/DeepSeek-V3.2",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "/maas/deepseek-ai/DeepSeek-V3.2"
  }
}

  • 同时创建（或确认）~/.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，已经是一个值得放进工具箱里的选项。

avatar
文章
阅读
粉丝