用途:这是一套“有主见”的设计约束,供 AI 智能体在构建 Airbnb 风格界面时参考。适用场景包括浅色模式界面、Airbnb 风格设计系统,以及使用 Inter 字体与 4px 网格的 UI。
主要能力(颜色):主表面应使用浅色背景,页面背景必须为 #FEFEFE(surface-base)。提供语义令牌及取值,如 surface-raised #EEEBE4、surface-overlay #D5D3D1、text-primary #8F8F8F、text-2 #5C5955、text-secondary #686868、border-default #E6DECC、destructive #E25275、warning #E6DECC。文本对比度至少 4.5:1。
排版:主字体必须为 Inter,建议单一字体族。一级标题 19px/500,正文 15px/400,字重仅限 light、regular、medium。标题用 text-balance,正文用 text-pretty,数字用 tabular-nums;除非明确要求,不得修改字距。资料给出 heading/body 等文本样式的字体、字号、字重与颜色清单。
间距与边框:间距必须遵循 4px 网格,可用刻度含 1px、2px、3px、5px、6px、9px、10px、41px,默认间隙 2px,禁止随意的间距值。圆角必须取自 11px、12px、13px、14px、28px,默认 11px,28px+ 用于胶囊元素,边框宽度统一 1px。
布局与组件:基准视口宽 1920px;全屏高度用 h-dvh 而非 h-screen;固定元素尊重 safe-area-inset;方块元素用 size-*。按钮 Ghost 变体为透明背景、文字 #5C5955、无边框。输入框高度为 0px。
交互状态:聚焦必须有 2px accent 色(#5E6AD2)外轮廓与 2px outline-offset,不得移除聚焦指示。主按钮悬停背景提亮 10%,次按钮与列表项悬停用 #EEEBE4。禁用态 opacity 0.5 且 cursor: not-allowed。破坏性操作使用 AlertDialog,加载用结构骨架,错误就近展示,禁止阻止粘贴,图标按钮需 aria-label。
动画与性能:除非明确要求不加动画;只动画 transform 与 opacity,不动画布局属性;入场用 ease-out,交互反馈不超过 200ms,尊重 prefers-reduced-motion。不动画大面积 blur/backdrop-filter,will-change 仅在动画进行时使用,不用 useEffect 表达渲染逻辑。
限制:以上为约束性规范,具体实现框架、安装与集成方式资料暂未提供。