EXPERIENCE SYSTEM 01 / 11

SECTION 01 · PREMISE

In an age when AI can generate UI,
what should we give it?

AI has rapidly made the act of creating screens easier.
But being able to make something is not the same as creating the right experience.

SCROLL TO BEGIN

SECTION 02 · EXPERIMENT START

Give the same AI the same task.

Add one condition at a time and observe how the generated UI changes. The AI does not change. The information available for its decisions does.

requirement.md
01

Create a learning app for middle school students.

02

Show learning status, study materials, progress, and information for parents.

Same requirement · 3 generations

SECTION 03 · REQUIREMENT ONLY

AI can make it.
Its answer changes every time.

Each output meets the requirement. Even so, color, layout, information priority, and the first action it encourages vary with every generation.

OUTPUT 01
A blue learning app screen generated from the Requirement alone, showing the last lesson, statistics, recommendations, and assignments.
Centered on the previous lesson
OUTPUT 02
A dark learning app screen generated from the Requirement alone, emphasizing a ten-minute session that can start now.
Centered on “10 minutes now”
OUTPUT 03
A red learning app screen generated from the Requirement alone, emphasizing national ranking.
Centered on national ranking
OBSERVATION

Even with the same Requirement, AI does not agree on what matters most.

SECTION 04 · + DESIGN SYSTEM

Give AI the company's
design language.

Design.md6 foundations
  • Color#FF385C
  • TypographyScale / Weight
  • Spacing4px grid
  • Radius8 / 12 / 16
  • ComponentsShared UI
  • Design TokensSemantic rules

Design.md teaches AI how the product should look.

BEFORE · REQUIREMENT ONLYThe appearance varies with every generation.
A blue learning app screen before introducing Design.md.
An orange learning app screen before introducing Design.md.
A green learning app screen before introducing Design.md.

Color, spacing, cards, and visual hierarchy change with each generation.

INTRODUCE+ Design.md
AFTER · DESIGN SYSTEMThey converge on one design language.
Consistent learning app screen 1 after introducing Design.md.
Consistent learning app screen 2 after introducing Design.md.
Consistent learning app screen 3 after introducing Design.md.

Color, typography, and components become consistent.

DESIGN 01
Learning app screen 1 after applying Design.md, using a shared red brand color and card treatment.
DESIGN 02
Learning app screen 2 after applying Design.md, visually consistent with screen 1.
DESIGN 03
Learning app screen 3 after applying Design.md, visually consistent with screens 1 and 2.

RESULTThe appearance is consistent.

SECTION 05 · BUT…

But
is that enough?

The appearance is consistent. Yet some decisions cannot be made by a Design System alone.

  • 01Why does this product exist?PURPOSE
  • 02What state should the user reach?DESIRED STATE
  • 03What should be prioritized in each situation?PRIORITY
  • 04In what sequence should the experience unfold?SEQUENCE
  • 05What should guide a difficult decision?PRINCIPLE

SECTION 06 · EXPERIENCE SYSTEM

Give it not screens, but
the product's intent.

An Experience System is a Knowledge foundation that stores purpose, users, situations, experience principles, and design decisions as structured files, allowing AI and people to reproduce the same experience decisions.

EXPERIENCE SYSTEM Structured Product Knowledge
7 FILES · ONE KNOWLEDGE BASE
01

Purpose.md

Why it exists

02

Product.md

What it must achieve

03

User.md

Who it is for

04

Scenario.md

When and where it is used

05

Experience.md

What experience it should create

06

Principles.md

What to prioritize when choices conflict

07

Design.md

How it should be expressed

HUMAN JUDGEMENTSTRUCTURED CONTEXT FOR AISHARED MEMORY

SECTION 07 · EXPERIENCE SYSTEM × AI

To UI already aligned by a DESIGN SYSTEMadd an Experience System.

It did not simply become more polished.
The decisions behind the UI changed.

For the student, learning reflection, and parent, the needed next state was defined first. As a result, the same design language produces a different, appropriate experience for each situation.

SCENE 01 · LEARNER RE-ENTRY

Student home

From what to display to whether the learner can return to the next lesson without hesitation.

BEFORE · DESIGN SYSTEMStudent home after applying the Design System, with information shown at equal priority.
Display the information consistently
INTRODUCEExperience
System
AFTER · EXPERIENCE SYSTEMStudent home after applying the Experience System, centered on resuming the last lesson and starting in ten minutes, with a tab bar aligned to the learning notebook.
Prioritize resuming the previous lesson and starting a ten-minute session
SCENE 02 · LEARNER REFLECTION

Learning reflection

From today's task to connecting what was achieved with the next step in learning.

BEFORE · DESIGN SYSTEMLearning home after applying the Design System, centered on an action that can begin today.
Center the screen on today's task
INTRODUCEExperience
System
AFTER · EXPERIENCE SYSTEMLearning notebook after applying the Experience System, showing what the learner can now do, their current state, and the next challenge in sequence.
Show achievements, current state, and the next challenge in sequence
SCENE 03 · PARENT SUPPORT

Parent support

From reporting rank to showing support the family can provide.

BEFORE · DESIGN SYSTEMStudent home after applying the Design System, presenting ranking and progress.
Present ranking and progress to the student
INTRODUCEExperience
System
AFTER · EXPERIENCE SYSTEMParent dashboard after applying the Experience System, showing growth, challenges, and support that can be provided at home.
Translate the data into growth, challenges, and support at home

SECTION 08 · BEFORE / AFTER

What changed was
not the color, but the meaning of the experience.

BEFOREList of study materialsList information
AFTERTen minutes to do todayCreate a state where the learner can start now
BEFOREStudy time: 32 minutesReport a measured value
AFTERWhat became possible this weekCreate a state where growth can be understood
BEFOREIncomplete goals and rankingEvaluate the result
AFTERWhat to say at homeCreate a state where the next support can be chosen

Content, priority, language, and sequence.The Experience System connected every decision.

SECTION 09 · THREE LEVELS

AI-generated UI changes
across three levels.

01 · REQUIREMENTCan makeFUNCTION
02 · DESIGN SYSTEMBecomes consistentCONSISTENCY
03 · EXPERIENCE SYSTEMCarries intentEXPERIENCE
Learning app UI generated from the Requirement alone.
AI interprets requirements
Learning app UI with its appearance aligned by Design.md.
AI shares visual rules
Learning notebook UI that prioritizes reflection through the Experience System.
AI judges experience intent

SECTION 10 · FOR ENTERPRISE

Expand the company's
design assets.

The Design System is not discarded. Organizational decisions and reproducible experiences are built on top of it.

ORGANIZATIONAL KNOWLEDGE EXPERIENCE SYSTEM Why / Who / When / What / How
EXPERIENCE & DECISION REPRODUCIBILITY
WHYPurposeReason for being
WHOUser ContextUsers and context
WHENScenariosUsage situations
PRINCIPLEExperience PrinciplesExperience principles
JUDGEMENTDecision RulesDecision criteria
ACTIONBehaviorBehavior
VOICEToneCharacter and language

A Design Systemreproduces appearance.

An Experience Systemreproduces decisions and experiences.

Even when the owner or department changes, do not return the quality of AI-generated UI/UXto individual talent.

SECTION 11 · FUTURE

From a world of producing large numbers of fixed screens
to one where the needed experience emerges in the moment.

01Human intent 02Experience System 03AI 04The UI needed in that moment
ExperienceSystem

For the best experience.