# Design Mode (/zh-Hant/docs/verdent-manager/core-features/design-mode)

> 先以文字簡介選定視覺方向，再依據通過確認的方向打造可運作的應用程式。



Design Mode 是 Verdent 為具備可見介面的新應用程式所打造的設計優先創作路徑。當你心中已有文字構想，但尚未完成設計、截圖、樣式指南或完整頁面規劃時，就適合使用它。

Design Mode 不會讓你直接跳進程式碼，而是先協助你決定產品應有的外觀與感受，再將通過確認的方向轉化為可運作的應用程式。

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

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

* 全端應用程式
* 網頁前端或著陸頁
* 行動應用程式
* 視覺方向尚未決定的 0 到 1 產品構想

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

在以下情況可略過 Design Mode：

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

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

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

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

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

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

  <Step title="依據通過確認的方向建置">
    方向明確之後，Verdent 會將設計還原為可運作的應用程式，並讓後續決策都緊扣通過確認的設計與規格。
  </Step>

  <Step title="預覽並繼續">
    在預覽中檢視應用程式，然後依需要繼續進行後端工作、測試或進一步迭代。
  </Step>
</Steps>

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

在 Manager 中開始一個新產品時，描述你想打造的應用程式。如果你還沒有具體的設計方向，開啟 Design Mode，Verdent 會在建置前協助你選擇視覺方向。

你的簡介可以保持簡單，但要夠具體以引導設計決策：

* 產品是什麼
* 誰會使用它
* 它應該協助使用者完成的主要工作
* 你已經知道需要的頁面、畫面或狀態

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

<CardGroup cols="2">
  <Card title="著陸頁">
    為一款面向自由工作者的個人理財應用程式打造著陸頁。它應該帶來沉穩、值得信賴且具編輯感的氛圍，包含 hero 區、功能區塊、定價與常見問題。
  </Card>

  <Card title="多畫面應用程式">
    為正在從職業倦怠中恢復的人打造一款行動優先的習慣追蹤工具。它應該帶來溫和且具觸感的感受，包含上手引導、每日打卡、進度檢視與設定。
  </Card>
</CardGroup>

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

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