设计一个网页或流程
先阅读 web-craft。已有的 DESIGN.md 或设计系统是权威：请遵循它，不要为现有产品发明新的方向。
1. 编码前的方向（新产品和大型新界面）
简要决定并写下以下内容：
| 决策项 | 答案 |
|---|---|
| 用户与任务 | 此界面让谁的任务更简单？ |
| 优先级 | 什么内容必须被首先看到和操作？ |
| 布局组合 | 编辑流式、分栏布局、密集工作区、产品展示，还是其他？ |
| 排版 | 字体特征、字号系统、行长、每种计划语言的脚本覆盖 |
| 视觉素材 | 真实产品图片、摄影、插图、图表，还是以文字为主 |
| 界面与密度 | 边框、色调、空白、数据密度、页面节奏 |
| 动效 | 功能反馈，以及仅在产品需要时的叙事性动效 |
| 标志性细节 | 一两个支持品牌的统一细节 |
参考资料：首先是现有品牌，然后是用户提供的内容。对于新方向，选择几个合适的来源，并说明它们各自贡献了什么（密度、摄影、节奏、交互、字体）。像“现代”或“简洁”这样的形容词不是决策。不要复制 logo、文字或整个布局。新产品选项必须在布局和优先级上有所不同，而不仅仅是颜色。详情：references/direction-and-references.md、references/composition.md、references/typography.md。
2. 令牌
颜色（语义化、浅色和深色）、字体字号、间距、圆角、阴影和动效都作为令牌存放在一个位置，并映射到系统的主题中。阴影被限制：优先使用边框和表面色调，少数单层低不透明度的阴影令牌用于浮动层，深色模式中用更亮的表面代替阴影，并且不使用动画 box-shadow。详情：references/tokens-color-elevation.md。
3. 文案与层级
每段文字只做一件事。默认情况下，标题上方不要使用题注（仅用于进度、日期、父对象或法律背景；像“Premium”这样的等级标签变成功能上的徽章）。副标题仅用于范围、结果、风险或具体事实。标题级别遵循结构，而不是字号占位符不能替代标签。按钮说明其作用。详情：references/copy-hierarchy.md。
4. 状态
为每个数据面或表单构建一个状态矩阵：初始加载（布局匹配的骨架屏，延迟显示以避免闪烁，减少动效模式下静态）、空态（首次使用与无结果）、带重试的错误态（保留已有数据）、刷新态、分页错误态、提交中态、成功态、禁止态、未找到态、离线态。详情：references/states.md。
5. 表单
在失焦时校验，一旦出现错误就在变更时重新校验，异步检查需要防抖。提交时如果有错误：聚焦第一个无效字段，将其滚动到任何固定头部下方，展开包含该字段的折叠部分或步骤，并在长表单上显示错误摘要。消息说明问题所在及修复方法，位于字段旁边，并通过 aria-describedby 关联。提交按钮仅在发送期间禁用。服务器字段错误通过相同的滚动和聚焦机制作用于其字段。详情：references/forms.md。
6. 动效
在选择动效库之前，先填写动效矩阵（references/motion-matrix.md）：
- 按钮和链接：有 hover 的地方显示 hover、按下、focus-visible、加载中、禁用。
- 对话框、面板、菜单、弹出层、Toast：始终要有进入和退出动画（透明度加上小幅缩放或位移，退出动画在卸载前完成），需要焦点陷阱和返回，以及关闭逻辑。详情：
references/overlays.md。 - 列表：插入、移除和重排是可理解的。
- 图表：首次看到时有一个简短的入场动画，数据变化时过渡，超过测量数据量时不显示动画，减少动效模式下不显示动画；提示框可通过键盘操作，并有表格替代方案。详情：
references/charts.md。 - 营销叙事：有限的、针对产品的，永远不将内容隐藏在动画后面。
持续时间、缓动函数和距离来自令牌。不是每个页面都有相同的淡入渐变交错。表单或数据屏幕上没有人为延迟。减少动效模式集中处理，涵盖 CSS、动效库和视频。
7. 响应式
断点跟随内容。定义导航、筛选器、表格、固定操作、对话框和弹出层在窄屏上的行为。检查 320px 宽度、长翻译文本、200% 缩放、触摸和键盘操作。Web 对话框默认不会变成 React Native 底部面板。详情：references/responsive.md。
8. 检查结果
在浏览器中查看手机和桌面宽度、两种主题、两种语言、仅键盘操作以及减少动效模式下的结果。静态截图无法检查动效；请与之交互。
当同一系统被用于完全不同的产品时，运行 references/pilot-divergence.md 中的差异性测试。