企业官网建设流程全解析

OpenDesign 中的 Airbnb 设计系统解析：从 Rausch 珊瑚色到可复用的语义 Token 实战指南

【免费下载链接】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

本文以 design-systems/airbnb/DESIGN-fr.md（及其英文原版 design-systems/airbnb/DESIGN.md）为骨架，结合该包内的tokens.css、components.html、manifest.json等仓库资源，深入拆解 Airbnb 风格设计系统的视觉规则与实现要点。读者将掌握：如何识别该系统的单一强调色体系、单字族排版规则、软圆角几何与三层堆叠阴影，以及如何把它作为 OpenDesign 的可移植设计系统包，直接为 Agent 生成高保真的旅行电商类页面。

Airbnb 的设计系统是"杂志感"的典型代表：纯白画布、满幅摄影、克制的珊瑚色强调、统一圆角。在 OpenDesign 仓库中，它被封装为一个完整的设计系统包（design-systems/airbnb/），包含面向 Agent 的设计散文（DESIGN.md）、编译好的语义 Token（tokens.css）以及组件夹具（components.html）。本文既是一份视觉规范手册，也是一份可直接落地的实现指南。

1. 视觉主题与氛围：让界面消失，让内容呼吸

Airbnb 2026 年的设计语言，本质是一本"碰巧做成了 App 的旅行杂志"——纯白画布让位于满幅摄影，界面自身隐退，让房源信息自由呼吸。其标志性 Rausch 珊瑚粉（#ff385c）被克制但醒目地使用：搜索 CTA、激活态标签指示、主操作按钮、偶发的价格高亮或心愿单爱心。除此之外，整个系统是一套纪律严明的灰阶，#222222承担了页面上几乎每一行文字。

系统不可混淆的辨识度来自它对内容的"信任"：

• 房源照片以英雄级尺度展示，4:3 比例、通边圆角处理；
• 品类切换通过三标签选择器（Logements / Expériences / Services）完成，配以 3D 渲染的插画图标（坡顶小屋、热气球、服务铃）——物理感、触感、近乎玩具感——再叠加清晰的Airbnb Cereal VF标签；
• 这是少数能让 3D 渲染与纯粹字体化 UI 无张力共存的消费级产品。

最新的产品面是Expériences（体验）系列——相同的界面框架，但卡片密度更高、摄影占比更大，并有一个居中锚定的预订面板配右侧 sticky 定价栏。房源详情页（房间与体验）遵循固定模板：满幅英雄图网格 → 叠压的圆角预订卡（滚动时 sticky）→ 设施 → 评价（Guest Favorite 奖项用居中的大号4.81配月桂花冠徽记）→ 地图 → 房东主页 → 法律声明。无论预订房间还是游艇之旅，节奏始终一致。

关键特征清单：

• Rausch 珊瑚粉（#ff385c）作为唯一强调色，只用于主 CTA 与搜索按钮；
• 4:3 / 16:9 满幅摄影配温和圆角（14–20px）作为主要视觉词汇；
• 3D 渲染品类图标 + 字体化标签——系统唯一允许插画的地方；
• 圆形50%图标按钮（返回箭头、分享、收藏、轮播箭头）散布各处；
• Airbnb Cereal VF承载从 8px 法律脚注到 28px 章节标题的每一处文字——单字族系统；
• 产品层级色彩编码：Airbnb Plus（洋红#92174d）、Airbnb Luxe（深紫#460479）、Airbnb（Rausch 珊瑚）；
• Guest Favorite 奖项徽记——居中大号评分数字夹在两片月桂花冠之间，是系统最著名的视觉时刻之一；
• Sticky 预订面板：价格 → 日期 → 出行人数纵向堆叠，桌面端钉在右侧轨道，移动端折叠为底部锚定"Réserver"条；
• 移动端底部固定导航（Explorer / Listes de souhaits / Se connecter），激活态带 Rausch 色晕。

仓库佐证：这些特征在 design-systems/airbnb/USAGE.md 的 "Design Highlights" 一节中被逐条重申，并在 design-systems/airbnb/components.manifest.json 的组件清单中得到实现级确认（如.btn-primary、.tabs、.award等选择器）。

2. 调色板与色彩角色：一个强调色 + 灰阶纪律

Airbnb 色彩系统的核心纪律是单一强调色：页面上绝大多数像素是白与灰，Rausch 珊瑚粉只在最关键处出现。系统为每个角色都定义了对应的 CSS 变量名，这些变量名直接映射到 design-systems/airbnb/tokens.css 的语义 Token。

2.1 主色

• Rausch（#ff385c）：品牌标志性珊瑚粉，CSS 变量--palette-bg-primary-core（在tokens.css中对应--accent: #ff385c）。用于："Réserver"主按钮、搜索提交按钮、激活标签下划线、心愿单爱心填充、价格强调。它是每个页面可见度最高的颜色。

2.2 次级与强调色

值得注意的实现细节：tokens.css中明确注释，Plus Magenta 与 Luxe Purple刻意不提升为共享 accent 槽位——它们只在各自产品层级的组件内联使用，以免非层级表面误用。这是"防止强调色污染"的设计决策。

2.3 表面与背景

• Canvas White（#ffffff）：默认页面背景。每张卡片、每个容器、每个详情页都从这里开始。在tokens.css中，--bg与--surface同时解析为#ffffff（#Bind 1 注释：Airbnb 拒绝页面与卡片之间存在色调差，卡片的边界来自 Hairline Gray 描边与卡片内的摄影，而非表面色调）。
• Soft Cloud（#f7f7f7）：次级表面色，用于页脚背景、地图视图包裹层、日期选择器范围中段日期。绑定为--surface-warm（#Bind 2：这是品牌命名的独立层级，所以是真实值而非var(--surface)别名）。
• Hairline Gray（#dddddd）：无处不在的 1px 边框色——分隔卡片、设施行、评价面板、页脚列。绑定为--border，另有一个更浅的--border-soft: #ebebeb用于密集列表内部的细分隔。

2.4 中性色与文字

2.5 语义与强调色

• Error Red（#c13515）：绑定--danger。表单校验错误、破坏性操作警告。
• Deep Error（#b32505）：错误态的按压/激活变体。
• Translucent Black（rgba(0, 0, 0, 0.24)）：禁用态材质风格标签。

tokens.css还补充了两个品牌未明确规定的语义色：--success: #008a05（暖绿，表示可预订/有货）与--warn: #c47700（烧焦琥珀色），并注释要求"页面语义色像素总量控制在 5% 以下——品牌几乎从不渲染状态"。

2.6 渐变系统

品牌渐变只出现在字标与搜索按钮的品牌时刻：

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

这段珊瑚 → 洋红的过渡是"品牌时刻"——绝不作为整面背景使用，只作为窄胶囊填充或 Logo 处理。这与"不做渐变背景"的禁令直接对应（见第 7 节）。

3. 排版规则：单字族、多字重

3.1 字体族

Airbnb Cereal VF是唯一的字体——承载整个系统的专有可变字重无衬线体。后备字体链（按顺序）：Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif。在tokens.css中，--font-display与--font-body共用同一栈（另加 "Airbnb Cereal App"），--font-mono则是独立的等宽栈用于kbd与表格数字。

从提取的 Token 中观察到的字重只有500、600、700。没有 400-regular——系统的"正文"字重是 500，这给每个文本块一种微妙的高密度感，读起来自信而刻意。OpenType 特性：salt（风格化替代字）用于 11px 与 14px 的 600 字重紧凑标签；未观察到连字或分数数字特性。

3.2 层级表

tokens.css将这套尺度编译为--text-xs（12px）到--text-4xl（56px）的 Token 阶梯，并注明：系统紧聚在 11–22px 的"对话区间"，跳到 28px 用于章节标题，44–56px 仅用于 Guest Favorite 评分徽记与罕见的英雄数字。

3.3 排版原则

• 一个家族，多种字重。Airbnb Cereal VF 处理从 8px 法律文字到 28px 页面标题的一切——视觉身份来自字体家族本身，而非混排字体。
• 500 是新的 400。系统的"常规"字重是 500。
• 只有展示型文字用负字距。20px 及以上的标题将字距压缩至 -0.18 到 -0.44px；正文保持 0 字距以保可读性。tokens.css中绑定为--tracking-display: -0.02em，仅用于 ≥20px 尺寸。
• 标题行高收紧、正文行高放宽。展示文字 1.18–1.25（紧）；正文与说明文字开到 1.43（--leading-body: 1.43，宽松）以服务长文阅读。这种双模式节奏正是"旅行杂志感而非工具 App 感"的来源。
• 除 8px 外不大写。系统中唯一的大写转换是 8px 上标——其他场合用句子大小写配合细微字重变化。

3.4 字体替代说明

Airbnb Cereal VF 是专有字体。最接近的开源替代是Circular Std（仍为商业字体）或Inter（免费，Google Fonts），后者在展示尺寸下需将字距缩小 -0.01em。若要严格保真品牌，文档化的后备链（Circular, -apple-system, system-ui）在 macOS/iOS 上表现可接受——system-ui解析为 San Francisco，比例相近。

4. 组件样式：从按钮到签名组件

4.1 按钮

主 CTA（"Réserver"、"Rechercher"、"Ajouter des dates"）

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

次级按钮（"Devenir hôte"、描边式三级操作）

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

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

• 背景：#f2f2f2或白色带 1px 半透明黑描边；图标：#222222描边，16–20px
• 尺寸：直径 32–44px；圆角：50%（--radius-pill: 9999px）
• 激活/按压：transform: scale(0.92)+ 4px 白色分离环0 0 0 4px rgb(255,255,255)，用于从彩色摄影背景中干净分离

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

胶囊标签按钮（"Logements / Expériences / Services"品类选择器）：透明背景，Ink Black 文字 500/16px，内边距 8px 14px，激活态为标签下方 2px Ink Black 下划线，标签上方配 36–48px 的 3D 渲染插画图标。

实现佐证：design-systems/airbnb/components.manifest.json 的buttons组件组引用--accent-hover、--focus-ring、--motion-fast等 Token；tokens.css将悬停色手工绑定为--accent-hover: #e31c5f（介于 Rausch 与 Deep Rausch 之间），#Bind 3 注释说明：按压态必须手工绑定#e00b41，因为color-mix会过度饱和、欠达品牌渐变端点。

4.2 卡片与容器

房源卡片（首页网格、搜索结果）：背景#ffffff；图片 4:3 满幅、14px 圆角；外层容器无内边距，图片与元数据行之间 12px 间距；无阴影——分隔来自留白与照片的固有圆角。元数据模式：第 1 行城市/地区（16px 600）、第 2 行距离/时长（14px 500 Ash Gray）、第 3 行日期范围、底部价格行带 "par nuit" 后缀。

详情页预订面板（房间/体验页 sticky 右侧轨道）：背景#ffffff；圆角 14–20px；1px Hairline Gray 边框；三层堆叠阴影：

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 → "Vous ne serez pas débité maintenant" 脚注。

设施网格卡：白底，行级 1px Hairline Gray 边框（非逐项），每行 16px 纵向内边距，左侧 24px 描边图标 + 右侧 16px 500 标签。

评价卡：白底无边框，依赖网格间隙；一行内为 40px 圆形头像 + 16px 600 姓名 + 14px 400 Ash Gray 日期，下方是 14px 500 正文段落。

4.3 输入与表单

搜索栏（首页主搜索）：白底；1px Hairline Gray 边框包住三段（Où / Quand / Qui）；圆角 32px（全胶囊）；阴影rgba(0, 0, 0, 0.04) 0 2px 6px 0营造漂浮感；三段以细竖分隔线切开，每段有 12px 500 标签 + 14px 500 占位符；右侧边缘是 48px 直径的 Rausch 圆形图标提交按钮。

文本输入（通用表单）：白底，1px Hairline Gray 边框，8px 圆角，内边距 14px 16px；聚焦时边框变 Ink Black 并加0 0 0 2px黑色外环；错误时边框变#c13515（Error Red，--danger），帮助文本同色。

日期选择器：7 列日历网格，圆形50%日单元格 40–44px 宽；选中范围为 Ink Black#222222背景 + 白数字；起止锚点为更大的实心圆，中间日期用 Soft Cloud#f7f7f7色晕。

4.4 导航

顶部导航（桌面端）：高约 80px，白底；左侧为 Rausch 色 Airbnb 字标 + Logo（102×32px）；中间为三标签品类选择器（36–48px 3D 图标堆叠在 16px 500 标签上方，激活标签 2px Ink Black 下划线）；右侧依次为"Devenir hôte"文字链接、32px 圆形地球（语言）、36px 汉堡头像菜单；底部 1px Hairline Gray 边框。

顶部导航（移动端）：单行搜索胶囊占满全宽（"Commencer votre recherche"占位符 + 小放大镜图标）；下方三标签品类选择器保留（图标缩至约 28px）；底部固定标签栏：Explorer（激活态 Rausch）/ Listes de souhaits / Se connecter——24px 图标 + 12px 标签。

房源详情页次级导航：滚动越过英雄图后出现的 sticky 横向锚点链接滚动条（Photos · Équipements · Avis · Localisation · Hôte），高 56px，底部 1px Hairline Gray 边框。

4.5 图片处理

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

4.6 签名组件

Guest Favorite 奖项徽记：居中评分数字 44–56px 700 字重；左右两侧手绘月桂花冠 SVG 插图（约 48px 高）；下方 12px 700 大写 "Guest Favorite" 标签（字距 0.32px）+ 14px 500 Ash Gray 副标签；整宽块、无容器边框，直接落在白色画布上。components.manifest.json中对应.award、.award-rating、.award-laurel、.award-label、.award-sub等选择器。

三标签品类选择器：三个等宽标签 Logements / Expériences / Services；每标签约 48px 高 3D 插画图标 + 16px 500 标签；Expériences 与 Services 图标右上角浮一枚深海军蓝 "NOUVEAU" 胶囊（白字 12px 700 深蓝底）；激活标签 2px Ink Black 下划线。

灵感城市网格（首页 "Inspiration pour de futurs séjours"）：桌面 6 列、移动 2 列的纯文字目的地链接网格；每格第 1 行 16px 600 城市名、第 2 行 14px 500 Ash Gray 租赁类型副标题（"Location de cottages"、"Location de villas"）；上方按品类标签页（Populaire / Arts & culture / Plage / Montagnes / Plein air / Activités / Conseils de voyage et inspiration / Appartements Airbnb-friendly），激活标签有 2px 下划线 + 字重变化。

Reserve sticky 卡：桌面端滚动越过英雄图后固定在视口顶部下方 120px；移动端折叠为全宽底部条（"À partir de X€ / nuit"标签 + Rausch "Réserver"胶囊）；始终展示：价格标题 → 日期展示 → 出行人选择器 → Rausch CTA → "Vous ne serez pas débité maintenant" 免责声明。

体验房东卡：全宽圆角容器，顶部 3:2 封面照片；房东头像（圆形 56px）以 50% 幅度叠压封面底边；叠压下方为 16px 700 房东姓名、14px 500 Ash Gray 房东年限、小型 Rausch "Contacter l'hôte"胶囊按钮；用作评价与设施/位置块之间的过渡。

"Bon à savoir" 信息条：3 列规则/政策块（Règles du logement、Sécurité et propriété、Politique d'annulation）；每列顶部图标 + 16px 600 标题 + 14px 500 Ash Gray 正文 + Ink Black 下划线 "Afficher plus" 链接；整条上下 1px Hairline Gray 边框分隔。

5. 布局原则：8px 基准与软圆角尺度

5.1 间距系统

• 基准单位：8px
• 提取尺度：2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32px——粒度很细，含少量离格值用于图标逐像素对齐。tokens.css在共享层只保留标准 4px 网格（--space-14px 到--space-1248px），离格间距留在组件级内联。
• 区块内边距：桌面 48–64px 上下，移动 24–32px。tokens.css绑定为--section-y-desktop: 64px、--section-y-tablet: 48px、--section-y-phone: 32px。
• 卡片内边距：预订面板与大卡 24px、设施行 16px、房源卡元数据 12px
• 房源卡间沟槽：桌面 24px、移动 16px
• 堆叠文本行间距：4–8px（非常紧——强化旅行房源"信息密集"感）

5.2 网格与容器

• 内容最大宽度：超宽屏 1760–1920px（Airbnb 让网格比多数网站呼吸得更远）；多数详情页 1280px。tokens.css将详情页宽度绑定为共享默认--container-max: 1280px（因为 Agent 最常生成的是房间、体验、房东主页这类详情页几何）。
• 首页房源网格：≥1760px 时 6 列、≥1440px 时 5 列、≥1128px 时 4 列、≥800px 时 3 列、≥550px 时 2 列、以下 1 列
• 详情页：2 列不对称——主内容约 58%，sticky 预订面板约 36% 在右，约 6% 沟槽
• 页脚：3 列 Support / Hébergement / Airbnb
• 容器沟槽：--container-gutter-desktop: 40px、--container-gutter-tablet: 24px、--container-gutter-phone: 16px

5.3 留白哲学

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

5.4 圆角尺度

6. 深度与层级：三层堆叠阴影

阴影哲学：Airbnb 使用堆叠分层阴影而非单一投影。预订面板的三层阴影读作一个连贯的抬升，实为三条不同不透明度/模糊值的独立阴影——在阴影周边形成微妙的抗锯齿，感觉高级而不沉重。tokens.css的 #Bind 5 注释原文强调："品牌禁止单一投影；这套堆叠三连正是预订面板高级抗锯齿外缘的来源。"

装饰性深度：系统高度依赖满幅摄影制造视觉深度，阴影与渐变克制使用；Guest Favorite 的月桂花冠让原本扁平的数字有了仪式感、奖杯感；3D 渲染品类图标自带柔和内部光照与微妙投影——这是品牌允许"立体"插画的唯一之处。

无障碍细节：--focus-ring特意绑定为 2px Ink Black 而非 schema 默认的强调色环（#Bind 6）。原因是满幅彩色摄影背景下，Rausch 色焦点环会在暖色日落或海蓝叠加中消失；黑色环才能保证焦点指示始终清晰可读。

7. 做与不做：系统的纪律清单

✅ 要做

• 将 Rausch#ff385c保留给主操作与激活标签指示——绝不用装饰性用途稀释它。tokens.css甚至给出硬性上限："每个视口可见 Rausch 元素不超过两个；出现第三个就中和一个。"
• 让摄影呼吸——4:3 裁切 + 14–20px 圆角，不叠文字、不加渐变遮罩
• 所有 Rausch 之下的文字层用 Ink Black#222222——系统近黑，绝不用真#000000
• 三标签选择器的 3D 插画图标配平面排版——不在同一表面混用插画风格
• 堆叠三层低不透明度阴影（约 2%、4%、10%）营造签名预订面板抬升
• 每个卡间、行间分隔符用 1px Hairline Gray#dddddd边框
• 预订面板桌面端 sticky、移动端折叠为底部锚定预订条
• 元数据组内用 4–8px、卡片间用 24px 间距——信息密度是刻意设计

❌ 不要做

• 不要在 Rausch / Plus Magenta / Luxe Purple 产品层级调色板之外引入次级强调色
• 不要将文字放进照片——说明文字永远在图片下方，绝不叠放
• 除 8px 上标外不要用全大写标签
• 不要把图标按钮圆角做成 50% 以外——圆形是系统的签名几何
• 不要给房源卡加投影——它们无抬升地躺在白色画布上
• 不要用渐变背景——系统唯一的渐变是字标上窄窄的 Rausch → 洋红过渡
• 不要用 400-regular 字重——Airbnb Cereal 的正文字重是 500
• 不要用别的展示字体覆盖 Airbnb Cereal VF——系统刻意单字族

8. 响应式行为：约 60 个断点背后的 8 个关键台阶

Airbnb 声明了约 60 个断点（来自组件库的设计期产物），但有意义的布局变化只发生在更小的集合上：

8.1 触控目标

所有交互元素满足或超过 44×44px。圆形图标按钮族特意做成 32–44px 并带 8–12px 扩展命中区内边距；Rausch 主"Réserver"按钮高约 48px；三标签选择器的命中区是完整的"标签+图标"矩形（每标签约 64×80px）。

8.2 折叠策略

• 导航：平板及以上保留字标 + 三标签选择器；移动端选择器滑到搜索胶囊正下方，地球/头像控件移入底部锚定标签栏
• 搜索栏：桌面为三段胶囊（Où / Quand / Qui）+ Rausch 圆形提交按钮；移动端折叠为单行 "Commencer votre recherche" 胶囊，点按打开全屏搜索页
• 预订面板：≥1128px 为 sticky 右轨；800–1127px 在主内容列内联；<800px 为底部固定 "Réserver" 胶囊
• 房源网格：跨断点 6 → 5 → 4 → 3 → 2 → 1 列回流
• 详情页图片网格：桌面五图布局（1 大 + 4 小）；移动端变为可滑动满幅轮播 + 圆点页码指示
• 页脚：<800px 时 3 列折叠为单列堆叠

8.3 图片行为

• 全站loading="lazy"，先伺服带im_w=参数化的模糊预览缩略图
• 响应式图片使用 Airbnb 的muscache.comCDN，以im_w查询参数做基于宽度的交付（im_w=240、im_w=720、im_w=1200、im_w=2400）
• 无艺术方向裁切——同一张图跨断点缩放
• 轮播自动调整照片高度，无论源宽高比如何都保持一致的 4:3 比例

9. Agent 提示词指南：在 OpenDesign 中直接使用

9.1 包内使用顺序

根据 design-systems/airbnb/USAGE.md，OpenDesign 的 Agent 与审阅者按如下顺序消费该包：

1. 先读USAGE.md理解包契约
2. 读DESIGN.md理解视觉意图、约束与反模式
3. 在写组件 CSS 前，把tokens.css的:root { … }块原样粘贴进产物第一个<style>块，此后一律通过var(--*)取值
4. 用components.manifest.json做紧凑组件清单；需要精确选择器或状态时打开components.html
5. 需要视觉 sanity check 时查看preview/页面（preview/colors.html、preview/typography.html、preview/spacing.html）

同时注意 USAGE.md 的约束：保留 schema token 名以保证跨品牌切换可靠；--accent只用于主操作、链接、焦点态与一个清晰焦点元素；优先复用组件组而非发明新控件；避免在:roottoken 块之外使用裸 hex；避免脱离tokens.css独立重定义 Tailwind 或 design-token 值。

9.2 快速颜色参考

• 主 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)"

9.3 组件提示词示例（可直接复制给 Agent）

• "创建一个主 Réserver 按钮：Rausch (#ff385c) 背景，白色 Airbnb Cereal 500 字重 16px 标签，14px × 24px 内边距，8px 圆角，无阴影。激活/按压时加transform: scale(0.92)与 2px Ink Black 焦点环（0 0 0 2px #222222）。"
• "构建一张房源卡：4:3 满幅照片、14px 圆角、容器无阴影；图片下方以 4px 间隙堆叠三行文字——城市名 16px 600 Ink Black、租赁类型 14px 500 Ash Gray (#6a6a6a)、价格区间 16px 500 Ink Black 带 14pxpar nuit后缀。"
• "设计一个 sticky 预订面板：白底、14px 圆角、1px 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 宽、桌面端钉在视口顶部下方 120px。内容：价格标题、日期选择器、出行人下拉、Rausch 主 CTA、12px Ash Gray 'Vous ne serez pas débité maintenant' 免责声明。"
• "创建三标签品类选择器：三个等宽标签 Logements、Expériences、Services；每标签约 48px 3D 渲染插画图标（房子、气球、铃铛）+ 16px 500 Ink Black 标签；激活标签加 2px Ink Black 下划线；Expériences 与 Services 图标右上角加一枚 12px 700 白字深海军蓝 'NOUVEAU' 胶囊。"
• "渲染 Guest Favorite 奖项徽记：居中评分数字 52px 700 Ink Black，左右各一枚约 48px 高手绘 SVG 月桂花冠；下方 12px 700 大写 'GUEST FAVORITE' 标签（字距 0.32px）；14px 500 Ash Gray 副标签；整宽块直接落在白色画布上、无容器边框。"

9.4 迭代指南

用该系统精修已生成的界面时：

1. 一次只聚焦一个组件
2. 引用本文档中的具体颜色名与 hex（如 "Ink Black #222222"，而非"深灰"）
3. 度量旁用自然语言描述（"微妙的三层抬升"而非一长串阴影）
4. 描述期望的"感觉"（"杂志式、摄影优先" vs "密集工具型"）
5. 正文永远默认 Airbnb Cereal VF 500、强调 600–700——绝不用 400
6. 保持 Rausch 粉稀缺——若一个视口出现多个 Rausch 元素，考虑是否应中和其一

9.5 已知缺口（使用前务必注意）

原文档如实披露了四类局限：

• 首页房源网格卡：airbnb.com 的主要视觉表面在提取首页截图时未完整捕获（内容仅部分加载）。上文房源卡规格是从灵感网格结构与 Airbnb 更广泛的惯例推断而来——生产使用前须对照线上站点确认精确宽高比与元数据层级。
• Expériences 品类图标：3D 插画图标以栅格资源伺服，其源文件规格（SVG 还是 PNG、渲染像素尺寸）未记录。
• 动画与过渡时序：静态提取范围，未捕获。
• 深色模式：提取的产品表面中没有原生深色模式——本文档只描述单一浅色主题。

这些缺口同样反映在 design-systems/airbnb/source/evidence.md 中：该包是 OpenDesign 精选的捆绑夹具（bundled fixture），并非对上游品牌仓库或网站的全新抓取，使用时应保持这一认知边界。

10. 包结构速览：一套可移植的 OpenDesign 设计系统

根据 design-systems/README.md，每个设计系统包的最小机器可读形态为design-systems/<slug>/下的manifest.json+DESIGN.md+tokens.css。Airbnb 包（manifest.json中id: "airbnb"）还额外声明了富文件：

design-systems/airbnb/ ├── manifest.json 发现元数据、来源、文件路径 ├── DESIGN.md 面向 Agent 的规范设计散文（英文） ├── DESIGN-fr.md 等 17 个语言版本 ├── USAGE.md Agent 阅读顺序与使用指南 ├── tokens.css 编译好的语义 Token 样式表 ├── components.html 独立组件夹具 ├── components.manifest.json 派生的组件/Token 索引 ├── design-tokens.json 派生的 Design Tokens JSON ├── tailwind-v4.css 派生的 Tailwind v4 映射 ├── preview/ 索引预览页（colors / typography / spacing） └── source/ 导入证据、Token 报告（evidence.md、token-contract.report.json、tokens.source.json）

manifest.json中的craft字段建议了配套工艺约束（color、accessibility-baseline）；importMode: "normalized"表明该包走规范化导入管线。docs/design-systems.md规定DESIGN.md至少需要七个实质性 H2 章节（不依赖固定编号模板），且散文中的每个决策都必须与tokens.css同步——Airbnb 包正是这一契约的完整示范。

在实际使用时，从 OpenDesign 的设计系统界面或受支持的项目创建流程中选择该包，即可将DESIGN.md的设计上下文、tokens.css的语义 Token 与组件信息组合进 Agent 提示词，直接产出高保真的旅行电商类页面原型。

结语：一套"少即是多"的完整方法论

Airbnb 设计系统的本质矛盾在于：它是最克制的系统之一（单强调色、单字族、纯白表面、禁用渐变与卡片投影），却因这种克制而获得了最高的辨识度。从 Rausch 珊瑚粉的角色分配、Ink Black 近黑文字层，到三层堆叠阴影与 50% 圆形几何，每一个决策都服务于"让内容呼吸"这一核心。对于希望复现这种"杂志感"的设计师与 Agent 而言，本文档（及其仓库内的 DESIGN.md、tokens.css、components.html）即是一份可直接执行、可逐 Token 验证的完整规格。

【免费下载链接】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