视觉迭代开发

我有一个需要实现的设计截图。
你能分析它并帮我创建 HTML/CSS 吗？
[附加截图]

分析这个截图并识别：
1. 主要布局结构
2. 单独的组件
3. 排版层次
4. 配色方案
5. 间距模式

基于这个设计，我应该按什么顺序实现组件？
哪些组件最复杂，需要特别注意？

这个截图显示了复杂的布局。
帮我使用 CSS Grid 和 Flexbox 实现它：
[附加截图]

我有同一设计的桌面和移动端截图。
帮我创建响应式实现：
[附加多个截图]

匹配这个截图中的排版：
1. 字体系列和粗细
2. 字体大小和行高
3. 字母间距和文本对齐
4. 层次和对比度

从这个设计中提取配色方案：
1. 主色和辅助色
2. 背景和文本颜色
3. 强调和高亮颜色
4. CSS 自定义属性设置

基于这些 UI 截图，帮我创建设计系统：
1. 提取可重用组件
2. 定义一致的间距
3. 建立颜色标记
4. 创建排版比例

基于这组截图生成样式指南：
1. 记录组件变体
2. 定义使用指南
3. 创建代码示例
4. 建立命名约定

这个截图显示了带有悬停效果的按钮。
帮我实现平滑的过渡和动画。

我有页面过渡的前后截图。
帮我创建这些状态之间的动画。

我有显示不同浏览器渲染差异的截图。
帮我修复不一致的问题：
[附加浏览器对比截图]

将这个设计截图转换为 React 组件：
1. 组件结构和 props
2. 状态管理需求
3. 事件处理
4. 样式方法（CSS modules、styled-components 等）

将这个 UI 设计实现为 Vue 组件：
1. 模板结构
2. 作用域样式
3. 组件组合
4. 响应式数据处理

从这个截图创建 Angular 组件：
1. 组件架构
2. 模板和样式
3. TypeScript 接口
4. 服务集成

我有这个设计在不同屏幕尺寸下的截图。
帮我实现移动优先的方法：
[附加移动端、平板、桌面截图]

为触摸设备优化这个设计：
1. 按钮和链接尺寸
2. 手势支持
3. 触摸反馈
4. 无障碍考虑

这个设计有很多图片和复杂布局。
帮我为移动端性能优化：
1. 图片优化策略
2. CSS 优化
3. 加载优先级
4. 渐进增强

分析这个截图的无障碍问题：
1. 颜色对比度
2. 文本可读性
3. 焦点指示器
4. 视觉层次

基于这个视觉设计，帮我实现：
1. 语义化 HTML 结构
2. ARIA 标签和角色
3. 跳转导航链接
4. 图片替代文本

设置视觉回归测试：
1. 捕获基线截图
2. 与实现进行对比
3. 识别视觉差异
4. 自动化测试管道

为这个设计创建测试策略：
1. 设备和浏览器矩阵
2. 截图对比工具
3. 自动化测试设置
4. 手动测试清单

改进设计交接流程：
1. 截图标注工具
2. 设计规范提取
3. 实现反馈循环
4. 版本控制集成

为利益相关者评审准备视觉对比：
1. 前后截图对比
2. 实现进度跟踪
3. 反馈收集系统
4. 审批工作流

确保高质量实现：
1. 语义化 HTML 结构
2. 可维护的 CSS 组织
3. 性能优化
4. 无障碍合规

记录视觉实现：
1. 组件使用示例
2. 设计决策理由
3. 浏览器支持说明
4. 维护指南

我的实现与截图不匹配。帮我调试：
1. 盒模型问题
2. 定位问题
3. Flexbox/Grid 冲突
4. Z-index 层叠

颜色/字体与设计不完全匹配：
1. 色彩空间差异
2. 字体渲染变化
3. 浏览器默认样式
4. CSS 特异性问题

响应式行为与设计不匹配：
1. 断点选择
2. 内容重排
3. 图片缩放
4. 导航适配