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

> 先用文字描述选定视觉方向，再从确认的方向构建可运行的应用。



Design Mode 是 Verdent Cloud 针对具有可见界面的新应用所提供的设计优先创建路径。当你有一个用文字表达的想法，但尚无完整的设计稿、截图、样式指南或完整页面规划时，请使用它。

Design Mode 不会直接跳入代码，而是帮助你先决定产品的外观和感觉，再将确认的方向转化为可运行的应用。

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

当你想从文字描述创建新的产品 UI 时，请使用 Design Mode，例如：

* 全栈应用
* Web 前端或落地页
* 移动应用
* 多屏游戏或交互体验
* 视觉方向尚未确定的从零到一产品创意

## 何时跳过 [#何时跳过]

以下情况请跳过 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="落地页">
    为一款面向自由职业者的个人理财应用构建落地页。风格应沉稳、值得信赖且具有编辑感，包含 hero 区、功能介绍区、定价和常见问题。
  </Card>

  <Card title="多屏应用">
    为正在从倦怠中恢复的人创建一款移动优先的习惯追踪应用。感觉应温柔、有触感，包含引导页、每日签到、进度视图和设置页面。
  </Card>
</CardGroup>

## 获得更好结果的建议 [#获得更好结果的建议]

* 说明产品面向谁。
* 描述你想要的感觉，而不仅仅是功能列表。
* 如果已知页面或屏幕，请列出来。
* 如果有参考或限制条件，尽早说明。
* 如果你已知某些方向会感觉不对，请说明需要避免什么。
* 对于复杂产品，预期在完整构建开始之前需要确认页面列表和产品说明。