先描述交互行为，再在可运行的页面中体验。使用 OpenDesign 配合编程智能体，根据清晰的需求构建标签页、筛选器、对比功能或叙事式交互。标记需要修改的状态，调整支持的 HTML 细节，并保留生成的逻辑以供测试。
品牌化前端 · 真实文件 · 继续使用你的编程智能体
响应式前端，通过控件、状态、反馈和动效解释产品，而非仅作装饰。
探索演示
“一个交互式产品故事，包含可筛选的项目画廊、前后对比、与滚动关联的说明、键盘控件，以及减少动态效果时的替代方案。”
可见的页面布局应说明用户要完成的任务，同时让输入、反馈、替代方案和无障碍行为都能在前端中检查。
这个气候数据示意页面展示了对比、时间线和筛选器如何辅助叙事。图片展示的是视觉方向，并非经过测试的交互。使用编程智能体工作流实现控件，在可运行的预览中试用，并针对行为异常的状态提供反馈。
向编程智能体描述控件的输入和状态，试用可运行的结果；当行为与需求不符时，提供具体位置的反馈。
可操作性提示与强调
不让任何含义只依赖悬停状态焦点位置清晰可见，操作明确
操作顺序、目标和无障碍名称进度提示与恢复方式
真实数据与故障处理内容与控件保持一致
核心功能不依赖动画每种交互都应从访客需要理解或完成的事情出发。
说明访客想要理解或完成什么，以及交互能如何提供帮助。
列出控件、初始状态、状态转换、反馈、键盘操作、触屏操作和替代方案。
需要编辑文件时，使用本地编程智能体。明确提出初始状态、输入、可见响应和替代方案，然后在可运行的预览中试用生成的控件。
标记受影响区域，并向智能体说明预期行为。使用直接 HTML 编辑调整视觉细节，然后重新测试键盘操作、触屏操作、动效设置和边缘情况。
检查已标记控件的默认、加载、成功、空内容和错误状态。确保控件可通过键盘操作、焦点清晰可见，并提供减少动态效果的方案。说明哪些行为仍需真实服务支持。
你可以检查和测试实际实现，而不必从静态模型图中猜测交互行为。
定义导航、筛选器、标签页、折叠面板、对比、预览及其他控件的可见状态。
决定可用空间变化时，哪些内容会重排、简化、改为滚动显示或隐藏。
将状态逻辑和样式保存在开发者可检查、测量并为生产环境加固的文件中。
截图无法告诉你筛选器是否会正确重置，或折叠面板是否支持键盘操作。OpenDesign 会将生成的网站保留为可运行的预览，因此你可以根据实际试用的行为来指导智能体修改，而不是只对着静态画面调整。
“一个交互式产品故事，包含可筛选的项目画廊、前后对比、与滚动关联的说明、键盘控件，以及减少动态效果时的替代方案。”
试用可运行的前端，并将实际响应与所请求的交互进行对比。
标记上下文并向智能体说明预期的状态转换，而不是只描述故障却不指出位置。
让编程智能体修改状态逻辑；使用支持的 HTML 样式控件调整间距、字体和视觉反馈。
检查生成的文件、添加检查，并在视觉审查后通过工程工作流修改实现。
浏览器端行为不等于生产环境的数据服务。要求提供加载和错误状态，然后结合实际使用的 API、无障碍需求和运行环境进行验证。
交互输出仍需在真实设备、键盘和屏幕阅读器、减少动态效果设置、网络条件、生产数据以及最终应用架构下进行测试。
试用生成的控件、通过智能体调整行为，并区分视觉编辑与逻辑修改。
它可以创建前端控件、状态、状态转换、响应式行为和浏览器端交互。具体结果取决于需求，仍需测试和生产环境审查。
可以，前提是动效有助于体现层级、提供反馈或说明内容。减少动态效果或不等待动画时，核心内容仍应可用。
不包含。标签页、筛选器、预览和本地状态属于前端行为。账户、持久化、API、实时数据和数据库需要单独实现。
前端可以包含键盘控件、焦点状态、无障碍名称和减少动态效果支持，但仍需进行实际无障碍测试并修复问题。
在可运行的预览中试用，标记受影响的区域，并向能够访问文件的编程智能体说明所需的输入、状态和响应。直接编辑 HTML 可以调整视觉细节，但逻辑修改需要改动实现并测试新的行为。
