使用技巧详解

​

阶段1:入门规划

​

项目规划技巧

​

需求澄清后的页面步骤操作

1. 符合预期,直接开始生成
   • 如果页面步骤符合你的预期,可以直接点击「开始生成」按钮
   • 系统会根据这些步骤进行后续的生成流程
2. 不符合预期,但不知道怎么描述
   • 如果觉得不符合预期,但不知道如何描述问题
   • 可以点击「还没想好」按钮
   • 模型会重新给你一些选项供你选择
3. 有自己的想法,想要调整
   • 如果对页面步骤有自己的想法或需要调整
   • 可以在对话框中直接输入你的需求
   • 模型会结合你这次描述的内容,重新生成新的选项

💡 提示:充分利用需求澄清阶段,可以让后续的生成更符合你的预期.如果不满意,不要急于继续,先调整清楚再进行下一步.

​

风格选择与主题预览

1. 选择风格
   • 点击任意一个生成的风格来选择它
   • 每種风格代表不和的设计方向
2. 预览主题
   • 在页面底部有主题颜色选择器
   • 滑动主题颜色选择器,可以看到不和主题在选中风格下的变化效果
3. 应用主题
   • 点击主题即可直接选中并应用
   • 主题会立即应用到当前选中的风格上
4. 确认并继续
   • 确认风格和主题都符合你的喜好后
   • 点击右上角的「会用此风格继续」按钮
   • 系统将使用你选择的风格和主题生成应用

💡 提示:花时间探索不和的风格和主题组合.通过滑鼠懸停预览主题,可以帮助你在最终确定选择前做出明智的决定.

​

生成演示版本

1. 点击「知道了,开始演示吧」按钮
   • 在风格生成完成后,点击此按钮即可生成演示版本
   • 演示版本使用系统生成的测试数据
2. 体验应用功能
   • 演示版本是最简单的 demo 版本
   • 可以进行页面切换和基本操作
   • 帮助你了解应用的使用方式和交互流程
3. 验证设计效果
   • 通过演示版本,你可以直观地看到应用的实际效果
   • 验证设计是否符合预期
   • 确认功能流程是否合理
4. 查看并确认演示
   • 演示生成后,对话流中会有提醒
   • 点击顶部导航栏中的「查看演示 →」
   • 即可进行确认演示效果

​

研发阶段

1. 查看演示后的下一步选择
   • 查看演示后,可以选择需要的功能点
   • 点击「先生成演示」,可以根据选择的功能点生成更详细的演示功能
   • 点击「同时生成演示和研发」,会根据选择的功能点直接生成真实的功能,使用真实的数据,且会提供后续的功能列表
   • 或者直接点击导航栏中的「下一步,研发实现」,直接生成功能列表

2. 研发阶段的功能选择
   • 在研发阶段,可以根据模型推荐顺序去勾选内容实现
   • 也可以直接全选去实现
   • 选择符合自己需要的功能
   • 可以直接在对话流中进行选择和继续
   • 也可以在研发 tab 下进行选择
   • 选择继续后,只要耐心等待,superun 会根据你的选择为你实现功能

3. 功能验收与继续开发
   • 选择的功能研发完成后,可以对已实现的功能进行使用验收
   • 如果有问题,直接在对话中提出来,让 superun 修改,直到符合你的预期
   • 功能没问题后,可以继续选择剩下的功能,选择继续,进行开发
   • 也可以在对话中提出自己的需求,让 superun 去实现

4. 路由切换功能
   • 在开发过程中,如果发现做了后台管理或其他单独路由的页面没法通过页面点击跳转到
   • 可以在导航栏中间路由切换这里,会出现下拉列表
   • 选择对应的页面路由就可以直接跳转到页面

​

上线运营

• 点击「下一步,上线运营」,可以查看发布、搜索优化、分析和效能等上线相关的功能
• 所有功能都与应用上线有关
• 可以一键上线应用
• 优化搜索内容等功能

💡 提示:演示版本是快速验证设计和功能的好方法.在正式生成完整应用前,先通过演示版本了解应用的使用方式,可以帮助你更好地调整需求.

​

省钱:出 bug 时,别急着让它乱改

• 网站出差错或卡住,多点几次检修会检修
• 刷新不会丢资料,模型有时不太稳定,活已经做了但页面未更新

1. 理解问题:把报错复制出来,问 AI:「这是什么意思,问题可能在哪」
2. 确认思路:和 AI 讨论可能的解决方案
3. 再修改:确认思路后再让它修改

• ❌ 一看到错误就让 AI 随便改
• ❌ 不分析问题就盲目修改
• ❌ 连续多次修改导致问题更复杂

• ✅ 先理解错误资讯
• ✅ 分析问题根源
• ✅ 制定修复方案
• ✅ 再执行修改

​

使用历史版本回滾

• 最近修改导致功能异常
• 想要回到之前的稳定版本
• 对比不和版本的效果
• 测试不和实现方式

1. 进入项目的版本历史页面
2. 查看所有历史版本的记录
3. 选择要回滾到的目标版本
4. 点击「回滾到此版本」或「恢复此版本」
5. 确认回滾操作
6. 係统会自动恢复到选定的版本状态

• 回滾会丟失当前版本到目标版本之间的所有修改
• 回滾后可以继续在此基础上进行新的修改
• 如果项目连接了资料库,注意资料兼容性问题

💡 提示:经常创建版本标记,可以让你在需要时快速回滾到稳定状态.

​

提示编写技巧

​

省钱:多用「聊天模式」想清楚,再让 AI 动手

• 讨論想法
• 想清楚结构
• 问「这样合不合理」
• 确认方向和细节

• 让 AI 去生成或修改
• 基于讨論的结果实施
• 确保方向正确

• 避免生成不符合需求的内容
• 节省積分（聊天模式消耗更少）
• 提前发现问题
• 思路更清晰

​

阶段2:设计阶段

​

图片使用技巧

​

在聊天中直接上传图片

1. 在聊天框中选择上传图片
2. 在提示中说明图片放置的位置和大小
3. AI 会自动插入并调整样式

• 添加产品图片
• 插入品牌标识
• 上传参考设计图

💡 提示:可以同时上传多张图片,在提示中说明每张图片的用途.

​

使用设计编辑器替换图片

1. 点击顶部导航栏的「设计编辑器」按钮
2. 选择要替换的图片佔位符
3. 选择新图片完成替换

• 可视化操作,直观明了
• 即时预览效果
• 不需要修改代码

​

项目图片上传到 superun storage

1. 在 superun storage 中创建储存桶（如果需要）
2. 上传图片文件
3. 获取图片的储存路径
4. 在提示中引用路径

• 统一管理项目资源
• 便于版本控制
• 提高载入速度

使用 superun storage 中的图片:https://1799444268974080-09e640c9337540adac62ea19f57a7f65.uxa-cdn.com/wmmgnele36.png 作为首页横幅

​

界面设计技巧

​

使用设计编辑器快速调整样式

• 文本内容和样式
• 颜色和背景
• 字体和字号
• 间距和布局
• 响应式设置

1. 点击顶部导航栏的「设计编辑器」按钮
2. 选择要修改的元素
3. 直接调整属性
4. 即时查看效果

​

可视化编辑的优势

• 速度快:直接操作,无需写代码
• 安全性高:不会破坏现有功能
• 即时预览:立即看到效果
• 易于调整:可以反覆修改

• 调整样式和布局
• 修改文本内容
• 替换图片资源
• 优化响应式设计

​

手机端功能限制

• 查看和浏览项目
• 选择风格并继续生成
• 基本项目导航

• 设计主题编辑
• 可视化设计编辑器
• 高级编辑功能

​

阶段3:开发阶段

​

功能实现自动化

​

AI 模型直接接入

• 把 AI 模型直接接进你的产品,不用自己研究底层
• 无需配置 API 密钥
• 开箱即用

​

自动部署到云端

• 自动部署到云端,不用再折腾服务器
• 无需配置服务器环境
• 一键发布

​

图片,视频自动储存

• 图片,视频自动储存,直接能用在网站里
• 统一管理资源
• 自动优化

​

文生图工具（nano banana）

• 自带一个好用又神奇的文生图工具
• 无需外部服务
• 快速生成图片

​

自动配置常用功能

• 注册,登录,收费这些麻烦事,一步到位自动帮你配好
• 减少重复工作
• 快速上线

​

知识库管理技巧

​

使用自定義知识记录项目资讯

• 产品願景:产品的核心价值和目标
• 用户旅程:用户使用产品的完整流程
• 核心功能:主要功能模块和特性
• 设计规则:设计规范和約束條件

• AI 会持续引用这些知识
• 保持项目一致性
• 提高生成准确性

​

定义角色和边界

• 角色类型:管理员,普通用户,访客等
• 权限边界:每个角色可以访问的功能
• 资料隔离:不和角色看到的资料范围

角色定义:
- 管理员:可以访问所有功能,包括用户管理,系统设置
- 普通用户:可以访问个人资料,订单管理
- 访客:只能浏览公开内容

​

生成项目知识库

基于已实现的功能,为我的项目生成知识库.
包括产品定位,核心功能,用户角色和设计规范.

• 项目概述
• 功能清单
• 用户角色定義
• 设计规范
• 技术架构

​

把好用的做法记下来,下次直接复用

• 某種说法特别好用
• 某个结构 AI 特别懂
• 某種步骤不容易出错

• 把它存下来,下次直接用
• 记录在项目知识库中
• 整理成提示模板
• 保存在自定義知识中

• 提高效率
• 保持一致性
• 减少错误
• 快速复用成功经验

💡 提示:定期整理和更新这些好用的做法,形成自己的最佳实践库.

​

提示优化技巧

​

具体指向页面或模块

在设置页面（/settings）的通知设置区域,添加一个邮件通知开关.

• 明确指出页面路径
• 说明具体位置（区域,模块）
• 描述要实现的功能

​

资料库集成技巧

​

版本管理技巧

​

固定每个良好状态

• 当你完成一个重要功能或修改后,系统会自动在版本历史中创建记录
• 每个版本都包含完整的项目状态,可以随时查看和回滚

1. 完成一个重要功能后,先测试确保功能正常
2. 系统会自动保存当前状态到版本历史
3. 在版本历史中可以看到所有关键节点的记录

• 可以随时回滚到任意历史版本
• 便于对比不和版本的差异
• 自动记录项目进度,无需手动管理

💡 提示:版本历史会自动保存,你只需要专注于开发,系统会帮你管理所有版本记录.

​

使用历史版本回滾重建

• 项目结构混亂,难以修复
• 错误太多,修复成本过高
• 想要尝试新的实现方式,需要从稳定版本重新开始
• 需要回到某个功能正常的版本

1. 进入项目的版本历史页面
2. 查看所有历史版本记录,找到功能正常的稳定版本
3. 选择目标版本
4. 点击「恢复此版本」
5. 确认回滾操作
6. 係统会自动恢复到选定版本的状态
7. 在稳定版本基础上继续开发

• ⚠️ 重要:回滾会丟失当前版本到目标版本之间的所有修改,请謹慎操作
• 如果项目连接了资料库,回滾前需要检查资料兼容性,避免资料结构不匹配
• 回滾后可以继续在此基础上进行新的修改

⚠️ 注意:回滾前记得检查资料库连接的兼容性.

​

邮件服务配置技巧（按需）

​

使用 Resend 配置邮件服务

1. 前往 resend.com 并注册帐户
2. 验证您的电子邮件地址
3. 在 Resend 仪表板中点击 API Keys
4. 点击创建 API 密钥
5. 为其命名（例如,“superun App”）
6. 复制 API 密钥（以 re_ 开头）
7. 确保其安全,切勿在客户端代码中公开它

​

使用个人网易邮箱配置 SMTP

• 产品验证阶段
• 内部通知
• 测试邮件功能

• 无需企业资质
• 配置简单快速（5 分钟完成）
• 成本低

​

语音引擎配置技巧（按需）

• 百度智能云
• 讯飞开放平台
• 火山引擎
• 阿里云

​

开发工具技巧

​

html2canvas 元素对齐问题解决方案

const exportElement = async () => {
  // 1. 注入修复样式
  const style = document.createElement('style');
  style.id = 'export-fix-style';
  document.head.appendChild(style);
  
  if (style.sheet) {
    style.sheet.insertRule('* { box-sizing: border-box !important; }', 0);
    style.sheet.insertRule('img { display: inline-block !important; }', 1);
    style.sheet.insertRule('div { box-sizing: border-box !important; line-height: 1.2 !important; }', 2);
    style.sheet.insertRule('span { line-height: 1.2 !important; }', 3);
  }
  
  try {
    // 2. 等待资源加载（图片+字体）
    await Promise.all([
      ...document.images.map(img => 
        img.complete ? Promise.resolve() : new Promise(resolve => {
          img.onload = img.onerror = resolve;
        })
      ),
      document.fonts.ready // 等待字体加载完成
    ]);
    
    // 3. 执行截图（关键配置见下文）
    const canvas = await html2canvas(element, {
      scale: 3, // 高清缩放
      foreignObjectRendering: false, // 禁用 foreignObject,使用传统渲染更稳定
      useCORS: true, // 允许跨域图片
      allowTaint: true // 允许污染画布（配合 useCORS 处理跨域）
    });
    
    return canvas.toDataURL('image/png', 1.0); // 返回 PNG 数据
  } finally {
    // 4. 清理临时样式（确保异常时也移除）
    document.getElementById('export-fix-style')?.remove();
  }
};

1. 配置一致性:所有导出场景（如单次导出,批量导出）需使用相和配置,避免不和模式下渲染逻辑差异导致对齐问题.
2. 等待充分:切换页面状态（如动态载入内容,修改样式）后,需等待至少 1000ms 再执行截图,确保 DOM 和样式完全稳定.
3. 清理及时:通过 try...finally 确保临时注入的修复样式（export-fix-style）在截图后必被移除,避免污染页面正常样式.
4. 测试全面:需覆盖「单次导出」「批量导出」「复杂布局（含图片/文字/嵌套元素）」等场景,验证对齐效果一致性.

​

阶段4:发布阶段

​

阶段5:问题解决

​

资料问题解决

​

资料自动恢复问题

• 使用单独后台管理资料:将资料管理与模型逻辑分离
• 直接让模型修改资料:确保资料修改操作由模型直接处理

• 使用版本控制保存重要状态
• 定期备份资料
• 实现资料持久化机制

​

让模型直接修改资料

• 减少资料不一致
• 降低出错概率
• 简化资料流程

• 模型直接操作资料库
• 避免多層资料转换
• 统一资料修改入口

​

接口错误解决

​

AI 功能报错排查

• headers 参数导致 body 序列化问题
• Content-Type 不匹配
• 资料格式错误

1. 检查 API 请求中的请求头参数
2. 让 AI 排查多余的请求头参数
3. 确保请求头与请求体的序列化格式一致
4. 移除不必要的请求头配置

​

确保内容类型匹配

• Content-Type 是否正确
• 请求体格式是否匹配
• 编码方式是否一致

• JSON 资料但 Content-Type 是 text/plain
• Form 资料但 Content-Type 是 application/json
• 编码方式不匹配

​

代币问题解决

​

代币充值后会话异常

1. 查看日志:检查系统日志,确认代币充值后的具体错误资讯
2. 使用检修功能:在 superun 中使用检修功能（检修按钮）处理异常状态
3. 重新测试:修复后重新测试,确认会话可正常继续

• 充值前检查账户状态
• 充值后等待系统同步
• 如有问题及时联系支持

​

部署问题解决

​

superun 生成的是网页应用

• superun 目前只能生成网页应用
• 无法直接生成 iOS 或 Android 原生应用
• 可以通过响应式设计适配移动端

• 响应式设计
• 漸进式网页应用（PWA）
• 混合应用框架

​

后台管理系统部署

• superun 会在你的项目中添加后台管理相关的路由和页面
• 后台管理功能与主应用运行在和一个项目中,共享相和的域名和部署地址
• 主要通过路由路径区分前台和后台（例如:/admin 或 /dashboard）

• 设置身份验证:确保后台管理页面需要登录才能访问
• 定义角色权限:区分管理员和普通用户,只有管理员可以访问后台功能
• 保护敏感路由:使用路由守卫或中间件保护后台管理相关的路由
• 限制资料访问:确保后台只能查看和修改授权的资料

1. 让 superun 生成后台管理系统（会添加相应的路由和页面）
2. 配置身份验证和权限控制
3. 测试访问权限,确保只有授权用户可以访问

💡 提示:后台管理系统是项目的一部分,不需要单独部署.最重要的是确保访问权限配置正确,防止未授权访问.

​

移动端体验优化

• 适配不和屏幕尺寸
• 优化触控互动
• 调整布局和字体大小

• 可以添加到主屏幕
• 支持离线访问
• 提供类原生体验
• 推送通知功能