APPLIED AI

APPLIED AI

One practice,
four parts.

I bring AI into real design work: a Method, the Tools I’ve built around it, working Products, and ongoing experiments in visual interaction. Together, these make up my Applied AI practice.

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

Method

Design starts
with judgment.

I’ve organized my design work into workflows, each tied to a different deliverable. For each one, I’ve defined where AI steps in and which decisions stay with me as the designer. I developed this Method over time through my own exploratory projects.

UI

Workflow

  1. Intent & ExploreDefine the interface goals and explore multiple visual directions.
  2. Refine & CompleteRebuild the strongest direction into a polished, responsive interface with complete states.
  3. Systemize & PrototypeTurn design decisions into reusable components, patterns, and interactive behavior.
  4. Deliver & QAMove the design into code or a working demo, then check the quality of the implementation.

My UI workflow turns product structure into a clear and complete interface system. I use AI to explore possibilities quickly, then rely on design judgment to select, rebuild, and refine. The work continues through components, states, responsive behavior, interaction, and implementation, so the final UI is coherent, reusable, and ready for real use.

UX

Workflow

  1. FrameClarify the problem, goals, constraints, and unknowns.
  2. StructureTurn complex requirements into information architecture, user flows, states, and interaction logic.
  3. PrototypeMake the core experience tangible with the right form of prototype.
  4. EvaluateReview the experience, gather feedback, and refine what needs to change.

My UX work is about turning ambiguity into structure. I first identify what the project still needs to understand, then organize complex requirements into a clear product experience. From there, I build the right prototype, review how it works, and adjust the solution before moving forward.

PRODUCT

Workflow

  1. Set Up & FrameDefine the collaboration rules, project scope, and the smallest version worth testing.
  2. User & PositioningUnderstand the audience, context, and alternatives, then clarify what the product is and is not.
  3. Experience & BuildExplore experience directions and turn the strongest one into a designed, working product.
  4. Validate & IterateTest the product, capture feedback, and refine it against clear quality criteria.

My product design workflow turns an idea into a usable product without jumping straight into execution or getting stuck in planning. I define the smallest worthwhile direction, clarify who it is for, and carry the strongest experience through design, development, and iteration. AI helps expand possibilities and accelerate execution, while I remain responsible for direction and quality.

Tool

Build the
working system.

Once the Method took shape, I started building Tools to support it. Each Tool is a working environment I’ve set up for my own practice, and I combine them differently depending on the workflow. They help me get from idea to delivery faster.

Preparing the Tool cards.

Products

Make it
experienceable.

These Products grew out of real problems, personal experience, and interests I keep coming back to. Some answer a practical need; others test an interaction or a visual language. What they have in common is that they are made to be experienced.

Preparing the Products spiral view.

Playground

What I
explore.

Alongside the Products, I keep a running series of visual experiments. This wall keeps growing, with graphic, illustration, motion, and interactive pieces.

Method, Tool, Products, and Playground make up my applied AI practice. I use design judgment to decide where the work goes, and AI to take it further.
It’s the chapter I’m still writing.

How I got here

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.

A concept iOS app for whisky collecting and membership. I wrote my design method into the Super UI UX Skill and used Agents to move the work from brief to UX to high-fidelity UI. At each stage, I set the design direction and judged the quality of the output.

Macallan UI Case cover: two iPhone screens, “My Cellar” and the profile page

Project Intent

Why a private cellar.

Using Macallan’s brand and membership program as the brief, I designed an iOS app centered on “My Cellar.” Members can collect bottles, record and revisit their experiences with each one, and use those notes to decide what to try next. Macallan’s restrained brand language, and the way collecting, tasting, and record-keeping connect over time, gave me concrete material to design with. I ran the project AI-natively, briefing Agents on each task from requirements analysis and product positioning through UX, visual direction, and UI.

My Workflow

One chain, from brief to screen.

I set the project up as one workflow, from product positioning to finished UI, and wrote my design method into the Super UI UX Skill. The Skill’s rules define what each step produces, its format, its sources, and how revisions are reviewed and carried into the next version. At each stage, the Agent organized material, extended the analysis, drafted documents, generated options, and checked consistency. My part was to define the problems, choose between options, review the output, and judge its quality.

Selected Process

01 · Requirements & Positioning

I started by defining the app’s positioning and core experience. “My Cellar” sits at the center and links each member’s bottles to their own experiences. Discovery starts from the bottles they own and their taste preferences, then points to similar flavors and new options. Within that frame, I had the Agent work through brand materials, usage scenarios, and possible features in more depth, then filtered and corrected its output into a brief and product structure that could be reviewed.

02 · UX

With the positioning settled, I had the Agent draft a Function List from the requirements and propose Main Use Cases. From these, I picked the tasks worth building as the app’s main paths. User Flows mapped how those tasks move between pages and how the interactions work, and Wireframes of the key pages then fixed the content structure, information hierarchy, actions, and links between pages. After each revision, the documents and screens were checked against each other, so the Wireframes could serve directly as the structure for the UI.

UX 01: User Flow for F03, “Find a Bottle and Save It to Your Wishlist”
UX 02: Low-fidelity wireframes for F03, “Find a Bottle and Save It to Your Wishlist”

03 · Visual Direction

I drew the app’s look and feel from Macallan’s brand visuals. Images of whisky, glass, and natural light carry the brand, while typeface, weight, white space, and the rhythm of the interface guide the reading. I narrowed this into a clear interface design language and had the Agent write the principles into a Design MD, which the later pages were designed against.

Visual Direction: Visual Foundation — color, typography, hierarchy, and shape guidelines

04 · Key Page UI Design

With the UX structure and visual direction approved, I moved on to high-fidelity UI for the core pages. Through Figma MCP, the Agent built the pages from the page specs and the visual direction and principles in the Design MD. Once the first key pages were in, I refined them through feedback or adjusted them directly in Figma, keeping the information hierarchy, brand expression, and consistency across pages intact.

Key Page UI Design: ten high-fidelity key pages

05 · Design System

Once the key pages were settled, I had the Agent derive a Design System from them. Working from the Design MD and the refined pages, it found what they shared, reconciled the differences, worked out which styles were worth turning into rules, and organized the Design Foundation (color, type, and spacing), reusable components, and the necessary variants in Figma. The system currently covers the finished core pages and gives future work a design source that can be picked up and reused.

Design System: component library including Actions, Navigation, and Cards
Reflection

The most useful thing I took from this project is a reusable UX/UI Vibe Design Workflow built on Agents and Skills. I broke the practices I’d built up across requirements analysis, UX, visual design, and systematic delivery into explicit steps, output standards, and review methods, and wrote them into the Skill. The Agent can now follow the same method reliably, which leaves my attention for the decisions that need judgment: what the product should be, where the design should go, and whether the result is good enough. Macallan was one full run of this framework.

The experience continues backstage.

A concept Web CMS and operations system that extends the Macallan Loyalty App. It is built around two scenarios, new product launches and new product operations, and organizes the materials, content, and membership operations behind the app. I used the Super UI UX Skill and Agents for product definition, UX, and high-fidelity key pages, then drew reusable design rules and components from the refined screens.

Macallan Loyalty CMS cover: the back-office “Today” workspace on a laptop

Project Intent

The work behind the experience.

This system came from thinking about the work behind the user experience. The bottle information, content, and campaigns users see all have to be prepared, published, and managed by someone. The collecting, discovery, and membership features in the Macallan Loyalty App led me to the operations work that supports them. So I designed for brand operators, content editors, and reviewers instead, and chose two scenarios, new product launches and new product operations, to explore how materials, tasks, and status can be organized into a clear way of working. The aim was to connect what users see with the preparation behind it, within one project.

My Workflow

From brief to reusable design.

I used the Super UI UX Skill again to set the outputs and review steps for each stage: requirements and brief, analysis, product positioning, functional use cases, User Flows, Wireframes, visual direction, UI key pages, and the design system. The Agent helped draft and check, and I was responsible for scope and quality. In Figma, the Agent built the key pages to spec. I refined them through feedback on layout, information hierarchy, and visual quality, then synced specs, content, and versions so each stage fed cleanly into the next.

Selected Process

01 · Requirements & Positioning

The first idea for the back office covered materials, content, campaigns, and collector relationships. I used the Agent to map how these requirements connect to the app, then chose two Hero Flows that link the app and the back office. New Product Launch covers preparing and checking materials, scheduling the launch, and publishing content. New Product Operations covers operations planning, setting up campaigns and content, and reviewing results. With the scope tied to concrete tasks, I focused the design on these two flows and their key pages.

02 · UX

I had the Agent build a Function List from the requirements to define the scope, then map the main tasks as Main Use Cases. From these, I chose the two core flows: new product launch and new product operations. User Flows then set out the task steps, page relationships, and interaction paths, and Wireframes of representative pages worked out the information structure, hierarchy, actions, and layout. I reviewed each round for whether the flow held together and whether each page’s focus was clear, and had the Agent revise, so these structures could serve as the basis for the UI.

UX 01: User Flow for the core success path of a new product launch in the Macallan CMS
UX 02: Wireframes of the core pages for a new product launch in the Macallan CMS

03 · Visual Direction

I took the color palette, button shapes, and icon style from Macallan’s official website and mini program to keep the brand recognizable, then adapted them to how people read and work in an operations system. The workspace uses white and light gray, with cards and shadows to separate layers, black for text and primary actions, and brand red sparingly for emphasis. On top of the brand elements, I added standard functional colors for status, alerts, and data, so different kinds of information are easy to tell apart. These decisions are documented in the Design MD and shown on a Visual Foundation Board.

Visual Direction: CMS Visual Foundation — color, typography, surfaces, icons, and buttons

04 · Key Page UI Design

Working from the approved Wireframes and Visual Direction, I used Figma MCP and the Agent to build high-fidelity Key Pages, then refined the layout, information hierarchy, tables, and data visualization through rounds of feedback. I checked the pages against what operators, leads, and reviewers need to read and do, asking whether content, deliverables, tasks, and status were easy to find and act on. Usability and ease of use guided the design decisions, and I kept the pages consistent with each other.

Key Page UI Design: board of high-fidelity key pages for the Macallan CMS

05 · Design System

Once the key pages were refined, I had the Agent pull their stable colors, type, spacing, surfaces, and layering into a Design Foundation, then extract common components such as buttons, inputs, and tables. Recurring functional modules, like task status and confirmation feedback, became reusable structures too. I added states such as selected and disabled, plus the variants the current Key Pages need, checked how each page uses them, and assembled an editable Component Library as the design source for future pages.

Design System: CMS Component Library — common components, functional modules, states, and variants
Reflection

Moving from a collector’s app to an operator’s CMS showed me how design priorities change for the same brand in different contexts. The app uses strong visuals and imagery to organize collecting and discovery. The back office serves editors, leads, and reviewers, so information, tasks, and status have to be easy to read and act on. There, function and usability come first, and the brand expression steps back. Even with the same method, I had to rethink layout, information density, and visual hierarchy for each user and task. The project made me think about what users see and the work behind it together.

Built With