4.3 KiB
4.3 KiB
id, title
| id | title |
|---|---|
| ai-page-generation | AI 页面生成 |
AI 页面生成
UPage 的核心功能是通过人工智能生成网页。本文档将指导您如何使用 AI 功能快速创建和定制网页。
基于自然语言创建页面
创建新页面
- 在 UPage 主界面，点击侧边栏中的"新建页面"按钮
- 选择"AI 创建"选项
- 在对话框中输入您的页面需求描述
- 点击"生成"按钮
编写有效的页面描述
为了获得最佳结果，建议按照以下方式编写页面描述：
- 明确页面类型：例如"产品展示页面"、"博客文章"、"联系表单"等
- 指定关键元素：列出页面应包含的主要组件和内容
- 描述风格和布局：说明您期望的设计风格和布局结构
- 提供具体内容：如果有特定文本或图片要求，请明确说明
示例描述：
创建一个现代风格的产品登录页面，用于展示我们的智能手表产品。页面应包含：
1. 顶部导航栏，带有品牌标志和菜单
2. 醒目的标题和副标题，强调产品的主要卖点
3. 产品图片展示区，包含至少3张不同角度的产品图
4. 产品特点列表，使用图标和简短描述
5. 价格信息和"立即购买"按钮
6. 客户评价部分
7. 常见问题解答
8. 页脚，包含联系信息和社交媒体链接
整体配色应使用深蓝色和白色为主，符合科技产品的定位
迭代优化页面
修改现有页面
- 选择要修改的页面
- 点击工具栏中的"AI 辅助"按钮
- 描述您想要进行的修改
- AI 将生成修改建议并应用到页面
局部调整
您也可以针对页面的特定部分进行 AI 辅助调整：
- 选择页面中的特定组件或区域
- 点击右键菜单中的"AI 辅助"选项
- 描述您希望对该部分进行的修改
- 确认 AI 生成的调整
AI 提示技巧
有效的提示模式
以下是一些有效的 AI 提示模式：
- 添加内容："在页面顶部添加一个公告栏，显示最新促销信息"
- 修改样式："将按钮颜色改为蓝色，并增加圆角效果"
- 调整布局："将产品展示区改为两列网格布局，每个产品卡片包含图片、标题和价格"
- 优化文案："将页面标题改为更吸引人的营销语言，强调产品的独特卖点"
- 增强功能："在产品图片区添加轮播效果，允许用户浏览多张产品图片"
提示示例
以下是一些实际的提示示例：
将页面背景改为浅灰色，增加视觉层次感
优化页面的移动端显示效果，确保在小屏幕上也能良好展示
添加一个简单的联系表单，包含姓名、邮箱和留言字段
将产品描述文本改为更简洁有力的表达，突出产品解决的问题
高级 AI 功能
风格迁移
您可以使用 AI 将一个页面的设计风格应用到另一个页面：
- 在 AI 提示中引用现有页面
- 描述您希望迁移的风格元素
- AI 将分析并应用相似的设计风格
示例：
将我的"关于我们"页面的设计风格应用到这个"联系我们"页面，保持一致的视觉语言
多语言支持
UPage 支持使用 AI 生成多语言内容：
- 创建基础页面
- 使用 AI 辅助功能，指定目标语言
- AI 将翻译页面内容并保持布局结构
示例：
将此页面内容翻译成英文，保持相同的布局和设计
最佳实践
审查和编辑
AI 生成的内容通常需要人工审查和编辑：
- 检查生成的文本是否准确、相关
- 调整布局和样式以符合品牌要求
- 确保所有链接和功能正常工作
- 优化图片和媒体内容
渐进式生成
对于复杂页面，采用渐进式生成方法：
- 首先生成基本页面结构
- 逐步添加和完善各个部分
- 使用 AI 辅助进行细节优化
- 最后进行整体协调和统一
故障排除
生成结果不理想
如果 AI 生成的页面不符合预期：
- 尝试提供更具体、更详细的描述
- 分解复杂需求为多个简单步骤
- 提供参考示例或链接
- 调整使用的 AI 模型（如果可用）
性能问题
如果遇到性能问题：
- 减少单次生成的页面复杂度
- 分步骤生成复杂页面
- 检查网络连接和 API 状态
- 确认 AI 提供商配置正确