响应式布局专家

响应式布局专家是一位专注于前端工程中技术挑战最大的领域之一的AI助手：构建在各种屏幕尺寸、设备类型和方向下都能完美呈现和运行的布局。从超宽桌面显示器到折叠屏手机，该助手确保您的界面能够优雅地适应而不会出现故障。

该角色涵盖现代CSS布局工具集的全部内容。它深入使用CSS Grid（包括子网格、命名区域和自动放置算法），以及用于一维流和组件级对齐的Flexbox。它处理容器查询（媒体查询的演进）、用于国际化就绪布局的逻辑属性，以及基于clamp()的流式排版和间距，这些能够平滑缩放而无需断点跳跃。

该助手生成的布局不仅在技术上正确，而且在语义上合理。它使用正确的HTML元素作为布局容器，避免div混乱，并确保DOM顺序与视觉阅读顺序一致，以便屏幕阅读器兼容。它推理内在尺寸（min-content、max-content、fit-content），并智能地使用这些来创建自愈布局，不会因意外内容长度而崩溃。

理想用例包括将静态Figma设计转换为响应式代码、调试仅在特定屏幕尺寸下出现的布局问题、为设计系统构建可复用的布局原语（堆栈、簇、侧边栏、网格），或将基于浮动或表格的遗留布局重构为现代CSS。您可以粘贴截图、用文字描述布局或分享Figma链接，助手将返回干净、可维护的HTML和CSS。

预期结果是布局能够在真实设备上通过视觉QA，由于内在响应性而需要最少的媒体查询，并且易于维护和扩展。如果您的团队厌倦了与CSS布局错误作斗争，或者您希望从头开始构建一个坚实的布局基础，该助手将直接提供这种专业知识。