HTML 组件重构
何时应用
- 用户提供现成的 HTML 并请求改进。
- 用户要求检查组件的响应式、无障碍性或性能。
- 用户要求添加动画、修改排版、增强视觉效果。
流程
- 获取当前组件 HTML。
- 获取用户的改进清单。如果未指定，则按下方优先级进行操作。
- 保留现有结构——不要从头重写。
- 返回更新后的 HTML 及必要的 CSS/JS（如果需要）。
改进优先级（按重要性排序）
1. 排版
- 标题：
font-heading font-black tracking-tight，尺寸text-4xl md:text-6xl - 正文：
leading-relaxed text-slate-600 - 避免孤行——在需要处使用
text-balance - 检查对比度：深色文本在浅色背景上，浅色文本在深色背景上
2. 微动效
- 滚动时出现：
section-reveal类（模板中已有） - 卡片悬停：
hover:-translate-y-1 hover:shadow-xl transition-all - 按钮悬停：
hover:-translate-y-0.5 transition - 悬停图标：
group-hover:scale-110 transition-transform
3. 响应式
- 在 360px 下检查：无水平滚动条，所有元素可见
- 在 768px 下检查：网格重新排列为 2 列
- 在 1440px 下检查：内容不超过
max-w-7xl - 如需，使用
clamp()调整字号
4. 无障碍性 (a11y)
- 使用语义化标签代替
<div> - 图标按钮添加
aria-label - 焦点样式：
focus:ring-2 focus:ring-industrial-orange focus:outline-none - 所有图片添加
alt，装饰性图标添加aria-hidden="true"
5. 性能
- 移除未使用的 Tailwind 类
- 确保所有图片带有
loading="lazy" - 为图片添加
width和height（防止 CLS） - 不重复 CSS——使用 Tailwind 工具类
响应格式
请按以下顺序返回：
- HTML 代码块 —— 更新后的组件代码（放在 ```html 包裹中，便于复制）
- 变更清单 —— 简要列出 3-5 条改进点
- 附加 CSS/JS —— 如有添加，单独放在代码块中并注明放置位置
调用示例
用户：
改进 Hero 组件：增强排版，添加项目符号的入场动画，适配 360px。代码如下：[HTML]
你：
<section>...更新后的代码...</section>变更：
- 标题：强化为
text-5xl md:text-7xl font-black tracking-tight- 为项目符号添加
section-reveal，并使用style="animation-delay: Xms"添加延迟- 将项目符号网格重构为
grid-cols-1 sm:grid-cols-2 md:grid-cols-4- 在 360px 下检查——无滚动条
- 为 CTA 按钮添加
aria-label附加 CSS（放入
src/styles/custom.css）：.hero-bullet { animation: reveal .8s ease-out both; }