Verdent Docs
核心功能

Design Mode

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

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

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

何時使用 Design Mode

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

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

何時略過

在以下情況可略過 Design Mode:

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

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

Design Mode 的運作方式

描述產品

從淺白的文字簡介開始:你想打造什麼、為誰打造、它應該做什麼,以及你已經有的任何氛圍或樣式參考。

選擇視覺方向

Verdent 會探索不同的設計方向,讓你在撰寫程式碼前先挑選外觀與感受。

規劃頁面或畫面

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

依據通過確認的方向建置

方向明確之後,Verdent 會將設計還原為可運作的應用程式,並讓後續決策都緊扣通過確認的設計與規格。

預覽並繼續

在預覽中檢視應用程式,然後依需要繼續進行後端工作、測試或進一步迭代。

如何在 Verdent Desktop 中使用 Design Mode

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

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

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

簡介範例

著陸頁

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

多畫面應用程式

為正在從職業倦怠中恢復的人打造一款行動優先的習慣追蹤工具。它應該帶來溫和且具觸感的感受,包含上手引導、每日打卡、進度檢視與設定。

獲得更佳成果的訣竅

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