# Design Mode (/zh-Hant/docs/verdent-cloud/create/design-mode)

> 先用文字簡介選定視覺方向，再根據獲核准的方向打造可運作的應用程式。



Design Mode 是 Verdent Cloud 以設計為先的建立路徑，專為具備可見介面的全新應用程式而設。當你有文字化的想法，卻尚未完成設計、截圖、樣式指南或完整頁面規劃時，就適合使用它。

Design Mode 不會直接跳入程式碼，而是先協助你決定產品該有的外觀與感受，再將獲核准的方向轉化為可運作的應用程式。

## 何時使用 Design Mode [#何時使用-design-mode]

當你想從文字簡介建立全新的產品 UI 時，請使用 Design Mode，例如：

* 全端應用程式
* 網頁前端或著陸頁
* 行動應用程式
* 多畫面遊戲或互動體驗
* 視覺方向尚未決定的從 0 到 1 產品構想

## 何時略過 [#何時略過]

在下列情況請略過 Design Mode：

* 專案是簡單的單畫面工具，例如基本表單或非常小的玩具型應用程式
* 你已具備完整的設計簡介，包含具體的樣式方向、配色、字型系統，以及頁面或畫面清單
* 你已有應該直接遵循的設計檔案、視覺稿、截圖或樣式指南
* 你明確想跳過設計，直接進入程式碼

<Note>
  如果你的簡介已經夠具體，Verdent Cloud 可將其作為選定的方向，直接進入頁面規劃與建置工作。
</Note>

## Design Mode 的運作方式 [#design-mode-的運作方式]

<Steps>
  <Step title="描述產品">
    從淺白語言的簡介開始：你想打造什麼、為誰打造、它應該做什麼，以及你已有的任何氛圍或樣式參考。
  </Step>

  <Step title="選擇視覺方向">
    Verdent Cloud 會探索不同的設計方向，讓你在撰寫程式碼前先挑選外觀與感受。
  </Step>

  <Step title="規劃頁面或畫面">
    對於多頁面、全端或更複雜的產品，Verdent Cloud 會將選定的方向轉化為頁面或畫面規劃，以及淺白語言的產品規格。
  </Step>

  <Step title="從獲核准的方向建置">
    在方向明確後，Verdent Cloud 會將設計還原為可運作的應用程式，並讓後續決策與獲核准的設計和規格保持一致。
  </Step>

  <Step title="預覽並繼續">
    在預覽中檢視應用程式，接著依需要繼續進行後端工作、測試、分析或部署。
  </Step>
</Steps>

## 如何在 Verdent Cloud 中使用 Design Mode [#如何在-verdent-cloud-中使用-design-mode]

在 Cloud 的建立流程中，描述你想打造的應用程式，而不是選擇範本。如果你尚未有具體的設計方向，Verdent Cloud 可使用 Design Mode 協助你在建置前先挑選一個。

你可以讓簡介保持簡單，但要夠具體以引導品味決策：

* 產品是什麼
* 誰會使用它
* 它應該幫助他們完成的主要工作
* 你已知需要的頁面、畫面或狀態
* 任何語氣或樣式參考，例如編輯風、活潑、實用、高級、極簡或大膽
* 任何你不想要的元素，例如通用漸層、看起來像素材庫的圖像，或某種特定視覺風格

## 簡介範例 [#簡介範例]

<CardGroup cols="2">
  <Card title="著陸頁">
    為自由工作者打造一個個人理財應用程式的著陸頁。它應呈現沉穩、值得信賴且具編輯風的感受，包含主視覺、功能區塊、定價與常見問答。
  </Card>

  <Card title="多畫面應用程式">
    為從職業倦怠中復原的人們打造一個行動優先的習慣追蹤器。它應呈現溫和且具觸感的感受，包含上手導覽、每日簽到、進度檢視與設定。
  </Card>
</CardGroup>

## 獲得更佳結果的訣竅 [#獲得更佳結果的訣竅]

* 說明產品是為誰打造的。
* 描述你想要的感受，而不只是功能清單。
* 如果你有已知的頁面或畫面，請提出來。
* 如果參考或限制很重要，請及早分享。
* 如果你已知道哪些元素會讓人感覺不對，請說明要避免什麼。
* 對於複雜產品，請預期在完整建置繼續前確認頁面清單與產品規格。