摘要
在软件开发领域，依据设计图纸编写代码注释以构建网站与移动应用是常见任务，但针对特定界面进行代码注释开发耗时费力。鉴于部分网页网络结构单一、HTML代码注释模板相对固定且逻辑简单，手动将网页转换为HTML代码注释效率低下，自动化生成代码注释的需求愈发迫切。
本文聚焦于基于大模型的代码注释自动生成与维护工具的设计与实现，深入开展理论研究。以用户体验为核心，详细阐述产品设计的流程，依据规范要求，精心打造基于手绘草图的人工智能建站系统的用户体验设计，涵盖高、低保真界面设计以及交互设计。通过该工具，用户上传手绘草图，系统便能自动生成界面及对应的代码注释，极大提升开发效率，减轻程序员负担。同时，注重用户体验设计，确保工具操作便捷、界面友好，为用户带来流畅的使用感受。

关键词：大模型；代码注释自动生成；用户体验设计；手绘草图

Abstract
In the field of software development, writing code comments according to design drawings to build websites and mobile applications is a common task. However, developing code comments for specific interfaces is time-consuming and laborious. Given that some web pages have a single network structure, relatively fixed HTML code comment templates, and simple logic, manually converting web pages to HTML code comments is inefficient, and the demand for automated code comment generation is increasingly urgent.
This paper focuses on the design and implementation of a code comment automatic generation and maintenance tool based on large models, conducting in-depth theoretical research. With user experience as the core, it elaborates on the product design process and, in accordance with specification requirements, meticulously creates user experience designs for an AI-powered website-building system based on hand-drawn sketches, including high- and low-fidelity interface designs and interaction designs. With this tool, users can upload hand-drawn sketches, and the system will automatically generate interfaces and corresponding code comments, greatly improving development efficiency and reducing the workload of programmers. Meanwhile, it emphasizes user experience design to ensure the tool is easy to operate and has a friendly interface, providing users with a smooth experience.

Keywords: Large model; Automatic code comment generation; User experience design; Hand-drawn sketch

目 录
摘要 I
Abstract II
第1章 绪论 2
1.1 本文研究的背景 2
1.2 本文研究的意义 3
1.3 用户体验国内外现状 4
1.3.1国内用户体验现状 4
1.3.2国外用户体验现状 5
1.4 研究方法 6
第2章 理解代码注释自动生成系统 8
2.1生成对抗网络（GAN）的原理 8
2.2Pix2code代码注释生成框架 8
2.2.1视觉模型 9
2.2.2语言模型 10
2.2.3解码层 10
2.3其他深度学习代码注释自动生成系统 11
2.3.1代码注释合成系统DeepCoder 11
2.3.2Sketch2Code系统 11
2.4演练 12
2.5本章小结 13
第3章 用户体验的基础理论研究 14
3.1用户体验概述 14
3.1.1用户体验的定义 14
3.1.2用户体验要素层次 14
3.2交互设计概述 15
3.3视觉设计概述 16
3.3.1界面设计的概述 16
3.3.2ios界面设计的原则 16
3.4本章小结 17
第4章 实践与成果展示 19
4.1需求分析 19
4.2功能模块设计 19
4.3设计特点 19
4.4低保真原型的设计 19
4.5界面视觉设计 20
4.5.1首稿界面分析 20
4.5.2启动界面设计 21
4.5.3字体设计 21
4.5.4色彩设计 21
4.5.5图标设计 22
4.5.6界面布局 22
4.6 高保真界面设计方案 22
4.7本章小结 22
第5章 总结与展望 24
5.1总结 24
5.2不足与展望 24
参考文献 25