← 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，可選）
  "bg": { "fill": "#fffdf8", "padX": 24, "padY": 16, "radius": 12,
          "stroke": "#1c1c1c", "strokeW": 3, "shadow": { "dx": 0, "dy": 6, "blur": 0, "color": "rgba(0,0,0,0.08)" } },
  "marks": [ { "s": 0, "e": 2, "type": "hi", "color": "#2bd69b", "alpha": 0.55 } ] }

bg（可選）喺文字後面畫一張背景卡；張卡係元素一部分，會跟文字一齊生長，唔會爆框。除咗 fill 之外全部可選（pad 係 padX/padY 嘅統一簡寫；淨係畀一個字串等於 { "fill": … }）。卡片入面只有一段文字嘅話，優先用 bg，唔好墊 shape。

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",                    // 全部 kind 見下面清單
  "color": "#1c1c1c",                 // 線條顏色
  "fill": "#2bd69b" }                 // 選用：雙色貼紙嘅第二隻顏色；null = 唔填色

kind 按編輯器貼紙面板嘅類別：

箭嘴: arrow arrow2 arrowloop arrowarc arrowdouble arrowdown arrowuturn arrowzig arrowcycle chevrons
強調: spark sparkle sparkles burst fan exclaim question swoosh swipe ring
標誌: check cross checkbox checkboxempty checkcircle crosscircle warning nosign plus
徽章: star5 starburst seal blob cloud bubble bubble2 thought banner tag frame corners
線條: squiggle zigzag wave2 loops dashes dots divider spiral stripes
圖示: heart heartsolid bulb search lock key shield clock calendar eye megaphone pin bookmark share comment bell book flag
幣圈: coin bitcoin eth chain wallet block blocks chartup chartdown rocket moon bank coins gem
塗鴉: smile sad wow wink cool thumbsup crown flame sprout sun bolt flower

fill 淨係對有填色位嘅貼紙有效（徽章、圖示、幣圈、表情）；唔寫就用貼紙本身嘅預設色。純線條貼紙會忽略佢。

image 圖片

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

圖片一定要經 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