
效果預覽
相似的 Skills
查看所有 Skills你將獲得
- 一個屬於你品牌的獨立網站檔案,可在任何瀏覽器開啟、離線也能使用,字型與圖片皆已內嵌;若你有自己的框架專案,則會移植到專案中。
- 可實際操作的訂購流程:機場輸入自動完成、雙月份區間日曆、旅客與艙等選擇器、可篩選的結果、座位圖,以及含確認步驟的三步驟訂購。
- 招牌視覺:淡藍底色、白色外框、銀色飛機 Hero、行程類型分頁、登機證樣式的票價存根與通透的飯店卡片,呈現在含 15 張專屬圖片的 20 頁範例中。
適合
- 想要沉穩、高質感訂購前端的旅行社、航空公司與飯店集團。
- 能把行程套裝或住宿對應到機票與飯店區塊的旅遊業者與別墅仲介。
- 想在串接真實庫存前,先用可點擊的訂購原型找客戶測試的團隊。
不適合
- 即時航班庫存、付款或真實訂位;表單只會顯示誠實標示的示範確認。
- 想要深色、資訊密集或大量插畫風格,而非通透白色外框的品牌。
- 把虛構的 Aero & Away 品牌、飯店或顧問當成真實企業發布。
品牌設計與視覺規範網頁設計與數位體驗建置 Landing Page風格鎖定成果可編輯資料分頁航班Hero飯店
關於此 Skill

Airy 機票訂購登陸頁以沉穩、高質感的旅遊風格,打造完整的機票與飯店訂購網站:淡藍底色、白色圓角外框、兩行大寫標題下的銀色飛機,以及帶行程類型分頁的搜尋卡片。範例是虛構的旅行社 Aero & Away,共有 20 個相互連結的頁面,搜尋、結果、選位與訂購都能實際操作。

你會得到
- 一個獨立的網站檔案,可在任何瀏覽器開啟、離線也能使用,字型與圖片皆已內嵌。如果你已有框架專案,設計會直接移植到專案中。
- 完整的頁面家族:航班搜尋與結果、附座位圖的精選航班、飯店與詳細頁、優惠、航空公司、客服、三步驟訂購、聯絡、登入,以及貼心的找不到頁面。
- 可實際操作並有清楚回饋的控制項:機場輸入自動完成、雙月份區間日曆、旅客人數與艙等限制、篩選、排序、空狀態與訂購確認。
- 所有圖片採用同一套美術方向:淡天藍、粉筆白與沙色的柔和日光,每間飯店都以直式卡片完整呈現。
- 沉穩的進場動畫與頁面淡入效果,絕不遮蓋內容,並遵循減少動態效果的設定。

使用方式
- 提供你的品牌名稱、受眾、航線或目的地、飯店、票價與客服資訊。沒提供的部分會先以合理的佔位內容草擬,並列出清單供你確認。
- 傳送你自己的照片,或讓 Agent 以相同的柔和日光風格生成新的飯店、目的地與團隊圖片。飛機、機艙與兩張航班圖片屬於中性素材,可以保留。
- 在桌機與手機上開啟每個頁面,試用搜尋、篩選與訂購步驟,再提出修改需求。

字體使用 Instrument Sans 與 Geist Mono,已內嵌於檔案中。新圖片由你的 Agent 內建的生圖工具產生,可能產生該工具的使用費用;範例本身絕不會訂購或收取任何費用。
開始前需要準備什麼
- 你需要提供
- 品牌名稱、受眾,以及你販售的航線或目的地 · 飯店、票價與客服資訊,或同意先草擬佔位內容供你確認 · 你自己的照片,或同意生成新的飯店、目的地與團隊圖片
- 相依項目
- Agent 所在電腦需安裝 Node.js 18 以上版本,用來執行內建腳本產生單一離線檔案 · 產生檔案時需要網路連線,以便下載一次字型並內嵌 · Agent 內建的生圖工具或你自己的照片,用於品牌專屬的飯店、目的地與團隊圖片 · 用來預覽與檢查每個頁面的新版瀏覽器
- 外部費用
- 新的飯店、目的地與團隊圖片由你的 Agent 內建的生圖工具產生,可能產生使用費用。若沒有生圖工具,請提供自己的照片;中性的飛機、機艙與航班圖片可保留作為佔位圖。檢視範例完全免費。
- 最近實測
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
使用者評價
正在載入評價…








