Weak content choices
Visual skills do not automatically produce clear positioning, hierarchy, or priorities.
Back to selected projects
Course case study · Design education
AI-native Interactive Product Design
and Vibe Coding Practice
A project-based course that guides design students from personal positioning, information architecture, and visual systems to AI-assisted development, debugging, testing, and deployment through one portfolio website.
COURSE / 01—1664hours
16sessions
4stages
01
Why this course
Lower technical barriers make product judgment more important
Students often have visual foundations but little experience turning concepts into complete digital products. The course places Vibe Coding inside a full strategy, design, development, debugging, and launch process.
Static designs do not ship
Single-screen polish can hide gaps in navigation, reuse, and interaction.
Vague AI instructions
One-line requests replace task decomposition and useful context.
No verification loop
Errors are hard to reproduce, and first-generation output is too readily accepted.
Vibe Coding is not the destination. It is a collaborative medium for turning design decisions into real digital experiences.
02
Learning outcomes
Reframe a tool course around four transferable abilities
Success is not measured by code volume, but by the ability to define, organize, build, test, and improve a working product.
Website strategy
Define positioning, priorities, scope, and audience from identity and portfolio content.
Information and visual design
Build architecture, navigation, visual rules, and a distinctive web expression.
AI-assisted development
Organize context with prompts, specifications, and task lists for iterative implementation.
Testing and communication
Check runtime, links, responsive behavior, and visual consistency, then explain decisions and revisions.
03
16-session course map
One project, four stages, sixteen connected delivery points
Choose a stage and a session to inspect its learning focus, classroom task, and concrete output.
Stage 01
What should the site communicate?
Strategy and visual directionSession01
Understand Vibe Coding, AI Coding, the portfolio brief, and the TRAE/Codex tool ecosystem.
Define the purpose and intended audience of the portfolio.
Website goal and content list
04
Teaching tasks
Turn abstract AI collaboration into observable work
Templates, live demonstrations, screenshot feedback, and peer review give each AI interaction evidence of input, judgment, revision, and verification.
Portfolio strategy card
- Positioning and audience
- Structure and priority work
- Scope and exclusions
Design and AI collaboration kit
- Strategy brief
- Visual and component rules
- Prompt templates and task list
Agent delegation record
- Task and context
- Plan review and revision
- Files and runtime inspection
Multimodal UI revision
- Locate issues with screenshots
- Separate current and target states
- Set acceptance criteria
Testing and peer review
- Exchange portfolio reviews
- Record visual/runtime issues
- Prioritize and revise
Teaching methods
All 16 sessions advance the same portfolio.
Templates and checklists reduce early cognitive load.
Show task definition, revision, errors, and verification end to end.
Compare vague requests with structured context.
Evaluate definition, decisions, revisions, and verification.
05
Assessment
Four reviews connect strategy, design, development, and launch
Each stage has inspectable deliverables, preventing a final website from hiding the absence of process evidence.
- 01Strategy and visual direction
Positioning, content list, sitemap, wireframes, visual design
Content, structure, and direction - 02Page prototype V0
Homepage, core pages, components, and AI collaboration record
Structure and visual fidelity - 03Working website V2
Runtime, interactions, responsive checks, and fix record
Primary path usability - 04Final website V3
Live website, tests, presentation, and reflection
Quality and iteration evidence
Scoring structure
The course prioritizes a complete loop of content strategy, visual expression, implementation, testing, and revision over the amount of code produced.
06
Teaching results
Move from “let AI generate it” to “define, inspect, and improve”
The course produced a reusable 64-hour project path, assessment system, teaching assets, and documented implementation results.
students participated
completed portfolios
completion rate
selected cases
entered portfolios
- 01Strategy
- 02Design
- 03Build
- 04Test
- 05Launch
Reusable teaching assets
- Portfolio strategy template
- Web visual specification
- Structured prompt template
- Development task list
- Issue-resolution record
- Peer-test record
- Assessment rubric
Course summary