0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。

2026-10-15 21:17:28 +08:00

27 KiB

Raw Blame History

受 Airbnb 啟發的設計系統

Category: 電商與零售旅遊市場平台。溫暖珊瑚色調，以攝影為核心，圓角 UI。

1. 視覺主題與氛圍

Airbnb 2026 年的設計如同一本恰好做成了 App 的旅遊雜誌——純淨的白色畫布讓位於全幅攝影，介面本身退隱其後，讓房源照片自由呼吸。標誌性的 Rausch 珊瑚粉（#ff385c）用得克制卻無處不在：搜尋 CTA、活躍標籤指示器、主要操作按鈕，偶爾點綴在價格或願望清單收藏愛心圖示上。其餘部分是嚴謹的灰階體系，#222222 承載了幾乎所有文字。

這套系統之所以一眼認出是 Airbnb，在於它對內容投注的信任。房源照片以英雄尺寸展示，4:3 比例、全幅圓角處理。分類切換透過三選項卡選擇器實現（民宿 / 體驗 / 服務），搭配 3D 渲染的插畫圖示（坡屋頂小屋、熱氣球、服務鈴）——實體感、觸感十足，近乎玩具質感——配上清晰的 Airbnb Cereal VF 標籤文字。這是罕見的消費類產品，能讓 3D 渲染與純排版 UI 共存而毫無違和感。

最新登場的介面是體驗產品線——相同的視覺風格，但卡片密度更高，攝影更豐富，中央錨定的預訂面板帶有固定右側欄定價。房間和體驗的詳情頁都遵循嚴格的範本：全幅英雄圖片網格 → 疊加的圓角預訂卡片（捲動時固定）→ 設施介紹 → 評價（「房客最愛」獎項以一個大號居中的 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 珊瑚）
「房客最愛」獎項鎖定組合——超大居中評分數字夾在兩側月桂花環之間，是系統中最具辨識度的設計時刻之一
固定預訂面板，桌面端以價格 → 日期 → 人數的疊加形式固定於右側欄，行動端轉換為底部錨定的「預訂」欄
行動端固定底部導覽（探索 / 願望清單 / 登入），活躍狀態使用 Rausch 色調

2. 色彩體系與用途

主色

Rausch（#ff385c）：品牌標誌性珊瑚粉。CSS 變數 --palette-bg-primary-core。用於：主要「預訂」按鈕、搜尋提交按鈕、活躍標籤底線、願望清單愛心填充、價格強調。每個頁面上視覺優先級最高的單一顏色。

輔助色與強調色

深 Rausch（#e00b41）：飽和度更高的變體。CSS 變數 --palette-bg-tertiary-core。用於按下/啟用按鈕狀態和漸層終止色。
Plus 品紅（#92174d）：CSS 變數 --palette-bg-primary-plus。Airbnb Plus 產品層級的品牌色——面向精選高端房源的產品線。
Luxe 紫（#460479）：CSS 變數 --palette-bg-primary-luxe。Airbnb Luxe 產品層級的品牌色——面向別墅/莊園級別租賃。
資訊藍（#428bff）：CSS 變數 --palette-text-legal。用於法律/資訊類連結（條款、隱私、說明）——系統中唯一的非單色連結顏色。

表面色與背景色

畫布白（#ffffff）：預設頁面背景。每張卡片、每個容器、每個詳情頁都從這裡開始。
雲霧灰（#f7f7f7）：頁尾背景、地圖視圖包裝器以及希望退居主白之後的「其他」區域使用的微妙底面色調。
髮絲灰（#dddddd）：無處不在的 1px 邊框色——分隔卡片、設施行、評價面板、頁尾欄。布局系統的基礎色。

中性色與文字色

墨黑（#222222）：CSS 變數 --palette-text-primary。系統的近黑色。所有標題、正文段落、導覽標籤、價格文字均使用此色。佔頁面全部文字的約 90%。
炭灰（#3f3f3f）：CSS 變數 --palette-text-focused。用於聚焦狀態輸入框文字和次級強調文案。
灰燼（#6a6a6a）：CSS 變數 --palette-bg-tertiary-hover。次級標籤、城市名下方「鄉村租賃」類副標題文案、低調頁尾連結。
靜默灰（#929292）：CSS 變數 --palette-text-link-disabled。停用按鈕和低優先級中繼資料。
石灰（#c1c1c1）：三級分隔線、圖示描邊、佔位頭像。

語義色與強調色

錯誤紅（#c13515）：CSS 變數 --palette-text-primary-error。表單驗證錯誤、危險操作警告。
深錯誤色（#b32505）：CSS 變數 --palette-text-secondary-error-hover。錯誤狀態的按下/啟用變體。
半透明黑（rgba(0, 0, 0, 0.24)）：CSS 變數 --palette-text-material-disabled。停用 Material 風格標籤。

漸層系統

Airbnb 的品牌漸層使用極為克制，通常只出現在品牌文字識別和搜尋按鈕的品牌化時刻：

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

這道珊瑚色→品紅的漸層是「品牌時刻」——從不用於整塊表面，僅作為窄型膠囊填充或品牌 logo 處理。

3. 排版規則

字體家族

Airbnb Cereal VF（主要且唯一）：承載整套系統的專有可變字重無襯線字體。回退順序：Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif。

提取的 token 中觀察到的字重：500、600、700。沒有 400 常規體——系統的「正文」字重是 500，使每段文字都帶有一種微妙的額外厚度，讀起來自信而篤定。

OpenType 特性：salt（樣式替代）用於緊湊的 11px 和 14px 600 字重標籤——可能用於更緊湊的數字和特殊字元造型。未觀察到連字或分數數字特性。

層級體系

角色	尺寸	字重	行高	字間距	備注
區塊標題	28px / 1.75rem	700	1.43	0	「未來出行靈感」— 頁面級標題
子區塊標題	22px / 1.38rem	500	1.18	-0.44px	「房源提供的服務」、「認識房東」— 內容分隔標題
卡片標題	21px / 1.31rem	700	1.43	0	評價面板標題、卡片主標題
房源標題	20px / 1.25rem	600	1.20	-0.18px	「小團體遊艇之旅，暢飲紅酒與水果」— 詳情頁房源標題
副標題粗體	16px / 1.00rem	600	1.25	0	房東姓名、城市名稱
正文中等	16px / 1.00rem	500	1.25	0	詳情頁主要正文
大號按鈕	16px / 1.00rem	500	1.25	0	「預訂」、「成為房東」
預設按鈕	14px / 0.88rem	500	1.29	0	標準按鈕標籤
連結	14px / 0.88rem	500	1.43	0	導覽連結、頁尾連結
說明文字中等	14px / 0.88rem	500	1.29	0	中繼資料、副標題行（「鄉村租賃」、「別墅租賃」）
說明文字粗體	14px / 0.88rem	600	1.43	0	啟用 `salt` 特性——數字統計、小字強調
小號說明文字	13px / 0.81rem	400	1.23	0	評價日期、微型中繼資料
微型預設	12px / 0.75rem	400	1.33	0	頁尾免責聲明、法律微型文案
微型粗體	12px / 0.75rem	700	1.33	0	「新」標籤膠囊
徽章大寫	11px / 0.69rem	600	1.18	0	`salt` 特性——緊湊的分類/狀態徽章
上標	8px / 0.50rem	700	1.25	0.32px	大寫——價格腳注、小數尾數

原則

一個字體家族，多種字重。 Airbnb Cereal VF 處理從 8px 法律文字到 28px 頁面標題的一切——視覺識別來自字體家族本身，而非混用字體。
500 是新的 400。 系統的「常規」字重是 500，使每段文字比網頁預設值稍顯自信。
僅展示型文字使用負字間距。 20px 以上的標題將字間距壓縮 -0.18 至 -0.44px，以呈現雕琢感；正文尺寸保持 0 字間距以確保可讀性。
標題行高緊湊，正文寬鬆。 展示型文字行高為 1.18–1.25（緊湊）；正文和說明文字放寬至 1.43 以提升長篇閱讀舒適度。
除 8px 外不使用全大寫。 系統中唯一的大寫轉換是 8px 上標——其他地方一律使用句首大寫搭配微妙的字重變化來完成強調。

關於字體替代方案的說明

Airbnb Cereal VF 是專有字體。最接近的開源替代品是 Circular Std（仍為商業字體）或 Inter（免費，Google Fonts），在展示尺寸下減少約 -0.01em 的字間距。若需嚴格品牌保真，文件化的回退鏈（Circular, -apple-system, system-ui）在 macOS/iOS 上渲染效果尚可，因為 system-ui 會解析為比例相近的舊金山字體。

4. 元件樣式

按鈕

主要 CTA（「預訂」、「搜尋」、「新增日期」）

背景：Rausch #ff385c
文字：畫布白 #ffffff，Airbnb Cereal 500，16px
內距：約 14px 垂直，24px 水平
圓角：8px（矩形）或 50%（圓形圖示變體）
邊框：無
啟用/按下：transform: scale(0.92) 加 2px #222222 聚焦環 0 0 0 2px

次級按鈕（「成為房東」，描邊三級操作）

背景：#ffffff
文字：墨黑 #222222，Airbnb Cereal 500，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
文字：石灰 #c1c1c1
透明度：0.5

膠囊標籤按鈕（分類選擇器「民宿 / 體驗 / 服務」）

背景：透明
文字：墨黑 #222222，Airbnb Cereal 500，16px
內距：8px 14px
活躍狀態：標籤下方 2px 墨黑底線
搭配標籤上方 36–48px 3D 渲染插畫圖示

卡片與容器

房源卡片（首頁網格、搜尋結果）

背景：#ffffff
圓角：圖片 14px，文字直接位於透明背景下方
圖片：4:3 比例，全幅，相同 14px 圓角
內距：外部容器無內距；圖片與中繼資料行之間 12px 間距
陰影：無——分隔依靠留白和照片固有的圓角實現
中繼資料模式：第一行城市/地區（16px 600），第二行距離/時長（14px 500 灰燼色），第三行日期範圍，底部價格行含「每晚」

詳情頁預訂面板（房間/體驗頁面的固定右側欄）

背景：#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 → 「尚未收費」腳注

設施網格卡片（房源詳情頁）

背景：#ffffff
邊框：行級 1px solid 髮絲灰 #dddddd（非每項）
內距：每行設施垂直 16px
圖示 + 標籤模式：左側 24px 描邊圖示，右側 16px 500 字重標籤

評價卡片（詳情頁單條評價）

背景：#ffffff，無邊框
內距：0（依賴網格間距）
內容：40px 圓形頭像 + 16px 600 字重姓名 + 14px 400 灰燼色日期同行，下方 14px 500 正文段落

輸入框與表單

搜尋欄（首頁主搜尋）

背景：#ffffff
邊框：1px solid 髮絲灰 #dddddd 包裹三個分段（地點 / 時間 / 人數）
圓角：32px（完整膠囊）
陰影：rgba(0, 0, 0, 0.04) 0 2px 6px 0 — 微妙懸浮感
結構：三段式，細垂直分隔線分隔，每段上方有 12px 500 標籤，下方有 14px 500 佔位符
提交：右端 Rausch 圓形圖示按鈕，直徑 48px

文字輸入框（通用表單）

背景：#ffffff
邊框：1px solid 髮絲灰 #dddddd
圓角：8px
內距：14px 16px
聚焦：邊框切換為墨黑，添加 0 0 0 2px 黑色外環
錯誤：邊框切換為 #c13515（錯誤紅），輔助文字使用同色

日期選擇器

日曆網格：7 欄布局，圓形 50% 日期儲存格，寬 40–44px
已選範圍：墨黑 #222222 背景配白色數字
起止錨點：較大填充圓；中間日期使用雲霧灰 #f7f7f7 色調

導覽

頂部導覽（桌面端）

高度：約 80px
背景：#ffffff
左側：Rausch 色 Airbnb 品牌文字+logo 組合（102×32px）
中央：三選項卡分類選擇器（民宿 / 體驗 / 服務），每個標籤上方有 36–48px 3D 圖示，下方 16px 500 標籤；活躍標籤有 2px 墨黑底線
右側：「成為房東」文字連結，然後 32px 圓形地球（語言），然後 36px 漢堡頭像選單
底部邊框：1px solid 髮絲灰 #dddddd

頂部導覽（行動端）

全寬搜尋膠囊佔據單行：「開始搜尋」佔位符搭配小型搜尋圖示
下方：三選項卡分類選擇器持續顯示（民宿 / 體驗 / 服務）——插畫圖示縮小至約 28px
底部固定標籤列：探索（活躍狀態 Rausch）/ 願望清單 / 登入——24px 圖示上方 12px 標籤

房源詳情次級導覽

捲動過英雄圖片後出現的固定水平錨點連結（照片 · 設施 · 評價 · 位置 · 房東）
高度：56px
底部邊框：1px solid 髮絲灰

圖片處理

主要寬高比：首頁房源網格 4:3，體驗英雄攝影 16:9，頭像 1:1
圓角：房源網格圖片 14px，詳情頁英雄照片框 20px，頭像 50%
詳情頁圖片網格：五照片網格，左側單張大圖（50% 寬）加右側 2×2 四小圖，共享 20px 外圓角容器
延遲載入：大量使用 loading="lazy" 配模糊佔位預覽
輪播：32px 圓形箭頭按鈕覆蓋圖片垂直居中；圓點指示器位於底邊上方 12px

標誌性元件

「房客最愛」獎項鎖定組合（高評分房源詳情頁突出展示）

居中評分數字，700 字重，44–56px
左右各一個手繪月桂花環 SVG 插圖，約 48px 高
下方：「房客最愛」標籤，12px 700 大寫，字間距 0.32px，副標籤 14px 500 灰燼色
全寬區塊，無容器邊框——直接置於白色畫布

三選項卡分類選擇器（出現在每個瀏覽介面頂部）

三個標籤：民宿 / 體驗 / 服務
每個標籤：約 48px 高的 3D 渲染插畫圖示（房屋、氣球、服務鈴）上方，下方 16px 500 標籤
體驗和服務當前攜帶小型深海軍藍「新」標籤（圖示右上角浮動的 12px 700 白色文字深藍背景）
活躍標籤：標籤下方 2px 墨黑底線

靈感城市網格（首頁「未來出行靈感」）

桌面端 6 欄目的地連結網格，行動端 2 欄
每格：第一行 16px 600 城市名，第二行 14px 500 灰燼色租賃類型副標題（「鄉村租賃」、「別墅租賃」）
無圖片——純文字網格
上方按分類標籤（熱門 / 藝術與文化 / 海灘 / 山地 / 戶外 / 娛樂活動 / 旅遊靈感 / Airbnb 友好公寓）——活躍標籤有 2px 底線和字重變化

預訂固定卡片（房源詳情頁）

桌面端使用者捲動過英雄區域後固定於視口頂部以下 120px
行動端折疊為全寬底部列，顯示「$X 起/晚」標籤和 Rausch「預訂」膠囊
始終顯示：價格標題 → 日期顯示 → 房客選擇器 → Rausch CTA → 「尚未收費」免責聲明

體驗房東卡片（體驗詳情頁）

全寬圓角容器，頂部帶 3:2 封面照片
圓形房東頭像（56px）與封面底邊重疊 50%
重疊下方：房東姓名 16px 700，入住時長 14px 500 灰燼色，小型 Rausch「聯絡房東」膠囊按鈕
用作評價與設施/位置區塊之間的過渡

「須知事項」條帶（房源詳情頁）

3 欄規則/政策區塊（房屋規則、安全與房產、取消政策）
每欄：頂部圖示，16px 600 標題，14px 500 灰燼色正文，墨黑底線「顯示更多」連結
分隔線：整個條帶頂部和底部 1px 髮絲灰邊框

5. 布局原則

間距系統

基礎單位：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
房源卡片間距：桌面端 24px，行動端 16px
堆疊文字行間距：4–8px（極緊——強化旅遊房源「資訊密集」的感覺）

網格與容器

最大內容寬度：超寬螢幕 1760–1920px（Airbnb 允許網格比大多數網站延伸更遠）；大多數詳情頁 1280px
首頁房源網格：≥1760px 時 6 欄，≥1440px 時 5 欄，≥1128px 時 4 欄，≥800px 時 3 欄，≥550px 時 2 欄，以下 1 欄
詳情頁：2 欄不對稱布局——主要內容約 58%，固定預訂面板右側約 36%，約 6% 間距
頁尾：3 欄支援 / 房東 / Airbnb

留白哲學

Airbnb 資訊密集卻從不擁擠。留白用於分組——房源卡片有 24px 間距使每張照片作為獨立物件呈現，但每張卡片下方的中繼資料使用 4–8px 間距，使價格/城市/日期感覺像一個整體。詳情頁預訂面板有 24px 內部內距，但其中的行（日期選擇器、房客選擇器、CTA）以 12px 堆疊——卡片與頁面之間的邊界比內容內部做了更多分隔工作。

圓角刻度

圓角	用途
4px	內聯錨點標籤、標籤芯片
8px	文字按鈕、下拉選單、小型工具按鈕
14px	房源卡片攝影、通用內容容器、徽章
20px	主要圓角按鈕（膠囊形）、大型圖片、預訂面板
32px	搜尋欄膠囊、超大容器
50%	所有圓形圖示按鈕、所有頭像、願望清單愛心——系統標誌性圓形幾何

6. 深度與層級

層級	處理方式	用途
0	無陰影	房源卡片、正文內容、純文字區塊
1	`rgba(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`	疊加在照片上的圓形按鈕——4px 白色環將按鈕與彩色圖片背景乾淨分離

陰影哲學：Airbnb 使用堆疊分層陰影而非單一投影。三層預訂面板陰影讀起來像一個整體的抬升，但實際上是三個不同透明度/模糊值的獨立陰影——在陰影邊緣創造微妙的反鋸齒效果，質感高級而不沉重。

裝飾性深度

攝影即深度：系統大量依賴全幅攝影創造視覺深度；陰影和漸層使用極為克制，讓照片承擔主要工作
月桂花環鎖定組合：「房客最愛」獎項使用兩個 SVG 月桂插圖，賦予原本平面的評分數字一種儀式感、如同獎杯的存在感
3D 渲染分類圖示：民宿/體驗/服務圖示內置柔和內部光照和微妙投影——系統中唯一允許「立體」插圖的地方

7. 規範與禁忌

規範

將 Rausch #ff385c 保留用於主要操作和活躍標籤指示器——切勿用於裝飾性目的而稀釋其存在感。
讓攝影自由呼吸——4:3 裁切，14–20px 圓角，無覆蓋文字，無漸層遮罩。
所有 Rausch 以下的文字層使用墨黑 #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. 響應式行為

斷點

Airbnb 聲明了約 60 個斷點（來自其元件庫的設計時產物），但有意義的布局變化發生在一個小得多的集合中：

名稱	寬度	關鍵變化
超寬螢幕	≥1760px	6 欄房源網格，1760–1920px 最大內容寬度
桌面 XL	1440–1759px	5 欄網格，完整導覽可見，固定右側預訂面板
桌面	1128–1439px	4 欄網格，固定預訂面板持續顯示
筆電	1024–1127px	3–4 欄網格，分類導覽保持水平
平板	800–1023px	3 欄網格，全局搜尋可能折疊為單行膠囊
小平板	550–799px	2 欄網格，預訂面板降至全寬內聯塊
行動端	375–549px	1 欄堆疊布局，底部固定標籤列出現（探索 / 願望清單 / 登入）
小手機	<375px	邊緣內距收緊至 16px；分類選擇器圖示縮小至約 28px

觸控目標

所有互動元素滿足或超過 44×44px。圓形圖示按鈕系列專門設計為 32–44px，搭配 8–12px 延伸點擊區域內距。Rausch 主要預訂按鈕約 48px 高。三選項卡分類選擇器的點擊區域是完整的標籤加圖示矩形（每個標籤通常約 64×80px）。

折疊策略

導覽：平板及以上保留 Airbnb 品牌文字 + 三選項卡選擇器；行動端選擇器滑至搜尋膠囊正下方，地球/頭像控件移至底部固定標籤列。
搜尋欄：桌面端三段式膠囊（地點 / 時間 / 人數）+ Rausch 圓形提交按鈕；行動端折疊為單行「開始搜尋」膠囊，點擊後打開全螢幕搜尋介面。
預訂面板：≥1128px 時固定右側欄；800–1127px 時內聯於主內容欄；<800px 時底部固定「預訂」膠囊。
房源網格：跨斷點從 6 → 5 → 4 → 3 → 2 → 1 欄重排。
詳情頁圖片網格：桌面端五圖布局（1 張大圖 + 4 張小圖）；行動端變為可滑動全幅輪播，帶頁面圓點指示器。
頁尾：3 欄布局在 <800px 時折疊為單欄堆疊。

圖片行為

loading="lazy" 全局應用，配合模糊的 im_w= URL 參數化預覽縮圖優先載入
響應式圖片使用 Airbnb 的 muscache.com CDN，im_w 查詢參數按寬度分發（im_w=240、im_w=720、im_w=1200、im_w=2400）
無藝術裁切——同一圖片跨斷點縮放
輪播自動調整照片高度以保持一致的 4:3 比例，無論原始寬高比如何

9. Agent 提示詞指南

快速色彩參考

主要 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 內距，8px 圓角，無陰影。啟用/按下時添加 transform: scale(0.92) 並帶 2px 墨黑聚焦環（0 0 0 2px #222222）。」
「構建房源卡片：14px 圓角的 4:3 全幅照片，無容器陰影；圖片下方以 4px 間距堆疊三行文字：城市名 16px 600 墨黑，租賃類型 14px 500 灰燼色（#6a6a6a），價格範圍 16px 500 墨黑，帶 14px '每晚'後綴。」
「設計固定預訂面板：白色背景，14px 圓角，1px 髮絲灰（#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 灰燼色「尚未收費」免責聲明。」
「建立三選項卡分類選擇器：三個等寬標籤，標籤為民宿、體驗、服務；每個標籤上方有約 48px 3D 渲染插畫圖示（房屋、氣球、服務鈴），下方 16px 500 墨黑標籤；活躍標籤帶 2px 墨黑底線；在體驗和服務圖示右上角添加小型 12px 700 白色深海軍藍背景「新」標籤。」
「渲染「房客最愛」獎項鎖定組合：居中評分數字，52px 700 字重墨黑，左右各有手繪 SVG 月桂花環，約 48px 高；下方 12px 700 大寫「房客最愛」標籤，字間距 0.32px；副標籤 14px 500 灰燼色；全寬區塊直接置於白色畫布上，無容器邊框。」

迭代指南

優化使用此設計系統生成的現有介面時：

每次專注於一個元件。
引用本文件中的具體色彩名稱和十六進位代碼（例如「墨黑 #222222」，而非「深灰」）。
搭配自然語言描述與測量值（用「微妙三層立體感」而非一長串陰影字串）。
描述期望的「感覺」（「雜誌風，攝影優先」vs「密集實用」）。
始終預設使用 Airbnb Cereal VF 500 字重正文，600–700 強調——不要用 400。
保持 Rausch 粉色稀缺——如果每個視口出現多個 Rausch 色元素，請考慮是否其中一個應被中性化。

已知缺口

首頁房源網格卡片：主要房源卡片網格（airbnb.com 的主要視覺介面）在提取的首頁截圖中未能完整捕獲——內容僅部分載入。上方「房源卡片」規格是根據靈感網格結構和 Airbnb 更廣泛的約定推斷的；在生產使用前，請對照實時網站確認精確的寬高比和中繼資料層級。
體驗分類圖示：民宿/體驗/服務的 3D 插畫圖示以點陣資源形式提供；其確切源文件規格（SVG 與 PNG、渲染像素尺寸）在此未作記錄。
動畫與過渡時長：未捕獲——屬於靜態提取範圍。
深色模式：Airbnb 在提取的產品介面中未發布原生深色模式；本文件僅描述單一淺色模式主題。

27 KiB Raw Blame History Unescape Escape