从零搭建到云上发布：用 CodeArts 智能体完成前端项目的全流程实践

本文记录了使用华为云 CodeArts 代码智能体（GLM-5.2 驱动）完成一个前端管理后台项目的完整历程——从项目脚手架、UI 精修，到云上发布踩坑与解决，全程与 AI 结对编程的真实体验。

一、开场：一句话生成项目骨架

我对 CodeArts 说了一句"创建一个前端项目"。

它没有直接动手，而是先问了三个问题：框架选型、项目用途、功能模块。我选择了纯 HTML/CSS/JS + 管理后台 + 路由管理。

接下来发生的事情让我印象深刻——它一次性生成了 14 个文件，项目结构清晰分明：

├── index.html              # 入口
├── css/
│   ├── reset.css           # 样式重置
│   ├── variables.css       # CSS 变量（主题色、间距）
│   ├── layout.css          # 布局（侧边栏、头部）
│   └── components.css      # 组件（表格、表单、弹窗）
├── js/
│   ├── store.js            # 观察者模式状态管理
│   ├── auth.js             # 权限/登录管理
│   ├── api.js              # fetch 封装 + 拦截器
│   ├── router.js           # Hash 路由（支持动态参数）
│   └── app.js              # 应用入口
└── pages/
    ├── login.js            # 登录页
    ├── dashboard.js        # 仪表盘
    ├── users.js            # 用户管理（CRUD）
    └── settings.js         # 系统设置

心得：CodeArts 的提问机制很关键。如果它不问，可能会用 React 搭建一个我不想要的项目。这种"先对齐再动手"的工作方式，避免了大量返工。

二、UI 精修：frontend-design skill 的 Linear Aesthetic

初始项目功能完整，但视觉上比较"标准"——就是那种一看就知道是 AI 生成的通用后台界面。

我选中了侧边栏 logo 元素，让它用 frontend-design skill 优化。它加载了 Linear Aesthetic 设计风格，做了以下改造：

接着我又让它优化仪表盘页面，它做了三件事：

1. 统计卡片：加渐变背景 + hover 上浮 + 顶部光线 + 趋势指标（↑12.5%）
2. 订单表格：订单号/金额用等宽字体 + 状态标签前置圆点
3. 系统动态：从普通列表改为时间线设计——左侧渐变竖线 + 发光圆点节点

心得：frontend-design skill 的价值在于它提供了明确的美学方向（Linear Aesthetic），而不是泛泛的"好看一点"。有了方向，AI 的修改就变得精准且一致。但需要注意，skill 优化是增量的，每次只改一个区域，不会一次性重写整个项目。

三、云上发布：最硬核的挑战

3.1 安装 skill

发布到华为云作品展览馆需要 huawei-cloud-publish-work-to-gallery skill。标准安装命令是：

npx skills add https://gitcode.com/Lingxi-HandsOn/gallery.git --skill huawei-cloud-publish-work-toB-gallery -y

但环境里没有 Node.js、没有 Git、没有 npx。这是第一个障碍。

3.2 便携版工具链搭建

CodeArts 用 Python 下载了 Node.js v24.21.0 便携版和 MinGit 2.47.0 zip 版，解压即用。然后通过 install-hcloud.ps1 脚本安装了华为云 KooCLI（hcloud）。

整个过程不需要管理员权限，不需要安装包管理器（winget/choco/scoop 都没有），纯靠 Python 的 urllib + zipfile 搞定。

心得：在受限环境下，"便携版 + 动态 PATH"是最可靠的工具链搭建方式。每次执行命令前，先 $env:PATH = "$nodeDir;$gitDir;$hcloudDir;$env:PATH" 注入路径。

3.3 hcloud 配置目录权限地狱

拿到 AK/SK 后，配置 hcloud 时遇到了最棘手的问题：

保存配置文件失败:创建文件夹C:\Users\Longxin\.hcloud\root失败:访问被拒绝

C:\Users\Longxin\.hcloud 目录存在，用户有 FullControl 权限，但就是无法在其下创建 root 子目录。我尝试了：

• New-Item -ItemType Directory → 访问被拒绝
• [System.IO.Directory]::CreateDirectory() → 访问被拒绝
• icacls /grant 修改 ACL → 权限修改成功，但仍然无法创建
• New-Item -ItemType Junction 将 root 链接到其他目录 → 报告成功但 Test-Path 返回 False

最终判断是 Windows Defender 控制文件夹访问 或安全软件在保护该目录。

3.4 绕过方案：Python 直接调用 IAM API

既然 hcloud 无法配置，我决定用 Python 直接实现华为云的 AK/SK 签名算法，调用 IAM API 获取 Domain ID。

华为云使用 SDK-HMAC-SHA256 签名算法，过程类似 AWS V4：

# 1. 构造 Canonical Request
canonical_request = f"{method}\n{uri}\n{query}\n{canonical_headers}\n{signed_headers}\n{payload_hash}"

# 2. 构造 String to Sign
string_to_sign = f"SDK-HMAC-SHA256\n{timestamp}\n{sha256(canonical_request)}"

# 3. 派生签名密钥
k_date   = HMAC-SHA256(SK, date_stamp)
k_region = HMAC-SHA256(k_date, region)
k_service = HMAC-SHA256(k_region, service)
k_signing = HMAC-SHA256(k_service, "sdk_request")

# 4. 计算签名
signature = HexEncode(HMAC-SHA256(k_signing, string_to_sign))

踩了一个 URI 末尾斜杠的坑：签名时 URI 需要带 /（/v3/auth/domains/），但实际请求时不带。服务端在签名验证时会自动规范化 URI，导致签名不匹配。

心得：这是整个流程中最耗时的环节。hcloud 的配置目录权限问题在 Windows 环境下并不罕见，但排查起来非常困难——错误信息只有"访问被拒绝"，没有任何关于安全软件的提示。最终用 Python 绕过 hcloud 是无奈之举，但也展示了在 AI 辅助下快速实现签名算法的可能性。

四、VPC 终端节点：一个网络架构问题的对话

在发布过程中，我顺便问了一个架构问题：练习机在 VPC 内，访问云服务需要建终端节点吗？

CodeArts 给出了清晰的回答：

• 不必要：走公网地址就能访问所有云服务
• 终端节点适合：无公网 IP 的纯内网 VPC，或对安全/延迟有要求
• 安全组：建了终端节点后仍需放行——出方向 TCP 443 到终端节点，入方向放行来自练习子网

这种"问一个问题，得到结构化、有上下文的回答"的体验，比搜索引擎翻文档快得多。

五、整体评价

做得好的地方

1. 提问对齐：不会闷头干活，先确认需求再动手
2. 并行写入：14 个文件分 3 批并行写入，速度快
3. Skill 体系：frontend-design 提供了明确的美学方向，不是泛泛优化
4. 环境适应：在缺少 Node.js/Git/npx 的环境下，用 Python 搭建了完整工具链
5. 中文优先：所有交互都是中文，符合国内开发者的使用习惯

可以改进的地方

1. hcloud 权限问题：遇到 Windows Defender 拦截时，应该更早建议"检查控制文件夹访问"设置，而不是反复尝试创建目录
2. 签名调试：Python 签名实现花了多次迭代才通过，如果能在第一次就正确处理 URI 末尾斜杠的规范化，会节省不少时间
3. 长流程容错：8 步发布流程中任何一步失败都需要人工介入，缺少自动重试或更详细的错误恢复指引

最佳实践建议

• 先问再答：让 AI 确认需求，比直接给结果更靠谱
• Skill 是放大器：frontend-design skill 让 UI 优化从"能用"变成"好看"，善用 skill
• 便携版工具链：在受限环境下，zip 解压 + 动态 PATH 比安装包更可靠
• 保留中间产物：下载的 skill 文件、便携版工具都保留在项目目录下，方便后续复用

六、结语

这次体验让我感受到，AI 编程助手的价值不只是"写代码快"，更在于：

1. 降低门槛：从零搭建前端项目、实现华为云签名算法，这些平时需要查大量文档的工作，在 AI 辅助下变得流畅
2. 处理脏活累活：下载工具链、配置环境、调试签名——这些最烦人的部分，AI 都能接手
3. 知识桥梁：VPC 终端节点这种架构问题，AI 能给出结构化的回答，省去翻文档的时间

当然，它还不完美——Windows 权限地狱、签名 URI 斜杠这些坑，AI 也踩了好几次。但整体而言，"人定方向、AI 干活"的协作模式，确实让开发效率上了一个台阶。

工具：华为云 CodeArts 代码智能体（GLM-5.2）
项目：纯 HTML/CSS/JS 管理后台（Linear Aesthetic 风格）
环境：Windows + Node.js 便携版 + MinGit + hcloud CLI