APPLIED AI

APPLIED AI

One practice,
four parts.

我把 AI 放进真实的设计过程,从 Method 到 Tool,再到可以运行的 Products,并持续探索视觉交互实验,这些共同构成了我目前的 Applied AI 实践。

  • Method How I work
  • Tool What I build with
  • Products What I make
  • Playground What I explore

Method

Design starts
with judgement.

我把设计工作整理成 Workflow,分别对应不同的交付成果,明确 AI 在哪些阶段介入、哪些判断需要 Designer 来做。这套 Method 是我在自己探索项目中逐步整理和沉淀的一套工作方式。

Tool

Build the
working system.

当 Method 沉淀下来,我开始搭建与之匹配的 Tool。Tool 是我在工作中配置的工作环境,不同的 Tool 根据 Workflow 重新组合,帮助我更快地从想法到交付。

正在准备 Tool 卡牌。

Products

Make it
experienceable.

这些 Products 来自真实问题、个人经验和持续的兴趣探索。有些回应实际需求,有些测试一种交互或视觉语言。但它们都有一个共同点:they are made to be experienced.

正在准备 Products 螺旋作品视图。

Playground

What I
explore.

除了 Products,我也持续做一些视觉探索。这里是一面不断生长的视觉实验墙,包含平面、插画、Motion 和 Interactive Visuals 等视觉实验片段。

Method、Tool、Products、Playground,共同构成了我目前的 Applied AI 实践,也会随着新的项目和问题持续迭代。用设计的判断与品味把握方向,用 AI 拓展落地的深度与边界。

Visual Preview

Liquid language

用流动、反射和不确定的边界,测试一种能从静态图像继续生长的视觉语言。

Tools
Image Gen · CSS Motion
Process
Prompt → Selection → Motion study
Key settings
Contrast / Blur / Grain

Built With

Main Function Flow

Every decision leaves a ring.

一款围绕威士忌收藏与会员体验的 iOS App 概念设计。我将自己的设计方法整理成 Super UI UX Skill,借助 Agent 推进从 Brief、UX 到高保真 UI 的工作,并在各个阶段判断与把控设计方向与产出质量。

麦卡伦 UI Case 封面:「我的酒窖」与个人页两屏 iPhone 界面

Project Intent

Why a private cellar.

我以麦卡伦的品牌语境与会员场景为题,设计了一款以「我的酒窖」为中心的 iOS App:用户可以收藏酒款,记录并回看自己与每一瓶酒有关的经历,再从这些记录出发,探索下一款酒。麦卡伦克制的品牌语言,以及收藏、品鉴与持续记录之间的关系,给了这套体验具体的设计空间。整个项目以 AI Native 的方式与 Agent brief 任务,从需求分析、产品定位一直推进到 UX、视觉方向与 UI。

My Workflow

One chain, from brief to screen.

我把这个项目组织成一条从产品定位到落地 UI 的工作流,并把自己的设计方法写进 Super UI UX Skill,每个环节产出什么、用什么格式、依据来自哪里、修改如何审阅并衔接版本,都通过 Agent 内 Skill 的规则设定进行约束。在各个阶段,我用 Agent 梳理资料、扩展分析、起草文档、生成候选方案并检查前后一致,我再进一步定义问题、筛选方案、审阅产出和判断质量。

Selected Process

01 · 需求分析与产品定位

我首先确定这款 App 的定位和核心体验,以「我的酒窖」为中心,连接用户的典藏酒款与个人经历,并让发现内容从已有酒款和口味偏好延伸,为用户提供相近的风味与新的选择。在这个框架下,我用 Agent 对品牌资料、使用场景和功能可能性做更系统的梳理,再从中筛选、修正,形成一份可审阅的 Brief 与产品结构。

02 · UX

定位确定后,我依据需求框架,让 Agent 梳理 Function List、提出可能的 Main Use Cases,再从中挑出值得作为 App 主链路推进的任务。这些任务先用 User Flow 理清页面之间的链路和交互逻辑,再在关键页面的 Wireframe 中确定内容沟通的结构、信息层级、操作与页面关系。每次修改后,文档与界面都会同步检查,让 Wireframe 成为 UI 设计可以直接依据的结构源。

UX 01:F03「找到酒款与留下心愿」User Flow
UX 02:F03「找到酒款与留下心愿」低保真线框图

03 · Visual Direction

我从麦卡伦的品牌视觉中提炼出适配 App 的 look and feel,以酒液、玻璃与自然光的影像承载品牌感,用字体、字重、留白和界面节奏组织阅读。最终将方向收敛为清晰、明确的界面设计语言。我把这些原则让 Agent 写进 Design MD,作为后续页面设计的依据。

Visual Direction:Visual Foundation,颜色、字体、层级与形状规范

04 · Key Page UI Design

基于确认的 UX 结构与视觉方向,我先完成若干核心页面的高保真 UI。借助 Figma MCP,Agent 依据页面规格与 Design MD 内提供的视觉方向与视觉原则。在产出部分 Key page 后我再进行精修、反馈,或直接在 Figma 中调整,保持页面的信息层级、品牌表达与跨页面的一致性。

Key Page UI Design:十张高保真关键页面

05 · Design System

关键页面确定之后,我再让 Agent 基于核心页面的设计语言提炼 Design System,从 Design MD 的方向与已经打磨过的核心页面中归纳共性、校准差异、沉淀设计语言,决定哪些样式值得沉淀为规则,再在 Figma 中整理颜色、文字与间距等 Design Foundation,以及可复用组件和必要的变体。目前它覆盖已完成的核心页面,为后续扩展提供一份可以接手和复用的设计源文件。

Design System:Actions、Navigation、Cards 等组件库
Reflection

这个项目留给我最有用的,是一套通过 Agent 与 Skill 的工作流程,沉淀出一套可复用的UI/UX Vibe Design Work Flow。过去在需求分析、UX、视觉和系统化交付中积累的做法,被我拆成明确的步骤、产出标准和审阅方式,写进了 Skill。于是 Agent 能沿着同一套方法稳定地协助产出,我可以把注意力留给真正需要判断的地方,产品该是什么,设计往哪里走,效果够不够到位,麦卡伦是这套框架的一次完整实践。


Built With