Target-state design system · iOS UIKit implementation map

把 Proster 重做成一个可信的照片工作台

这套 HTML 是目标态高保真蓝图,可以领先当前 App 实现,但每个页面必须能映射回真实 iOS 页面、组件和 DesignSystem token。它用于指导 App UI 重做,不是当前 UIKit 的被动截图。

01

照片是主角

首页围绕照片选择组织,结果页围绕海报观看组织。装饰和操作区都要让位给照片与成片。

02

系统负责生成

生成前只保留必要偏好:比例、照片使用倾向、开始生成。不要把用户拖进模板槽位管理。

03

结果后纠偏

用户看到结果后再调整已用/未用照片、更多图版式和重新生成,避免前置复杂决策。

One App page · One HTML route

页面级高保真蓝图

Design to UIKit

实现映射原则

共享 token 先行

颜色、字体、间距、圆角和阴影从 shared/tokens.css 读取,再映射到 UIColor.AppUIFont.AppAppSpacingAppRadius

页面可以领先代码

蓝图表达目标态体验,但每页必须写明未来 UIKit 落点。没有代码落点的视觉想法不能进入页面蓝图。

状态必须可维护

一个页面可以有多个状态区块,但每个状态必须对应真实产品状态,比如空态、生成中、失败、候选切换或抽屉展开。