P2P: From Prompt to Prototype – Functional UI Design with LLMs and MCP

Overview

This tutorial addresses the implementation gap in Human-Computer Interaction research, defined as the discrepancy between conceptual generative design and deployment of functional, testable user interfaces. The work examines how Large Language Models and Model Context Protocol technologies can bridge design-code divergence while maintaining technical grounding and accessibility standards in functional UI prototyping.

Methods and approach

The tutorial framework leverages LLMs and MCP to establish structured workflows connecting generative design specifications to implementable user interface code. The approach emphasizes technical grounding throughout the design-to-prototype pipeline, addressing documented shortcomings in existing LLM-based code generation workflows that produce design-code misalignment and inadequate accessibility implementation.

Key Findings

The tutorial presents a methodology for converting design prompts into functional prototypes with improved alignment between conceptual specifications and executable code. The framework demonstrates capacity for maintaining technical rigor while reducing the implementation gap, with particular attention to preventing accessibility oversights commonly observed in LLM-generated interface code.

Implications

This work contributes to HCI research by providing a structured approach to addressing the implementation bottleneck that constrains translating design concepts into deployable interfaces. The integration of LLMs with MCP establishes a technical foundation for more robust design-to-code workflows that preserve accessibility requirements and design intent. The framework has potential applications in accelerating UI prototyping while maintaining quality standards across design and technical dimensions.