# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Pontus Abrahamsson — oss/acc (@pontusab) · 平台：X (Twitter) · 日期：2026-06-02

> 原始來源：https://x.com/pontusab/status/2061446699856642378

## 中文摘要

Pontus Abrahamsson 發布 Message UI 構建動態附件。

Message UI 被定位為「訊息附件版的 React Email」，旨在解決聊天機器人與 Agent 在傳遞資訊時，僅能發送純文字的侷限。開發者可以透過 React 元件編寫豐富的附件卡片，並將其轉換為 PNG 圖片，以便在 iMessage、WhatsApp 等聊天平台上進行視覺化呈現。

**核心功能與優勢**
- 支援多種視覺化元件：包含圖表（Charts）、表格（Tables）、文字原語（Text primitives）以及活動環（Activity Rings）等。
- 整合 Tailwind CSS：開發者可直接使用熟悉的 Tailwind 樣式來設計附件。
- 本地預覽與熱更新：提供開發伺服器，讓開發者在編寫時能即時預覽設計效果。
- 跨平台輸出：支援將設計好的 React 模板匯出為 PNG 檔案，適用於各種聊天應用程式。

**安裝與快速啟動**
開發者可透過 npm 安裝相關套件：
```bash
npm install @message-ui/render @message-ui/components @message-ui/tailwind
```

編寫附件元件的範例程式碼如下：
```tsx
import { Attachment, Text, Row } from "@message-ui/components";

export default function OrderCard() {
  return (
    <Attachment style={{ padding: 24, maxWidth: 400, backgroundColor: "#18181b" }}>
      <Text style={{ fontSize: 20, fontWeight: 600, color: "#fafafa" }}>Your order</Text>
      <Row style={{ marginTop: 12 }}>
        <Text style={{ fontSize: 14, color: "#a1a1aa" }}>Ships today · Track in Messages</Text>
      </Row>
    </Attachment>
  );
}
```

若要進行本地開發與預覽，請執行：
```bash
npx message-ui dev --dir ./attachments
```

若需在伺服器端或排程任務中將模板匯出為 PNG，可使用以下程式碼：
```ts
import { renderToPng } from "@message-ui/render";
import OrderCard from "./attachments/order-card";

const png = await renderToPng(<OrderCard />, { width: 800, height: 800 });
// upload, attach, or write to disk
```

**技術架構**
Message UI 的運作機制是將 React 模板透過 [Satori](https://github.com/vercel/satori) 與 Resvg 轉譯為 SVG，再進一步輸出為高品質的 PNG 影像。該專案由多個模組組成，包括處理渲染的 `@message-ui/render`、提供 UI 元件的 `@message-ui/components`，以及負責 CLI 操作的 `@message-ui/cli`。

**實際應用**
此工具特別適合需要傳送結構化資料的聊天機器人與 Agent，開發者可以將其與現有的聊天後端或 [Chat SDK](https://chat-sdk.dev/) 整合，為多管道聊天應用程式提供視覺化的附件層。更多詳細資訊可參考 [Message UI 官網](https://message-ui.com)。

## 標籤

Agent, React, Web, 開源專案, Message UI, React, Tailwind CSS