Design with Taste 是一个面向 UI 构建的设计理念技能，用于在编写任何 UI 代码之前应用“Family Values”设计哲学。该理念由 Benji Taylor 在 benji.org/family-values 记录，强调让界面感觉像一个在乎细节的人设计出来的。
三大支柱
三大支柱按优先级排序：没有简洁就没有流畅，没有流畅就没有愉悦。
1. 简洁——渐进式揭示
核心问题是大多数 UI 一次性倾泻所有内容：每个功能、每个选项、每个边缘情况全部同时可见，把认知负担从设计者转嫁给用户。原则是只展示当下重要的内容，界面应像穿行于相连的房间，在抵达前先瞥见下一处。
规则：每个视图只有一个主操作（两个等权重 CTA 即为失败，其余皆为次要）；用渐进式揭示替代功能堆砌（分层托盘、分步流程、可展开区块，能用三步各四个字段就不要展示十二字段表单）；用保留上下文的浮层替代整页导航（表单、托盘、模态浮层保持用户方向感，全屏切换会让用户迷失）；堆叠层的高度要有差异（后续每个表单/托盘必须高度明显不同，绝不堆叠两个同高层）；每个表单/托盘/模态都要有标题和关闭操作；托盘适配上下文（深色流程中的托盘应采用更深配色，视觉环境跟随用户）；托盘可以启动全屏流程（紧凑托盘可作为多步全屏体验的入口，不必在“托盘”和“页面”间二选一）；瞬时操作用托盘，持久目的地用全屏（确认、警告、上下文信息用托盘；设置、核心内容用全屏）。
自检：用户能否在 1 秒内判断下一步做什么？若不能，简化。
2. 流畅——无缝过渡
核心理念是“我们飞行，而非瞬移”。静态过渡会让产品显得死气沉沉，不被在意的产品也是如此。瞬时切换会破坏空间定位感。原则是把应用视为具有不可破坏物理规则的空间，在添加过渡前先想清它在架构上为什么合理，每个元素都从某处移动到某处。
规则：不得瞬时显示/隐藏（每个出现或消失的元素都必须有动画，选择在空间上合理的过渡：淡入、滑动、缩放、变形）；共享元素过渡（若某元素同时存在于状态 A 和状态 B，它必须在视觉上在两者间移动，绝不卸载再重挂，而是变形）；方向一致性（前进→内容从右侧进入，返回→内容从左侧进入，当前标签左侧的标签向左滑动，以此建立空间记忆）；文本变形优先于瞬间替换（按钮标签变化时做动画过渡，识别共享字母序列并保持固定，其余变形，使用 torph，跨淡是最低回退方案）；部分文本变化只动画变化部分（句子增删一个词时，未变化部分保持静止）；持久元素保持不动（页头、卡片等跨过渡持续存在时不得动画出场再入场，只有变化部分移动）；加载状态移向目的地（加载指示器应移动到用户查看结果的位置）；微方向提示（箭头、V 形图标应动画反映所执行操作）；统一插值（同一数据驱动的所有视觉元素共享同一 lerp/缓动，让界面像一体呼吸）。
黄金缓动曲线：cubic-bezier(0.16, 1, 0.3, 1)——快速开始、轻柔落定，作为所有入场和变形的默认；退出仅用 ease-in（cubic-bezier(0.4, 0, 1, 1)）；绝不使用 linear。
自检：录屏并以 0.5 倍速回放，能否跟上每个元素的轨迹？任何瞬移都需要过渡。
3. 愉悦——选择性强调
核心是“愉悦-影响曲线”：功能使用频率越低，越应令人愉悦。日常操作需要效率配以细微触感，罕有时刻值得戏剧化处理。
规则：所有地方同等打磨（设置页、空状态、错误页都应与主视觉同等待遇，一处不打磨会让整体感觉粗糙，如同“高档餐厅配脏卫生间”）；彩蛋奖励探索（藏在意外之处，让发现像奖励而非打扰）；庆祝完成（备份、引导、首次交易等重大动作值得彩带、自定义动画、满足音效，而非一个绿色对勾）；让破坏性操作也令人满足（删除物品时滑入垃圾桶并配音效）；数字与实时图表做动画（价格、计数、余额应计数/翻转/变形，逗号位置平滑移动，实时折线图用 liveline）；空状态是第一印象（动画箭头指向创建按钮、漂浮插画、温暖文案，绝不只是“暂无项目”）；音效设计放大物理感；拖放应令人满足（堆叠动画、平滑重排、抬起反馈）。
技能还提供了愉悦模式库，列出数字输入、标签/图表导航、空状态、项目重排、删除/垃圾桶、首次使用功能、关键完成、彩蛋等具体场景对应的频率、愉悦级别和模式，并附有 AnimatedNumber、Liveline、EmptyState、CompletionScreen 等代码示例。
品味检查清单
交付前需逐项核对，分为四组。简洁组：每屏一个清晰主操作、复杂流程拆成可消化步骤、信息渐进揭示、过渡中保留上下文、堆叠层高度明显不同、每个浮层有标题和关闭操作、用户始终知道所处位置及返回方式。流畅组：零瞬时显示/隐藏、共享元素在状态间变形、方向性过渡符合空间逻辑、持久元素不冗余动画、文本变化使用 torph 或至少跨淡、部分文本只动画变化部分、加载状态移向结果显示位置、箭头有微方向提示、同数据元素共享缓动、默认缓动为 cubic-bezier(0.16, 1, 0.3, 1)。愉悦组：高频功能有细微微交互、低频功能有难忘时刻、空状态经过设计、完成有庆祝、数字变化有动画、至少一个彩蛋或隐藏时刻、所有角落同等打磨、至少有一个让人说“哦，不错”的时刻。通用品味组：无通用 AI 审美（Inter 字体、紫色渐变、千篇一律布局）、字体有意图、配色有主色配锐利点缀、间距慷慨一致、界面像物理空间而非幻灯片、每个像素都像被在意的人放置过。
反模式
技能列出会扼杀品味的做法：静态标签切换、凭空弹出的模态、与真实布局不符的骨架屏、冗余动画、线性缓动、“暂无项目”空文案、堆叠层尺寸统一、用 toast 传达重要结果、仅堆叠输入框的表单、不响应交互的按钮、动画未变化的文本、操作后加载指示器留在原地。
缓动与时长参考
技能提供表格，规定元素入场（cubic-bezier(0.16, 1, 0.3, 1)，300–400ms）、元素出场（cubic-bezier(0.4, 0, 1, 1)，200–250ms）、共享元素变形（cubic-bezier(0.16, 1, 0.3, 1)，350–500ms）、微交互（cubic-bezier(0.2, 0, 0, 1)，100–150ms）、弹跳弹簧（damping: 20, stiffness: 300）、平滑弹簧（damping: 30, stiffness: 200）、数字计数（ease-out cubic，400–800ms）、页面过渡（cubic-bezier(0.16, 1, 0.3, 1)，300ms）、项目间错开（每项 30–60ms）。
推荐工具
两个由 Family 团队打造的库体现同一理念：torph（无依赖文本变形，自动处理共享字母过渡，支持 React、Vue、Svelte，安装：npm i torph）；liveline（实时动画折线图，单一 canvas，60fps 线性插值，动量箭头，除 React 18 外无依赖，安装：npm i liveline）。涉及会变化的文本或实时数值/图表数据时优先使用它们，而非自行实现。
使用方式
在每次 UI 任务之前阅读（不是之后）；按顺序应用三大支柱（简洁→流畅→愉悦，无法用动画美化糟糕布局）；交付前运行检查清单；可与 frontend-design 技能搭配处理视觉审美（字体、配色、布局），本技能负责手感与交互质量；拿不准时就加动画（做减法比给死界面注入活力更容易）；以 0.5 倍速录制回放审查。目标是让人使用后觉得“做这个的人是真在乎细节”，这就是品味。
该技能定位为设计理念与交互质量指南，不涉及定价、平台收录等信息，具体适用范围与限制以官方说明为准。