在查詢中附加圖片

在查詢中附上圖片,讓代理更瞭解應用程式架構,加快 UI 開發程序。

如要在提示中附加圖片,請依序點選「Add Context」>「Media」,然後上傳圖片。

以下列舉幾項代理可協助處理圖片的方式:

  • 如果您有想要的 UI 模擬圖,代理可以提供建立該 UI 的程式碼。舉例來說,如果您提供 Now in Android 應用程式的螢幕截圖,代理就能提供 Compose 程式碼來建立該應用程式。這個範例顯示應用程式動態消息的螢幕截圖 (左),以及代理為該 UI 生成的 Jetpack Compose 程式碼 (右)。詳情請參閱「使用圖片附件生成 UI」。

    「Now in Android」應用程式,顯示含有標題、主題和書籤圖示的文章動態消息。 代理的回覆,顯示 Jetpack Compose 程式碼,可重現「Now in Android」螢幕截圖中的 UI。
    代理會根據 Now in Android 應用程式的 UI 螢幕截圖,生成 Jetpack Compose 程式碼。
  • 如果您想瞭解應用程式的建構方式,代理可以說明 UI 的元件和運作方式。舉例來說,您可以要求代理說明另一個 Now in Android 螢幕截圖背後的可組合項和資料流程。左圖顯示含有新聞項目的詳細資料畫面,右圖則顯示代理對該畫面 Compose 結構和資料流程的說明。

    「Now in Android」應用程式中的單一新聞報導詳細資料,顯示標題、作者和說明。 代理對 Jetpack Compose 可組合函式和新聞報導詳細資料畫面資料流程的說明。
    代理說明特定應用程式畫面的 UI 組合和資料流程。
  • 如果您有應用程式架構圖,代理可以根據圖表建議程式碼來建立應用程式,做為全端開發助理。代理還能協助記錄圖表,並說明應用程式的建構方式,方便您撰寫設計文件供團隊成員審查。舉例來說,下圖是簡化的架構圖,說明 UI、ViewModel、存放區和資料來源等各種應用程式元件之間的資料流。

    簡化的應用程式架構圖,顯示 UI、ViewModel、存放區和資料來源元件,並以箭頭表示資料流程。
    代理可根據應用程式架構圖生成程式碼和說明文件。
  • 如果發現 UI 錯誤,請擷取螢幕截圖,並要求代理構思解決方案。你可以圈出有錯誤的區域,協助指出問題所在。以下範例是行動應用程式的螢幕截圖,其中以紅色圓圈標示未對齊的 UI 元素。

    行動應用程式螢幕截圖,顯示文字元素重疊或未對齊的使用者介面錯誤,並以紅色圓圈標示。
    代理可根據螢幕截圖,協助構思 UI 錯誤的解決方案。