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、编译好的语义 Tokentokens.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、AirbnbRausch 珊瑚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 次级与强调色颜色色值CSS 变量原文档tokens.css 绑定用途Deep Rausch#e00b41--palette-bg-tertiary-core--accent-active按压/激活态按钮、渐变端点Plus Magenta#92174d--palette-bg-primary-plus按产品层级内联使用Airbnb Plus 品牌色精选高端房源Luxe Purple#460479--palette-bg-primary-luxe按产品层级内联使用Airbnb Luxe 品牌色别墅/庄园级租赁Info Blue#428bff--palette-text-legal内联使用法律/信息类链接条款、隐私、披露——系统唯一的非单色链接色值得注意的实现细节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 中性色与文字颜色色值tokens.css 绑定用途Ink Black#222222--fg系统近黑约 90% 的文字标题、正文、导航标签、价格Charcoal#3f3f3f--fg-2聚焦态输入文字、次级强调文案Ash Gray#6a6a6a--muted次级标签、城市名下的Location de cottages副标题、弱化页脚链接Mute Gray#929292--meta禁用按钮、低优先级元数据Stone Gray#c1c1c1内联三级分隔线、图标描边、占位头像2.5 语义与强调色Error Red#c13515绑定--danger。表单校验错误、破坏性操作警告。Deep Error#b32505错误态的按压/激活变体。Translucent Blackrgba(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 层级表角色字号字重行高字距说明章节标题28px / 1.75rem7001.430Inspiration pour de futurs séjours——页面级标题子章节标题22px / 1.38rem5001.18-0.44pxCe que ce logement propose、Rencontrez les hôtes卡片标题21px / 1.31rem7001.430评价面板标题、卡片主标题房源标题20px / 1.25rem6001.20-0.18px详情页房源头条粗副标题16px / 1.00rem6001.250房东姓名、城市名中等正文16px / 1.00rem5001.250详情页主要正文大按钮16px / 1.00rem5001.250Réserver、Devenir hôte默认按钮14px / 0.88rem5001.290标准按钮标签链接14px / 0.88rem5001.430导航链接、页脚链接中说明文字14px / 0.88rem5001.290元数据、副标题行粗说明文字14px / 0.88rem6001.430启用salt特性——数字统计、小字强调小说明文字13px / 0.81rem4001.230评价日期、微元数据默认微字12px / 0.75rem4001.330页脚免责声明、法律微文案粗微字12px / 0.75rem7001.330NOUVEAU 胶囊标签大写徽章11px / 0.69rem6001.180salt特性——紧凑品类/状态徽章上标8px / 0.50rem7001.250.32px大写——价格脚注、小数尾tokens.css将这套尺度编译为--text-xs12px到--text-4xl56px的 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 按钮主 CTARéserver、Rechercher、Ajouter des dates背景Rausch#ff385c--accent文字Canvas White#ffffff--accent-onAirbnb Cereal 50016px内边距约 14px 纵向、24px 横向圆角8px矩形或 50%圆形图标变体边框无激活/按压transform: scale(0.92) 2px#222222焦点环0 0 0 2px次级按钮Devenir hôte、描边式三级操作背景#ffffff--surface文字Ink Black#222222--fgAirbnb Cereal 50014–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等 Tokentokens.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–20px1px 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黑色外环错误时边框变#c13515Error Red--danger帮助文本同色。日期选择器7 列日历网格圆形50%日单元格 40–44px 宽选中范围为 Ink Black#222222背景 白数字起止锚点为更大的实心圆中间日期用 Soft Cloud#f7f7f7色晕。4.4 导航顶部导航桌面端高约 80px白底左侧为 Rausch 色 Airbnb 字标 Logo102×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 外层圆角容器懒加载大量使用loadinglazy配模糊占位预览轮播32px 圆形箭头按钮叠在图上、垂直居中圆点指示器位于底边上方 12px4.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 lhôte胶囊按钮用作评价与设施/位置块之间的过渡。Bon à savoir 信息条3 列规则/政策块Règles du logement、Sécurité et propriété、Politique dannulation每列顶部图标 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–1920pxAirbnb 让网格比多数网站呼吸得更远多数详情页 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: 16px5.3 留白哲学Airbnb 信息密集但从不拥挤。留白用于分组——房源卡有 24px 沟槽使每张照片读作独立对象但卡下元数据用 4–8px 间隙使价格/城市/日期像一个整体单元。详情页预订面板有 24px 内边距但内部行日期选择器、出行人选择器、CTA以 12px 堆叠——卡片与页面之间的边界承担了比内部内容更多的分隔工作。5.4 圆角尺度圆角用途4px行内锚点标签、标签 chips8px文字按钮、下拉菜单、小工具按钮--radius-sm14px房源卡摄影、通用内容容器、徽章--radius-md——工作量最大的圆角20px主圆角按钮胶囊形、大图、预订面板--radius-lg32px搜索栏胶囊、超大容器50%所有圆形图标按钮、所有头像、心愿单爱心——系统的签名圆几何--radius-pill: 9999px6. 深度与层级三层堆叠阴影层级处理方式用途0无阴影房源卡、正文内容、纯文字区块--elev-flat: none1rgba(0, 0, 0, 0.08) 0 4px 12px激活/按压图标按钮——轻微抬起提示可交互2三层堆叠2% 发丝环 4% 短模糊 10% 中模糊预订面板 sticky 卡、模态、下拉菜单——系统的签名三层抬升--elev-raised焦点环0 0 0 2px #222222激活态按钮、聚焦的搜索输入--focus-ring白色分离环rgb(255, 255, 255) 0 0 0 4px叠在照片上的圆形按钮——4px 白环干净分离彩色图像背景阴影哲学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 个断点来自组件库的设计期产物但有意义的布局变化只发生在更小的集合上名称宽度关键变化超宽屏≥1760px6 列房源网格内容最大宽 1760–1920px桌面 XL1440–1759px5 列网格完整导航可见sticky 右轨预订面板桌面1128–1439px4 列网格sticky 预订面板保持笔记本1024–1127px3–4 列网格品类导航保持横向平板800–1023px3 列网格全局搜索可折叠为单行胶囊小平板550–799px2 列网格预订面板降为全宽行内块移动375–549px1 列堆叠布局底部固定标签栏出现小屏移动375px边缘内边距收紧至 16px品类图标缩至约 28px8.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 图片行为全站loadinglazy先伺服带im_w参数化的模糊预览缩略图响应式图片使用 Airbnb 的muscache.comCDN以im_w查询参数做基于宽度的交付im_w240、im_w720、im_w1200、im_w2400无艺术方向裁切——同一张图跨断点缩放轮播自动调整照片高度无论源宽高比如何都保持一致的 4:3 比例9. Agent 提示词指南在 OpenDesign 中直接使用9.1 包内使用顺序根据 design-systems/airbnb/USAGE.mdOpenDesign 的 Agent 与审阅者按如下顺序消费该包先读USAGE.md理解包契约读DESIGN.md理解视觉意图、约束与反模式在写组件 CSS 前把tokens.css的:root { … }块原样粘贴进产物第一个style块此后一律通过var(--*)取值用components.manifest.json做紧凑组件清单需要精确选择器或状态时打开components.html需要视觉 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 快速颜色参考主 CTARausch (#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.32px14px 500 Ash Gray 副标签整宽块直接落在白色画布上、无容器边框。9.4 迭代指南用该系统精修已生成的界面时一次只聚焦一个组件引用本文档中的具体颜色名与 hex如 Ink Black #222222而非深灰度量旁用自然语言描述微妙的三层抬升而非一长串阴影描述期望的感觉杂志式、摄影优先 vs 密集工具型正文永远默认 Airbnb Cereal VF 500、强调 600–700——绝不用 400保持 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.jsonDESIGN.mdtokens.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.jsonmanifest.json中的craft字段建议了配套工艺约束color、accessibility-baselineimportMode: 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考