📖 5分鐘保姆級教學：從零構建你的第一張 LINE Flex Message 大廠級潮流卡片

發布於 June 1, 2026 4 次閱讀

你是不是也遇過這種狀況：剛接觸 LINE Bot 開發，想要推播一張漂亮的卡片給用戶，結果點開官方的「Flex Message Simulator」，對著密密麻麻的樹狀節點和 JSON 屬性（box、spacer、baseline...）看了半天，最後只捏出了一個像 HTML 1.0 時代的簡陋表格？

手寫 Flex Message JSON 就像是在沒有編譯器的時代寫組合語言，新手極其容易因為一個屬性誤用（例如把網頁的 lineHeight: 1.5 塞給 LINE），就直接引發崩潰的 APIError 400。

別慌！今天這篇 Tutorial（新手教學），我將帶你拋開那些複雜的底層教條，用 5 分鐘、四大步驟，手把手帶你從零捏出一張具備頂級遊戲社群（如 CS2 盲盒抽獎）質感的黑橘賽博朋克風卡片！

🛠️ 核心概念快速通關：LINE 盒模型三劍客

在開始動手前，你只需要理解三個最核心的 UI 元件，它們的行為邏輯跟網頁的 CSS Flexbox 幾乎一模一樣：

Vertical Box (vertical)：裡面的元件會像堆積木一樣，從上到下乖乖排隊。適合用來做卡片的「主圖片 ➔ 標題 ➔ 描述文字」結構。
Horizontal Box (horizontal)：裡面的元件會從左到右併排。適合用來做「Icon + 文字」或是「橫排多個按鈕」。
Flex 權重與 Width：flex 就像彈簧，數值越大，分到的空間越多。width 是物理鎖。想要 Badge（徽章標籤）在寬螢幕手機上不變形，就必須用 width 鎖死它！

🚀 實戰動手捏：4 步驟打造潮流盲盒卡片

🧱 步驟一：炸開原生白邊，建立暗黑畫布

LINE 預設的卡片是有白色內距（Padding）的。要做出大廠那種圖片頂天立地的「滿版高級感」，我們必須第一步就炸開邊界。

祕訣：將外層 body 的 paddingAll 設為 0px，並給它一個極具黑客質感的背景色 #0F172A。

📸 步驟二：置入 Hero 圖片（防止拉伸）

卡片的上半部，我們要放一張炫彩去背的 3D 盲盒箱子圖片。

新手大坑：很多人直接設 16:9 加上 cover，導致圖片在手機上左右被暴力拉伸扁平化。
正確姿勢：根據圖片原生比例設定 aspectRatio: "4:3"，並將 aspectMode 設為 fit（相當於 CSS 的 contain），這樣不論在什麼螢幕上，箱子都絕對挺拔不變形！

📝 步驟三：文字層排版與「香腸條」防禦

接下來在圖片下方，我們要放入行銷文字。

限量徽章 (Badge)：放入一個寫著 LIMITED 的小盒子。記住！外層用 horizontal 包裹，並且直接給這個盒子設定物理寬度 "width": "58px"，絕對不要用 flex 彈簧，否則它在寬螢幕手機上會橫向無限拉伸，長成一條肥胖的香腸！
標題與描述：增加 Text 元件，記得將 wrap 屬性設為 true，否則文字太長時在 LINE 裡面會直接被無情截斷！

🎛️ 步驟四：底部按鈕併排（國際化防斷行佈局）

卡片最下方我們要橫向放三個按鈕：「分享」、「詳細」、「🎁 開封」。

硬核調優：為了防止切換到日文或英文時文字太長導致按鈕強行換行（醜哭），我們採用經典的「黃金彈簧比例」。
在 3 個按鈕的左右兩側各放一個空 Box 作為緩衝，整排的 flex 權重設為 4 : 25 : 25 : 25 : 4。這樣能把大片浪費在兩側的邊距通通逼回給按鈕內部，讓文字挺直腰桿在一行內完美展現！

🎯 5分鐘成果驗收：最終黃金 JSON 代碼

把以下這段像素級調優完畢、100% 符合 LINE 官方 Schema 的代碼，直接複製貼進你的後端系統（或可視化編輯器中），立刻就能看到大廠質感的渲染效果：

JSON

{
  "type": "bubble",
  "size": "mega",
  "body": {
    "type": "box",
    "layout": "vertical",
    "backgroundColor": "#0F172A",
    "paddingAll": "0px",
    "contents": [
      {
        "type": "image",
        "url": "https://im.gurl.eu.org/file/AgACAgEAAxkDAAEBjBBqGjwpp3adBiz1fvi032gaf_FJbgACvQtrG82J2UQraRTtROGx1wEAAwIAA3kAAzsE.png",
        "size": "full",
        "aspectRatio": "4:3",
        "aspectMode": "cover"
      },
      {
        "type": "box",
        "layout": "vertical",
        "paddingStart": "20px",
        "paddingEnd": "20px",
        "paddingTop": "16px",
        "paddingBottom": "20px",
        "spacing": "8px",
        "contents": [
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "box",
                "layout": "vertical",
                "backgroundColor": "#F97316",
                "cornerRadius": "8px",
                "paddingAll": "4px",
                "width": "58px",
                "contents": [
                  { "type": "text", "text": "LIMITED", "color": "#FFFFFF", "size": "xxs", "align": "center", "weight": "bold" }
                ]
              }
            ]
          },
          {
            "type": "text",
            "text": "🎉 恭喜獲得「空投武器箱」抽獎機會！",
            "weight": "bold",
            "color": "#FFFFFF",
            "size": "md",
            "wrap": true,
            "margin": "md"
          },
          {
            "type": "text",
            "text": "您已成功解鎖潮流嘉年華資格。限定款塗裝、高階外設周邊等著你。立即點擊下方按鈕分享或啟動開箱！",
            "color": "#CBD5E1",
            "size": "sm",
            "wrap": true,
            "lineHeight": "md",
            "margin": "xs"
          }
        ]
      },
      {
        "type": "box",
        "layout": "horizontal",
        "spacing": "6px",
        "paddingStart": "16px",
        "paddingEnd": "16px",
        "paddingBottom": "20px",
        "contents": [
          { "type": "box", "layout": "vertical", "flex": 4 },
          {
            "type": "button",
            "style": "primary",
            "color": "#22C55E",
            "height": "sm",
            "action": { "type": "uri", "label": "分享", "uri": "https://liming.me" },
            "flex": 25
          },
          {
            "type": "button",
            "style": "secondary",
            "color": "#475569",
            "height": "sm",
            "action": { "type": "uri", "label": "詳細", "uri": "https://liming.me" },
            "flex": 25
          },
          {
            "type": "button",
            "style": "primary",
            "color": "#F97316",
            "height": "sm",
            "action": { "type": "uri", "label": "🎁 開封", "uri": "https://liming.me" },
            "flex": 25
          },
          { "type": "box", "layout": "vertical", "flex": 4 }
        ]
      }
    ]
  }
}

🛠️ 工欲善其事，必先利其器：拒絕盲敲 JSON！

看完這篇 Tutorial，你是不是發現手寫 JSON 雖然靈活，但只要不小心少打一個逗號、或是層級嵌套出錯，LINE 伺服器就會無情地回傳 APIError 400，在後端 log 裡排查程式碼簡直是噩夢。

這也是為什麼我寫了 [FlexCraft] 這款專為 LINE 訊息自動化打造的視覺化可視化平台！
它內建了嚴格的 Schema 即時驗證沙盒，你可以像用 Figma 一樣直接在畫面上拖拽、點選調優，並支援 customViewHtml（原始碼雙向同步模式），讓你不用鍵盤盲敲就能在前端幫你攔截所有排版大坑，開發速度直線上漲 10 倍！

想要更多開箱即用的行業模板（電子發票明細、omo 顧客召回、美髮預約卡片）？ 👉 歡迎直接到我的 GitHub 倉庫免費下載：GitHub: line-flex-message-templates

如果你在手捏 LINE 卡片的過程中也踩過奇怪的渲染坑，歡迎在下方評論區留言，我們一起像素級排障！