160 lines
4.3 KiB
Markdown
160 lines
4.3 KiB
Markdown
---
|
||
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 提供商配置正确
|