需求驱动设计工作台

先说清需求,再确定设计基调

先描述产品目标与实现范围,再选择设计规范、字体和样式,最后检查效果并输出。

STEP 01

先把需求描述清楚

先确定任务类型、目标用户、核心任务与交付范围;暂时不讨论视觉样式。

任务类型

切换任务只改变下面的输入项,不改变后续流程。

STEP 02

再选择设计样式

需求明确后,再组合设计规范、字体、样式与平台,让视觉选择服务于产品目标。

视觉方向

选整体构图、密度和气质。

字体方案

先比较标题与正文的气质,再把字体作为整个需求的基础规则。

目标平台

平台会自动带入导航、字号、安全区和交互惯例。

iOS 推荐:Apple HIG + SF Pro + iOS 原生组件,并自动遵守 Safe Area。Mobile

Design System

选择组件与 Token 来源;系统摘要直接显示,不再打开第二层 Tab。

探索设计系统 ↗
Design System 摘要
字体、Token 和核心组件跟随当前选择。

Color Tokens

Primary / Background / Text / Surface

Typography

SF ProSF Pro Display · SF Pro Text · SF Mono

Large Title 34 / Title 28 / Headline 17 / Body 17 / Caption 12

Layout Tokens

12 pxRadius
8 ptSpacing
1 pxBorder
ComfortableDensity
Button
Text field
Search or enter text
Segmented
TodayWeekMonth
List
Account
Notifications
组件规则:优先使用当前系统现成组件;Registry 不存在时才自定义。

STEP 03

检查效果,然后输出

切换设备检查字体、密度、组件与整体气质,确认后生成完整执行指令。

参考案例

从案例库选择

搜索、筛选并选择一个参考案例。按 Escape 可关闭。