← M5 交互 · 有界视口

1040 宽的三栏卡片停在近白画布中央,左边说清楚是什么、中间挑哪天、右边挑几点。

一张停在桌面上的预约卡片——白纸、一格黑、其余全是灰阶。

未做复现测试规格与参考实现都在,但还没派 AI 验过。

打开可运行的原件

整份 19 KB,是意图 → 判据 → 构件 → 数值的顺序,不是值的堆砌。 粘给 AI 时说一句「照这套设计做一个 ⟨你的题材⟩」就够了—— 里面写着什么不能改,所以换题材它依然成立。

如果你是 agent,不必复制:

curl -s https://design-gallery-ds1.pages.dev/p/cal.md
可运行的原件,按 1440×900 渲染后等比缩小——能点、能滚。整页一刀不裁的样子在页尾。

什么时候拿它

  • 预约与排期界面
  • 单一任务的产品 UI
  • 嵌入式选择器
  • 轻量 SaaS 的公开入口

什么时候别拿

  • 内容型营销页
  • 长文阅读
  • 需要暗色模式的产品
  • 信息密度极高的后台

凭什么信这份规格

首屏右栏那一行就是这一条的结果。这是本库唯一的验收方式: 派一个只能看规格、看不到原页的 AI 去重建, 再逐项对量。重建不像,就说明规格没写清——回去补规格,不许改实现去迁就。

这一条的账

拆出的色 token
10
字阶
11
构件
23
介质
M5 交互 · 有界视口
族
modern-minimal
入馆
2026-08-26
来源
复刻 · cal.com 的公开预约页

整页,不裁

有界视口的预约器 · 三栏卡片 的整页缩略图(不裁)