Steven's Knowledge Base

IG Carousel 風格複製 Reddit 研究報告

10 min read

IG Carousel 風格複製 — Reddit 研究報告

分析咗 28 條 thread / post + comments | 2026-04-13

研究問題： 點樣用 AI（尤其 Claude Code）睇到一個靚嘅外國 IG carousel，抄佢風格，翻譯成中文，高效率完成？

🧠 社群主要共識

1. Reddit 上呢個具體 use case（Claude Code + IG carousel 風格複製）基本上係空白

搜尋咗 9 個 keyword combinations，發現 Reddit 社群尚未有人系統討論「用 Claude Code 睇截圖→複製 carousel 風格」呢個確切流程。呢個反映：

  • 呢個需求係新興的、進階嘅
  • 大多數人仲停留係 Canva template 層面
  • 有能力做呢件事嘅人係 technical minority，通常唔係係 Reddit 討論

2. 最接近嘅社群行為：AI 工具生成 carousel

Reddit r/SideProject 有人 (u/ComfortableSevere597) 分享咗一個 Free AI Carousel Generator，workflow 如下：

1. 揀 topic
2. 揀 template（或自訂）
3. 用 ChatGPT/Gemini 生成 JSON
4. 調整顏色、字體、layout
5. Download slides

工具係用 Next.js + Canvas API + html2canvas。佢話「可以 save styles 返用」，話省咗 2+ 小時設計時間。

3. Claude 用於 image-to-design 的社群唯一直接案例

Reddit r/AIToolBench (u/Puzzled-Anything-637) 用緊 Claude Code + Google API 做設計 pipeline：

搜尋 reference → 揀 reference → AI 生成 poster

痛點係： AI 輸出唔夠似 reference。評論 (u/katoss88) 指出最佳解法：

「先叫 Claude analyze reference（顏色、形狀、排版、字體），turn it into a prompt，再 create。」 即係「analyze first → describe → generate」而唔係「直接 image-to-image」

4. Claude Code 同 store screenshots 有相通邏輯

Reddit r/ClaudeCode 有人 (u/TomyCatt) 建咗一個 Claude Code skill /store-screenshots：

  • 讀 codebase → 提取品牌色、字體、logo
  • 生成 editorial-style slides（大排版、gradient、glassmorphism）
  • 內置 Discord/Bumble/Spotify 等 top apps 嘅設計規則
  • Multi-language 支援（預設 EN + ES，可改）
  • 用 Puppeteer export 高清 PNG

評論 (u/dennisplucinik)：「May or may not repurpose that for generating social media posts…」— 呢個係 carousel 用途嘅直接橋樑

5. IG 內容創作自動化嘅社群主流工具

r/InstagramMarketing 上 2026 年嘅討論顯示：

  • Canva Pro + brand templates 係主流（batch 製作）
  • Later / Planoly / Meta Business Suite 排期
  • Claude 寫 caption（有人明確提到）
  • Lightroom presets 批量 photo 處理
  • CapCut templates 短片

一位 8 年 IG growth 老手 (u/famefacer) 警告：

「唔存在真正嘅全自動化。全自動內容通常 100 views 都無。觀眾分得出 AI 內容。」

😤 真實痛點

設計層面：

  • AI 生成嘅設計「顏色、比例用咗，但最重要嘅部分（設計感）冇到」（展覽 curator 的原話）
  • Claude 無法自動識別「設計嘅精髓」，需要人手介入描述
  • Carousel spacing、text overflow 仍係痛點（Claude Code store-screenshot skill 話有 30% 輸出有問題）
  • html2canvas 慢且唔準確（有人建議改用 snapdom）

內容層面：

  • 從 reference 到新內容嘅「意義轉化」AI 做得唔好
  • 自動化工具多，但整合唔到一起，「我仲係 middle layer」
  • 翻譯唔等於本地化，語氣、文化 reference 要手動調整

工作流程層面：

  • 多工具之間 context 唔共享
  • 每個工具有自己嘅 brain，要人手 copy-paste 銜接
  • Canva 夠用但「重複設計時開始覺得慢」

👍 推薦工作流程

根據 Reddit 社群嘅討論整合出 Steven 適用嘅最佳工作流程：

核心 4 步法（由 Reddit 洞察推導）

Step 1 — 解剖 Reference（Claude Vision 分析）
  截圖 → 餵俾 Claude
  Prompt: "分析呢個 carousel 嘅設計 DNA：
    - 顏色（主色、輔色、背景色 hex）
    - 字體風格（大小、粗細、line-height）
    - 排版結構（每頁 layout 幾多 columns，text/image 比例）
    - 間距規則（padding、margin 估算）
    - 設計風格（gradient/flat/glassmorphism/minimal）
    - Slide 結構（hook slide、content slides、CTA slide）"
  輸出：一份 design spec JSON

Step 2 — 提取內容 + 翻譯（Claude 翻譯 + 本地化）
  用 Claude 翻譯原文 → 要求廣東話口語化
  明確 prompt: "唔係逐字翻譯，係本地化：
    - 用香港人 2026 年嘅網絡語
    - 保留原有資訊密度
    - Hook slide 要有力（用問句或驚嘆）
    - 每頁字數限制（例如每頁最多 3 個 bullet）"

Step 3 — 生成 HTML Carousel（Claude Code）
  餵入 design spec JSON + 中文內容
  要求生成：
    - 1080x1080px 每張 slide（IG 正方形）
    - 用 HTML/CSS 實現（唔係 Canva）
    - Puppeteer 或 Playwright export PNG

Step 4 — QA + 微調
  用 Playwright 截圖對比 reference
  調整字體、顏色、間距直到符合

工具建議（Reddit 社群認可）

需求工具評價
設計分析Claude Vision（multimodal）最強，需要好 prompt
翻譯 + 本地化Claude社群認可
生成 slide HTMLClaude Code直接
Export PNGPuppeteer / Playwright成熟方案
快速修改Canva（後備）唔需要 code
排期Later / Meta Business Suite免費夠用

🔥 爭議討論

爭議 1：AI carousel 有冇效？

r/InstagramMarketing 資深創作者認為「全自動 AI 內容通常冇 engagement」，觀眾分得出。但另一邊 AI carousel generator creator 話靠呢個工具贏得 400+ followers（唔靠 paid）。

分析： 爭議源於「全自動」vs「AI 輔助人工」。Steven 嘅 use case 係後者：AI 做設計苦差，人負責創意判斷，呢個係較有效嘅平衡點。

爭議 2：直接 image-to-image 生成 vs analyze-first

部分人覺得直接丟 reference 圖比例已夠，但 Claude 佢自己講「apply 咗 color、proportion，但呢唔係設計最重要嘅部分」。

社群建議更有效方式：先分析 → 轉成文字描述 → 再生成，比直接 image-to-image 準確。

爭議 3：snapdom vs html2canvas

有 dev 明確指出 html2canvas 有 accuracy 問題，snapdom 更快更準，但知名度低。

🔍 跨 Thread 洞察

洞察 1：「Design DNA 提取」係關鍵缺口

Reddit 幾乎無人討論「從 image 提取 design spec」呢個步驟，但呢個係整個 workflow 最關鍵嘅一環。Claude Vision 嘅 multimodal 能力係呢個缺口嘅答案，但需要精心設計嘅 prompt（問得越具體，輸出越準確）。

洞察 2：Claude Code skill 架構係最優路線

r/ClaudeCode 嘅 store-screenshots skill 案例顯示，將整個 pipeline 包裝成一個 skill（/ig-carousel）係最高效嘅做法。一次建立，重複使用，可傳遞 design spec 作為 context。

洞察 3：JSON 作為 design spec 中間層

AI Carousel Generator 用 JSON 做「內容↔設計」嘅橋樑呢個方式值得借鑒：

{
  "design": { "primary_color": "#1A1A2E", "font": "Inter Bold", ... },
  "slides": [
    { "type": "hook", "headline": "..." },
    { "type": "content", "bullets": [...] }
  ]
}

呢個 JSON 可以俾 Claude 填充（中文內容），再由 Claude Code render 成 HTML/PNG。

洞察 4：本地化 ≠ 翻譯

Reddit 上冇人討論中文本地化，但根據 Steve 嘅 use case，翻譯僅係第一步。廣東話口語化、香港文化 reference、emoji 用法都需要額外 prompt 指引。

洞察 5：Multi-tool 整合係痛點

r/ArtificialInteligence 有帖提到「AI 工具唔 share context，我仍然係 middle layer」。Steven 嘅 Claude Code + Claude 一體化方案正好解決呢個問題——唔需要 hop between tools。

🏆 Top 3 最值得睇嘅 Thread

1. r/AIToolBench — “How to Generate new design from references” URL: https://www.reddit.com/r/AIToolBench/comments/1sfdyrr/how_to_generate_new_design_from_references/ 核心洞察： Claude 做 design generation 嘅痛點 + 社群建議嘅「analyze first」解法。最直接對應 Steven 嘅問題。 Quote: “Before creating, ask Claude to analyze the reference (colors, shapes, textures, typography) and then turn that into a prompt, then you create.”

2. r/ClaudeCode — “I built a skill that generates Store screenshots automatically” URL: https://www.reddit.com/r/ClaudeCode/comments/1shbzcc/i_built_a_skill_that_generates_store_screenshots/ 核心洞察： Claude Code skill 做視覺 slide 生成嘅完整架構，內置設計規則 + multi-language。Steven 可以直接 fork 呢個思路。 Quote: “May or may not repurpose that for generating social media posts…”

3. r/SideProject — “My Free AI Carousel Generator got me 400 followers” URL: https://www.reddit.com/r/SideProject/comments/1sf0yia/my_free_ai_carousel_generator_got_me_400/ 核心洞察： JSON-driven carousel generation workflow，ChatGPT/Gemini 生成 JSON → Canvas API render。Steven 可以用 Claude 替代 ChatGPT，做法相通。 Tool link: rubixscript.com/tools/carouselGenerator

💡 Steven 嘅最終建議工作流

基於以上研究，呢個係最有效嘅流程：

睇到靚 carousel
       ↓
截圖 → Claude (Vision)
"幫我分析呢個 carousel 嘅 design DNA，輸出 JSON"
       ↓
[Design Spec JSON]
       ↓
Claude
"根據呢個 design spec + 以下英文內容，
 用廣東話重新撰寫，本地化，唔係直譯，
 輸出每頁嘅中文內容"
       ↓
[Chinese Content JSON]
       ↓
Claude Code
"根據 design spec + Chinese content，
 生成 1080x1080 HTML slides，
 用 Playwright export PNG"
       ↓
[Carousel PNGs ready to post]

預計時間： 15-20 分鐘（vs 手動 2+ 小時） 最大風險： Claude 解讀 design spec 時字體/間距有偏差，需要 1-2 輪微調

研究方法：用 Apify Reddit Scraper 爬取 9 個 keyword searches，總計分析 28 個相關 posts/comments。由於呢個 use case 係新興 niche，大量洞察係由相關 thread 推導而來，而非直接引用。

Graph View