用 AI 助手从零到发布：华为云架构可视化助手实战

从一句话需求到作品陈列馆上架，全程由 AI 驱动，不到 30 分钟完成一个华为云架构可视化项目的设计、开发与发布。

一、项目背景

在华为云开发者活动中，我参与了一个日常技术文章任务：开发一个与华为云相关的技术项目并发布到作品陈列馆。

我的需求很简单——做一个 AI 驱动的华为云架构可视化助手。具体来说：

• 用户描述业务场景（如"我要部署一个电商网站"）
• AI 自动推荐三层云架构方案（接入层 / 计算层 / 数据层）
• 以可视化卡片形式展示推荐结果
• 附带监控指标面板，展示可用性、响应时间、成本等关键数据

整个项目纯前端实现，无需后端依赖，一个 HTML 文件搞定。

二、开发过程：AI 驱动的全流程

2.1 项目生成

我在 AI Shell（基于 DeepSeek Harness）中用自然语言描述需求：

“帮我做一个华为云 AI 架构可视化页面，包含架构推荐、对话演示、监控指标，深色主题，响应式布局。”

AI 助手一次性生成了完整的 index.html（约 280 行），包含：

2.2 代码审查与调整

生成后我让 AI 助手逐项检查：

• 确认三层架构内容覆盖了华为云核心产品（ELB、ECS、RDS、OBS、CDN、WAF 等）
• 验证 CSS 动画在移动端的表现
• 补充了 README.md，包含技术架构说明和快速开始指南

2.3 提交到 GitCode

# 初始化 Git 仓库
cd ai-cloud-arch-viz
git init
git add .
git commit -m "feat: AI 云架构可视化助手初始版本"

# 推送到 GitCode
git remote add origin https://gitcode.com/sdf2342/ai-cloud-arch-viz.git
git branch -m main
git push -u origin main

踩坑记录：GitCode 创建仓库时名称不能包含空格，需要用 slug 格式（如 ai-cloud-arch-viz）。另外，默认分支名是 master，推送到 Gallery 验证时需要是 main，所以加了 git branch -m main。

三、发布到作品陈列馆

这是整个流程中最复杂的部分。华为云作品陈列馆的发布是一个 8 步流水线，每一步都有校验门禁：

┌─────────────────────────────────────────────────────────┐
│  发布流水线                                              │
│                                                         │
│  Step 1: 获取 STS 临时凭证                               │
│  Step 2: 启动 DevBridge 隧道                             │
│  Step 3: 收集 Git 信息 + 作品名称                        │
│  Step 4: 生成封面图（16:9 截图）                         │
│  Step 5: 编写介绍 + 选择活动列表                          │
│  Step 6: 打包详情 zip（README + 截图）                   │
│  Step 7: 选择活动类型                                    │
│  Step 8: 执行发布                                        │
└─────────────────────────────────────────────────────────┘

关键步骤详解

Step 1：获取 STS 凭证

# 通过 IAM API 获取临时访问凭证
# 用于后续步骤的身份认证

Step 4：生成封面图

封面图要求 16:9 比例（1280×720），我让 AI 助手对页面进行截图，裁剪为 hero 布局，保存为 /tmp/cover.png。

Step 6：打包详情

# 详情包包含：
#   - README.md（项目说明）
#   - 1 张截图（展示效果）
# 打包为 workDetail.zip

Step 8：执行发布

所有门禁校验通过后，调用 API 提交作品。我选择了"闯关活动"类型。

踩坑记录

发布过程中遇到了几个问题：

1. Git 远程地址：沙箱内部的 Git 代理地址是 http://127.0.0.1:9800，Gallery 验证要求 https://gitcode.com/...，需要手动修正 remote URL。
2. UTF-8 编码门禁：发布前需要运行 ensure-utf8 检查并生成标记文件 /tmp/utf8-gate-ok，否则被拦截。
3. 封面图比例：首次截图不是 16:9，被门禁拒绝，需要重新裁剪。

四、最终成果

• ✅ 项目代码已推送到 GitCode：https://gitcode.com/sdf2342/ai-cloud-arch-viz
• ✅ 作品已发布到华为云作品陈列馆（+200 成长值）
• ✅ 成长值在 1-3 小时后同步到成长中心

五、项目技术架构

┌──────────────────────────────────────────┐
│           AI 云架构可视化助手              │
│              （单 HTML 文件）              │
├──────────┬──────────┬────────────────────┤
│  接入层   │  计算层   │     数据层          │
│ ELB      │ ECS      │ RDS / GaussDB     │
│ DNS      │ CCE      │ OBS               │
│ WAF      │ AS       │ DCS               │
│ CDN      │ Function  │ CBR 备份          │
└──────────┴──────────┴────────────────────┘
         ↓ 纯前端，无后端依赖
┌──────────────────────────────────────────┐
│  部署方式：                                │
│  • 直接打开 index.html                    │
│  • OBS 静态网站托管                       │
│  • 任意 HTTP 服务器                        │
└──────────────────────────────────────────┘

六、总结与心得

1. AI 驱动开发的全流程价值

从需求描述到代码生成、Git 提交、Gallery 发布，全程无需手动写代码。AI 助手承担了 90% 的工作量，我只需要：

• 用自然语言描述需求
• 审查生成结果
• 在关键决策点做选择（如活动类型、仓库名称）

2. 发布流程的自动化程度

华为云作品陈列馆的发布流程虽然步骤多（8 步流水线），但每一步都可以通过 API 或脚本自动化。唯一的限制是：

• 需要有效的登录会话（STS 凭证）
• 封面图和详情包需要满足格式要求

3. 踩坑经验

4. 成长中心任务完成度

华为云开发者成长中心共 8 项任务，其中 3 项可自动化（提交 Issue、Star 仓库、发布作品），其余 5 项需要手动操作（考试、实验、AI 空间等）。本次完成了"发布作品到陈列馆"任务，获得 +200 成长值。

项目源码：GitCode 仓库 | 技术栈：HTML5 + CSS3 + Vanilla JS | 协议：MIT