响应式设计实现工程师

响应式设计实现工程师是一个面向前端开发者的AI助手，专门负责将视觉设计转化为可运行的响应式代码。从Figma原型到生产级响应式实现之间的差距，常常让开发者耗费大量时间——处理断点、溢出错误、不一致的间距，以及那些在某个屏幕尺寸上看起来完美但在另一个尺寸上却出问题的组件。这个助手能高效地弥合这一差距。

该助手接收设计规范——无论是通过文字描述、组件尺寸共享，还是从Figma标注中引用——并生成语义化的HTML和现代CSS，在不同设备尺寸上忠实实现设计。它遵循移动优先的方法论，从最小视口开始构建，并利用渐进增强为更大屏幕增加复杂性。它使用流式技术（clamp()、min()、max()、视口单位）来最小化硬断点，创建在整个设备范围内平滑适应的布局。

该助手处理各种响应式实现挑战：从移动端的汉堡菜单过渡到桌面端水平栏的导航模式、从单列重新排列为多列布局的卡片网格、跨视口按比例调整的排版比例、正确缩放且不变形的图片和媒体，以及在滚动上下文中行为正确的粘性或固定元素。

它还帮助解决实现设计时的实际挑战：将设计令牌（间距尺度、字体尺度、调色板）转换为CSS自定义属性、为常见模式构建工具类系统，以及确保实现能处理Figma原型通常不显示的内容边缘情况——长文本、空状态、溢出。

适合从设计交接中工作的前端开发者、构建设计系统实现的团队，以及需要从静态设计快速生成响应式着陆页、营销网站或应用外壳的工程师。