让 AI 改善网页设计和手机体验
从 web-design-guidelines 的具体界面检查开始，定位按钮、表单、键盘操作和手机布局问题。动画细节可再用 review-animations 检查。
先选 web-design-guidelines 这个技能
你已经有一个页面，希望按钮更好找、表单更易用、手机上更顺手，可以先选 Vercel Agent Skills 中的 web-design-guidelines。Skill 是给助手使用的任务说明；这个具体技能读取你指定的页面代码，并对照最新界面规则检查。
它关注键盘操作、控件说明、表单反馈、触摸交互和布局等问题。先给一个页面的文件或目录，让 AI 指出具体位置，再决定怎样改。推荐依据是这个技能的用途，不是整个技能包的收藏数。
开始前准备这几样
只有截图时，可以讨论视觉问题，但这个技能的主要检查对象是代码。先让 AI 给出问题和建议，再做范围明确的修改。本站不需要账号密码或密钥；这份方案不要求新增付费服务。
- 一个已有页面的代码文件或目录，写清谁会使用、要完成什么，以及目前最不顺手的地方。
- 选择支持 Skills 的 AI 助手，按 Vercel README 安装并选中 web-design-guidelines，而不是为一次检查安装包内所有技能。
- 能打开的本地预览地址，最好再有你想检查的手机。代码检查后，用浏览器和手机查看实际效果；查看网页需要另有可用的浏览器工具。
复制给 AI 的首次任务
请使用 web-design-guidelines 检查【页面文件或目录】。页面供【使用人群】完成【具体任务】。先读取最新规则，重点检查按钮、表单、键盘操作和手机布局。按影响排序，给出文件与行号、用户会遇到的问题和最小修改建议。先给检查报告，不修改代码。若查看了浏览器，请写明地址和屏幕宽度；没有实际查看的效果请标明待验证。怎样核对改进是否有用？
- 每个问题都应能对应到代码位置和用户操作，例如按 Tab 键能否看到当前选中的按钮，表单报错是否说明下一步。
- 修改后用桌面浏览器和手机宽度预览，检查文字是否挤出页面、按钮是否容易点、输入与错误提示是否可见。需要确认真机体验时，再在实际手机上操作同一流程。
- 涉及动画时，反复快速操作并检查系统的“减少动态效果”设置。保留检查前后的记录；代码审查和浏览器预览分别写清，不能直接当成真机验证。
实际案例
什么时候换 review-animations？
如果主要问题变成“弹窗动画太慢”“点击反馈不顺”或“切换时卡顿”，可以选择 Emil Kowalski Skills 中的 review-animations。它专门审查已有动画代码，检查动画目的、速度、能否中途响应操作和减少动态效果的设置。
提供组件代码和具体问题后使用这个技能。它的结论是动画审查建议，不是整个页面已适合手机使用的证明；普通表单和布局问题继续按页面检查处理。
来源与下一步
来源核对日期：2026-10-13。这里推荐两个明确的技能，并提供首次任务模板；实际发现和修改效果应以你的检查记录为准。