5 - AI-Assisted Design and Development Workflows — Topics & Learning Outcomes

Module Topics

Introduction to AI Coding Assistants in HCI

• What Are AI Coding Assistants? — AI coding assistants are software tools powered by large language models that can generate, complete, explain, and refactor code in response to natural language prompts or partial code input.
• Key Tools: Claude Code, GitHub Copilot, and Codex — Claude Code, GitHub Copilot, and OpenAI Codex represent three distinct but complementary approaches to AI-assisted development, each offering unique integration points and interaction models.
• The Role of AI in the HCI Pipeline — Within the HCI pipeline, AI assistants can contribute at multiple stages including requirements gathering, wireframing support, component generation, and usability testing scaffolding.
• Opportunities and Limitations of AI-Assisted Design — While AI coding assistants can significantly accelerate development velocity, they also introduce risks such as generating technically correct but design-inappropriate code, reinforcing common patterns over novel solutions, and producing inaccessible interfaces.

Effective Prompting Strategies for Design Tasks

• Principles of Effective Prompting — Effective prompting involves providing the AI with sufficient context about the task, the target user, the technology stack, and the desired output format to generate relevant and actionable results.
• Iterative Prompt Refinement — AI-assisted design is rarely a single-step process; effective practitioners treat initial outputs as drafts and use follow-up prompts to refine, constrain, or redirect the AI toward better solutions.
• Prompting for Accessibility and Usability — AI assistants require explicit instruction to generate code that meets accessibility standards such as WCAG 2.1, as they default to common patterns that may not be fully accessible.
• Design System Integration Through Prompting — AI assistants can be guided to produce outputs consistent with an existing design system by providing component token names, style guide excerpts, or example components as part of the prompt context.
• Avoiding Common Prompting Pitfalls — Several common mistakes reduce the quality of AI-assisted design outputs, including underspecifying context, accepting first outputs without review, and treating AI-generated code as production-ready.

AI-Accelerated Prototyping Workflows

• From Wireframe to Code with AI — AI coding assistants can dramatically reduce the time required to translate wireframes into interactive HTML, CSS, and JavaScript prototypes by generating layout scaffolding from natural language descriptions of the wireframe.
• Rapid Component Generation — One of the highest-value applications of AI in prototyping is the rapid generation of reusable UI components such as navigation bars, modal dialogs, forms, and data tables.
• Iterating on Prototypes with AI Assistance — After an initial prototype is generated, AI assistants can support rapid iteration by modifying specific components, adjusting layouts, and incorporating feedback from usability evaluations.
• Balancing Speed and Design Quality — The speed advantage of AI-assisted prototyping must be balanced against the risk of accumulating design debt, where rapid generation produces code that is difficult to maintain, extend, or align with the broader design vision.
• Integrating AI Tools into Team Workflows — When working in teams, AI coding assistants must be integrated thoughtfully to ensure consistency, shared understanding, and equitable contribution across team members.

Maintaining Design Quality in AI-Assisted Projects

• Defining Design Quality in the AI Context — Design quality in AI-assisted projects encompasses not only visual fidelity but also usability, accessibility, performance, and alignment with user needs as surfaced through the HCI research process.
• Heuristic Evaluation of AI-Generated Interfaces — Nielsen's ten usability heuristics provide a structured framework for evaluating AI-generated interface components and identifying usability issues that automated tools may miss.
• Accessibility Auditing of AI-Generated Code — AI-generated interface code frequently requires accessibility remediation, making systematic auditing with both automated tools and manual testing an essential quality assurance step.
• Code Review Practices for AI-Generated Output — AI-generated code should be subject to the same code review practices as human-authored code, with additional attention to areas where AI tools commonly introduce errors, including security, performance, and semantic correctness.
• Preserving the Designer's Voice and Intent — A critical challenge in AI-assisted design is ensuring that the final product reflects deliberate design decisions rooted in user research rather than defaulting to the generic patterns that AI tools favor.

Ethical Considerations and Professional Responsibility

• Attribution and Transparency in AI-Assisted Work — Designers and developers using AI coding assistants have a professional responsibility to be transparent about the role AI played in their work, particularly in academic, professional, and client-facing contexts.
• Bias and Representation in AI-Generated Interfaces — AI coding assistants trained on historical code and design data may reproduce biases related to cultural representation, gender, disability, and other dimensions of diversity in the interfaces they help generate.
• Intellectual Property and Licensing Concerns — AI coding assistants generate outputs derived from training data that may include proprietary or copyrighted code, raising unresolved questions about the intellectual property status of AI-generated artifacts.
• Maintaining Professional Competence — Reliance on AI coding assistants without developing foundational design and development skills can create brittle competency, where practitioners are unable to critically evaluate, debug, or extend AI-generated outputs.
• Responsible AI Use in User-Facing Products — When AI-assisted design and development produces interfaces that will be used by real people, designers bear responsibility for ensuring those interfaces are safe, trustworthy, and respectful of user autonomy.

Student Learning Outcomes

By the end of this module, students will be able to:

Course Outcomes (reference)