---
id: ai-page-generation
title: AI 页面生成
---

# AI 页面生成

UPage 的核心功能是通过人工智能生成网页。本文档将指导您如何使用 AI 功能快速创建和定制网页。

## 基于自然语言创建页面

### 创建新页面

1. 在 UPage 主界面，点击侧边栏中的"新建页面"按钮
2. 选择"AI 创建"选项
3. 在对话框中输入您的页面需求描述
4. 点击"生成"按钮

### 编写有效的页面描述

为了获得最佳结果，建议按照以下方式编写页面描述：

- **明确页面类型**：例如"产品展示页面"、"博客文章"、"联系表单"等
- **指定关键元素**：列出页面应包含的主要组件和内容
- **描述风格和布局**：说明您期望的设计风格和布局结构
- **提供具体内容**：如果有特定文本或图片要求，请明确说明

示例描述：

```
创建一个现代风格的产品登录页面，用于展示我们的智能手表产品。页面应包含：
1. 顶部导航栏，带有品牌标志和菜单
2. 醒目的标题和副标题，强调产品的主要卖点
3. 产品图片展示区，包含至少3张不同角度的产品图
4. 产品特点列表，使用图标和简短描述
5. 价格信息和"立即购买"按钮
6. 客户评价部分
7. 常见问题解答
8. 页脚，包含联系信息和社交媒体链接
整体配色应使用深蓝色和白色为主，符合科技产品的定位
```

## 迭代优化页面

### 修改现有页面

1. 选择要修改的页面
2. 点击工具栏中的"AI 辅助"按钮
3. 描述您想要进行的修改
4. AI 将生成修改建议并应用到页面

### 局部调整

您也可以针对页面的特定部分进行 AI 辅助调整：

1. 选择页面中的特定组件或区域
2. 点击右键菜单中的"AI 辅助"选项
3. 描述您希望对该部分进行的修改
4. 确认 AI 生成的调整

## AI 提示技巧

### 有效的提示模式

以下是一些有效的 AI 提示模式：

- **添加内容**："在页面顶部添加一个公告栏，显示最新促销信息"
- **修改样式**："将按钮颜色改为蓝色，并增加圆角效果"
- **调整布局**："将产品展示区改为两列网格布局，每个产品卡片包含图片、标题和价格"
- **优化文案**："将页面标题改为更吸引人的营销语言，强调产品的独特卖点"
- **增强功能**："在产品图片区添加轮播效果，允许用户浏览多张产品图片"

### 提示示例

以下是一些实际的提示示例：

```
将页面背景改为浅灰色，增加视觉层次感
```

```
优化页面的移动端显示效果，确保在小屏幕上也能良好展示
```

```
添加一个简单的联系表单，包含姓名、邮箱和留言字段
```

```
将产品描述文本改为更简洁有力的表达，突出产品解决的问题
```

## 高级 AI 功能

### 风格迁移

您可以使用 AI 将一个页面的设计风格应用到另一个页面：

1. 在 AI 提示中引用现有页面
2. 描述您希望迁移的风格元素
3. AI 将分析并应用相似的设计风格

示例：
```
将我的"关于我们"页面的设计风格应用到这个"联系我们"页面，保持一致的视觉语言
```

### 多语言支持

UPage 支持使用 AI 生成多语言内容：

1. 创建基础页面
2. 使用 AI 辅助功能，指定目标语言
3. AI 将翻译页面内容并保持布局结构

示例：
```
将此页面内容翻译成英文，保持相同的布局和设计
```

## 最佳实践

### 审查和编辑

AI 生成的内容通常需要人工审查和编辑：

1. 检查生成的文本是否准确、相关
2. 调整布局和样式以符合品牌要求
3. 确保所有链接和功能正常工作
4. 优化图片和媒体内容

### 渐进式生成

对于复杂页面，采用渐进式生成方法：

1. 首先生成基本页面结构
2. 逐步添加和完善各个部分
3. 使用 AI 辅助进行细节优化
4. 最后进行整体协调和统一

## 故障排除

### 生成结果不理想

如果 AI 生成的页面不符合预期：

1. 尝试提供更具体、更详细的描述
2. 分解复杂需求为多个简单步骤
3. 提供参考示例或链接
4. 调整使用的 AI 模型（如果可用）

### 性能问题

如果遇到性能问题：

1. 减少单次生成的页面复杂度
2. 分步骤生成复杂页面
3. 检查网络连接和 API 状态
4. 确认 AI 提供商配置正确