- 文献综述（或调研报告）：
目前有许多优秀的前端开发框架，前端开发框架是指一系列产品化的HTML/CSS/JavaScript组件的集合。Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，是目前最流行应用非常广泛的前端开发框架。HTML是内容，CSS是表现形式，JavaScript是页面行为[1]。
Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。除此之外，Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机的屏幕大小，IE、Chrome、Firefox等主流浏览器都支持Bootstrap[2]。
Bootstrap框架为用户提供了丰富的预定义样式表，包括基础样式、颜色样式等，用户还可以对这些预定义样式进行按需修改，令设计更加简单灵活。Bootstrap框架提供xs、sm、md、lg四种样式前缀，不仅可以定义页面和各板块在终端中的显示效果，而且可以定义页面中大部分构件的样式[3]。
栅格系统本质上是一种可以数学描述的界面设计方法，能够指导网页元素的布局和信息内容的组织传达，有效提升网页产品的用户体验并保证网页开发过程的规范性，不断应用于新兴信息媒介的设计中，对页面设计具有重要意义。栅格系统方法起源于传统印刷出版物设计中的几何网格，进入信息时代，栅格方法并未随着时间流逝变得过时，反而更加广泛地被应用于设计领域。在平面设计中网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构；在网页设计中，它是一种用于快速创建一致的布局和有效地使用HTML和CSS的方法[4]。栅格系统通过一系列行（row）与列（column）的组合来创建页面布局，是一种清晰工整的设计风格。
科学技术在各个领域都发展的十分迅速，其中人工智能也取得了巨大的进步，而人工智能AlphaGd的出现更是严重挑战了人工设计师和传统的平面设计工作，在平面设计过程中应用新技术能够起到辅助和促进作用[5]。杨绪勇、梅涛[6]等将人工智能技术应用到图文排版设计中，将版式布局、颜色主题、视觉权重、设计原则等知识经验在统一的框架内进行数学化的描述，并构建基于主题的设计模板库，在用户输入主题与文本语句后实现图文内容的自动设计[7]。
研究介绍了用于展示信息的自动布局技术。在基于约束的自动化布局系统中，最具代表性和最有效的布局时基于自适应网格的布局，许多流行的自动编辑工具都支持基于网格的布局模板[8]。对于不同的主题，在以栅格系统为底图的“画布”上，可以从整体角度实现对视觉权重、字体大小、尺寸限制等设计知识的数学描述。栅格系统有基于固定间隔的栅格系统、基于比例的栅格系统以及等宽度栅格系统[9]。
计算美学是人工智能、美学、心理学等学科发展到一定程度时出现的新兴研究方向，其目的在于使计算机能够具有感觉美、认识美、评价美的能力。美学评价一般分为主观美学评价和客观美学评价两类，后者依据模型给出一系列量化标准来模拟人类的主观感知[10]，一般来说，计算美学就是利用计算方法来客观表达美学。它使计算机能够评价美丑，广泛应用于摄影、书法、网页设计、平面设计、工业设计等诸多领域[11]。
区别于传统的关注清晰度、分辨率的图像质量评价领域，计算美学更多地将图像质量评价和优化的焦点从底层特征转向高层的美学角度。目前，主流图像处理的函数库有两个：Matlab和OpenCV[12]。
美学计算的基础是人类审美的客观性，审美研究领域的相关成果表明，人类审美具有一定客观性，或者至少存在超越文化、性别和教育影响的美学因素。美感计算的首要难点是，美感是一个主观指标，这种主观量难以描述和测量。因此需要将这种主观的指标拨开，寻找内在的客观指标[13]。
Balance、Equilibrium、Symmetry与重心有关（可将每个方块区域看作由面积转化而来的有质量的物体），这三个参数的大小取决于界面重心与整个幅面中心点的偏移量，偏移的多则更不平衡更不对称。Unity、Proportion、Rhythm等表达的是元素的形状、面积是否均匀，与幅面的形状是否和谐，分布是否整齐均匀。在所提出的数学模型中，美度最高时上述指标能够取到最大值为1[14]。
