一段提示词读懂「柔和极简奶油风」UI 重构

把它从一段感性描述，翻译成工程上可执行的视觉纪律。

引子：为什么要解构这段提示词

原文只有七行，却把色彩、形态、卡片、节奏、字体、约束一次性说清。它不是「美化建议」，而是一份视觉契约——只要你能在工程层面对号入座，复刻成本几乎为零。问题在于：很多人读完只记得「奶油风」三个字，丢掉了后半段真正值钱的东西。

一、整体调性：治愈、松弛、轻盈

原文第一句锚定了情绪基调：治愈、松弛、轻盈。这三个词共同指向一种「低生理唤起」的视觉——不抢注意力、不制造紧张感。这与上一代「高级感 = 高对比 + 深色 + 金属」的路径彻底相反。

提示词解法：情绪先于视觉，所有具体规则都从情绪推导。

二、色彩：只用 token，不引入新色值

用项目内置主题色，不写硬编码色值，仅靠 token 的低饱和度组合呈现奶油感

这一条是最容易被忽视、却最值钱的一条。它意味着：

• 不去 Tailwind、Coolors 找新色，而是从已有 token 派生。
• 浅色底面 + 柔和状态色底 + 主题主色作为强调 = 三层语义，足够撑起界面。
• 深色文本用主题文字层级（如 text-primary / text-secondary），不是 #000。

关键判断：提示词作者默认了「设计系统已经成型」，这次只是重新搭配，不是重建。

三、形态：超大圆角 + 药丸化

圆形容器与药丸形态为主；按钮为药丸形状，分段器、筛选器均为胶囊形态

「药丸（pill）」不是新东西，但「所有交互元素统一为药丸」是强约束。它牺牲了一部分信息密度，换来：

• 视觉重心从「边角」转向「体块」；
• 触摸热区天然更大，更符合移动端直觉；
• 与「轻盈」的调性一致——药丸的弧线比圆角矩形更柔和。

四、卡片：大圆角 + 弥散浅阴影

圆度显著高于现有规格；阴影改为无阴影或柔和弥散的浅阴影，取消强立体效果

两个相反的方向被同时给出：形态上放大圆角，阴影上削弱立体感。这不是矛盾，而是组合拳——

结果：卡片靠圆角轮廓 + 留白自我呈现，不再依赖阴影「浮」起来。这就是「弥散感」的来源——边界柔和到几乎看不见，但又确实存在。

五、节奏：留白 + 去边框

模块之间大量留白；移除多余的分割线和边框，靠字号大小与颜色层级区分主次

这是「用层级，不用线条」的设计哲学。信息分层不再靠 1px 灰线，而是靠：

1. 字号差（标题 ↔ 正文拉开差距）；
2. 颜色权重（主色 / 次色 / 弱色 token）；
3. 间距差（4 / 8 / 16 / 24 / 32 阶梯）。

代价：弱视用户会更依赖字号差，需要保证 WCAG 对比度。但回报是界面真正呼吸起来。

六、字体：拉大对比，放弃装饰

干净的无衬线字体；标题与正文字号差距拉大，强调对比而非装饰

字体本身不创新，字号阶梯才是武器。常见做法：

• 正文 14–16px，标题 24–32px，跨级 1.6–2.0 倍。
• 字重只保留 2 档（如 400 / 600），避免 5 档字重混用造成的「花哨感」。

七、严格遵循的工程纪律

最后一段不是装饰，是约束条款：

全程使用项目 token 提供的语义变量；
不写硬编码色值；
不引入外部组件；
不破坏现有响应式与主题切换。

四个「不」，把改动边界画死。这意味着这次重构只能：

• 改 token 映射（如把 --radius-md 从 8px 调到 20px）；
• 改组件 prop（如把 variant="default" 的圆角统一为药丸）；
• 不动响应式断点，不动暗色模式逻辑。

这是它能在大项目里真正落地的根本原因。

浓缩：可复用的一段话

柔和极简奶油风 UI 重构：在已有 token 体系内，把色彩压到低饱和组合、形态统一为超大圆角药丸、卡片仅靠圆角与留白呈现、节奏交给字号与色阶层级、字体只拉大对比不加装饰；全程不引入新色值、不写硬编码、不动响应式与主题切换，让治愈、松弛、轻盈成为可批量复制的视觉契约。

适用场景 / 不适用场景

• ✅ 适用：已有成熟 token 的中后台、SaaS、控制台；移动端首屏；需要情绪降温的运营页。
• ❌ 不适用：游戏化产品、数据密度极高的看板（圆角与留白会挤压信息）、强品牌表达的电商首页。

文档更新于 2026年4月