# 02. 产品首页设计文档

## 首页目标

首页要让用户在第一屏理解三件事：

1. Heicode 是全流程智能开发工具。
2. 用户可以从想法开始，到代码、部署和维护。
3. Heicode 能安全接入 Git、云资源、模型和密钥保管器。

首页不是 CodeGW 后台入口，也不是单纯 Agent 平台介绍页。

## 首页受众

| 受众 | 第一眼要看到 |
|------|--------------|
| 创业者 | 想法可以快速变成产品 |
| 开发者 | 能接入真实代码仓库和云资源 |
| 技术负责人 | 权限、密钥、审计和成本可控 |
| 投资人/客户 | 这是完整的软件生命周期平台 |

## 首屏文案

标题建议：

> 从一个想法，到可上线的软件产品

副标题建议：

> Heicode 组织 AI 开发团队，接入你的代码、文档、SK 和云资源，完成需求、开发、检查、部署和后续维护。

主按钮：

- 开始使用 Heicode

次按钮：

- 查看产品演示

首屏辅助信息：

- 绑定 Git 与云资源
- 生成子 Agent 团队
- 密钥保管器托管凭证
- CodeGW 统一模型与用量

## 首页结构

### 1. Hero 区

重点表达：

```text
想法输入
-> AI 开发团队
-> 代码与云资源
-> 生产部署
```

视觉建议：

- 使用真实产品界面截图或产品工作流图。
- 不做抽象渐变英雄图。
- 第一屏必须看到 Heicode 名称和产品主张。
- CTA 明确指向登录或演示。

### 2. 问题区

标题：

> 现在的软件开发，不缺模型，缺完整流程

要点：

- 想法和代码之间缺少可执行路径。
- AI 工具无法安全使用用户的云资源和密钥。
- 多个 Agent 缺少角色、权限和审计。
- 模型用量、余额、日志分散在后台。
- 部署和后续维护没有闭环。

### 3. 解决方案区

标题：

> Heicode 把开发流程变成可编排的 AI 团队任务

四个能力：

| 能力 | 说明 |
|------|------|
| 想法转任务 | 把自然语言目标转成产品文档、任务和角色 |
| 资源绑定 | 接入 Git、SK、项目文档、云账号和云资源 |
| 权限控制 | 按角色分配 Resource Grant 和审批规则 |
| 执行闭环 | 子 Agent 持续推进开发、测试、修复和部署，可调用 SK 工具，Heicode 展示日志和审计 |

### 4. 工作流区

标题：

> 从登录到上线，一条主流程

流程：

1. 登录 Heicode。
2. 输入想法。
3. 绑定资源。
4. 生成 AI 开发团队。
5. 确认权限和审批。
6. 执行开发与部署。
7. 查看日志、用量和审计。
8. 持续维护。

### 5. 安全区

标题：

> 资源可以使用，密钥不能外泄

说明：

- 长期密钥进入密钥保管器。
- Heicode 服务端数据库只保存 `secret_ref`。
- 子 Agent 只拿短期凭证。
- 高危操作在客户端审批。
- 日志、Markdown、前端响应不显示明文密钥。

### 6. 系统边界区

标题：

> 每个系统各司其职

| 系统 | 职责 |
|------|------|
| Heicode Manager | 资源、部署、状态、用量和审计辅助控制台 |
| 客户端 | 主对话体验、任务推进和高危审批 |
| Agent 平台 | AKS 执行层 |
| CodeGW | 模型网关与用量 |
| Azure Key Vault | 密钥保管器 |

补充说明：

- 用户主要在客户端对话和推进任务。
- Manager 主要承担资源准备、Agent 部署、用量和审计辅助。

### 7. 适用场景区

场景：

- 从 0 到 1 创建 SaaS 产品。
- 为已有代码库增加功能。
- 让 AI 团队维护和升级系统。
- 在云资源边界内自动部署。
- 对模型用量和高危操作做审计。

### 8. CTA 区

标题：

> 让你的下一个想法进入开发流程

按钮：

- 登录 Heicode
- 观看 5 分钟演示

## 风格建议

- 产品感应偏专业、清晰、可信，不要娱乐化。
- 信息密度适中，避免空泛大词。
- 主色与 Heicode 和客户端保持一致。
- 图片优先使用真实界面和流程，不使用无意义装饰图。
- 首页文案避免出现 CodeGW 后台、Azure Key Vault 控制台、模型提供方配置等内部概念。