使用技巧详解

​

階段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. 測試訪問權限,確保只有授權用戶可以訪問

💡 提示:後台管理係統是專案的一部分,不需要單獨部署.最重要的是確保訪問權限配置正確,防止未授權訪問.

​

移動端體驗優化

• 適配不同螢幕尺寸
• 優化觸控互動
• 調整佈局和字體大小

• 可以添加到主螢幕
• 支持离線訪問
• 提供類原生體驗
• 推送通知功能