设计
制作并验证响应式界面原型
以内容为先的界面原型，在代表性的视口尺寸、输入方式与内容条件下仍可用。
流程
按这个顺序做。
- 识别主要用户任务、内容层级、支持的设备类别、浏览器约束和无障碍要求。
- 先做窄而线性的布局和语义结构，再定义弹性网格、流体媒体和内在尺寸，然后才加断点。
- 在内容和控件失效处添加断点，而不是照抄设备型号宽度。
- 用短长内容、本地化扩展、错误、空数据、缩放以及指针和键盘输入，原型化关键状态。
- 在有代表性的视口和可用真机上测试重排、可读文本、触控目标、焦点顺序、性能和方向变化。
- 记录响应规则与例外，收集干系人和用户反馈，修订后提供可实现状态和验收检查。
先准备
猫会向你要的输入。
- 用户旅程与内容
- 支持的浏览器与设备范围
- 品牌或设计系统约束
- 原型工具或前端环境
路由器 + 一份 playbook
先路由。只选一份。
Cat Paw 每次任务只加载一份 playbook，不合并多份。先走这个路由器；其余路径是此 workflow 可检查的候选。
- 路由器：
design-pack skills/design/emilkowalski/prototype/SKILL.mdskills/design/emilkowalski/mobile-native/SKILL.mdskills/design/ui-skills/baseline-ui/SKILL.md
界限
界限跟着提示一起走。
- 不要只为命名设备截图设计；要测试中间宽度和内容压力。
- 视觉顺序变化时，保持语义顺序和键盘行为。
- 不要仅为塞进小屏而隐藏必要内容或操作。
完成代表
一个可核对的终点。
关键任务在代表性和中间宽度下可用，缩放或重排不丢失必要内容，键盘和触控可用，响应规则和已测状态已记录。
来源
这个流程从哪来。
- web.dev/articles/responsive-web-design-basics
- web.dev/learn/design/
- developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
来源确立 workflow 的模式。如有 Reddit 或社区帖子，视为实务轶事，不是普遍事实。
