Lesson 10A / AI + UX
AI-Assisted Design Workflows
Use AI to explore flows, critique interface decisions, and turn app design ideas into accessible, responsive front-end plans without outsourcing judgment.
Course Role
Studio Support
Best during work sessions, critique, debugging, project planning, or final polish.
Teacher Notes / In-Class Use
Demo Live
- Start with a weak prompt, then revise it live by adding audience, constraints, states, and accessibility criteria.
- Show students how the better prompt produces output that is easier to critique and adapt.
Try In Class
- Have students run the AI flow review activity on one app idea, wireframe, or current project page.
- Ask students to highlight what they accepted, rejected, and changed after reading the AI response.
Submit Or Check
- Students should submit the final prompt, the revised screen or flow plan, an AI use note, and a short reflection on their decisions.
- The final plan should include important UI states and a semantic HTML outline.
Watch For
- Students treating AI output as finished work instead of critique material.
- Prompts that ask for visual decoration before the user goal, content, and structure are clear.
Learning Goals
- Use AI to clarify users, goals, constraints, screens, and interface states.
- Write prompts that include audience, task, context, constraints, output format, and review criteria.
- Critique AI-generated flows, copy, wireframes, and code outlines before using them.
- Translate app design decisions into semantic, accessible, responsive implementation plans.
AI Is A Design Partner, Not The Designer
AI can help you get unstuck, generate options, and notice missing parts of a user experience. It cannot know your audience, verify your research, or decide what belongs in the final project.
In this class, the useful question is not "Can AI make this for me?" The useful question is "Can AI help me think more clearly about the experience I am responsible for designing and building?"
- Use AI for first drafts, alternatives, critique questions, screen inventories, and implementation planning.
- Keep the final judgment with the designer: you choose what fits the audience, assignment, accessibility requirements, and project scope.
- Treat AI output like a classmate suggestion: useful enough to discuss, never automatically correct.
Where AI Fits In The Design Process
| Moment | Useful AI Support | Designer Responsibility |
|---|---|---|
| Problem framing | Restate the audience, goal, and constraints in plain language. | Confirm the problem is real and relevant. |
| Flow planning | List screens, tasks, entry points, and possible edge cases. | Choose the smallest flow that serves the assignment. |
| Interface states | Suggest empty, loading, error, success, disabled, and focus states. | Decide which states the user actually needs. |
| Content design | Draft labels, button text, help text, and error messages. | Revise for tone, clarity, accuracy, and inclusion. |
| Front-end planning | Create a semantic HTML outline and responsive CSS strategy. | Build, test, and debug the final implementation. |
| Critique | Ask questions about hierarchy, accessibility, assumptions, and missing feedback. | Act on the critique with visible revisions. |
Weak Prompt vs. Useful Prompt
A weak prompt asks for an answer without context. A useful prompt gives AI enough information to respond in a way you can evaluate.
| Weak Prompt | Useful Prompt |
|---|---|
| Make me an app screen for a campus event app. | Create a mobile-first event details screen for LSU students. Include the user goal, required content, primary action, empty and error states, accessibility concerns, and a semantic HTML outline. Do not write final visual styles yet. |
| Make this look better. | Review this homepage concept for hierarchy, clarity, responsive behavior, and accessibility. Give me five specific improvements, explain why each helps the audience, and avoid adding new features. |
| Write my code. | Help me plan the HTML structure for a card grid with project titles, images, descriptions, and links. Use semantic elements and explain what CSS layout approach would fit best. |
Prompt Ingredients
| Ingredient | What To Include |
|---|---|
| Audience | Who the interface serves and what they already know. |
| Goal | The task the user needs to complete. |
| Context | Project type, class assignment, device expectations, and available content. |
| Constraints | Accessibility needs, timeline, required technologies, brand tone, or scope limits. |
| Output format | A list, table, screen inventory, critique, HTML outline, or revision plan. |
| Review criteria | What makes the answer useful, complete, or class-ready. |
A Five-Step Workflow
- Frame the problem: write the audience, task, project goal, and constraints before asking AI for help.
- Generate options: ask for several possible flows, page structures, or interface states.
- Apply constraints: narrow the options by time, assignment requirements, accessibility, and technical skill level.
- Critique the output: ask what assumptions it made, what is missing, and what could confuse users.
- Translate to code: turn the chosen direction into semantic HTML, reusable CSS, and tested interaction states.
Critique Questions To Ask AI
- What user goal does this screen or page support?
- What assumptions are being made about the audience?
- What important state is missing: empty, loading, error, success, disabled, hover, focus, or active?
- Can the structure still make sense without color, images, or animation?
- Are labels, headings, buttons, links, and form errors clear out of context?
- What would break or feel cramped on a small screen?
- What part of this suggestion should I reject because it adds too much complexity?
Class Activity: AI Flow Review
Use this activity when moving from an app idea or rough wireframe into a buildable web interface. The goal is to improve the plan before writing too much code.
- Choose one app idea, portfolio feature, or existing wireframe.
- Ask AI for a screen inventory and one primary user flow.
- Revise the prompt by adding audience, constraints, required content, and accessibility concerns.
- Ask for missing UI states and feedback messages.
- Ask for a semantic HTML outline for the most important screen.
- Mark what you accept, what you reject, and why.
What Not To Do
- Do not paste final AI output into a project without reviewing and revising it.
- Do not ask for visual polish before the user goal, content, and structure are clear.
- Do not use AI to invent research, quotes, facts, or user needs.
- Do not paste private information, student data, passwords, or unpublished client details into AI tools.
- Do not skip accessibility testing because the AI response mentioned accessibility.
- Do not keep code you cannot explain, debug, or adapt.
AI Use Disclosure
When AI meaningfully shapes a project, document the role it played. This is not about apologizing for using a tool. It is about showing judgment, authorship, and accountability.
- Name the tool or type of tool used.
- Summarize the prompt or task you gave it.
- Identify what you accepted, revised, or rejected.
- Explain what you verified through your own testing, research, or class requirements.
- Describe how the final decision changed because of your judgment.
Submission Checklist
- Your prompt includes audience, goal, context, constraints, output format, and review criteria.
- You can explain at least two AI suggestions you accepted and why.
- You can explain at least one AI suggestion you rejected and why.
- You disclose how AI was used and what you verified yourself.
- Your final plan includes important interface states and accessibility considerations.
- Your HTML outline uses semantic elements before visual styling decisions.
- Your project still reflects your decisions, not only the AI response.
Checkpoint
Before moving on, make sure these feel true.
- I can write a prompt that includes audience, goal, context, constraints, output format, and review criteria.
- I can critique AI output before using it in a project.
- I can disclose how AI was used and what I verified myself.
- I can turn an app design idea into a semantic, accessible, responsive implementation plan.
Project Connection
This lesson supports current class projects.
Project 03 Interactive Web Experience Design and build a creative interactive web-based experience that uses motion, interaction, and visual design to communicate a mood, story, or concept. Project 04 Interactive Portfolio Create a multi-page portfolio website that showcases your design skills and programming ability through responsive layout, strong presentation, and at least one interactive element.