← Clawify Studio English · 機器可讀版本： design-file.md · llms.txt

Clawify 設計檔（`.clawify.json`）— 格式 v1

一個開放、可攜嘅社交貼文設計 JSON 格式，專為 AI 生成而設。任何工具 — 特別係 AI 聊天工具 — 都可以直接寫一份；匯入 Clawify Studio 之後每個元素都可以編輯（拖動、改字、改樣式），仲可以匯出 pixel-exact 嘅 IG 尺寸 PNG。匯出範本會產生同一格式，所以檔案可以互傳、備份、re-import。

頂層結構

{
  "clawify": 1,                      // 必填 — 格式版本
  "name": "My design",               // 範本名（≤80 字）
  "size": { "w": 1080, "h": 1080 },  // 畫布 px；常用 1080×1080、1080×1350、1080×1920
  "pages": [ { "bg": …, "elements": [ … ] } ],  // 1–20 頁（IG carousel）
  "assets": { "a1": { "dataUrl": "data:image/png;base64,…" } }  // 可選，內嵌圖片
}

座標原點喺左上角，單位 px，範圍 = size。匯入好包容：唔識嘅欄位會被略過、無效嘅值會用預設值代替、enum 以外嘅值會自動修正 — AI 求其寫都入到。

頁 Page

{
  "bg": { "type": "color", "color": "#faf6ea" },
  // 或者內嵌圖片背景，cover-fit，% 焦點：
  // { "type": "image", "asset": "a1", "x": 50, "y": 50 },
  "elements": [ … ]                  // ≤200；排列順序 = 圖層次序（最後嘅喺最上面）
}

元素 Elements

共通欄位：type、x、y、rot（度，預設 0）、opacity（0.05–1，預設 1）。

text 文字

{ "type": "text", "x": 80, "y": 200, "w": 900,
  "text": "大標題",                   // 高度自動計算 — 唔使畀 h
  "font": "display",                  // display | sans | mono
  "size": 96, "weight": 900,          // weight：400 | 500 | 700 | 900
  "color": "#1c1c1c", "align": "left",  // left | center | right
  "lineHeight": 1.25,
  "ls": 0.25,                          // 字距（em，可選）
  "marks": [ { "s": 0, "e": 2, "type": "hi", "color": "#2bd69b", "alpha": 0.55 } ] }

marks 係喺字元範圍 [s, e) 上面嘅手繪標記。種類： hi（螢光筆）· under（底線）· under2（雙底線）· ring（圈住）· strike（刪除線）· corners（角括號）· solid（粗底線）· mint（染色文字）· bold（加粗）。alpha 只對 hi 有效。

shape 圖形

{ "type": "shape", "x": 80, "y": 560, "w": 400, "h": 240,
  "shape": "rect",                    // rect | ellipse | triangle | star | line
  "fill": "#fffdf8",                  // null = 冇填色
  "stroke": "#1c1c1c", "strokeW": 3,  // 可選邊框
  "radius": 16 }                      // rect 圓角

sticker 貼紙（手繪塗鴉）

{ "type": "sticker", "x": 860, "y": 120, "w": 120, "h": 120,
  "kind": "spark",                    // arrow | arrow2 | arrowloop | spark | check | cross | heart | star5 | ring | bubble | dots | squiggle | zigzag | stripes
  "color": "#1c1c1c" }

image 圖片

{ "type": "image", "x": 100, "y": 300, "w": 500, "h": 400,
  "asset": "a1",                      // 對應頂層 assets 嘅 key
  "ox": 50, "oy": 50 }                // cover-fit 焦點，%

圖片一定要經 assets 以 data:image/* URL 內嵌 — 唔會抓取遠端 URL （CORS + 匯出污染問題）。AI 生成嘅設計通常只用 text／shape／sticker；相片留返俾人喺匯入之後自己加。

品牌色盤（建議，唔強制）

mint #2bd69b · mint-dark #179d72 · cream #faf6ea · bone #f8f2e2 · ink #1c1c1c · grey #b9bdb9 · white #fffdf8 · red #d9573c。任何 CSS 顏色都得。

交畀用戶（匯入深層連結）

將設計 JSON 用 base64url 編碼（UTF-8；+→-、/→_、去掉 = padding），然後畀用戶呢條連結：

https://studio.clawify.dev/#/i/<base64url>

開連結會先預覽，用戶確認之後設計就會匯入專案，每個元素都可以編輯。冇任何嘢會上傳 — 設計係喺連結入面。連結上限 300,000 字元；有內嵌圖片嘅設計通常會超過，嗰陣改為儲存做 .clawify.json 檔案，等用戶拖入專案。

其他匯入方法

檔案匯入：喺任何專案拖入或揀選 .clawify.json。
貼上：app 入面嘅 ✦ AI 設計 dialog 接受貼上 JSON，仲附有一段 copy-ready prompt 教任何聊天 AI 呢個格式。
MCP server（agentic 工具用）：npx -y clawify-studio-mcp — 工具 get_design_format（呢份規格）同 create_design（驗證 + 攞連結）。

版本

新增欄位唔使升版本；breaking change 先會加 clawify 數字，匯入器會繼續讀舊版本。

Clawify 設計檔（.clawify.json）— 格式 v1