# Line UI Designer

> 當使用者要在 LINE 機器人裡回傳資訊或結果給使用者時使用這個 skill，用來決定該用純文字、按鈕、Flex 卡片還是輪播（Carousel）呈現，避免所有回覆都只是一大段文字。使用者沒有明確指定呈現方式時，也要主動判斷並提出最佳建議並直接實作。

- Skill: `drgarbage/line-ui-designer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add drgarbage/line-ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/drgarbage/line-ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: drgarbage (https://skillmd.com/u/drgarbage)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/drgarbage/line-ui-designer

---


# LINE 視覺呈現設計師

你的任務是幫「已經算好/查到的資訊」找到最適合的 LINE 呈現格式。原則：**能力所及範圍內，盡量不要只回一大段純文字。**

## 決策框架：依資料形狀選格式

| 要回傳的東西 | 建議格式 | 理由 |
| --- | --- | --- |
| 單純聊天、簡短說明、AI 問答的自然語言回覆 | 純文字（可加 emoji／換行排版） | 這類內容本來就是語句，硬做卡片反而累贅 |
| 一個「實體」的多個欄位（例如一筆訂單、一個聯絡人、一筆待辦） | **Flex 卡片（Bubble）**：標題＋分隔線＋欄位列＋（可選）底部按鈕 | 結構化資料用卡片一眼就看懂，比一行行文字好掃描 |
| 多筆同類型「實體」的清單 | **Flex 輪播（Carousel，最多 10 張）** | 讓使用者左右滑動比較，每張都能有自己的操作按鈕 |
| 2~4 個固定選項，且跟當前這則訊息綁定 | **Buttons 樣板** | 選項少、想要有標題/圖片時比 Quick Reply 更適合 |
| 針對「剛剛這句回覆」的下一步動作 | **Quick Reply** | 用完即丟，不佔用聊天記錄空間 |
| 刪除、覆蓋等破壞性操作前 | **Confirm 樣板**（是／否） | 明確要求使用者二次確認，比純文字問「確定嗎？」更不會被誤按 |
| 需要使用者看外部完整內容（例如很長的清單、要下載的檔案） | 文字內附一個網頁連結 | LINE 訊息本身不適合塞太多內容 |

## 實作準則

- 一律重用並延伸 [`lib/lineMessages.js`](../../../lib/lineMessages.js) 裡的既有 helper（`textMessage`、`quickReply`、`flexMessage`、`confirmMessage`、`buttonsMessage`），新增卡片元件時比照現有寫法（顏色常數 `BRAND`/`MUTED`、欄位列小工具函式），維持整個檔案風格一致，不要在別處另起爐灶。
- Flex 卡片欄位为空字串會被 LINE API 拒絕（400 錯誤），沒有值的欄位要用預設文字（例如「—」）或整段省略，不要輸出空字串。
- 一次 `reply`/`push` 最多 5 則訊息；Carousel 最多 10 張 bubble；`altText` 是通知欄與桌面版看到的預覽文字，务必寫清楚不要留空。
- Quick Reply 建議只掛在整組回覆的最後一則訊息（避免每則都塞，畫面太亂）。
- 圖片類型（Hero image、Buttons 縮圖）都需要公開的 `https` 網址；本機開發要用 `npm run dev:tunnel` 取得公開網址（見專案 README）。

## 主動建議原則

使用者只說「幫我把 XX 資料回傳給用戶」而沒講格式時：
1. 依上面的決策框架自己判斷最適合的呈現方式，一句話說明為什麼（例如「這是多筆清單，我用輪播卡片呈現，方便左右滑動比較」）。
2. 直接實作，不用先問使用者要不要卡片——除非資料形狀真的很模糊、卡片與純文字的取捨會大幅影響開發成本時才詢問。
3. 新回覆務必跟現有訊息（純文字問答、既有卡片）放在一起看過一次，確保整體對話節奏不會忽然變得很「重」（例如簡單的 yes/no 不需要出動 Flex 卡片）。