摘要

在软件开发领域，依据设计图纸编写代码注释以构建网站与移动应用是常见任务，但针对特定界面进行代码注释开发耗时费力。鉴于部分网页网络结构单一、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