---
title: Design Mode
description: 先用文字简介选定视觉方向，再基于已确认的方向构建出可运行的应用。
---

Design Mode 是 Verdent 面向具备可见界面的新应用、以设计优先的创作路径。当你只有文字层面的想法，但还没有成型的设计稿、截图、样式指南或完整的页面规划时，就可以使用它。

Design Mode 不会让你直接跳进代码，而是先帮你确定产品应有的外观与感受，再把已确认的方向转化为可运行的应用。

## 何时使用 Design Mode

当你想从文字简介出发创建一个全新的产品 UI 时，使用 Design Mode，例如：

- 一个全栈应用
- 一个 Web 前端或落地页
- 一个移动应用
- 一个尚未确定视觉方向的从 0 到 1 的产品创意

## 何时跳过它

在以下情况下跳过 Design Mode：

- 项目是一个微不足道的单屏工具，例如一个基础表单或非常小的玩具应用
- 你已经拥有完整的设计简介，包含具体的样式方向、配色、字体系统以及页面或屏幕清单
- 你已经有应当直接遵循的设计文件、原型图、截图或样式指南
- 你明确希望跳过设计，直接进入代码

<Note>
如果你的简介已经足够具体，Verdent 可以将其作为选定的方向，直接进入页面规划和构建工作。
</Note>

## 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

当你在 Manager 中开始一个新产品时，描述你想构建的应用。如果你还没有具体的设计方向，打开 Design Mode，Verdent 会在构建之前帮你选定一个视觉方向。

你可以让简介保持简洁，但要足够具体以指导关于品味的决策：

- 产品是什么
- 谁会使用它
- 它应帮助他们完成的主要任务
- 你已经明确需要的页面、屏幕或状态

## 示例简介

<CardGroup cols={2}>
  <Card title="落地页">
    为一款面向自由职业者的个人理财应用构建一个落地页。它应给人沉静、可信赖、编辑感的感受，包含一个 hero 区域、功能板块、定价和常见问题。
  </Card>
  <Card title="多屏应用">
    为正从倦怠中恢复的人创建一个移动优先的习惯追踪应用。它应给人温和、有质感的感受，包含引导流程、每日打卡、进度视图和设置。
  </Card>
</CardGroup>

## 获得更好结果的建议

- 说明产品是为谁而做的。
- 描述你想要的感受，而不只是功能清单。
- 如果你已经有已知的页面或屏幕，请提及它们。
- 如果参考或约束很重要，请尽早分享。
- 如果你已经知道什么会让人感觉不对，请说明要避免的内容。
- 对于复杂产品，请预期在完整构建继续之前，需要先确认页面清单和产品规范。
