用 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、AirbnbRausch 珊瑚最受房客欢迎奖锁标——居中的巨型评分数字夹在两枚桂冠之间是全系统最具辨识度的瞬间之一固定预订面板价格 → 日期 → 房客数桌面端锚定右列移动端折叠为底部固定的预订栏移动端底部固定导航探索 / 心愿单 / 登录以 Rausch 色作为激活态着色。在仓库中这份视觉意图被完整记录于 DESIGN.md本文所依据的意大利语版为 DESIGN-it.md并由 manifest.json 标注为E-Commerce Retail类别的bundled捆绑来源包。二、色板与角色从 Rausch 到 Ink Black 的分层叙事主色PrimarioRausch#ff385c品牌标志性珊瑚粉。CSS 变量--palette-bg-primary-core。用于主预订按钮、搜索提交按钮、激活 tab 下划线、心愿单心形填充、价格强调。是每个页面上可见度最高的单一颜色。次级与强调色Secondario AccentoDeep Rausch#e00b41饱和度更高的变体。CSS 变量--palette-bg-tertiary-core。用于按钮的按下/激活态与渐变终点。Plus Magenta#92174dCSS 变量--palette-bg-primary-plus。Airbnb Plus 产品线精选高端房源的品牌色。Luxe Purple#460479CSS 变量--palette-bg-primary-luxe。Airbnb Luxe 产品线别墅/庄园租赁的品牌色。Info Blue#428bffCSS 变量--palette-text-legal。用于法律/信息类链接条款、隐私、须知——系统中唯一非单色的链接色。表面与背景Superficie SfondoCanvas White#ffffff默认页面背景。每张卡片、每个容器、每个详情页都从这里开始。Soft Cloud#f7f7f7细薄的次级表面色调用于页脚背景、地图视图容器以及所有希望从主白色中退后的其余内容区块。Hairline Gray#dddddd无处不在的 1px 边框色——分隔卡片、服务行、评价面板、页脚列。布局系统的主力军。中性色与文本Neutri Testo名称色值CSS 变量用途Ink Black#222222--palette-text-primary系统准黑色。每个标题、正文段、导航标签、价格。约占页面全部文本的 90%Charcoal#3f3f3f--palette-text-focused输入框聚焦态文本、低一级强调文本Ash Gray#6a6a6a--palette-bg-tertiary-hover次级标签、乡村小屋出租式副标题、淡化的页脚链接Mute Gray#929292--palette-text-link-disabled禁用按钮、低优先级元数据Stone Gray#c1c1c1—三级分隔线、图标描边、占位头像语义色与强调Semantici AccentoError Red#c13515CSS 变量--palette-text-primary-error。表单校验错误、破坏性操作警告。Deep Error#b32505CSS 变量--palette-text-secondary-error-hover。错误状态的按下/激活变体。Translucent Blackrgba(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: #e31c5fRausch 与 Deep Rausch 之间手工挑选的中间值、--accent-active: #e00b41Deep 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-identity8、B-slot4、A226、A1-structure18四层统计了 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 的紧凑标签——很可能用于更窄的数字与特殊字符成形。未观察到连字或分数特性。层级表完整继承角色字号字重行高字距说明区块标题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.180启用salt——紧凑的分类/状态徽章上标8px / 0.50rem7001.250.32px大写——价格脚注、小数代码排版原则一个家族多种字重。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#ffffffAirbnb Cereal 50016px内边距约 14px 纵向、24px 横向圆角8px矩形或 50%圆形图标变体无边框激活/按下transform: scale(0.92)加上 2px Ink Black 焦点环0 0 0 2px #222222。次级按钮成为房东、带边框的三级操作背景#ffffff文本 Ink Black#222222Airbnb Cereal 50014–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#222222Airbnb Cereal 50016px内边距 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 正文段。输入与表单搜索栏首页主入口背景#ffffff1px 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错误边框变#c13515Error Red帮助文本同色。日期选择器日历网格7 列布局40–44px 宽 50% 圆形日期格选中区间Ink Black#222222背景配白色数字起止锚点为更大的实心圆中间日期用 Soft Cloud#f7f7f7色调。导航顶部导航桌面高度约 80px背景#ffffff左侧Rausch 色 Airbnb wordmarklogo 锁标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 圆角外容器懒加载大量使用loadinglazy搭配模糊占位预览轮播32px 圆形箭头按钮垂直居中叠于图片圆点指示器位于底缘上方 12px。签名组件最受房客欢迎奖锁标高评分详情页突出展示居中评分数字以 44–56px 字重 700 渲染两枚手绘 SVG 桂冠插图分列左右高约 48px下方最受房客欢迎标签 12px 700 全大写字距 0.32px14px 500 Ash Gray 短副标签全宽区块、无容器边框——直接坐在白色画布上。三 tab 分类选择器每个导航面顶部三个 tab房源 / 体验 / 服务每 tab 为约 48px 高的 3D 渲染插图图标叠于 16px 字重 500 标签之上体验与服务当前带一枚小NEW深蓝胶囊白色 12px 700 文本于深蓝背景悬浮于图标右上角激活 tab2px 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–1920pxAirbnb 让网格比多数网站更透气多数详情页 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 堆叠——卡片与页面之间的边界承担的分隔工作比卡片内部内容之间的分隔更多。圆角比例完整继承圆角用途4px行内锚点标签、芯片标签8px文本按钮、下拉、小型工具按钮14px房源卡片摄影、通用内容容器、徽章20px主圆角按钮胶囊形态、大图、预订面板32px搜索栏胶囊、超大容器50%所有圆形图标按钮、所有头像、心愿单心形——系统的标志性圆几何六、深度与层级禁止单层阴影拥抱三层叠加层级处理用途0无阴影房源卡片、正文内容、纯文本区块1rgba(0, 0, 0, 0.08) 0 4px 12px激活/按下的图标按钮返回、分享、收藏——细微抬升指示交互2rgba(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叠于照片上的圆形按钮——4px 白环将按钮与彩色摄影背景清晰分离阴影哲学Airbnb 使用叠加分层阴影而非单层阴影。预订面板的三层阴影读作一次连贯的抬升实为三条不同透明度/模糊值的独立阴影2% 细环、4% 短模糊、10% 中模糊——在阴影边缘产生细微的抗锯齿效果看起来高级而不笨重。该三层堆叠被原样编码进 token--elev-raisedtokens.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 个断点其组件库的设计产物但显著的布局变化发生在一个小得多的集合上名称宽度关键变化超宽屏≥1760px房源网格 6 列内容最大宽度 1760–1920px桌面 XL1440–1759px5 列网格、完整导航可见、右列固定预订面板桌面1128–1439px4 列网格、固定预订面板保持笔记本1024–1127px3–4 列网格、分类导航保持横向平板800–1023px3 列网格、全局搜索可折叠为单行胶囊小平板550–799px2 列网格、预订面板降为全宽内联块移动375–549px1 列堆叠布局、出现底部固定 tab 栏探索 / 心愿单 / 登录小屏移动375px侧边内边距收紧至 16px、分类选择器图标缩至约 28px触控目标所有交互元素满足或超过 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 折叠为单列堆叠。图片行为通用loadinglazy先以参数化im_w的模糊预览 URL 占位响应式图片使用 Airbnb 的muscache.comCDN 与im_w查询参数按宽度分发im_w240、im_w720、im_w1200、im_w2400无 art-direction 裁切——同一张图片跨断点上下缩放轮播自动适配照片高度以保持一致的 4:3 比例无论源图宽高比如何。九、Agent 提示指南在 Open Design 工作流中生成 Airbnb 风格界面该设计系统包正是为 Agent 消费而设计。按照 USAGE.md 的阅读顺序先读 USAGE 理解包契约再读 DESIGN.md 获取视觉意图与反模式然后把 tokens.css 的:root块原样粘贴进首个 artifact 的style块之后所有取值一律通过var(--*)解析绝不使用裸 hex。颜色快速参考主 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 × 24pxborder-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.32px14px 500 Ash Gray 副标签全宽区块直接坐在白色画布上、无容器边框。迭代指南当基于该设计系统打磨既有画面时一次只专注一个组件引用本文档中的具体颜色名与 hex 码例如说Ink Black #222222而非深灰用自然语言搭配度量描述三层细微抬升而非一长串阴影字符串描述期望的感觉杂志风格、摄影优先对比密集型工具始终用 Airbnb Cereal VF 字重 500 作正文、600–700 作强调——绝不用 400保持 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.mdAgent 设计散文、tokens.css编译的语义 token 样式表可选富文件包括components.html组件 fixture、components.manifest.json组件/token 索引、design-tokens.jsontoken 契约 JSON与tailwind-v4.cssTailwind 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等实现写一次 tokenTailwind 全可用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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考