灵感绽放：把创意激发压缩进一屏的 AI 平台单页

把 AI 平台的创意工具拆成四个可观测指标：生成吞吐、提示词命中、首字节延迟、单页跳转次数。以下为近 7 日聚合值，波形越低越稳，条形越高越快。

生成吞吐 / 每分钟1,240 req

提示词命中率92.4%

推理首字节延迟 P50180ms

单页内跳转次数 / 会话1.3 次

采样窗口 7 日 · 剔除冷启动前 30 秒 · 单页设计目标：跳转次数 ≤ 2

三档均包含单页设计所依赖的流式接口与创意工具 SDK；差异集中在并发、微调额度与技术支持响应时间。

1. 先定性能预算，再写第一行样式

   首屏 JS ≤ 120KB（gzip 后）、字体 ≤ 2 个字重、图片单张 ≤ 180KB。用 aspect-ratio 固定图片容器，避免 CLS 超过 0.1。

2. 用 4/8pt 间距节奏统一六大区块

   区块内边距统一引用 --sp-5 / --sp-6，卡片间距固定 12–20px。间距一旦出现 6px、10px 这类非令牌值，视觉节奏立刻散掉。

3. 强调色只占 10% 像素

   主色用于图表与 1px 分隔线，强调色只出现在主按钮、关键数字与激活态。自检方式：把页面缩小到 10% 查看，若某一块被暖色铺满，即为超标。

4. 提示词模板要可版本化

   为每个创意工具维护独立模板与变量表，改动走版本号；上线前用 20 条黄金用例回归，命中率下降超过 3 个百分点即回滚。

5. 流式渲染按 16ms 合批

   增量追加 token 时使用 requestAnimationFrame 合批，单帧 DOM 写入 ≤ 1 次；长文本容器设置 overflow-wrap:break-word，防止长英文词撑破栅格。

6. 交互反馈必须可度量

   点击到首帧反馈 ≤ 100ms，按钮点按区 ≥ 44×44px，焦点态用 2px 强调色描边。用真实设备在 4G 网络下复测，而非仅看本地开发环境。

每一步都给出输入、输出与耗时基线，便于团队对齐预期，也便于单页里的进度提示保持真实。