体验，在幕后延续
一套从麦卡伦 Loyalty App 延伸而来的 Web CMS / 运营系统概念设计，围绕「新品上市」与「新品运营」，组织 App 背后的资料、内容与会员运营工作。我使用 Super UI UX Skill 与 Agent 推进产品定义、UX 和高保真关键页面，再从打磨后的界面中提炼可复用的设计规则与组件。
项目意图
体验背后的工作
这个运营系统来自我对用户体验背后工作的进一步思考：用户看到的酒款资料、内容与活动，需要有人准备、发布和管理。麦卡伦 Loyalty App 中的收藏、探索和会员体验，让我开始关注支撑这些模块的运营工作。我因此把设计对象转向品牌运营、内容编辑与审核人员，选择新品上市与新品运营两个场景，探索如何将资料、任务和状态组织成清楚的工作体验，让前台体验与后台准备在同一个项目中衔接。
我的工作流
从 Brief 到可复用的设计
我沿用 Super UI UX Skill 规定各阶段的产出与审阅方式，从需求与 Brief 开始，经过分析、产品定位和功能用例梳理，推进到 User Flow、Wireframe、视觉方向、UI Key Pages 与设计系统。Agent 协助起草与检查，我负责判断范围和质量。进入 Figma 后，Agent 按页面规格搭建关键页面，我围绕布局、信息层级与视觉质量反馈精修，再同步规格、内容与版本，让各阶段的产出前后衔接。
过程节选
01 · 需求分析与产品定位
最初的后台设想包含资料、内容、活动和藏家关系等方向。我用 Agent 梳理需求与 App 的联系，再筛选出能串起前后端体验的两条 Hero Flow：新品上市，聚焦资料准备与核对、上市安排和内容发布；新品运营，聚焦运营计划、活动与内容配置和执行复盘。以具体任务限定范围后，我把设计重点放在这两条链路及其关键页面上。
02 · UX
我让 Agent 根据需求整理 Function List，明确功能范围，再通过 Main Use Cases 梳理主要任务，由我选择新品上市与新品运营两条核心链路。随后用 User Flow 理清任务步骤、页面关系与交互路径，在代表性页面的 Wireframe 中落实信息结构、层级、操作与布局。我逐轮审阅流程是否连贯、页面重点是否清楚，并让 Agent 同步修改，使这些结构成为后续 UI 设计的依据。
03 · 视觉方向
我从麦卡伦官网与小程序中提取配色、按钮造型和图标语言，延续品牌识别，再适配运营系统的阅读与操作需求。工作区以白色和浅灰为底，用卡片与阴影区分层次，黑色组织文字与主要操作，品牌红作克制的强调。在品牌元素之外，我为状态、提醒和数据表达补充通用功能色，让不同信息容易辨认。这些判断整理进 Design MD，并通过 Visual Foundation Board 呈现。
04 · 关键页面 UI 设计
基于确认的 Wireframe 与 Visual Direction，我借助 Figma MCP 与 Agent 搭建高保真 Key Pages，再通过反馈与精修调整布局、信息层级、表格和数据的可视化表达。我围绕运营人员、负责人和审核人员的阅读与操作需求，检查内容、交付物、任务和状态是否便于查阅与处理，把可用性与易用性作为设计判断的依据，并校准跨页面的一致性。
05 · 设计系统
关键页面打磨后，我让 Agent 归纳其中稳定的颜色、文字、间距、表面与层次，整理为 Design Foundation，再提取按钮、输入、表格等通用组件。任务状态、确认反馈这类重复的局部功能模块，也被整理为可复用结构。我按现有 Key Pages 的需要补充选中、禁用等状态与必要变体，校准各页的使用方式，形成可编辑的 Component Library，为后续页面复用和扩展提供设计源。
从藏家的 App 转向运营人员的 CMS，我更清楚地看到同一品牌在不同场景下的设计优先级。App 以鲜明的视觉和影像组织收藏与探索；后台面对编辑、负责人和审核人员，需要先让信息、任务与状态容易阅读和处理，功能性与易用性更靠前，品牌表达也随之收敛。沿用同一套方法时，我仍要根据使用者与任务重新判断布局、信息密度和视觉层级。这次探索让我把用户看到的体验与后台支撑它的工作放在一起思考。
