截個圖發給AI,10分鐘復刻博主排版!這個玩法真沒想到

作者:像素與咖啡時光
日期:2026年6月26日 上午7:00
來源:WeChat 原文

整理版優先睇

速讀 5 個重點 高亮

Codex 從截圖提煉排版風格,10分鐘復刻博主排版,以後排版唔使再煩

整理版摘要

呢篇文章係作者分享一個親身試驗嘅玩法:揾到排版靚嘅圖文,截圖加連結一齊掉畀 Codex,等佢學走嗰套樣式,之後再將自己嘅文章塞入去,佢就會自動跟樣式排好。作者係一個好興玩 AI 工具嘅內容創作者,想解決排版嘥時間、手動對齊好麻煩嘅問題。佢發現呢個方法成功率好高,而且可以將風格沉澱成 Skill 重複用。

整體結論係:用 Codex 嚟提煉排版樣式係可行嘅,雖然未做到 100% 還原,但已經可以將排版時間由兩個鐘縮短到十幾分鐘。重點唔係慳咗幾多時間,而係成個創作流程嘅重心可以放返落內容本身。作者建議記住「三件套」:瀏覽器完整長圖、文章連結、清楚嘅提示詞,以後見到靚排版就咁樣處理。

  • AI 可以從截圖學排版並整成可重用嘅 Skill,大幅縮短排版時間。
  • 方法係「三件套」:瀏覽器完整長圖、文章連結、提示詞,一齊發畀 Codex
  • 以往排版要手動揀模板調格式,而家變成自動提取同套用,效率差好遠。
  • 排版自動化之後,創作重心由排版轉去內容本身,係最大嘅啟發。
  • 下次見到靚排版,直接用三件套叫 Codex 整成 Skill,以後隨時複用。」
整理重點

核心原理:Codex 嘅 Skill 機制

CodexOpenAI 嘅一個 AI 編程工具,特別嘅地方係你可以畀佢裝唔同嘅 Skill,每個 Skill 都係一套可以被調用嘅能力,寫好之後下次直接複用,唔使重新解釋。呢次玩法嘅核心,就係叫 Codex 幫你從一篇圖文入面「提煉出」一套排版 Skill,然後用呢個 Skill 去排你自己嘅文章。

整理重點

第一步:揾參考樣式,截好完整長圖

用 瀏覽器 打開嗰篇圖文,千祈唔好喺 App 入面截,因為 App 成日只截到屏幕上嗰一小塊。裝一個截圖瀏覽器插件,例如 GoFullPage,佢會幫你由頭到尾滾動截成一張完整長圖。截完之後下載,同時複製文章連結。

兩樣嘢要一齊準備好:完整長圖同文章連結,缺一不可。

  • 瀏覽器插件可以自動滾動截全頁,確保唔漏低任何設計細節。
  • 連結畀 Codex 讀頁面結構,截圖畀佢睇視覺風格,兩個信息互補。
整理重點

第二步:畀 Codex 落指令,講清楚要提煉 Skill

打開 Codex,將截圖同文章連結一齊放埋,然後附上提示詞。提示詞要講清楚幾點:參考庫入面已有嘅 Skill 寫法、只可以新增檔案唔可以改原有代碼、唔保留原作者資訊同關注引導、話畀佢你中意嘅排版元素例如 容器結構、間距、配色、首字放大。

  1. 1 參考已有 Skill 寫法,保持一致嘅結構。
  2. 2 只可以新增檔案,唔可以改動原有代碼。
  3. 3 圖片入面嘅原作者資訊同關注引導唔使保留。
  4. 4 指明你中意嘅排版元素,例如容器結構、間距、配色、首字放大。

Codex 收到指令後會開始處理,大概等 十分鐘。佢會自己讀連結頁面、分析截圖、對比已有 Skill 寫法,然後寫新嘅技能文件。完成後佢會話你知技能名叫咩、調用名係咩,仲有一份驗證每個樣式元素嘅測試結果列表。

整理重點

第三、四步:測試預覽,再套用自己文章

Codex 完成後,對話入面會有個「打開測試預覽頁」嘅連結,點開就可以見到佢用示範內容套上呢套排版嘅效果。奶油紙張背景、深棕描邊、淺黃解釋卡、薄荷綠結論卡、首字放大——整體視覺同原文差唔遠。

唔係100%還原,間距同顏色可能會有偏差,但整體氣質啱就可以繼續。

確認方向啱之後,將你自己寫好嘅文章同配圖一齊發畀 Codex,話畀佢用啱先整好嘅技能名嚟排版。等佢處理完,再打開測試頁面睇效果。如果有細節唔舒服,例如 卡片間距、字號,可以直接同 Codex 講,佢會幫手微調。

整理重點

省時嘅效果同未搞掂嘅位

之前排一篇圖文要 兩三個鐘,選模板、調顏色、一段段對齊,搞完仲覺得唔好睇。用呢個方法,由截圖到出樣式大概十幾分鍾,之後套自己文章又十幾分鍾,剩返嘅時間全部可以用嚟打磨內容。對作者嚟講,呢個唔係「慳咗啲時間」,而係成個創作流程嘅 重心變咗。

  • 圖片同文字之間嘅相對位置有時會偏大,圓角弧度未夠準,需要多描述一次。
  • 補充細節描述之後通常會更準,迭代效率比手調快好多。

作者話佢打算繼續玩呢個方法,有新發現再分享。

我最近喺度搞緊一件有啲上頭嘅事。

揾到一篇排版特別靚嘅圖文,截圖,掉畀 Codex,等幾分鐘,佢就將個 blogger 嘅排版樣式「學」走咗。

然後我將自己嘅文章塞入去,佢直接跟住個樣式幫我排好曬。

我嗰陣時睇住預覽頁,就咁呆咗大約三秒。

呢個方法我連續玩咗好幾次,每次都成功率高,所以今日想認真同你講一次具體點做。

PART 01

先解釋嚇 Codex 喺呢件事入面嘅角色

Codex 係 OpenAI 出嘅一個 AI 編程工具,佢特別之處係你可以畀佢裝各種 Skill(技能),每個 Skill 係一套可以被調用嘅能力,寫好之後下次直接重用,唔使重新解釋。

今日呢個玩法,核心就係 let Codex 幫你由一篇文章裏面「提煉出」一套排版 Skill,然後用呢個 Skill 去排你嘅文章。

核心原理

讓 Codex 從參考圖文裏面提煉排版 Skill,技能寫好之後直接重用,下次想排同類風格唔使重新描述,直接 call 個名就得。

PART 02

第一步:揾到你想參考嘅排版樣式

呢度有個小細節好多人會忽略:用瀏覽器打開嗰篇圖文,唔好喺 App 入面截圖,因為 App 入面截圖好多時只係截到屏幕上嗰一小塊,下面嘅內容截唔到。

圖片

用瀏覽器打開之後,裝一個截圖嘅瀏覽器插件,呢個嘢可以幫你將成個頁面由頭到尾全部截成一張圖。㩒一下佢就自動向下捲,等佢捲完右上角有個下載圖片嘅掣,㩒一下,一張完整嘅長圖就出咗嚟。

GoFullPage 截圖完成後下載為圖片

操作要點

瀏覽器完整長圖 + 文章連結,兩個嘢一齊準備好,下一步要同時 send 畀 Codex。
連結令到 Codex 可以自己去讀頁面結構,截圖令佢睇到視覺細節,兩樣嘢缺一不可。

PART 03

第二步:落指令畀 Codex

打開 Codex,將截圖同文章連結一齊放埋入去,然後附上一段 prompt。Prompt 嘅核心邏輯係話畀 Codex 知:呢組截圖係一個視覺風格好靚嘅圖文排版,你想佢將呢套風格提煉成一個可以重用嘅 Skill。

Prompt 一定要講清楚嘅幾點

參考佢庫入面已有嘅 Skill 寫法,只可以新增 file,唔可以改原有 code。
圖片入面嘅原作者資訊同關注引導唔使保留。
你鍾意嘅係容器結構、間距、配色、首字放大呢啲排版元素,其他風格特徵可以一併講埋。

發送截圖和提示詞給 Codex

Codex 收到指令之後就會開始處理,呢個過程大概要等十分鐘。佢會自己去讀連結頁面、分析截圖、對比已有 Skill 嘅寫法,然後開始寫新嘅技能 file。

處理完成之後,佢會話畀你知新建咗邊啲核心 file、技能叫咩名、call 咩名,仲有一份驗證每個樣式元素嘅測試結果列表,將佢確認過嘅細節都列曬出嚟。

PART 04

第三步:打開測試預覽頁確認效果

Codex 完成之後,對話入面會有一個「打開測試預覽頁」嘅連結,㩒開佢,你就會見到佢用示範內容套咗呢套排版之後係咩樣。

奶油紙張底色、深啡描邊、淺黃解釋卡、薄荷綠結論卡、首字放大——成個視覺感覺同原文差唔多。

復刻完成的測試預覽頁效果

當然唔係百分百還原,有啲細節會走樣,間距可能大咗或者細咗,顏色可能爭少少,呢啲都好正常,之後可以反覆微調。呢步主要係確認方向啱,整體氣質接近就可以繼續。

PART 05

第四步:將你自己嘅文章掉入去

確認樣式之後,將你自己寫好嘅文章同配圖一齊 send 畀 Codex,叫佢用啱先整好嘅呢個樣式嚟排版,話畀佢知個技能 call 名就得。

等佢處理完,同樣打開測試頁面睇效果。

自己文章套上新樣式後的效果

我試咗一次,用嘅係一篇講 AI 工具嘅圖文,封面、標題卡、解釋卡、結論卡、圖片邊框,整體排出嚟嘅感覺係啱嘅。

細節仲可以繼續打磨,例如某張卡嘅間距唔順眼,某段文字嘅字號覺得細咗,呢啲都可以直接同 Codex 講,佢會幫你調。

PART 06

慳咗幾多時間,同埋未完全搞定嘅地方

我以前排一篇圖文大概要花兩到三個鐘,揀模板、調顏色、一段段對齊,搞完仲覺得唔係幾靚。

用呢個方法的話,由截圖到出樣式,等嘅時間大概十幾分鐘,之後套我嘅文章又係十幾分鐘,餘下嘅時間全部用嚟打磨內容本身。

對我嚟講,呢個唔係「慳咗啲時間」,而係成個創作流程嘅重心變咗。

未完全搞定嘅地方

圖片同文字之間嘅相對位置,有時 Codex 排出來嘅版本,圖片同卡片之間嘅間距會比參考樣式大啲,或者圖片嘅圓角弧度唔夠似。
解法係多描述一次,將「圖片邊框寬度」「圖文間距」呢啲細節用文字單獨話畀佢知,補充描述之後通常會更準。唔係每次都可以一步到位,但係迭代起嚟效率比手調快好多。

三件套 · 記住呢個流程

· 截圖:瀏覽器打開目標圖文,GoFullPage 存成完整長圖

· 連結:文章原始連結一齊準備好,同截圖同時 send 畀 Codex

· Prompt:講清楚要提煉 Skill,指明你鍾意嘅排版元素

復刻完成,Skill 提煉成功

以後碌到鍾意嘅圖文排版,截圖、連結、Prompt,三件套 send 過去,Codex 幫你將呢套風格沉澱成可以反覆 call 嘅 Skill。

呢件事佢做得幾好,我打算繼續玩落去,有新發現再同你哋分享。

我最近在搞一件有點上頭的事。

找到一篇排版特別好看的圖文,截圖,丟給 Codex,等幾分鐘,它就把那個博主的排版樣式給「學」走了。

然後我把自己的文章塞進去,它直接按那個樣式幫我排好了。

我當時盯着預覽頁,就這麼愣了大概三秒。

這個方法我連續玩了好幾次,每次成功率都挺高,所以今天想認認真真跟你講一遍具體怎麼做。

PART 01

先解釋一下 Codex 在這件事裏的角色

Codex 是 OpenAI 出的一個 AI 編程工具,它的特別之處在於,你可以給它裝各種 Skill(技能),每個 Skill 是一套能被調用的能力,寫好了之後下次直接複用,不用重新解釋。

今天這個玩法,核心就是讓 Codex 幫你從一篇文章裏「提煉出」一套排版 Skill,然後用這個 Skill 去排你自己的文章。

核心原理

讓 Codex 從參考圖文裏提煉排版 Skill,技能寫好之後直接複用,下次想排同類風格不用重新描述,直接調用名稱就行。

PART 02

第一步:找到你想參考的排版樣式

這裏有一個小細節很多人會忽略:用瀏覽器打開那篇圖文,不要在 App 內截,因為 App 內截圖很多時候只截到了屏幕上那一小塊,下面的內容截不到。

圖片

用瀏覽器打開之後,裝一個截圖的瀏覽器插件,這個東西能幫你把整個頁面從頭到尾全部截成一張圖。點一下它就自動往下滾,等它滾完了右上角有個下載圖片的按鈕,點一下,一張完整的長圖就下來了。

GoFullPage 截圖完成後下載為圖片

操作要點

瀏覽器完整長圖 + 文章連結,兩個東西一起備好,下一步要同時發給 Codex。
連結讓 Codex 能自己去讀頁面結構,截圖讓它看到視覺細節,兩者缺一不可。

PART 03

第二步:給 Codex 下指令

打開 Codex,把截圖和文章連結一起放進去,然後附上一段提示詞。提示詞的核心邏輯是告訴 Codex:這組截圖是一個視覺風格很好看的圖文排版,你希望它把這套風格提煉成一個可以複用的 Skill。

提示詞必說清楚的幾點

參考它庫裏已有的 Skill 寫法,只能新增文件,不能改動原有代碼。
圖片裏的原作者信息和關注引導不用保留。
你喜歡的是容器結構、間距、配色、首字放大這些排版元素,其他風格特徵可以一併說。

發送截圖和提示詞給 Codex

Codex 收到指令之後會開始處理,這個過程大概要等個十分鐘。它會自己去讀連結頁面、分析截圖、對比已有 Skill 的寫法,然後開始寫新的技能文件。

處理完成後,它會告訴你新建了哪些核心文件、技能名叫什麼、調用名是什麼,還有一份驗證每個樣式元素的測試結果列表,把它確認過的細節都列出來了。

PART 04

第三步:打開測試預覽頁確認效果

Codex 完成之後,對話裏會有一個「打開測試預覽頁」的連結,點開它,你就能看到它用演示內容套上這套排版之後長什麼樣。

奶油紙張背景、深棕描邊、淺黃解釋卡、薄荷綠結論卡、首字放大——整個視覺感覺和原文差得不遠。

復刻完成的測試預覽頁效果

當然不是百分之百還原,有些細節會跑偏,間距可能偏大或偏小,顏色可能差一點,這都是正常的,後面可以反覆微調。這一步主要是確認方向對了,整體氣質接近就可以繼續往下走。

PART 05

第四步:把你自己的文章丟進去

確認樣式之後,把你自己寫好的文章和配圖一起發給 Codex,告訴它用剛才建好的這個樣式來排版,技能調用名告訴它就行。

等它處理完,同樣打開測試頁面看效果。

自己文章套上新樣式後的效果

我測了一次,用的是一篇講 AI 工具的圖文,封面、標題卡、解釋卡、結論卡、圖片邊框,整體排出來的感覺就是對的。

細節還是可以繼續打磨,某一張卡的間距不舒服,某段文字的字號感覺小了,這些都可以直接跟 Codex 說,它會幫你調。

PART 06

省了多少時間,以及還沒完全搞定的地方

我之前排一篇圖文大概要花兩到三個小時,選模板、調顏色、一段一段對齊,搞完了還覺得不太好看。

用這個方法的話,從截圖到出樣式,等待時間大概十幾分鍾,之後套我自己的文章又是十幾分鍾,剩下的時間全部用來打磨內容本身。

對我來說,這不是「省了點時間」,是整個創作流程的重心變了。

還沒完全搞定的地方

圖片和文字之間的相對位置,有時候 Codex 排出來的版本,圖片和卡片之間的間距會比參考樣式大一些,或者圖片的圓角弧度不夠對。
解法是多描述一遍,把「圖片邊框寬度」「圖文間距」這些細節用文字單獨說給它,補充描述之後通常會更準。不是每次都能一步到位,但迭代起來效率比手調快很多。

三件套 · 記住這個流程

· 截圖:瀏覽器打開目標圖文,GoFullPage 存成完整長圖

· 連結:文章原始連結一起備好,和截圖同時發給 Codex

· 提示詞:說清楚要提煉 Skill,指明你喜歡的排版元素

復刻完成,Skill 提煉成功

以後刷到喜歡的圖文排版,截圖、連結、提示詞,三件套發過去,Codex 幫你把這套風格沉澱成可以反覆調用的 Skill。

這件事它做得挺好的,我打算繼續玩下去,有新發現再跟你們分享。