Can AI teach design
or does it just do it for you?
Can AI teach design
or does it just do it for you?
Can AI teach design
or does it just do it for you?
UCSC Tech4Good
UCSC Tech4Good
UCSC Tech4Good
PUBLISHED - CHI WORKSHOP 2026 BARCELONA
PUBLISHED - CHI WORKSHOP 2026 BARCELONA
CO-AUTHOR
CO-AUTHOR
UX REASERACH
UX REASERACH
AI DESIGN
AI DESIGN
AI DESIGN
EDUCATION
EDUCATION
EDUCATION
Timeline
Timeline
Timeline
March 2025 - June 2026
March 2025 - June 2026
Team
Team
Team
HCI PhD Candidate - Yuki Yin,
HCI Faculty Advisor - David Lee,
Undergrads - Audrey Moon, Joelle Yang
3x Engineers,
1 Business,
1 Marketing
3x Engineers,
1 Business,
1 Marketing
Methods
Methods
Methods
Interviews · Observation · Wizard-of-Oz
Interviews · Observation · Wizard-of-Oz
Tools
Tools
Tools
Figma · Figma Make · Gemini · Claude · Google Forms · Google Doc
Figma · Figma Make · Gemini · Claude · Google Forms · Google Doc
Summay
I co-authored a published paper at CHI 2026 exploring how generative AI tools affect learning in novice designers. Then I ran a follow-up study to test a framework that might fix the problem. This research project introduces an AI-driven, structure-first Reverse-Engineering Framework. By taking mature, high-fidelity interfaces and algorithmically deconstructing them into multi-layered, low-fidelity abstractions paired with expert-level design annotations, the platform scaffolds intentional learning and strategic transfer for novice UI/UX designers.
Summay
I co-authored a published paper at CHI 2026 exploring how generative AI tools affect learning in novice designers. Then I ran a follow-up study to test a framework that might fix the problem. This research project introduces an AI-driven, structure-first Reverse-Engineering Framework. By taking mature, high-fidelity interfaces and algorithmically deconstructing them into multi-layered, low-fidelity abstractions paired with expert-level design annotations, the platform scaffolds intentional learning and strategic transfer for novice UI/UX designers.
Summay
I co-authored a published paper at CHI 2026 exploring how generative AI tools affect learning in novice designers. Then I ran a follow-up study to test a framework that might fix the problem. This research project introduces an AI-driven, structure-first Reverse-Engineering Framework. By taking mature, high-fidelity interfaces and algorithmically deconstructing them into multi-layered, low-fidelity abstractions paired with expert-level design annotations, the platform scaffolds intentional learning and strategic transfer for novice UI/UX designers.
1 — THE QUESTION
1 — THE QUESTION
1 — THE QUESTION
When I started this project, AI design tools were everywhere. You could type a prompt and get a polished, high-fidelity prototype in seconds. That felt like a good thing — democratizing design, lowering the barrier to entry.
But something nagged at me. If a novice designer uses AI to generate their screens, do they understand why those screens work? Or are they just getting better at asking the right questions without building the intuition to know what a right answer looks like?
When I started this project, AI design tools were everywhere. You could type a prompt and get a polished, high-fidelity prototype in seconds. That felt like a good thing — democratizing design, lowering the barrier to entry.
But something nagged at me. If a novice designer uses AI to generate their screens, do they understand why those screens work? Or are they just getting better at asking the right questions without building the intuition to know what a right answer looks like?
"Does the democratization of UI generation equate to the democratization of skill?"
"Does the democratization of UI generation equate to the democratization of skill?"
That question became the center of our research — and eventually, a published paper at CHI 2026, the most prestigious academic conference in human-computer interaction.
That question became the center of our research — and eventually, a published paper at CHI 2026, the most prestigious academic conference in human-computer interaction.
Phase 1 of testing Subject #6
Phase 1 of testing Subject #6
2 - WHAT WE NOTICED
2 - WHAT WE NOTICED
2 - WHAT WE NOTICED
Three patterns that kept showing up
Three patterns that kept showing up
Three patterns that kept showing up
Before we could design a solution, we needed to understand the problem from the inside. We spent time observing novice designers working with current AI tools — watching closely for where things went wrong. Three patterns appeared again and again.
Before we could design a solution, we needed to understand the problem from the inside. We spent time observing novice designers working with current AI tools — watching closely for where things went wrong. Three patterns appeared again and again.
Before we could design a solution, we needed to understand the problem from the inside. We spent time observing novice designers working with current AI tools — watching closely for where things went wrong. Three patterns appeared again and again.
Particpant focused on the AI output more than original designs they had made but only explained aesthetics
Particpant focused on the AI output more than original designs they had made but only explained aesthetics
Particpant focused on the AI output more than original designs they had made but only explained aesthetics
Shallow Mimicry
Shallow Mimicry
Shallow Mimicry
Novices look at a reference and duplicate its exact visual styling rather than extracting its functional pattern. For example, a student designing a mobile app copied a web-style "hovering" interaction because they were distracted by a reference app’s visual domain rather than analyzing mobile layout constraints.
Novices look at a reference and duplicate its exact visual styling rather than extracting its functional pattern. For example, a student designing a mobile app copied a web-style "hovering" interaction because they were distracted by a reference app’s visual domain rather than analyzing mobile layout constraints.
Participant #1 - explaining she added a drop shadow to each content card because she wanted it to stand out
Participant #1 - explaining she added a drop shadow to each content card because she wanted it to stand out
Participant #1 - explaining she added a drop shadow to each content card because she wanted it to stand out
AI Version
AI Version
Participant #1 Designs
Participant #1 Designs
Decisions by intuition, not rationale
Decisions by intuition, not rationale
When asked why they placed or structured an element a certain way, novices frequently default to "it felt natural" or personal app habits. They lack the professional vision to articulate the core user experience principles or business logic driving their decisions
When asked why they placed or structured an element a certain way, novices frequently default to "it felt natural" or personal app habits. They lack the professional vision to articulate the core user experience principles or business logic driving their decisions
The changes made with participant where they mostly focused on color
The changes made with participant where they mostly focused on color
V2 idea - Filtering User Page (upper) &
Admin edit view (lower)
Surface Visual Fixation
Surface Visual Fixation
Surface Visual Fixation
When reviewing their own work or seeking feedback, novices disproportionately focus on surface-level clutter, spacing, fonts, and colors, completely missing severe architectural errors in the user flow or core information hierarchy
When reviewing their own work or seeking feedback, novices disproportionately focus on surface-level clutter, spacing, fonts, and colors, completely missing severe architectural errors in the user flow or core information hierarchy
For AI to genuinely upskill designers, it needs to generate structural scaffolding — not polished outputs. The goal is to move AI from automated execution to contextual cognitive support.
For AI to genuinely upskill designers, it needs to generate structural scaffolding — not polished outputs. The goal is to move AI from automated execution to contextual cognitive support.
3 - REASERCH
3 - REASERCH
3 - REASERCH
Two phases to understand
how experts think differently
Two phases to understand
how experts think differently
Two phases to understand
how experts think differently
To design something that could close the novice-expert gap, I first needed to understand what that gap actually looked like from both sides.
To design something that could close the novice-expert gap, I first needed to understand what that gap actually looked like from both sides.
To design something that could close the novice-expert gap, I first needed to understand what that gap actually looked like from both sides.
Phase 1:
Expert Designer Semi-Structured
Interviews
Users (Learners)
Phase 1:
Expert Designer Semi-Structured
Interviews
I interviewed 7 senior product designers — including people working at TikTok, Target, Netflix, and J&J — to map how professionals actually deconstruct an interface when they look at it.
N=7 · Semi-structured interviews · Enterprise designers
N=7 · Semi-structured interviews · Enterprise designers
N=7 · Semi-structured interviews · Enterprise designers
We observed novice design students working with and without AI tools, watching for the moments where their process broke down — and why.
N=7 · Longitudinal task-based study · University cohort
N=7 · Longitudinal task-based study · University cohort
Phase 2:
Novice observation study
Admins (MBA Saff)
Phase 2:
Novice observation study
What experts do that novices don't
What experts do that novices don't
Experts read interfaces in layers — from the macro down to the micro. They don't see a screen; they see a system. They immediately notice the behavioral psychology behind components: why an inline alert was chosen over a modal, what that choice says about task urgency, and what it would mean to change it.
Novices see what's visible. Experts see what's intentional.
Experts read interfaces in layers — from the macro down to the micro. They don't see a screen; they see a system. They immediately notice the behavioral psychology behind components: why an inline alert was chosen over a modal, what that choice says about task urgency, and what it would mean to change it.
Novices see what's visible. Experts see what's intentional.
4 - THE FRAMEWORK
4 - THE FRAMEWORK
4 - THE FRAMEWORK
A reverse-engineering approach to teaching through deconstruction
A reverse-engineering approach to teaching through deconstruction
The core idea: instead of generating polished outputs, what if AI worked backwards? Take a mature, high-fidelity interface and algorithmically strip it down — layer by layer — until only the structural skeleton remains. Then annotate that skeleton with the reasoning an expert would apply.
We called this the Reverse-Engineering Framework.
The core idea: instead of generating polished outputs, what if AI worked backwards? Take a mature, high-fidelity interface and algorithmically strip it down — layer by layer — until only the structural skeleton remains. Then annotate that skeleton with the reasoning an expert would apply.
We called this the Reverse-Engineering Framework.
01 — Journey-level flow abstraction
01 — Journey-level flow abstraction
01 — Journey-level flow abstraction
Strips all page content to isolate step sequences, page counts, and navigational logic. Shows the skeleton of how a user moves through a product — nothing else.
Strips all page content to isolate step sequences, page counts, and navigational logic. Shows the skeleton of how a user moves through a product — nothing else.
Strips all page content to isolate step sequences, page counts, and navigational logic. Shows the skeleton of how a user moves through a product — nothing else.
02 — Block-level layout abstraction
02 — Block-level layout abstraction
02 — Block-level layout abstraction
Translates pages into rough sketch blocks defining region proportions — header vs. action area, content vs. navigation. No typography, no color, no branding.
Translates pages into rough sketch blocks defining region proportions — header vs. action area, content vs. navigation. No typography, no color, no branding.
Translates pages into rough sketch blocks defining region proportions — header vs. action area, content vs. navigation. No typography, no color, no branding.
03 — Annotated element-level logic tree
03 — Annotated element-level logic tree
03 — Annotated element-level logic tree
A grayscale wireframe with all aesthetic polish removed, paired with explicit design rationale — the "why" behind every structural decision, written in the language of expert thinking.
A grayscale wireframe with all aesthetic polish removed, paired with explicit design rationale — the "why" behind every structural decision, written in the language of expert thinking.
Journey-level flow abstraction
Journey-level flow abstraction
Journey-level flow abstraction
Block-level layout abstraction
Block-level layout abstraction
Annotated element-level logic tree
Annotated element-level logic tree
Annotated element-level logic tree
The rationale layer — why it works
The rationale layer — why it works
The rationale layer — why it works
The framework doesn't just strip visuals — it explains the logic behind every structural choice. Each component is tagged with three things: why it was designed that way, what the tradeoff is, and a prompt that pushes the learner to think critically about whether it applies to their own context.
The framework doesn't just strip visuals — it explains the logic behind every structural choice. Each component is tagged with three things: why it was designed that way, what the tradeoff is, and a prompt that pushes the learner to think critically about whether it applies to their own context.
The framework doesn't just strip visuals — it explains the logic behind every structural choice. Each component is tagged with three things: why it was designed that way, what the tradeoff is, and a prompt that pushes the learner to think critically about whether it applies to their own context.
UI Component
UI Component
UI Component
The Why
The Why
The Why
The Tradeoff
The Tradeoff
The Tradeoff
The Pivot
The Pivot
The Pivot
Sticky CTA button
Sticky CTA button
Sticky CTA button
Reduces friction; keeps the primary action consistently reachable
Reduces friction; keeps the primary action consistently reachable
Reduces friction; keeps the primary action consistently reachable
Can feel transactional; blocks real estate on compact screens
Can feel transactional; blocks real estate on compact screens
Can feel transactional; blocks real estate on compact screens
How would this change if the user's goal was exploration rather than a fast transaction?
How would this change if the user's goal was exploration rather than a fast transaction?
How would this change if the user's goal was exploration rather than a fast transaction?
Progressive disclosure
Progressive disclosure
Progressive disclosure
Prevents cognitive overload by hiding advanced options
Prevents cognitive overload by hiding advanced options
Prevents cognitive overload by hiding advanced options
Increases click-depth to locate specific tools
Increases click-depth to locate specific tools
Increases click-depth to locate specific tools
How do you expose complexity without introducing visual clutter?
How do you expose complexity without introducing visual clutter?
How do you expose complexity without introducing visual clutter?
5 - FOLLOW-UP STUDY
5 - FOLLOW-UP STUDY
5 - FOLLOW-UP STUDY
After publication, we tested it.
The Wizard-of-Oz experiment.
After publication, we tested it.
The Wizard-of-Oz experiment.
After publication, we tested it.
The Wizard-of-Oz experiment.
The CHI paper established the problem and proposed the framework conceptually. But proposing something is different from proving it works. So after publication, I ran a follow-up Wizard-of-Oz study — testing our reverse-engineering approach directly against standard high-fidelity references with real novice designers.
Participants were asked to sketch a complex mobile flow — a group airport ticketing feature — under two sequential conditions.
The CHI paper established the problem and proposed the framework conceptually. But proposing something is different from proving it works. So after publication, I ran a follow-up Wizard-of-Oz study — testing our reverse-engineering approach directly against standard high-fidelity references with real novice designers.
Participants were asked to sketch a complex mobile flow — a group airport ticketing feature — under two sequential conditions.
The CHI paper established the problem and proposed the framework conceptually. But proposing something is different from proving it works. So after publication, I ran a follow-up Wizard-of-Oz study — testing our reverse-engineering approach directly against standard high-fidelity references with real novice designers.
Participants were asked to sketch a complex mobile flow — a group airport ticketing feature — under two sequential conditions.
Stage A: Control
Users (Learners)
Stage A: Control
Participants received only high-fidelity app references — real screens from Uber and DoorDash. No annotations, no abstraction. Just the finished product as inspiration.
Participants received only high-fidelity app references — real screens from Uber and DoorDash. No annotations, no abstraction. Just the finished product as inspiration.
Participants received AI-generated low-fidelity abstractions of the same interfaces, paired with expert-level design annotations explaining the structural rationale.
Participants received AI-generated low-fidelity abstractions of the same interfaces, paired with expert-level design annotations explaining the structural rationale.
Stage B: Intervention
Admins (MBA Saff)
Stage B: Intervention
6 - FINDINGS
6 - FINDINGS
6 - FINDINGS
What changed when we stripped the visuals away
From copying to understanding
From copying to understanding
From copying to understanding
In Stage A, participants copied specific traits line-for-line like iconography, layout shapes, even platform-specific patterns that didn't belong in their context. In Stage B, with the lowest-fidelity wireframes and written rationale, something different happened: participants ignored the irrelevant visual details and transferred the structural concept instead.
In Stage A, participants copied specific traits line-for-line like iconography, layout shapes, even platform-specific patterns that didn't belong in their context. In Stage B, with the lowest-fidelity wireframes and written rationale, something different happened: participants ignored the irrelevant visual details and transferred the structural concept instead.
Stage A
Stage B
Text mattered more than visuals
Text mattered more than visuals
Text mattered more than visuals
A finding that surprised us: participants consistently preferred the lowest-fidelity visual paired with dense, well-written annotations over un-annotated wireframes. Stripping color and styling removed the distraction — their attention narrowed onto flow and information grouping. And learning the formal vocabulary ("sticky headers," "progressive disclosure," "avatar stacks") gave them language to reason about structure systematically, not just feel their way through it.
A finding that surprised us: participants consistently preferred the lowest-fidelity visual paired with dense, well-written annotations over un-annotated wireframes. Stripping color and styling removed the distraction — their attention narrowed onto flow and information grouping. And learning the formal vocabulary ("sticky headers," "progressive disclosure," "avatar stacks") gave them language to reason about structure systematically, not just feel their way through it.
AI design tools optimized for speed actively work against learning. The more polished the output, the more novices fixate on surface and skip structure. The intervention is not more AI — it's better-designed AI that forces engagement with the structural logic professionals use every day.
AI design tools optimized for speed actively work against learning. The more polished the output, the more novices fixate on surface and skip structure. The intervention is not more AI — it's better-designed AI that forces engagement with the structural logic professionals use every day.
7 - REFLECTION
7 - REFLECTION
7 - REFLECTION
What I took from this
What I took from this
What I took from this
1*
Research changes how you design
Running this study made me a better practitioner. Watching novices struggle helped me understand my own habits — and question which ones I'd actually learned vs. absorbed from tools doing the thinking for me
1*
Research changes how you design
Running this study made me a better practitioner. Watching novices struggle helped me understand my own habits — and question which ones I'd actually learned vs. absorbed from tools doing the thinking for me
1*
Research changes how you design
Running this study made me a better practitioner. Watching novices struggle helped me understand my own habits — and question which ones I'd actually learned vs. absorbed from tools doing the thinking for me
2*
The best design tools teach, not just do
The most valuable design tool isn't the one that makes the best output fastest. It's the one that leaves you more capable after using it than before. That's a design principle I now apply to every product I work on.
2*
The best design tools teach, not just do
The most valuable design tool isn't the one that makes the best output fastest. It's the one that leaves you more capable after using it than before. That's a design principle I now apply to every product I work on.
3*
Durability over novelty
The gamification decision taught me to ask not just “will this work at launch?” but “will it still work in year two without intervention?” I’ll bring that question to every project.
Thanks for stopping by!
If you have any questions don't hesitate to reach out. Have a wonderful day!
Thanks for stopping by!
If you have any questions don't hesitate to reach out. Have a wonderful day!
Thanks for stopping by!
If you have any questions don't hesitate to reach out.
Have a wonderful day!