Design Mode
先用文字简介选定视觉方向,再基于已确认的方向构建出可运行的应用。
Design Mode 是 Verdent 面向具备可见界面的新应用、以设计优先的创作路径。当你只有文字层面的想法,但还没有成型的设计稿、截图、样式指南或完整的页面规划时,就可以使用它。
Design Mode 不会让你直接跳进代码,而是先帮你确定产品应有的外观与感受,再把已确认的方向转化为可运行的应用。
何时使用 Design Mode
当你想从文字简介出发创建一个全新的产品 UI 时,使用 Design Mode,例如:
- 一个全栈应用
- 一个 Web 前端或落地页
- 一个移动应用
- 一个尚未确定视觉方向的从 0 到 1 的产品创意
何时跳过它
在以下情况下跳过 Design Mode:
- 项目是一个微不足道的单屏工具,例如一个基础表单或非常小的玩具应用
- 你已经拥有完整的设计简介,包含具体的样式方向、配色、字体系统以及页面或屏幕清单
- 你已经有应当直接遵循的设计文件、原型图、截图或样式指南
- 你明确希望跳过设计,直接进入代码
如果你的简介已经足够具体,Verdent 可以将其作为选定的方向,直接进入页面规划和构建工作。
Design Mode 的工作原理
描述产品
从一段平实语言的简介开始:你想构建什么、为谁而做、它应做什么,以及你已有的任何氛围或风格参考。
选择视觉方向
Verdent 会探索几种各具特色的设计方向,让你在编写代码之前就能选定外观与感受。
规划页面或屏幕
对于多页面、全栈或更复杂的产品,Verdent 会把选定的方向转化为页面或屏幕规划,以及一份平实语言的产品规范。
基于已确认的方向构建
方向明确后,Verdent 会将设计还原为可运行的应用,并让后续决策始终与已确认的设计和规范保持一致。
预览并继续
在预览中查看应用,然后根据需要继续进行后端工作、测试或进一步迭代。
如何在 Verdent Desktop 中使用 Design Mode
当你在 Manager 中开始一个新产品时,描述你想构建的应用。如果你还没有具体的设计方向,打开 Design Mode,Verdent 会在构建之前帮你选定一个视觉方向。
你可以让简介保持简洁,但要足够具体以指导关于品味的决策:
- 产品是什么
- 谁会使用它
- 它应帮助他们完成的主要任务
- 你已经明确需要的页面、屏幕或状态
示例简介
落地页
为一款面向自由职业者的个人理财应用构建一个落地页。它应给人沉静、可信赖、编辑感的感受,包含一个 hero 区域、功能板块、定价和常见问题。
多屏应用
为正从倦怠中恢复的人创建一个移动优先的习惯追踪应用。它应给人温和、有质感的感受,包含引导流程、每日打卡、进度视图和设置。
获得更好结果的建议
- 说明产品是为谁而做的。
- 描述你想要的感受,而不只是功能清单。
- 如果你已经有已知的页面或屏幕,请提及它们。
- 如果参考或约束很重要,请尽早分享。
- 如果你已经知道什么会让人感觉不对,请说明要避免的内容。
- 对于复杂产品,请预期在完整构建继续之前,需要先确认页面清单和产品规范。