AI Coding设计术语：布局与排版

在AI辅助设计（Vibe Coding）中，开发者常因使用“高级感”、“眼前一亮”等模糊词汇，导致AI难以准确理解设计意图，页面效果往往不尽人意。这并非AI能力不足，而是由于沟通策略的“玄学抽卡”问题。 究其原因，大语言模型在预训练和强化学习阶段主要基于海量代码数据，对英文专业术语的语义锚点远强于中文，且中文语义信息熵高易产生歧义，导致与AI Agent的对齐困难。为解决这一痛点，作者计划长期整理一份设计术语速查表，以提升与AI Agent的沟通效率。 该系列术语指南将涵盖视觉设计的多个方面，包括文字排版（Typography）、色彩系统（Color system）、栅格与布局（Grid & Layout）、图标系统（Iconography）、间距与图像（Spacing & Imagery）以及动效与交互（Motion & Interaction）。 本文聚焦布局与排版。布局处理内容在页面中的位置关系，决定导航、正文宽度、按钮间距以及屏幕缩放时的内容调整策略。栅格作为布局的参考线，响应式设计是布局适应不同屏幕的方式，而前端布局工程则将这些规则落实到浏览器中。理解布局、栅格和响应式三者之间的关系，对于实现页面稳定性及在不同设备上的良好表现至关重要。