企业官网建设流程全解析

用 Open Design 复刻 Airbnb 设计系统：Rausch 珊瑚色、Cereal VF 排版与摄影优先的完整实现指南

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design

本文基于 open-design 仓库内打包的 Airbnb 设计系统包（design-systems/airbnb/DESIGN-it.md 及其多语言版本），系统拆解这一"旅行杂志般"的消费级设计语言：单一品牌强调色 Rausch（#ff385c）、单字体家族 Airbnb Cereal VF、摄影优先的 4:3/16:9 全出血图片、标志性的圆角体系与三层叠加阴影。文章将原文档的完整规格与仓库内已编译的 tokens.css、design-tokens.json、components.manifest.json、tailwind-v4.css 相互印证，让你既能直接照搬可复制的 CSS 变量与组件配方，也能理解每个数值背后的品牌约束——最终在 Open Design 的 Agent 工作流中生成高度还原 Airbnb 质感的前端原型、落地页与详情页。

一、Airbnb 设计系统的整体气质：一本碰巧是 App 的旅行杂志

Airbnb 2026 年的设计给人的第一印象，是一本碰巧也是应用的旅行杂志：纯白画布让位于整页摄影，界面本身消失，让房源照片自由呼吸。标志性的 Rausch 珊瑚粉（#ff385c）被克制而醒目地使用：搜索 CTA、激活 tab 的下划线、主操作按钮，偶尔出现在价格或心愿单的心形上。其余的一切都严格走在灰度阶梯上，#222222承担了页面上几乎每一行文字。

这个系统最独特的身份是对内容的信任：

• 房源照片以 4:3 hero 格式呈现，配以全圆角处理；
• 分类切换通过三 tab 选择器（房源 / 体验 / 服务）完成，使用3D 渲染的立体图标（坡顶小屋、热气球、服务铃铛）——实体、可触摸、近乎玩具质感——搭配锐利的Airbnb Cereal VF标签。这是极少数让 3D 渲染与纯排版界面在无张力中共存的消费级产品；
• 最新的体验（Esperienze）产品线沿用同一套视觉语言，但卡片密度更丰富、摄影更多，预订面板居中锚定，价格固定于右侧列；
• 房源详情页（无论是房间还是体验）遵循严格的模板节奏：整页 hero 图片网格 → 悬浮的圆角预订卡片（滚动时固定）→ 服务设施 → 评价（"最受房客欢迎"奖使用居中的大号4.81评分与桂冠锁标）→ 地图 → 房东主页 → 须知信息。无论预订的是房间还是游艇之旅，节奏始终一致。

核心特征速览：

• Rausch 珊瑚粉（#ff385c）作为唯一品牌强调色，只用于主 CTA 与搜索按钮；
• 4:3 / 16:9 全出血摄影 + 14–20px 柔和圆角作为主要视觉词汇；
• 3D 渲染分类图标搭配排版化 tab——系统唯一允许插画的位置；
• 50%圆形图标按钮（返回箭头、分享、收藏、轮播箭头）遍布各处；
• Airbnb Cereal VF承载从 8px 法律注释到 28px 区块标题的所有标签——单家族系统；
• 按产品线编码颜色：Airbnb Plus（洋红#92174d）、Airbnb Luxe（深紫#460479）、Airbnb（Rausch 珊瑚）；
• "最受房客欢迎"奖锁标——居中的巨型评分数字夹在两枚桂冠之间，是全系统最具辨识度的瞬间之一；
• 固定预订面板（价格 → 日期 → 房客数），桌面端锚定右列，移动端折叠为底部固定的"预订"栏；
• 移动端底部固定导航（探索 / 心愿单 / 登录）以 Rausch 色作为激活态着色。

在仓库中，这份视觉意图被完整记录于 DESIGN.md（本文所依据的意大利语版为 DESIGN-it.md），并由 manifest.json 标注为E-Commerce & Retail类别的bundled（捆绑）来源包。

二、色板与角色：从 Rausch 到 Ink Black 的分层叙事

主色（Primario）

• Rausch（#ff385c）：品牌标志性珊瑚粉。CSS 变量--palette-bg-primary-core。用于主"预订"按钮、搜索提交按钮、激活 tab 下划线、心愿单心形填充、价格强调。是每个页面上可见度最高的单一颜色。

次级与强调色（Secondario & Accento）

• Deep Rausch（#e00b41）：饱和度更高的变体。CSS 变量--palette-bg-tertiary-core。用于按钮的按下/激活态与渐变终点。
• Plus Magenta（#92174d）：CSS 变量--palette-bg-primary-plus。Airbnb Plus 产品线（精选高端房源）的品牌色。
• Luxe Purple（#460479）：CSS 变量--palette-bg-primary-luxe。Airbnb Luxe 产品线（别墅/庄园租赁）的品牌色。
• Info Blue（#428bff）：CSS 变量--palette-text-legal。用于法律/信息类链接（条款、隐私、须知）——系统中唯一非单色的链接色。

表面与背景（Superficie & Sfondo）

• Canvas White（#ffffff）：默认页面背景。每张卡片、每个容器、每个详情页都从这里开始。
• Soft Cloud（#f7f7f7）：细薄的次级表面色调，用于页脚背景、地图视图容器，以及所有希望从主白色中退后的"其余内容"区块。
• Hairline Gray（#dddddd）：无处不在的 1px 边框色——分隔卡片、服务行、评价面板、页脚列。布局系统的"主力军"。

中性色与文本（Neutri & Testo）

语义色与强调（Semantici & Accento）

• Error Red（#c13515）：CSS 变量--palette-text-primary-error。表单校验错误、破坏性操作警告。
• Deep Error（#b32505）：CSS 变量--palette-text-secondary-error-hover。错误状态的按下/激活变体。
• Translucent Black（rgba(0, 0, 0, 0.24)）：CSS 变量--palette-text-material-disabled。Material 风格禁用的标签。

渐变系统

Airbnb 品牌渐变出现得极为克制，通常只在 wordmark 与品牌化搜索按钮的瞬间出现：

linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)

这段珊瑚 → 洋红的过渡就是"品牌时刻"——绝不用作完整表面，只作为窄胶囊填充或 logo 处理。

仓库中的 Token 绑定

在仓库已编译的 tokens.css 中，这套色板被映射为语义化 CSS 变量（:root块内）：

• --bg: #ffffff与--surface: #ffffff同时解析为 Canvas White——Airbnb 拒绝页面与卡片之间的色调台阶，卡片靠 Hairline Gray 边框与内部摄影获得边界（tokens.css 中的#Bind 1注释）；
• --surface-warm: #f7f7f7绑定 Soft Cloud，作为品牌命名的次级表面层级（#Bind 2）；
• --accent: #ff385c、--accent-hover: #e31c5f（Rausch 与 Deep Rausch 之间手工挑选的中间值）、--accent-active: #e00b41（Deep Rausch，文档 §2 的按下态值）——hover/active 是手工绑定而非公式推导，因为color-mix会过冲饱和度、欠冲品牌渐变终点（#Bind 3）；
• --success: #008a05、--warn: #c47700、--danger: #c13515：错误红来自文档 §2，成功与警告色为手工挑选的去饱和值，避免在白色画布上与 Rausch 竞争。

值得注意的是，Plus Magenta 与 Luxe Purple 被刻意留在产品线专属组件内联使用，没有提升为共享强调槽位——防止非产品线表面误用（见 tokens.css 头部注释）。这与 design-tokens.json 中 56 个 token、评分 100、等级excellent的契约报告一致，报告还按 A1-identity（8）、B-slot（4）、A2（26）、A1-structure（18）四层统计了 token 分布。

三、排版规则：单家族、多字重的杂志式排版

字体家族

• Airbnb Cereal VF（唯一主字体）：承载整个系统的专有可变权重无衬线字体。回退链（按序）：Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif。
• 提取的 token 中观察到的字重：500、600、700。没有 400-regular——系统的"正文"字重是 500，让每个文本块拥有一种略带厚度的密度，读起来自信而刻意。
• OpenType 特性：salt（风格化替代）用于 11px 与 14px 字重 600 的紧凑标签——很可能用于更窄的数字与特殊字符成形。未观察到连字或分数特性。

层级表（完整继承）

排版原则

• 一个家族，多种字重。Airbnb Cereal VF 从 8px 法律文本到 28px 页面标题一手包办——视觉身份来自家族本身，而非混排字体。
• 500 是新的 400。系统"常规"字重是 500，让每个段落比网页默认值略多一分扎实的质感。
• 仅展示型文字使用负字距。20px 及以上的标题将字距压缩 -0.18 至 -0.44px 以获得雕塑感；正文保持 0 字距以保证可读性。
• 标题行高紧凑、正文行高宽松。展示型文字运行在 1.18–1.25（紧凑）；正文与说明放开到 1.43 以保障长文阅读的舒适度。
• 除 8px 外不使用全大写。系统中唯一的全大写变换是 8px 上标——其余地方，句首大写配合微妙的字重变化完成工作。

在仓库 token 中，这套层级被压缩为--text-xs: 12px到--text-4xl: 56px的八级字号刻度，其中 44px/56px 高层级专用于"最受房客欢迎"评分锁标（44–56px）与罕见的 hero 数字；同时绑定--leading-body: 1.43、--leading-tight: 1.2、--tracking-display: -0.02em（仅在 ≥20px 时应用）——tokens.css 注释明确说明"双模式节奏"正是 Airbnb 页面呈现旅行杂志而非工具应用质感的原因（#Bind 7）。

字体替代说明

Airbnb Cereal VF 是专有字体。最接近的开源替代是Circular Std（仍为商业字体）或Inter（免费，Google Fonts）并在展示尺寸下将字距缩减 -0.01em。若需严格还原品牌，文档记录的回退链（Circular, -apple-system, system-ui）在 macOS/iOS 上渲染效果可接受——system-ui会解析为比例相近的 San Francisco。

四、组件样式：从按钮到预订面板的完整规格

按钮

主 CTA（"预订"、"搜索"、"添加日期"）

• 背景：Rausch#ff385c；文本：Canvas White#ffffff，Airbnb Cereal 500，16px；
• 内边距：约 14px 纵向、24px 横向；圆角：8px（矩形）或 50%（圆形图标变体）；无边框；
• 激活/按下：transform: scale(0.92)加上 2px Ink Black 焦点环0 0 0 2px #222222。

次级按钮（"成为房东"、带边框的三级操作）

• 背景#ffffff；文本 Ink Black#222222，Airbnb Cereal 500，14–16px；
• 内边距 10px 16px；圆角 20px（胶囊）或 8px（矩形）；边框 1px solid Hairline Gray#dddddd。

纯图标圆形按钮（返回、分享、收藏、轮播控制）

• 背景#f2f2f2（略暗的白）或白色加 1px 半透明黑边框；图标为#222222描边，16–20px；
• 直径 32–44px；圆角 50%；
• 激活/按下：transform: scale(0.92)；4px 细白环0 0 0 4px rgb(255,255,255)用于从彩色摄影背景中分离。

禁用按钮：背景#f2f2f2、文本 Stone Gray#c1c1c1、不透明度 0.5。

胶囊 Tab 按钮（"房源 / 体验 / 服务"分类选择器）

• 背景透明；文本 Ink Black#222222，Airbnb Cereal 500，16px；内边距 8px 14px；
• 激活态：标签下方 2px Ink Black 下划线；搭配标签上方 36–48px 的 3D 渲染插图图标。

卡片与容器

房源卡片（首页网格、搜索结果）

• 背景#ffffff；图片 14px 圆角，文本直接坐在下方透明背景上；
• 图片比例 4:3、全出血、同 14px 圆角；外部容器无内边距，图片与元数据行之间 12px 间距；
• 无阴影——分隔来自留白与摄影本身；
• 元数据格式：城市/地区第 1 行（16px 600），距离/时长第 2 行（14px 500 Ash Gray），日期范围第 3 行，价格行以"每晚"结尾。

详情页预订面板（房间/体验页固定右列）

• 背景#ffffff；圆角 14–20px；边框 1px solid Hairline Gray#dddddd；
• 阴影：rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0——三层叠加的细微抬升；
• 内边距 24px；宽度约 370px，锚定在视口顶部下方 120–140px；
• 内容顺序：价格标题 → 日期选择器 → 房客下拉 → 主 CTA → "现在无需付费"注释。

服务设施网格卡片（详情页内）

• 背景#ffffff；边框 1px solid Hairline Gray#dddddd（行级而非元素级）；
• 每行服务纵向内边距 16px；图标 + 标签格式：左侧 24px 描边图标，右侧 16px 字重 500 标签。

评价卡片（详情页单条评价）

• 背景#ffffff、无边框；内边距 0（依赖网格间隙）；
• 内容：40px 圆形头像 + 16px 字重 600 姓名 + 14px 字重 400 Ash Gray 日期在同一行，下方 14px 字重 500 正文段。

输入与表单

搜索栏（首页主入口）

• 背景#ffffff；1px solid Hairline Gray#dddddd边框包裹全部三个分段（地点 / 时间 / 人数）；
• 圆角 32px（完整胶囊）；阴影rgba(0, 0, 0, 0.04) 0 2px 6px 0——细微漂浮感；
• 结构：三个分段以细竖线分隔，每段上方 12px 字重 500 标签、下方 14px 字重 500 占位文本；
• 提交：右缘 48px 直径 Rausch 圆形图标按钮。

文本输入（通用表单）

• 背景#ffffff；边框 1px solid Hairline Gray#dddddd；圆角 8px；内边距 14px 16px；
• 聚焦：边框变 Ink Black，加黑色外环0 0 0 2px；错误：边框变#c13515（Error Red），帮助文本同色。

日期选择器

• 日历网格：7 列布局，40–44px 宽 50% 圆形日期格；
• 选中区间：Ink Black#222222背景配白色数字；起止锚点为更大的实心圆；中间日期用 Soft Cloud#f7f7f7色调。

导航

顶部导航（桌面）

• 高度约 80px；背景#ffffff；
• 左侧：Rausch 色 Airbnb wordmark+logo 锁标（102×32px）；
• 中央：三 tab 分类选择器（房源 / 体验 / 服务），36–48px 3D 图标叠于 16px 字重 500 标签之上，激活 tab 有 2px Ink Black 下划线；
• 右侧："成为房东"文本链接 → 32px 圆形地球（语言）→ 36px 头像汉堡菜单；
• 底缘：1px solid Hairline Gray#dddddd。

顶部导航（移动）

• 单行搜索胶囊占满全宽：占位文本"开始你的搜索"配小放大镜图标；
• 下方三 tab 分类选择器保留，插图图标缩至约 28px；
• 底部固定 tab 栏：探索（激活态 Rausch）/ 心愿单 / 登录——24px 图标叠于 12px 标签之上。

房源详情页次级导航

• 固定水平滚动的锚点链接条（照片 · 服务 · 评价 · 位置 · 房东），滚过 hero 图片后出现；高度 56px；底缘 1px solid Hairline Gray。

图片处理

• 主要宽高比：4:3（首页房源网格）、16:9（体验 hero 摄影）、1:1（头像）；
• 圆角：房源网格图 14px、详情页 hero 照片框 20px、头像 50%；
• 详情页图片网格：五图网格——左侧单张大图（占宽 50%），右侧四张小图呈 2×2 网格，全部共享 20px 圆角外容器；
• 懒加载：大量使用loading="lazy"搭配模糊占位预览；
• 轮播：32px 圆形箭头按钮垂直居中叠于图片，圆点指示器位于底缘上方 12px。

签名组件

"最受房客欢迎"奖锁标（高评分详情页突出展示）

• 居中评分数字以 44–56px 字重 700 渲染；
• 两枚手绘 SVG 桂冠插图分列左右，高约 48px；
• 下方："最受房客欢迎"标签 12px 700 全大写，字距 0.32px；14px 500 Ash Gray 短副标签；
• 全宽区块、无容器边框——直接坐在白色画布上。

三 tab 分类选择器（每个导航面顶部）

• 三个 tab：房源 / 体验 / 服务；每 tab 为约 48px 高的 3D 渲染插图图标叠于 16px 字重 500 标签之上；
• 体验与服务当前带一枚小"NEW"深蓝胶囊（白色 12px 700 文本于深蓝背景），悬浮于图标右上角；
• 激活 tab：2px Ink Black 下划线。

灵感城市网格（首页"未来旅行的灵感"）

• 桌面 6 列目的地链接网格，移动 2 列；
• 每格：第 1 行城市名 16px 600，第 2 行 Ash Gray 500 14px 出租类型副标题（"乡村小屋出租"、"别墅出租"）；
• 无图片——纯文本网格；顶部 tab 分类（热门 / 艺术与文化 / 海滩 / 山脉 / 户外 / 可做的事 / 旅行建议与灵感 / Airbnb 友好型公寓），激活 tab 有 2px 下划线与字重变化。

固定预订卡片（房源详情页）

• 桌面端用户滚过 hero 后固定在视口顶部下方 120px；移动端压缩为全宽底部栏，带"每晚 $X 起"标签与 Rausch 胶囊"预订"按钮；
• 始终显示：价格标题 → 日期视图 → 房客选择器 → Rausch CTA → "现在无需付费"免责声明。

体验房东卡片（体验详情页）

• 全宽圆角容器，顶部 3:2 封面照；房东头像（圆形，56px）重叠封面底缘 50%；
• 重叠下方：房东名 16px 700、房东资历 14px 500 Ash Gray、小型 Rausch 胶囊按钮"联系房东"；
• 作为评价与设施/位置区块之间的过渡。

"需要了解的事项"条带（房源详情页）

• 3 列规则/政策区块网格（房屋守则、安全与财产、取消政策）；
• 每列：顶部图标、16px 600 标题、14px 500 Ash Gray 正文、"显示更多"Ink Black 下划线链接；
• 分隔：整条带上缘与下缘 1px Hairline Gray 边框。

仓库中，这些组件以可运行的 fixture 形态存在于 components.html，并由 components.manifest.json 建立索引：111 个选择器、67 个类、28 个元素，按 buttons / inputs / badges / links / typography / layout 等组件组组织，每个组都列出其引用的 token。例如buttons组引用--accent-hover、--radius-lg、--motion-fast等 15 个 token，与 DESIGN 文档的按钮规格一一对应，且undeclaredReferenced: []证明组件 fixture 没有引用任何未声明 token——可直接复制到生产中而不会出现断链。

五、布局原则：8px 基底与"密度即意图"

间距系统

• 基础单位：8px；
• 提取的刻度：2、3、4、5.5、6、8、10、11、12、15、16、18.5、22、24、32px——细粒度，少量网格外数值用于图标精确对齐；
• 区块内边距：桌面端上下约 48–64px，移动端 24–32px；
• 卡片内部内边距：预订面板与大卡片 24px，服务行 16px，房源卡片元数据 12px；
• 房源卡片间 gutter：桌面 24px，移动 16px；
• 叠加文本行间距：4–8px（非常紧凑——强化旅行房源"信息密集"的感觉）。

仓库 token 将共享刻度规范为标准的 4px 网格：--space-1: 4px至--space-12: 48px，并将 5.5/10/11/18.5/22 等网格外值留在组件级内联而非共享 token（避免污染全局刻度）；区块节奏绑定为--section-y-desktop: 64px、--section-y-tablet: 48px、--section-y-phone: 32px。

网格与容器

• 内容最大宽度：超宽屏 1760–1920px（Airbnb 让网格比多数网站更透气）；多数详情页 1280px；
• 首页房源网格：≥1760px 时 6 列，≥1440px 时 5 列，≥1128px 时 4 列，≥800px 时 3 列，≥550px 时 2 列，以下 1 列；
• 详情页：非对称 2 列——主内容约 58%，固定预订面板约 36% 居右，约 6% gutter；
• 页脚：支持 / 房东 / Airbnb 3 列。

仓库绑定：--container-max: 1280px（详情页宽度作为共享默认值，因为这是 Agent 最常生成的几何形态——房间、体验、房东主页），gutter 按 40px 桌面 / 24px 平板 / 16px 手机递减（--container-gutter-*）。

留白哲学

Airbnb 信息密集但从不拥挤。留白用于分组：房源卡片之间 24px gutter 让每张照片读作独立对象，但每张卡片下方的元数据使用 4–8px 间隙，让价格/城市/日期看起来像一个整体。详情页预订面板内部 24px padding，但其内部行（日期选择器、房客选择器、CTA）以 12px 堆叠——卡片与页面之间的边界承担的分隔工作比卡片内部内容之间的分隔更多。

圆角比例（完整继承）

六、深度与层级：禁止单层阴影，拥抱三层叠加

阴影哲学：Airbnb 使用叠加分层阴影而非单层阴影。预订面板的三层阴影读作一次连贯的抬升，实为三条不同透明度/模糊值的独立阴影（2% 细环、4% 短模糊、10% 中模糊）——在阴影边缘产生细微的抗锯齿效果，看起来高级而不笨重。该三层堆叠被原样编码进 token--elev-raised（tokens.css 的#Bind 5），并注明"品牌禁止单层投影"。

装饰性深度

• 摄影即深度：系统重度依赖全出血摄影创造视觉深度；阴影与渐变使用克制，让照片承担主要工作；
• 桂冠锁标："最受房客欢迎"奖用两枚 SVG 桂冠插画，让原本扁平的评分数字获得近乎奖杯的仪式感；
• 3D 渲染分类图标：房源/体验/服务图标自带柔和内部光照与内嵌的细微投影——品牌允许"立体"插画的唯一位置。

焦点环的绑定值得特别说明：tokens.css 将--focus-ring定为2px 实心 Ink Black 而非 schema 默认的强调色环——文档 §6 强制这一处理，使焦点指示在全出血彩色摄影上清晰可读；若用 Rausch 色环，会在暖色日落照片或海蓝叠层前消失（#Bind 6）。从 craft 配置 看，该包建议应用color与accessibility-baseline两条 craft 规范，焦点环正是可访问性基线的直接体现。

七、做与不做：Airbnb 视觉纪律速查

做（Do）

• 将 Rausch#ff385c保留给主操作与激活 tab 指示器——绝不用装饰性使用稀释它；
• 让摄影自由呼吸——4:3 裁切、14–20px 圆角、无叠压文本、无渐变滤镜；
• 每个低于 Rausch 的文本层级使用 Ink Black#222222——这是系统的准黑色，永远不是真正的#000000；
• 将三 tab 选择器的 3D 插图图标与扁平排版搭配——不在单一表面混用插画风格；
• 叠加三条低透明度阴影（约 2%、4%、10%）创造预订面板的标志性抬升；
• 用 1px Hairline Gray#dddddd边框处理所有卡片到卡片、行到行的分隔线；
• 桌面端视预订面板为固定元素，移动端压缩为底部锚定预订栏；
• 元数据组内使用 4–8px 间距、卡片之间 24px——信息密度是有意为之。

不做（Avoid）

• 不在 Rausch / Plus Magenta / Luxe Purple 产品线色板之外引入第二强调色；
• 不把文本放进照片里——说明永远位于图片下方，绝不叠压；
• 除 8px 上标这一唯一角色外不使用全大写标签；
• 圆形图标按钮的圆角不用 50% 之外的任何值——圆是系统的标志几何；
• 不给房源卡片加阴影——它们平坐在白色画布上、零抬升；
• 不使用渐变背景——系统中唯一的渐变是 wordmark 上狭窄的 Rausch → 洋红过渡；
• 不使用 400-regular 字重——Airbnb Cereal 的正文字重是 500；
• 不用其他展示字体替换 Airbnb Cereal VF——系统有意保持单家族。

八、响应式行为：约 60 个断点背后的 8 档布局

Airbnb 声明约 60 个断点（其组件库的设计产物），但显著的布局变化发生在一个小得多的集合上：

触控目标

所有交互元素满足或超过 44×44px。圆形图标按钮家族专门定尺寸 32–44px，并扩展 8–12px 命中区。主 Rausch"预订"按钮约 48px 高。三 tab 分类选择器的命中区为完整的"标签+图标"矩形（通常每 tab 约 64×80px）。

折叠策略

• 导航：平板及以上顶部导航保留 wordmark + 三 tab 选择器；移动端选择器滑到搜索胶囊正下方，地球/头像控件移到底部锚定 tab 栏；
• 搜索栏：桌面端三段胶囊（地点 / 时间 / 人数）配 Rausch 圆形提交按钮；移动端折叠为单颗"开始你的搜索"胶囊，点击打开全屏搜索页；
• 预订面板：≥1128px 固定右列；800–1127px 内联进主内容列；<800px 底部固定"预订"胶囊；
• 房源网格：跨断点 6 → 5 → 4 → 3 → 2 → 1 列重排；
• 详情页图片网格：桌面五图（1 大 + 4 小）；移动端变为带逐页点指示器的全页滚动轮播；
• 页脚：3 列布局在 <800px 折叠为单列堆叠。

图片行为

• 通用loading="lazy"，先以参数化im_w=的模糊预览 URL 占位；
• 响应式图片使用 Airbnb 的muscache.comCDN 与im_w查询参数按宽度分发（im_w=240、im_w=720、im_w=1200、im_w=2400）；
• 无 art-direction 裁切——同一张图片跨断点上下缩放；
• 轮播自动适配照片高度以保持一致的 4:3 比例，无论源图宽高比如何。

九、Agent 提示指南：在 Open Design 工作流中生成 Airbnb 风格界面

该设计系统包正是为 Agent 消费而设计。按照 USAGE.md 的阅读顺序：先读 USAGE 理解包契约，再读 DESIGN.md 获取视觉意图与反模式，然后把 tokens.css 的:root块原样粘贴进首个 artifact 的<style>块，之后所有取值一律通过var(--*)解析，绝不使用裸 hex。

颜色快速参考

• 主 CTA："Rausch (#ff385c)"
• 页面背景："Canvas White (#ffffff)"
• 次级表面："Soft Cloud (#f7f7f7)"
• 标题/正文文本："Ink Black (#222222)"
• 次级文本："Ash Gray (#6a6a6a)"
• 边框/分隔线："Hairline Gray (#dddddd)"
• 错误："Error Red (#c13515)"
• 信息链接："Info Blue (#428bff)"
• Luxe 层级强调："Luxe Purple (#460479)"
• Plus 层级强调："Plus Magenta (#92174d)"

组件提示示例（可复制）

• "创建一个主预订按钮：Rausch 背景（#ff385c），白色 Airbnb Cereal 500 16px 标签，内边距 14px × 24px，border-radius 8px，无阴影。激活/按下时加transform: scale(0.92)与 2px Ink Black 焦点环（0 0 0 2px #222222）。"
• "构建一张房源卡片：4:3 全出血摄影、14px border-radius、无容器阴影；图片下方堆叠三行文本、间隙 4px：城市名 16px 600 Ink Black、出租类型 14px 500 Ash Gray（#6a6a6a）、价格行 16px 500 Ink Black 带 14px 的每晚后缀。"
• "设计一个固定预订面板：白色背景、14px border-radius、1px Hairline Gray（#dddddd）边框、3 层抬升阴影（rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0）、24px 内边距、370px 宽、桌面端锚定视口顶部下方 120px。内容：价格标题、日期选择器、房客下拉、Rausch 主 CTA 与 12px Ash Gray 免责声明现在无需付费。"
• "创建一个三 tab 分类选择器：三个等宽 tab 标注房源、体验、服务；每 tab 约 48px 3D 渲染插图图标（小屋、热气球、铃铛）置于 16px 字重 500 Ink Black 标签之上；激活 tab 获得 2px Ink Black 下划线；在体验与服务图标右上角加一枚 12px 700 白字深蓝底NEW小胶囊。"
• "渲染'最受房客欢迎'奖锁标：居中的 52px 字重 700 Ink Black 评分数字，左右各一枚约 48px 高手绘 SVG 桂冠；下方 12px 700 全大写标签最受房客欢迎字距 0.32px；14px 500 Ash Gray 副标签；全宽区块直接坐在白色画布上、无容器边框。"

迭代指南

当基于该设计系统打磨既有画面时：

1. 一次只专注一个组件；
2. 引用本文档中的具体颜色名与 hex 码（例如说"Ink Black #222222"，而非"深灰"）；
3. 用自然语言搭配度量描述（"三层细微抬升"而非一长串阴影字符串）；
4. 描述期望的"感觉"（"杂志风格、摄影优先"对比"密集型工具"）；
5. 始终用 Airbnb Cereal VF 字重 500 作正文、600–700 作强调——绝不用 400；
6. 保持 Rausch 稀缺——如果每个视口出现超过一个 Rausch 色元素，考虑是否应将其中的一个中性化。

已知缺口（使用前必读）

• 首页房源网格卡片：airbnb.com 的主要视觉表面（房源卡片主网格）在提取的首页截图中未被完整捕获——内容仅部分加载。上述房源卡片规格是从灵感网格结构与 Airbnb 更广泛的惯例推断的；生产使用前请与线上站点确认确切的宽高比与元数据层级；
• 体验分类图标：房源 / 体验 / 服务的 3D 插图图标以栅格资源提供；其确切的源文件规格（SVG 还是 PNG、渲染像素尺寸）本文档未记录；
• 动画与过渡时序：未捕获——静态提取范围所致。仓库 token 以--motion-fast: 150ms（著名的scale(0.92)按下回弹）与--motion-base: 200ms作为与品牌触感一致的默认值绑定，标准缓动cubic-bezier(0.2, 0, 0, 1)无过冲；
• 暗色模式：Airbnb 在提取的产品表面中未提供原生暗色模式；本文档仅描述单一亮色主题。

十、在仓库中继续深入

该 Airbnb 设计系统包是 open-design 仓库中 151 个可移植设计系统包之一（见 design-systems/README.md）。每个包拥有统一的最小结构：manifest.json（发现元数据与来源）、DESIGN.md（Agent 设计散文）、tokens.css（编译的语义 token 样式表），可选富文件包括components.html（组件 fixture）、components.manifest.json（组件/token 索引）、design-tokens.json（token 契约 JSON）与tailwind-v4.css（Tailwind v4 映射）。

值得注意的工程细节：

• design-tokens.json的契约报告显示 56 个 token 全部有源码支撑（sourceBackedTokens: 56）、评分 100、等级excellent、recommendRebuild: false——tokens.css 与契约完全对齐；
• tailwind-v4.css 通过@theme块把每个 token 映射为 Tailwind 工具类（--color-accent、--radius-md、--shadow-raised等），实现"写一次 token，Tailwind 全可用"；
• source/evidence.md 明确声明该包基于 OpenDesign 精选捆绑 fixture 派生，不声称抓取过上游品牌站点——使用时应保持这一来源边界；
• preview/ 目录提供 colors、typography、spacing 三张可视化预览页，system/ 提供 kit 与 kit.dark 参考页，适合做视觉抽检。

这套系统在 Open Design 中的定位，正如其 manifest.json 的 craft 建议所示：重点关注color与accessibility-baseline。当你的编码 Agent 需要生成"旅行杂志质感"的界面时——无论是搜索落地页、房源列表、详情页还是预订流程——直接以本包的设计散文与 token 为上下文提示，即可在单次生成中获得完整的 Airbnb 视觉纪律：一个 Rausch 强调色、一套 Cereal 排版、一轮圆角、一叠三层阴影，以及让内容成为主角的留白勇气。

【免费下载链接】open-design🎨 Best DeepSeek Harness Design Plugin. The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / DeepSeek Harness / OpenCode & 20+ CLIs via BYOK.项目地址: https://gitcode.com/gh_mirrors/opend/open-design