用 OpenDesign 的 Airbnb 设计系统复刻杂志感旅行产品Rausch 珊瑚粉、照片优先与三屏响应式实战指南【免费下载链接】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本文围绕 OpenDesign 仓库内置的 Airbnb 设计系统包design-systems/airbnb展开完整解析其视觉主题、色彩令牌、字体层级、组件样式、布局原则、纵深体系与响应式断点并结合tokens.css、components.html等源码文件给出可复制的 CSS 实现与面向 Agent 的提示词模板。读完本文你将能够直接用该设计系统生成 Airbnb 风格的房源列表页、详情页含粘性预订面板与三选项卡分类导航并理解照片优先 单一强调色 单字体家族这一设计哲学的落地方式。1. 系统概览一本碰巧变成了应用的旅行杂志Airbnb 2026 年仓库提取版本的设计语言可以被概括为一句口号干净的白底画布让位给全幅照片界面本身退到背景里让房源照片自由呼吸。标志性的 Rausch 珊瑚粉#ff385c被刻意地克制使用——只出现在搜索 CTA、激活态选项卡下划线、主操作按钮以及偶尔的价格与心愿单爱心上除此之外整套系统遵循有纪律的灰度#222222承担了页面上约 90% 的文字。在仓库中该系统的元数据被固化在 design-systems/airbnb/manifest.json类别为 E-Commerce Retail描述为旅行市场。温暖的珊瑚色强调、照片驱动、圆润 UI。USAGE.md给出的阅读顺序是先读USAGE.md理解包契约 → 读DESIGN.md本仓库对应的多语言版本如 DESIGN-ja.md理解视觉意图与反模式 → 把tokens.css的:root块原样粘贴进产物第一个style块 → 用components.manifest.json做组件清单 → 需要时查看preview/页面做视觉核对。核心特征清单单一强调色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 奖项锁标两侧月桂花环 居中大字号评分数字是系统中最具辨识度的设计瞬间粘性预订面板价格 → 日期 → 房客数的堆叠桌面端固定在右栏移动端折叠为底部预约条移动端底部固定导航探索 / 心愿单 / 登录激活态使用 Rausch 的浅色 tint。2. 色彩系统一个 Rausch四层灰度两组产品线强调色2.1 主色与强调色名称色值CSS 变量用途Rausch#ff385c--palette-bg-primary-core品牌签名珊瑚粉。主预约按钮、搜索提交按钮、激活态选项卡下划线、心愿单爱心填充、价格强调Deep Rausch#e00b41--palette-bg-tertiary-core更饱和的变体按压/激活按钮状态与渐变终点Plus 洋红#92174d--palette-bg-primary-plusAirbnb Plus 产品线品牌色精选高档房源Luxe 紫#460479--palette-bg-primary-luxeAirbnb Luxe 产品线品牌色别墅/庄园级租赁信息蓝#428bff--palette-text-legal法律/信息类链接服务条款、隐私、注意事项系统中唯一的非灰阶链接色2.2 表面与背景名称色值用途Canvas White#ffffff默认页面背景所有卡片、容器、详情页的起点Soft Cloud#f7f7f7页脚背景、地图视图容器、从主白中退一档的次级区域Hairline Gray#dddddd无处不在的 1px 边框色——卡片、设施行、评论面板、页脚分栏2.3 中性色与文字名称色值CSS 变量用途Ink Black#222222--palette-text-primary系统近黑色承担约 90% 的文字炭灰#3f3f3f--palette-text-focused焦点态输入文字与次级强调文案Ash Gray#6a6a6a--palette-bg-tertiary-hover次级标签、乡村小屋租赁式副标题、低调页脚链接Mute Gray#929292--palette-text-link-disabled禁用按钮与低优先级元数据Stone Gray#c1c1c1—第三级分隔线、图标描边、占位头像2.4 语义色与渐变Error Red#c13515--palette-text-primary-error表单校验错误、破坏性操作警告Deep Error#b32505错误态的按压/激活变体半透明黑rgba(0, 0, 0, 0.24)禁用的 Material 风格标签。品牌渐变只在字标与搜索按钮的品牌时刻出现绝不用于整面表面linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)这条珊瑚 → 洋红的扫光只用于细长的胶囊填充或 Logo 处理。2.5 源码中的令牌绑定tokens.css 的关键设计决策在 design-systems/airbnb/tokens.css 中有几个值得注意的绑定决策文件头部的 Schema notes 有详细说明#Bind 1--bg与--surface都解析为 Canvas White——Airbnb 拒绝卡片与页面之间存在色调差卡片靠 Hairline Gray 边缘和照片本身获得边界而非表面色调#Bind 2--surface-warm绑定 Soft Cloud#f7f7f7这是品牌明确发布的第三级表面层#Bind 3--accent-hover#e31c5f与--accent-activeDeep Rausch#e00b41是手工挑选而非公式推导的——直接用color-mix会过冲饱和度无法命中品牌渐变终点#Bind 5--elev-raised原样编码了 Airbnb 标志性的三层预订面板阴影#Bind 6--focus-ring是 2px Ink Black 而非 schema 默认的强调色环——因为 Rausch 色环会在夕阳照片、海蓝叠层前消失。语义色方面品牌文档只明确给了 Error Red--success: #008a05与--warn: #c47700是手工挑选的在白底上不与 Rausch 争抢的低饱和值且整体语义色像素应远低于页面总像素的 5%。3. 字体系统一个家族、500 是新的 400、负字距只给展示级3.1 字体家族Airbnb Cereal VF唯一主字体专有可变字重无衬线体。回退链按顺序Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif。提取的令牌中确认的字重500、600、700没有 400 常规体——系统的正文字重是 500给所有文本块略多的密度。OpenType 特性salt风格化替代字形用于紧凑的 11px 与 14px 600 字重标签未确认连字与分数数字特性。在tokens.css中display 与 body 共用同一字族栈视觉身份来自家族本身而非混搭字体--font-mono则留给kbd、表格数字与极少数的代码标签。3.2 层级表完整继承自原文档角色字号字重行高字距备注段落标题28px / 1.75rem7001.430下一趟旅行的灵感——页面级标题子段落标题22px / 1.38rem5001.18-0.44px该房源的设施关于房东——内容分隔器卡片标题21px / 1.31rem7001.430评论面板标题、卡片导语标题房源标题20px / 1.25rem6001.20-0.18px详情页房源标题副标题加粗16px / 1.00rem6001.250房东名、城市名正文中粗16px / 1.00rem5001.250详情页主要正文大按钮16px / 1.00rem5001.250预约成为房东默认按钮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.330NEW 胶囊标签徽章大写11px / 0.69rem6001.180salt特性——紧凑分类/状态徽章上标8px / 0.50rem7001.250.32px大写——价格注记、小数位tokens.css将这套层级压缩为--text-xs(12px) 到--text-4xl(56px) 的 8 级刻度其中 44px/56px 两档只给 Guest Favorite 评分锁标和罕见的 Hero 数字。3.3 排版原则一个家族、多种字重从 8px 法律文字到 28px 页面标题全部由 Cereal 承担500 是新的 400系统常规字重为 500负字距只给展示级≥20px 的标题压缩到 -0.18 至 -0.44px正文保持 0 保证可读性tokens.css对应--tracking-display: -0.02em标题行高收紧、正文放松展示级 1.18–1.25正文与说明 1.43对应--leading-body: 1.43与--leading-tight: 1.2的双模式节奏这正是旅行杂志感的来源除 8px 外不用全大写系统中唯一的大写是 8px 上标。3.4 字体替代方案Airbnb Cereal VF 是专有字体。最接近的开源替代是Circular Std仍是商业字体或Inter免费Google Fonts展示级需把字距压缩 -0.01em。追求严格品牌还原时文档化的回退链Circular, -apple-system, system-ui在 macOS/iOS 上渲染基本可接受因为system-ui会解析为旧金山字体、比例相近。4. 组件样式规范4.1 按钮主 CTA预约搜索添加日期背景 Rausch#ff385c文字 Canvas White#ffffffCereal 500 / 16px内边距纵向约 14px、横向 24px圆角 8px矩形或 50%圆形图标变体无边框激活/按压transform: scale(0.92) 2px Ink Black 焦点环0 0 0 2px #222222。次按钮成为房东、描边三级操作背景#ffffff文字 Ink Black#222222500 / 14–16px内边距 10px 16px圆角 20px胶囊或 8px矩形边框1px solid #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。胶囊选项卡按钮分类选择器首页 / 体验 / 服务背景透明文字 Ink Black500 / 16px内边距 8px 14px激活态标签下 2px Ink Black 下划线标签上方叠加 36–48px 的 3D 渲染插图图标。components.html中的.btn-primary:active正是原文档scale(0.92)的落地实现并用--motion-fast150ms--ease-standard控制回弹手感.btn-secondary则用--radius-lg20px 胶囊区别于主按钮的 8px 圆角。4.2 卡片与容器房源卡片首页网格、搜索结果背景#ffffff图片 14px 圆角文字直接置于透明背景之上图片 4:3 全幅外容器无内边距图片与元数据行之间 12px 间距无阴影——分隔靠留白与照片本身的圆角元数据模式第 1 行城市/地区16px 600、第 2 行距离/时长14px 500 Ash Gray、第 3 行日期范围、底部每晚价格行。详情页预订面板粘性右栏背景#ffffff圆角 14–20px边框1px solid #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 → 还不会向您收费注记。设施网格卡片行级 1px 边框非每项每行纵向 16px左侧 24px 描边图标 右侧 16px 500 标签。评论卡片无边框无内边距靠网格间距40px 圆形头像 16px 600 名字 14px 400 Ash Gray 日期下方 14px 500 正文。4.3 输入表单搜索栏首页主入口背景#ffffff三段式地点 / 日期 / 房客外框1px solid #dddddd圆角 32px全胶囊阴影rgba(0, 0, 0, 0.04) 0 2px 6px 0结构细竖分隔线划分三段每段 12px 500 标签 14px 500 占位符提交右侧 Rausch 圆形图标按钮直径 48px。components.html的.search-pill完整实现了该结构border-radius: var(--radius-pill)、段间border-left: 1px solid var(--border)、右侧 48px.search-submit用--accent填充。文本输入背景#ffffff、1px solid #dddddd边框、8px 圆角、14px 16px 内边距聚焦时边框切 Ink Black 并加 2px 黑色外环错误时边框与帮助文字切#c13515。日期选择器7 列日历网格圆形50%日期格宽 40–44px选中区间 Ink Black 背景白字起止锚点更大的实心圆中间日期用 Soft Cloud#f7f7f7浅色。4.4 导航顶部导航桌面高约 80px背景#ffffff底部1px solid #dddddd左Rausch 色 Airbnb 字标 Logo102×32px中三选项卡分类选择器36–48px 3D 图标在上、16px 500 标签在下激活态 2px Ink Black 下划线右成为房东文字链接 → 32px 圆形地球语言→ 36px 汉堡头像菜单。顶部导航移动全宽搜索胶囊占一行去哪里占位符 小放大镜下方三选项卡持续存在图标缩至约 28px底部固定标签栏探索激活态 Rausch/ 心愿单 / 登录——24px 图标上 12px 标签。房源详情次级导航滚过 Hero 图片后出现的固定横滚锚点链接照片 · 设施 · 评论 · 地点 · 房东高 56px底部 1px 边框。4.5 图片处理主比例首页房源网格 4:3、体验 Hero 16:9、头像 1:1圆角网格图片 14px、详情页 Hero 相框 20px、头像 50%详情页 5 图网格左侧 1 张大图宽 50% 右侧 2×2 四张小图共享 20px 圆角外容器广泛使用loadinglazy先渲染模糊占位预览轮播32px 圆形箭头按钮叠于图片垂直居中圆点指示器距底部 12px。4.6 签名组件Guest Favorite 奖项锁标44–56px 700 字重居中评分数字两侧手绘风月桂花环 SVG各高约 48px下方 12px 700 大写 GUEST FAVORITE 标签字距 0.32px副标签 14px 500 Ash Gray全宽块、无容器边框直接置于白色画布上。三选项卡分类选择器首页 / 体验 / 服务每项约 48px 3D 图标房屋、气球、铃铛 16px 500 标签体验与服务图标右上角浮一枚深海军蓝底 12px 700 白字 NEW 胶囊激活态 2px Ink Black 下划线。灵感城市网格首页下一趟旅行的灵感桌面 6 列、移动 2 列每格第 1 行 16px 600 城市名、第 2 行 14px 500 Ash Gray 租赁类型副标题纯文字无图顶部有分类选项卡热门 / 艺术与文化 / 海滩 / 山 / 户外 / 活动 / 旅行贴士与灵感 / Airbnb 友好公寓。预订粘性卡片滚过 Hero 后桌面固定在视口顶部下方 120px移动端折叠为全宽底部条从 $X / 晚起标签 Rausch预约胶囊始终显示价格标题 → 日期显示 → 房客数选择器 → Rausch CTA → 还不会向您收费免责声明。体验房东卡片3:2 封面照 全宽圆角容器房东 56px 圆形头像以 50% 重叠在封面下缘下方房东名 16px 700、入会时长 14px 500 Ash Gray、小型 Rausch联系房东胶囊按钮。需要了解的事项条带规则/政策三列块房屋守则、安全与房源、取消政策每列图标 16px 600 标题 14px 500 Ash Gray 正文 Ink Black 下划线了解更多链接条带上下 1px Hairline 边框。5. 布局原则8px 基元、密度与留白的分组哲学5.1 间距系统基本单位 8px提取刻度2、3、4、5.5、6、8、10、11、12、15、16、18.5、22、24、32px——含若干为像素级图标对齐服务的离格值段落内边距桌面上下 48–64px、移动 24–32pxtokens.css绑定为--section-y-desktop: 64px/--section-y-tablet: 48px/--section-y-phone: 32px卡片内部预订面板与大型卡 24px、设施行 16px、房源卡元数据 12px房源卡间距桌面 24px、移动 16px堆叠文本行间距 4–8px刻意收紧强化信息密度。5.2 网格与容器最大内容宽度超宽 1760–1920pxAirbnb 的网格比多数站点更宽多数详情页 1280pxtokens.css默认绑定--container-max: 1280px首页房源网格≥1760px 6 列、≥1440px 5 列、≥1128px 4 列、≥800px 3 列、≥550px 2 列、以下 1 列详情页非对称双栏主内容约 58%、粘性预订面板右侧约 36%、约 6% 间隙页脚 3 列支持 / 房东 / Airbnb。5.3 留白哲学Airbnb 信息密度高但不拥挤。留白用于分组卡片间 24px 让每张照片成为独立对象卡片内元数据 4–8px 让价格/城市/日期像一个整体。预订面板 24px 内部内边距但其内的行日期选择器、房客数、CTA以 12px 堆叠——卡片与页面的边界承担了比内部内容更多的分隔工作。5.4 圆角刻度圆角使用位置4px行内锚点、标签 chip8px文本按钮、下拉、小型工具按钮14px房源卡照片、通用内容容器、徽章20px主圆润按钮胶囊形、大图、预订面板32px搜索栏胶囊、超大容器50%所有圆形图标按钮、所有头像、心愿单爱心——系统的签名圆角tokens.css将其收敛为--radius-sm: 8px、--radius-md: 14px、--radius-lg: 20px、--radius-pill: 9999px四档。6. 纵深与阴影三层堆叠阴影而非单层投影层级处理使用位置0无阴影房源卡、正文内容、纯文本段落1rgba(0, 0, 0, 0.08) 0 4px 12px激活/按压图标按钮——克制的抬起2三层栈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预订粘性卡、模态、下拉菜单——签名三层阴影焦点环0 0 0 2px #222222激活态按钮、聚焦的搜索输入白色分离环rgb(255,255,255) 0 0 0 4px照片上叠放的圆形按钮——与彩色背景干净分离阴影哲学Airbnb 不用单一投影而是堆叠分层阴影。预订面板的三层阴影读起来像一次整体抬起实际是三个不同不透明度/模糊值的独立阴影——在阴影周围制造细微的抗锯齿显得高级而不沉重。这正是tokens.css中--elev-raised原样编码的值。装饰性纵深照片即纵深系统主要靠全幅照片制造视觉深度阴影与渐变克制使用月桂花环锁标用两枚 SVG 月桂插图把扁平评分数字变成仪式感的奖杯3D 渲染分类图标家 / 体验 / 服务的图标带有烧录进画面的柔和内部光照与微妙阴影——这是品牌唯一允许立体感插画的地方。7. 应做与不应做Dos Donts应做把 Rausch#ff385c留给主操作与激活选项卡指示器绝不用装饰性使用稀释它让照片自由呼吸——4:3 裁切、14–20px 圆角、不在照片上叠文字、不加渐变暗角Rausch 之下的所有文字层用 Ink Black#222222——这是系统近黑色而非纯#000000三选项卡选择器的 3D 图标与扁平文字排版配对——同一画面内不要混搭插图风格堆叠三个低不透明度阴影约 2%、4%、10%制作签名预订面板纵深所有卡片间与行间分隔线用#dddddd的 1px 边框桌面端把预订面板做成粘性移动端折叠为底部固定预订条元数据组内 4–8px、卡片间 24px——信息密度是刻意设计。不应做不引入 Rausch / Plus 洋红 / Luxe 紫产品线调色板之外的次级强调色不把文字放进照片里——说明文字永远放在图片下方不叠放除 8px 上标角色外不使用大写标签不把图标按钮做成 50% 以外的圆角——圆形是系统的签名形状不给房源卡加投影——它们平放在白色画布上无纵深不使用渐变背景——系统中唯一的渐变是字标上细窄的 Rausch → 洋红扫光不使用 400 常规字体字重——Airbnb Cereal 的正文字重是 500不用其他展示字体覆盖 Airbnb Cereal VF——系统刻意保持单家族。8. 响应式行为约 60 个断点背后的 8 个关键布局变化Airbnb 声明了约 60 个断点组件库中的设计时产物但有意义的布局变化发生在远小于此的集合上名称宽度主要变化超宽≥1760px6 列房源网格最大内容宽度 1760–1920px桌面 XL1440–1759px5 列网格、完整导航、粘性右栏预订面板桌面1128–1439px4 列网格、粘性预订面板延续笔记本1024–1127px3–4 列网格、分类导航保持水平平板800–1023px3 列网格、全局搜索可能折叠为单行胶囊小平板550–799px2 列网格、预订面板落为全宽行内块移动375–549px1 列堆叠、底部固定标签栏出现探索 / 心愿单 / 登录小屏移动375px边缘内边距收紧到 16px分类选择器图标缩至约 28px触控目标所有交互元素满足 44×44px 以上。圆形图标按钮家族设计为 32–44px带 8–12px 扩展命中区Rausch 主预订按钮高约 48px三选项卡选择器的命中区为标签 图标的完整矩形通常每选项卡约 64×80px。折叠策略导航平板以上保留字标 三选项卡移动端选择器滑到搜索胶囊下方地球/头像控制移入底部固定标签栏搜索栏桌面三段式胶囊移动端折叠为单行去哪里胶囊点击打开全屏搜索页预订面板≥1128px 粘性右栏800–1127px 行内800px 底部固定预约胶囊房源网格跨断点 6 → 5 → 4 → 3 → 2 → 1 列重排详情页图片网格桌面 5 图布局1 大 4 小移动端变为带页面圆点指示器的可滑动全屏轮播页脚3 列布局 800px 折叠为单列堆叠。图片行为loadinglazy全局应用先用im_wURL 参数化的模糊预览缩略图响应式图片通过im_w查询参数按宽度分发im_w240、im_w720、im_w1200、im_w2400无艺术裁切——同一张图跨断点缩放轮播自动调整照片高度以维持一致的 4:3 比例。9. Agent 提示词指南让生成器精确命中品牌快速色彩参考主 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)组件提示词示例可直接复用「创建主预约按钮Rausch (#ff385c) 背景、白色 Airbnb Cereal 500 字重 16px 标签、14px × 24px 内边距、8px 圆角、无阴影。激活/按压时加transform: scale(0.92)和 2px Ink Black 焦点环0 0 0 2px #222222。」「创建房源卡片14px 圆角的 4:3 全幅照片、容器无阴影照片下方以 4px 间隙堆叠三行文本城市名 16px 600 Ink Black、租赁类型 14px 500 Ash Gray (#6a6a6a)、价格区间 16px 500 Ink Black 与 14px 的每晚后缀。」「设计粘性预订面板白底、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还不会向您收费免责声明。」「创建三选项卡分类选择器首页、体验、服务三个等宽选项卡每项上方约 48px 的 3D 渲染插图图标房屋、气球、铃铛、下方 16px 500 Ink Black 标签激活选项卡 2px Ink Black 下划线体验与服务图标右上角加深海军蓝底 12px 700 白字 NEW 胶囊。」「渲染 Guest Favorite 奖项锁标52px 700 Ink Black 居中评分数字两侧手绘风 SVG 月桂花环高约 48px下方 12px 700 大写 GUEST FAVORITE 标签字距 0.32px副标签 14px 500 Ash Gray无容器边框全宽块直接置于白色画布上。」迭代指南对已生成的屏幕做改进时一次只聚焦一个组件引用本文档具体的色彩名称与十六进制码是Ink Black #222222不是深灰自然语言描述与尺寸结合说克制的三层纵深而非一长串阴影字符串描述想要的感觉杂志感、照片优先 vs 高密度工具型正文始终默认 Airbnb Cereal VF 的 500 字重强调用 600–700——不用 400让 Rausch 粉色保持稀有——如果一个视口出现多个 Rausch 元素考虑中和其中一个。已知空白来源边界说明按 source/evidence.md 的声明该包基于 OpenDesign 精选的内置 fixture 二次整理不声称对上游品牌站点做过全新抓取因此存在以下已知空白首页房源网格卡主房源卡网格airbnb.com 的主视觉表面在提取截图时未被完整捕获上述规格系从灵感网格结构与 Airbnb 更广泛的惯例推断量产前应到线上核对精确比例与元数据层级体验分类图标3D 插画图标以栅格资产提供精确源文件规格SVG 对 PNG、渲染像素尺寸未记录动画与过渡时间未捕获静态提取范围——tokens.css因此为--motion-fast: 150ms、--motion-base: 200ms绑定的是贴合品牌触感的默认值深色模式提取的产品表面未见原生深色模式本文档只描述单一浅色主题。10. 如何在 OpenDesign 中使用该包Airbnb 设计系统包是 OpenDesigndesign-systems/brand/目录规范化的产物。根据 design-systems/_schema/AGENTS.md 的契约说明每个捆绑目录都需提供manifest.json、DESIGN.md与tokens.cssAirbnb 包额外携带了design-tokens.json、tailwind-v4.css、components.html与preview/颜色/排版/间距三张静态预览页。实际使用路径依 USAGE.md将 design-systems/airbnb/tokens.css 的:root块逐字粘贴进产物第一个style块components.html顶部就是同样的粘贴示范之后所有组件样式一律通过var(--*)取值避免在:root块之外裸写十六进制需要精确选择器或状态时打开 design-systems/airbnb/components.html其 fixture 摘要显示111 个选择器、67 个类、28 个元素、全部可见值来自 tokens.css组件清单看 design-systems/airbnb/components.manifest.json视觉快检看preview/三页令牌契约映射见 design-systems/airbnb/source/token-contract.report.jsondesign-tokens.json与tailwind-v4.css是派生产物不应手工编辑。遵守这些约束即可保证品牌令牌名不变 → 跨品牌切换稳定Rausch 强调色被限制在每视口最多两次可见使用正文用 Cereal 500 字重焦点环用 2px Ink Black——最终产物将精确命中 Airbnb 那套杂志感、照片优先、单家族排版的视觉语言。【免费下载链接】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），仅供参考