【LINE Bot 實戰】HR 內推/菁英招募卡片怎麼捏？手把手教你大廠級「物理鎖」防跑版盒模型佈局（附完整 JSON 模板）

line bot line flex message line message api

limingme 2026-06-03 15:21:18 ‧ 381 瀏覽

分享至

📝 正文內容
各位全端與 LINE 機器人開發者好！

在經營企業私域流量（Private Traffic）或開發企業內部 LINE Bot（如電子薪資單、打卡系統）時，很多 HR 團隊或 PM 都會提出一個高頻需求：「能不能做一張高質感的職缺分享與內推卡片，讓同仁點擊一鍵投遞？」

看似簡單的排版，如果直接對著官方的「Flex Message Simulator」手敲 JSON，新手高機率會踩進兩個毀滅性的「大坑」：

標籤香腸化：設定了 HOT JOB 徽章，結果在寬螢幕手機上因為隨意給了 flex 權重，徽章被橫向無限拉伸成一條肥胖的香腸。

多語言按鈕強行折行：中文的「投遞履歷」切換到英文「Apply Now」或日文時，因為文字長度暴增，按鈕直接當場斷行、碎裂，醜到哭。

今天這篇文章，我將用全新設計的「暗色系高階企業招募卡片」作為案例，像素級拆解大廠是如何利用「物理寬度鎖」與「非等比彈簧佈局」來做防跑版防護。

🧱 核心佈局調優：大廠防禦性排版兩大絕招

物理寬度鎖（Width Lock）防香腸化
卡片最頂部的 HOT JOB 狀態標籤，絕對不能交給 flex 來彈性伸縮。正確做法是外層用 horizontal 包裹後，直接在 Box 屬性上灌入 "width": "68px"（物理死鎖）。這樣一來，不論外層寬度怎麼變，標籤永遠保持精緻的黃金比例。
非等比彈簧布局（Flex Weight Distribution）
在展示職缺細節（部門、地點、要求）時，很多人習慣用等比的盒模型。但當「要求」的文字很長時，前方的 Icon 或標題就會被嚴重擠壓。

正確姿勢：前方的標題（如 🏢 部門）給予固定 flex: 3，後方動態內容給予 flex: 7 並強制開啟 "wrap": true。這樣不論內文塞多少字，前方的排版都能挺直腰桿、完美對齊。

🎯 5分鐘成果驗收：100% 官方 Schema 準拠代碼

這是我像素級調優完畢的尊榮暗黑風招募卡片代碼，背景色採用高階的 #0F172A 與 #1E293B，在白底的 LINE 視窗裡視覺劫持感極強，可以直接貼進你的後端系統：

{
  "type": "bubble",
  "size": "mega",
  "body": {
    "type": "box",
    "layout": "vertical",
    "backgroundColor": "#0F172A",
    "paddingAll": "0px",
    "contents": [
      {
        "type": "box",
        "layout": "vertical",
        "paddingAll": "20px",
        "backgroundColor": "#1E293B",
        "contents": [
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "box",
                "layout": "vertical",
                "backgroundColor": "#10B981",
                "cornerRadius": "4px",
                "paddingAll": "4px",
                "width": "68px",
                "contents": [
                  { "type": "text", "text": "HOT JOB", "color": "#FFFFFF", "size": "xxs", "align": "center", "weight": "bold" }
                ]
              }
            ]
          },
          { "type": "text", "text": "資深全端架構師 (Senior Full-Stack Architect)", "weight": "bold", "color": "#FFFFFF", "size": "md", "wrap": true, "margin": "md" },
          { "type": "text", "text": "💰 核心薪資：NT$ 120,000 - 180,000 / 月", "color": "#F59E0B", "size": "sm", "weight": "bold", "margin": "sm" }
        ]
      },
      {
        "type": "box",
        "layout": "vertical",
        "paddingAll": "20px",
        "spacing": "sm",
        "contents": [
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              { "type": "text", "text": "🏢 部門", "color": "#64748B", "size": "sm", "flex": 3 },
              { "type": "text", "text": "技術研發中心 - 自動化平台組", "color": "#CBD5E1", "size": "sm", "flex": 7, "wrap": true }
            ]
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              { "type": "text", "text": "📍 地點", "color": "#64748B", "size": "sm", "flex": 3 },
              { "type": "text", "text": "台北市信義區 (支援部分遠端工作)", "color": "#CBD5E1", "size": "sm", "flex": 7, "wrap": true }
            ]
          },
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              { "type": "text", "text": "🎓 要求", "color": "#64748B", "size": "sm", "flex": 3 },
              { "type": "text", "text": "5 年以上 Node.js / Go 經驗，具備大型高並發雲端架構設計能力。", "color": "#CBD5E1", "size": "sm", "flex": 7, "wrap": true }
            ]
          }
        ]
      },
      {
        "type": "box",
        "layout": "horizontal",
        "spacing": "md",
        "paddingStart": "20px",
        "paddingEnd": "20px",
        "paddingBottom": "24px",
        "contents": [
          { "type": "box", "layout": "vertical", "flex": 4 },
          { "type": "button", "style": "secondary", "color": "#334155", "height": "sm", "action": { "type": "uri", "label": "職缺詳情", "uri": "https://liming.me" }, "flex": 46 },
          { "type": "button", "style": "primary", "color": "#10B981", "height": "sm", "action": { "type": "uri", "label": "💼 投遞履歷", "uri": "https://liming.me" }, "flex": 46 },
          { "type": "box", "layout": "vertical", "flex": 4 }
        ]
      }
    ]
  }
}

🚀 職人利其器：拒絕盲敲 JSON 的自動化時代
看完上面的嵌套結構，相信各位心裡都有數：手寫這種 JSON 靈活歸靈活，但只要一個層級嵌套出錯或少打一個逗號，LINE 伺服器就會無情回傳 APIError 400，在後端查 log 簡直是地獄。

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

除了這次分享的 HR 招募卡，我的 GitHub 倉庫裡還免費釋出了 90 多款開箱即用的跨國雙語高性能模板（涵蓋 SaaS 方案續費、網路直播入場券、Web3 資產儀表板、DevOps 即時監控告警等）。

👉 GitHub 免費開源倉庫傳送門：GitHub: line-flex-message-templates

大家在捏 LINE 卡片時還遇過什麼奇怪的渲染坑？歡迎在下方留言，我們一起像素級排障！