使用技巧详解

​

階段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. 重新測試:修復後重新測試,確認會話可正常繼續

• 充值前檢查账戶狀態
• 充值後等待係統同步（通常幾秒鐘）

​

如何節省代幣

• 簡單修改消耗過多代幣
• 重複修復消耗大量代幣

1. 使用手動編輯:對於樣式調整，使用”手動編輯”功能（零代幣消耗）
2. 使用諮詢模式:規劃階段使用”諮詢”模式（免費）
3. 使用檢修功能:遇到問題先使用”檢修”功能（免費）
4. 邀請新用戶:邀請新用戶完成演示可獲得20代幣獎勵
5. 避免反覆修改:發現問題及時停止，避免在錯誤方向上消耗代幣

• ❌ 對話修改樣式：消耗代幣
• ✅ 手動編輯樣式：零代幣
• ❌ 直接執行功能：消耗代幣
• ✅ 諮詢模式規劃：免費
• ❌ 手動修復問題：消耗代幣
• ✅ 檢修功能修復：免費

• 關於諮詢模式的使用，請參考階段1:省錢:多用「聊天模式」想清楚

​

版本回滾與演示狀態問題

​

歷史版本回滾後無法操作

• 從歷史記錄回滾後，頁面無法點擊
• 右側功能菜單消失
• 無法進行任何操作

1. 檢查是否為演示版本:演示版本是只讀的，無法操作。如果回滾到了演示版本，需要繼續生成研發版本
2. 使用版本歷史:如果回滾後出現問題，可以再次回滾到更早的穩定版本

⚠️ 注意:演示版本的歷史回滾需要繼續生成研發版本才能正常操作。

• 關於版本回滾的基本操作，請參考階段1:使用歷史版本回滾
• 關於版本回滾重建，請參考階段3:使用歷史版本回滾重建

​

對話功能問題

​

輸入框無法輸入或發送按鈕灰色

• 輸入框無法輸入文字
• 發送按鈕顯示為灰色，無法點擊
• 發送時提示代幣不足（toast提示）

• 代幣不足時，仍然可以輸入內容
• 點擊發送時會顯示toast提示”代幣不足”
• 解決方法:充值代幣後即可正常發送

1. 完成初始演示:如果專案還在初始階段，需要先勾選”產生演示”，完成後才能進行對話修改
2. 臨時諮詢轉發:如果在臨時諮詢中，可以直接轉發到主流程對話，無需添加任何文字

情況1:代幣不足
1. 檢查右上角代幣餘額
2. 如果代幣不足，充值後即可正常發送

情況2:無法輸入或按鈕灰色
1. 如果專案未完成演示，點擊"產生演示"
2. 等待演示完成後，即可正常對話
3. 如果還是不行，清除瀏覽器緩存後重試

​

預覽窗口問題

​

預覽一直加載或無法顯示

• 預覽窗口一直轉圈，無法加載
• 選擇風格階段右側無法展示
• 預覽打不開但發布的鏈接可以正常訪問

1. 刷新頁面:清除瀏覽器緩存，刷新整個頁面（不是頁面內的刷新）
2. 切換網絡:可能是網絡環境問題，嘗試切換網絡
3. 新頁面打開:嘗試在新頁面打開預覽鏈接
4. 檢查PWA:如果是老專案，可能是PWA導致的問題
   • 先使用”諮詢”模式詢問：“我的預覽窗口無法顯示，是不是PWA導致的問題？”
   • 如果確認是PWA問題，再在對話中輸入”移除PWA支持”
5. 網絡測試:訪問 https://net-test.superun.app/ 測試網絡連接
6. 等待處理完成:如果係統正在處理任務，等待任務完成後再查看預覽

1. 按 Ctrl+Shift+Delete 清除瀏覽器緩存
2. 關閉瀏覽器重新打開專案
3. 如果還是不行，嘗試切換網絡環境
4. 在新頁面打開預覽鏈接測試
5. 如果是老專案，先諮詢確認是否是PWA問題，再決定是否移除PWA支持

​

登錄相關問題

​

登錄按鈕點擊無反應

• 登錄按鈕點擊後沒有任何反應
• 登錄後頁面空白
• 多個管理後台無法登錄

1. 使用檢修功能:點擊對話框下方的”檢修”按鈕，讓係統自動修復
2. 諮詢確認原因:如果檢修無效，先使用”諮詢”模式詢問：
   複製

   我的登錄按鈕點擊無反應，可能是什麼原因？是否需要使用原生 fetch 代替 Supabase SDK 調用？
   
   • 根據AI的建議確認是否需要執行修復
   • 如果確認需要，再在對話中輸入”使用原生 fetch 代替 Supabase SDK 調用”
3. 檢查瀏覽器:嘗試使用不同的瀏覽器（推薦Chrome）
4. 清除緩存:清除瀏覽器緩存後重新登錄
5. 檢查登錄方式:確認專案中已啟用對應的登錄方式（郵箱/手機/Google）

1. 點擊"檢修"按鈕
2. 等待係統自動修復
3. 如果還是不行，先諮詢確認原因和解決方案
4. 根據建議決定是否執行修復指令
5. 刷新頁面測試
6. 檢查研發→服務→superun雲服務→身份驗證設置中的登錄方式是否已啟用

​

圖片上傳問題

​

圖片上傳失敗

• 後台所有圖片上傳功能全部失敗
• 上傳後無法顯示

1. 檢查存儲服務:確認 superun 中的存儲服務配置是否正確
   • 進入”研發→服務→superun 雲存儲”
   • 檢查存儲服務是否已啟用
2. 使用替代方案:可以先將圖片上傳到 superun 雲存儲，然後在對話中引用圖片鏈接
3. 使用檢修功能:點擊”檢修”按鈕，讓係統自動修復上傳功能
4. 重新配置:在對話中要求重新配置圖片上傳功能

• 關於圖片上傳的正常使用方法，請參考階段2:圖片使用技巧
• 包括：在聊天中直接上傳、使用設計編輯器替換、上傳到 superun 雲存儲

​

頁面顯示異常

​

頁面空白或內容被遮擋

• 頁面顯示為空白
• 內容被其他元素遮擋
• 功能按鈕消失

1. 使用檢修功能:首先點擊”檢修”按鈕自動修復
2. 回滾版本:如果修復無效，回滾到之前正常的版本
3. 調整佈局:如果頁面佈局有問題，先使用”諮詢”模式詢問：
   複製

   我的頁面顯示異常/內容被遮擋，可能是什麼原因？是否需要調整頁面佈局為三段式（header/選擇器/內容）？
   
   • 根據AI的建議確認是否需要調整佈局
   • 如果確認需要，再在對話中要求調整頁面佈局為三段式
4. 刷新頁面:修復後刷新頁面查看更新
5. 檢查控制台:按F12打開瀏覽器控制台，查看是否有錯誤信息，將錯誤信息告訴AI進行修復

1. 點擊"檢修"按鈕
2. 如果還是不行，回滾到正常版本
3. 先使用"諮詢"模式確認問題和解決方案
4. 根據建議決定是否需要調整佈局
5. 刷新頁面測試

​

功能修復反覆失敗

​

修復後功能又失效

• 修復後功能又失效
• 同一問題多次修復仍不成功
• 代幣消耗過多

1. 回滾版本:回滾到正常工作的版本，換個思路重新修復
2. 使用諮詢模式:先使用”諮詢”模式規劃方案，確認後再執行
3. 避免反覆對話:不要反覆對話同一個問題，容易陷入錯誤循環
4. 複雜功能使用AI工具:對於海報編輯器等複雜功能，建議使用 nano banana 等 AI 工具
5. 停止當前對話:如果發現AI陷入錯誤循環，停止當前對話，重新開始

1. 理解問題:把報錯複製出來，問 AI:“這是什麼意思，問題可能在哪”
2. 確認思路:和 AI 討論可能的解決方案
3. 再修改:確認思路後再讓它修改

💡 提示:模型有個特點，如果一開始錯了，就容易陷入錯誤螺旋出不來。所以發現問題要及時停止，換個思路。

​

域名綁定與SEO問題

​

域名綁定失敗

• GoDaddy 一級域名無法直接綁定 CNAME
• 域名解析後跳轉到 superun 首頁

1. 使用 Cloudflare:將域名的 nameserver 改到 Cloudflare，然後通過後台綁定
   • 在域名註冊商處將 nameserver 改為 Cloudflare 提供的地址
   • 在 superun 後台通過 Cloudflare 綁定域名
2. 手動告訴AI:先使用”諮詢”模式詢問：
   複製

   我的域名綁定後跳轉到superun首頁，可能是什麼原因？需要如何修改配置？
   
   • 根據AI的建議確認需要修改的域名
   • 如果確認需要，再在對話中明確告訴AI正確的域名，讓AI修改配置

1. 在域名註冊商處將 nameserver 改為 Cloudflare
2. 在 superun 後台通過 Cloudflare 綁定域名
3. 等待DNS生效（通常幾分鐘到幾小時）

​

字體與樣式修改

​

數字字體無法修改

• 數字字體無法通過對話修改
• 文字和圖片不協調

1. 使用選擇元素編輯:點擊”選擇元素並編輯”功能，選中要修改的元素，然後對話修改
2. 上傳字體文件:上傳 .ttf 字體文件，讓AI使用該字體
   • 在對話中上傳字體文件
   • 告訴AI使用這個字體替換指定元素的字體
3. 使用手動編輯:對於樣式調整，直接使用手動編輯功能
4. 提供參考圖:上傳參考圖片，讓AI參考樣式進行調整

1. 點擊"選擇元素編輯"按鈕（光標圖標）
2. 在畫布上選擇要修改的元素
3. 在對話中輸入修改需求
4. 或者上傳字體文件，讓AI使用

​

音效播放問題

​

音效播放不穩定

• 音效有時有聲音有時沒有
• 播放不穩定

1. 重新上傳:重新上傳音效文件
2. 本地緩存:先使用”諮詢”模式詢問：
   複製

   我的音效播放不穩定，有時有聲音有時沒有，可能是什麼原因？是否需要將音頻文件緩存到本地？
   
   • 根據AI的建議確認是否需要實現音頻預加載和緩存
   • 如果確認需要，再在對話中要求實現音頻預加載和緩存功能
3. 檢查代碼:使用”檢修”功能檢查音效播放邏輯
4. 檢查文件格式:確認音頻文件格式是否支持（推薦使用 MP3 或 WAV 格式）

1. 重新上傳音效文件
2. 先使用"諮詢"模式確認是否需要實現音頻緩存
3. 根據建議決定是否需要實現音頻預加載和緩存
4. 使用"檢修"功能檢查播放邏輯
5. 測試播放功能

​

諮詢功能使用問題

​

諮詢對話框內容丟失

• 臨時諮詢的內容在關閉後丟失
• 刷新頁面或關閉瀏覽器後,臨時諮詢的對話記錄丟失
• 不知道如何將臨時諮詢的內容轉到主流程

1. 點擊轉發:在臨時諮詢對話框中，點擊轉發按鈕
2. 內容應用到輸入框:轉發後，討論的內容會自動出現在主流程的輸入框中
3. 可編輯或直接發送:您可以在此基礎上添加其他要求，或者不添加任何內容
4. 點擊發送執行:點擊發送按鈕，內容會發送到主流程並自動執行

1. 直接發送:免費諮詢的內容會直接發送到主流程對話中，無需轉發
2. 隨時使用:通過右下角選擇”諮詢”按鈕手動啟動
3. 完全免費:諮詢模式不消耗代幣，可以隨時使用
4. 重要提示:臨時諮詢的對話記錄不會永久保存，刷新頁面或關閉瀏覽器後記錄會丟失，只有發送到主流程對話中的內容才會永久保存在對話流中

1. 在樣式生成期間，點擊輸入框調起臨時諮詢
2. 與AI討論方案（完全免費）
3. 確認方案後，點擊轉發按鈕（重要：臨時諮詢記錄不會永久保存，刷新頁面或關閉瀏覽器會丟失）
4. 內容會自動出現在主流程輸入框中
5. 可以添加其他要求，或者直接點擊發送
6. 係統會自動執行（只有發送到主流程的內容才會永久保存）

1. 點擊右下角"諮詢"按鈕
2. 與AI討論方案（完全免費）
3. 確認方案後，直接發送到主流程（無需轉發）
4. 係統會自動執行（只有發送到主流程的內容才會永久保存）
5. 注意：臨時諮詢的對話記錄不會永久保存，刷新頁面或關閉瀏覽器會丟失

• 關於諮詢模式的使用，請參考階段1:省錢:多用「聊天模式」想清楚
• 兩個功能都完全免費，在不同場景中相互補充

​

支付問題

​

微信支付安全檢測慢

• 微信支付安全檢測速度很慢

1. 清除緩存:清除瀏覽器緩存後重試
2. 等待處理:支付安全檢測可能需要一些時間，請耐心等待
3. 檢查網絡:確保網絡連接穩定

1. 清除瀏覽器緩存
2. 重新打開支付頁面
3. 確保網絡連接穩定

​

文件上傳與替換

​

無法替換圖片

• 無法替換頁面中的圖片
• 上傳文件後無法使用

1. 使用選擇元素編輯:點擊”選擇元素編輯”，選中圖片，在對話中提供新圖片地址
2. 使用 superun 雲存儲:將圖片上傳到 superun 雲存儲，然後在對話中引用圖片鏈接
   • 進入”研發→服務→superun 雲存儲”
   • 上傳圖片文件到雲存儲
   • 獲取圖片鏈接後在對話中使用
3. 使用設計編輯器:點擊頂部導航欄的”設計編輯器”按鈕，可視化替換圖片
   • 在設計編輯器中，如果選不中圖片，可以右鍵選擇正確的層級元素
   • 選擇圖片後，直接選擇新圖片完成替換
4. 在對話中描述:截圖標註要替換的圖片位置，在對話中描述替換需求

• 關於圖片上傳和替換的正常使用方法，請參考階段2:圖片使用技巧
• 關於 superun 雲存儲的詳細使用，請參考階段2:專案圖片上傳到 superun storage

​

係統更新失敗

​

更新時提示係統異常

• 更新時提示”係統異常”或者更新失敗

1. 檢查網絡:可能是網絡問題，等待片刻後重試
2. 等待處理:如果係統正在處理任務，等待任務完成
3. 已是最新版本:如果已是最新版本，無需再次更新（不會顯示”更新”按鈕）
4. 使用檢修功能:點擊”檢修”按鈕，讓係統自動修復
5. 刷新頁面:刷新頁面後重新嘗試更新

1. 檢查是否有任務正在處理
2. 等待任務完成後重試
3. 如果已是最新版本，無需更新
4. 使用"檢修"功能修復
5. 刷新頁面重試

​

移動端適配問題

​

移動端顯示異常

• 移動端頁面顯示異常
• 頁面適配不佳

1. 使用諮詢模式:在對話中使用”諮詢”模式，詢問移動端顯示問題：
   複製

   我的移動端頁面顯示異常，頁面適配不佳，可能是什麼原因？需要如何優化？
   
   • 根據AI的建議確認優化方案
   • 如果確認需要，再要求AI實現響應式設計，適配不同螢幕尺寸
2. 檢查瀏覽器:在移動設備上使用現代瀏覽器（Chrome、Safari等）

• 響應式設計：適配不同螢幕尺寸、優化觸控互動、調整佈局和字體大小
• 漸進式网頁應用（PWA）：可以添加到主螢幕、支持离線訪問、提供類原生體驗、推送通知功能

​

網絡異常和任務卡住問題

​

網絡異常提示

• 經常彈出”網絡異常”提示
• 任務一直處於”讀取控制台日誌”進程中

1. 等待處理:可能是請求量過高，等一會就好了
2. 檢查網絡:訪問 https://net-test.superun.app/ 測試網絡連接
3. 切換網絡:嘗試切換網絡環境（如使用手機熱點）
4. 刷新頁面:刷新頁面後重新嘗試
5. 清除緩存:清除瀏覽器緩存後重試

1. 等待1-2分鐘，看是否自動恢復
2. 測試網絡連接
3. 如果還是不行，切換網絡環境
4. 清除緩存後重試

​

部署問題解決

​

superun 生成的是网頁應用

• superun 目前只能生成网頁應用
• 無法直接生成 iOS 或 Android 原生應用
• 可以通過響應式設計適配移動端

• 響應式設計
• 漸進式网頁應用（PWA）
• 混合應用框架

​

後台管理係統部署

• superun 會在你的專案中添加後台管理相關的路由和頁面
• 後台管理功能與主應用運行在同一個專案中,共享相同的域名和部署地址
• 主要通過路由路徑區分前台和後台（例如:/admin 或 /dashboard）

• 設置身份驗證:確保後台管理頁面需要登錄才能訪問
• 定義角色權限:區分管理員和普通用戶,只有管理員可以訪問後台功能
• 保護敏感路由:使用路由守衛或中間件保護後台管理相關的路由
• 限制資料訪問:確保後台只能查看和修改授權的資料

1. 讓 superun 生成後台管理係統（會添加相應的路由和頁面）
2. 配置身份驗證和權限控制
3. 測試訪問權限,確保只有授權用戶可以訪問

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

​

移動端體驗優化

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

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

​

通用問題解決流程

​

遇到問題時的標準流程

• 把報錯信息複製出來
• 問AI:“這是什麼意思，問題可能在哪”
• 不要一看到錯誤就讓AI隨便改

• 點擊”檢修”按鈕
• 讓係統自動修復常見問題
• 檢修功能完全免費，不消耗代幣

• 如果檢修無效，使用”諮詢”模式
• 與AI討論可能的解決方案
• 確認思路後再執行

• 如果問題複雜，回滾到之前正常的版本
• 換個思路重新修復
• 避免陷入錯誤循環

• 檢查網絡連接是否正常
• 清除瀏覽器緩存
• 嘗試使用不同的瀏覽器

💡 提示:先理解問題再修復，不要盲目修改。使用檢修功能是免費的，遇到問題先試試檢修。大部分問題都可以通過檢修功能、諮詢模式、版本回滾和清除緩存來解決。