我用AI做了個招聘會排版工具，把Excel的破事全扔了
整理版優先睇
用AI從Excel圖片快速生成招聘會排版工具，迭代添加磁吸、智能排位等功能，從兩天縮短到一小時
呢篇文章係由一個負責校園招聘會嘅人寫嘅，佢每年都要用Excel排企業座位分佈圖，按行業分類塞到ABCD區。聽落簡單，但做落就係另一個故事：分類完要編號，編號完要排位，排完位發現區域面積對唔上。每次都要改單元格背景色、調列寬行高，手動對齊。搞完一張圖要兩日，眼又花頸又痠，下年又要重新嚟過。佢心諗：呢啲嘢可唔可以交畀AI做？
佢用Codex（OpenAI嘅AI模型），上傳之前嘅Excel檔同一張排版好嘅分佈圖圖片，叫AI用HTML 1:1復刻。第一版好粗糙，卡片亂糟糟，但最少有數據出到。之後佢不斷迭代：加咗磁吸功能（拖過去自動對齊），一鍵智能排位（選區域、設列數間距、貼企業號碼，自動排好），自動分類（按行業分到ABCD區），導入導出（保存到瀏覽器本地，導出PNG/PDF/HTML），衝突檢測（檢查編號重複、攤位重疊、超出分區）。成個過程佢幾乎冇寫過代碼，只係將需求同想法講畀AI聽，再試、再改。
佢分享咗兩個大教訓。第一，工具揀錯嘥時間：佢試過GLM 5.1、MiniMax 3、Kimi 2.6，但得Codex先做到準確復刻，其他模型間距顏色分區全部錯。第二，冇上Git幾乎翻車：佢加衝突檢測時改崩咗磁吸功能，退唔返，好彩Codex自己修復。之後佢立即上Git，後來再改崩時三秒救返。佢最大嘅感悟係：AI令到唔識寫程式嘅人都有能力自己整工具，關鍵係你想做到啲咩，而唔係你識啲咩。佢話，你嘅工作流程應該用AI重新建構。
- 結論：用AI（Codex）從Excel同圖片生成HTML排版工具，將排座位時間由兩日縮短到唔使一個鐘。
- 方法：上傳Excel同分佈圖圖片畀Codex，叫AI生成HTML，再反覆描述需求做迭代，幾乎唔使寫Code。
- 差異：只有Codex先做到準確嘅圖轉HTML，其他AI模型（GLM、MiniMax、Kimi）細節全錯，揀啱工具好重要。
- 啟發：AI令到唔識寫程式嘅人都可以自己搭建實用工具，關鍵係清楚自己想要咩功能，而唔係識咩技術。
- 可行動點：用AI開發工具一定要上Git做版本管理，避免改崩咗退唔返；同埋要揀啱AI模型，Codex喺圖轉HTML呢類任務表現最好。
痛點同第一步：先確保『先能用』
每年校園招聘會前，佢都要用Excel排企業座位分佈圖，搞足兩日，眼又花頸又痠。佢心諗：呢啲嘢可唔可以交畀AI做？
佢唔識寫Code，但手頭有之前嘅Excel檔同排版好嘅分佈圖圖片。佢就將呢啲嘢一齊丟畀Codex，第一句就叫佢用HTML 1:1復刻分佈圖。Codex真係做到，雖然第一版好粗糙，卡片全部 擠埋一齊，但最少數據出咗嚟。
不斷迭代，功能越加越順
因為佢唔知排版工具應該有咩功能，所以第一個版本出咗之後，就開始 不斷迭代。佢最想要嘅功能係 磁吸——拖過去自動對齊。Codex加上咗，默認20px網格、18px對齊閾值，拖嗰一刻真係好舒服。
- 一鍵智能排位：選擇區域，設好每列幾個、間距幾多，貼上企業編號，所有卡片自動排好。
- 自動分類：企業名單有「攤位號 企業名稱 類別」三列，導入後自動分到ABCD區。
- 導入導出：保存到瀏覽器本地，下次打開續返；導出成PNG、PDF或完整HTML。
- 衝突檢測：檢查編號重複、攤位重疊、超出分區，防止手滑出錯。
開發過程——幾乎冇寫過代碼
成個工具開發過程，佢發現自己 幾乎冇寫過代碼。佢做嘅事只有：有需求、有想法，上傳Excel同截圖，描述想要嘅效果，試下，講畀Codex邊度唔啱，再試。
磁吸點實現？ 畫布仿射變換同 碰撞檢測算法，係Codex自己寫嘅。SVG嘅原生操作（createElementNS），佢都冇碰過。佢唯一做嘅係知道 自己想要咩，然後反覆同AI描述清楚。
兩個大坑：工具選錯同冇上Git
- 1 工具揀錯，半天白幹：佢試過GLM 5.1、MiniMax 3、Kimi 2.6，但得Codex先做到1:1復刻。其他模型間距、顏色、分區位置全部錯，改又冇法改。最後換Codex一把就出到原圖效果。
- 2 冇上Git，差啲翻車：因為覺得係小工具，開發時冇上Git。結果加衝突檢測時改崩咗磁吸，退唔返。好彩Codex自己修復，但之後佢立即上Git，每次改動前先commit。後來再加新功能時又改崩，三秒就恢復返。
佢話：工欲善其事，必先利其器。做圖轉HTML呢類任務，唔係每個AI都擅長，揀啱工具慳返好多時間。
最大感悟：關鍵係你想要咩，而唔係你識咩
佢最大嘅感悟唔係「AI真厲害」，而係發現自己以前太保守。佢以為排座位只能用Excel做，因為大家都係咁做。但AI令到 『唔識寫Code』呢件事唔再係障礙。
佢最後話：你嘅工作流程，係時候用AI重新建構。
唔係調整數據，係排座位。
企業名單拉出嚟，按行業分類塞入A區B區C區D區——聽落簡單係咪？做起上嚟就另一個故事喇。企業分類完咗編號點排？編號排好咗位置點分？位置分好咗打印出嚟又發現某個區嘅企業數量同區域面積對唔上。
每次我都喺Excel上面拖嚟拽去，改儲存格背景色，調校列闊行高，手動對齊。搞完一張分佈圖，眼都花埋、頸都痠埋，結果下一年又要重新嚟過——
企業變咗，分類變咗，場地佈局都變咗。
嗰陣時我諗嘅係：呢件事可唔可以交俾AI做？
第一步應該確保「先用到」
然後，我花咗大概半個鐘嘅時間，用Codex整咗一個單一檔案HTML工具。瀏覽器雙擊打開，唔使裝任何嘢。效果就係，而家我排一次圖嘅時間，由兩日縮短到唔夠一個鐘。
老實講，最開始我都唔知點搞。我只係識用Excel，連前端都未掂過。
但我手上有之前整好嘅Excel檔案同排版好嘅分佈圖圖片。我就將佢哋一齊掉咗俾Codex。
第一句就好直白：叫佢用HTML 1:1復刻分佈圖。
Codex真係整咗出嚟。第一版都幾粗糙——卡片係卡片，但全部逼埋一齊，唔可以拖動，亦唔可以調整。
但至少，數據出咗嚟。
不斷疊代先可以令功能越來越豐富
因為我自己都唔知呢種排版工具應該有咩功能，而且呢個都唔係咩大項目，所以都懶得去寫好文件再開發，所以只能係第一個版本出咗之後，再不斷疊代優化。
頭先嗰個版本只係一個「睇得唔用得」嘅版本，所以接下來就係幾輪嘅疊代。
磁吸係我最想要嘅一個功能。
我同Codex講：加個磁吸，拖拽嘅時候自動對齊。
佢加咗。網格線、相鄰攤位、區域排位點，全部可以吸附。預設20px嘅網格，18px嘅對齊閾值。
拖過去嗰一刻，真係舒服曬。
嗰啲年我手動對齊咗幾十張卡片，每次都要放大到200%然後眯埋眼對。而家好啦，拖過去就得，啪一聲吸住咗。
後來我發現，我可以加更多
有咗磁吸，我開始上癮喇。每多一個功能，就多一分「原來可以咁樣」嘅感覺。
一鍵智能排位——選擇區域，設定好每列幾個、間距幾多，將企業編號一貼上，所有卡片自動排好。
自動分類——企業名單裏面有「攤位號 企業名稱 類別」三列。生產與技術類去A區，財務文員類去B區，教育營運類去C區，管理業務類去D區。導入後自動識別，自動分配到對應區域。
導入導出——保存到瀏覽器本地，下次打開直接繼續。導出成PNG、PDF，或者直接下載一個完整嘅HTML檔案，帶埋編輯狀態。
衝突檢測——編號重複、攤位重疊、超出分區，全部有提示。呢個功能係後來加嘅，因為有一次真係手滑將兩個攤位疊埋一齊，導出PDF至發現。
我發現我幾乎冇寫過代碼
成個工具開發過程，我做嘅嘢只有：
有需求、有諗法 上傳Excel同截圖 描述我想要嘅效果 試一下 同Codex講邊度唔啱 再試
磁吸點樣實現嘅？我唔知。畫布嘅仿射變換同碰撞檢測演算法，係Codex自己寫嘅。SVG嘅原生操作（createElementNS），我都冇掂過。
我唯一做嘅嘢就係：知道我想要咩，然後反覆同AI描述清楚。
我踩過嘅坑
工具唔係一次就做啱嘅。過程中有兩個坑，我想單獨拎出嚟講嚇。
第一個坑：工具揀錯咗，半日白做。
將圖片1:1復刻成HTML——呢件事睇落簡單，實際上只有Codex可以一次過搞掂。
我試過GLM 5.1。唔得。試過MiniMax 3。唔得。試過Kimi 2.6。都唔得。出嚟嘅嘢大概方向係啱嘅，但細節全部冇咗——間距唔啱，顏色偏咗，分區位置錯位。改啦，要由頭描述；唔改啦，冇辦法用。
來來回回換咗三個模型，搞咗大半日。
最後換到Codex，一次過就出到同原圖一模一樣嘅效果。顏色、間距、分區、舞台位置，全部啱。
呢件事俾我嘅教訓就係：工欲善其事，必先利其器。做圖轉HTML呢種事，唔係每個AI都擅長。你花喺揀工具上面嘅時間，絕對比你花喺一個爛工具上面修修補補嘅時間值得。
第二個坑：冇用Git，差啲炒車。
因為呢個係非常簡單嘅一個小工具，所以我在開發過程中完全冇諗過用Git，覺得應該好快就可以搞掂。但係強如Codex，都出現改爛咗一個新功能——我將「衝突檢測」加上去，結果舊嘅磁吸對齊唔生效喇。
退唔返去。因為冇做版本管理。每一次都係直接覆蓋保存，冇提交記錄，冇分支。
呢個的確幾麻煩，如果要回滾到之前嘅版本，我只能靠記憶重新整。
好彩嗰一次Codex自己修復咗。但嗰次之後我即刻用咗Git，就算只係一個本地倉庫，每次改動之前先 git commit，壞咗就回滾。
後來加「編輯打印區域」功能嘅時候，果然又改爛咗一次。今次用咗三秒鐘就恢復咗。嗰種感覺——唔使慌。
如果你都係用AI整工具，Git唔係可選項，係必需品。AI改起代碼嚟比人快十倍，炒起車嚟都比人快十倍。
最大嘅感悟
唔係「AI好犀利」。呢個大家都知。
係我發現自己以前太保守喇。我以為呢啲嘢就只能用Excel做，因為大家都係咁樣做。換個方式唔一定更好，而且我都唔會寫代碼。
但AI令到「唔識寫代碼」呢件事唔再係障礙。
你唔需要知道點樣實現磁吸，你只需要講「加個磁吸功能」。你唔需要知道咩係SVG嘅仿射變換，你只需要講「拖拽嘅時候要平滑」。
關鍵唔係你識咩，而係你想要咩。
你嘅工作流程，係時候要用AI重新構建。
不是調數據，是排座位。
企業名單拉出來，按行業分類塞到A區B區C區D區——聽起來簡單對吧？做起來就是另一個故事了。企業分類完了編號怎麼排？編號排好了位置怎麼分？位置分好了打出來又發現某個區的企業數量跟區域面積對不上。
每次我都在Excel上拖來拽去，改單元格背景色，調列寬行高，手動對齊。搞完一張分佈圖，眼睛花了、脖子酸了，結果下一年還得重來——
企業變了，分類變了，場地佈局也變了。
那時候我想的是：這事能不能讓AI幹？
第一步應該確保“先能用”
然後，我花了大概半個小時的時間，用Codex做了一個單文件HTML工具。瀏覽器雙擊打開，不用裝任何東西。效果就是，現在我排一次圖的時間，從兩天縮短到了不到一個小時。
說實話，最開始我也不知道怎麼搞。我只會用Excel，連前端都沒碰過。
但我手裏有之前做的Excel文件和排版好的分佈圖圖片。我就把它們一起丟給了Codex。
第一句就很直白：讓它用HTML1:1復刻分佈圖。
Codex還真幹出來了。第一版挺粗糙的——卡片是卡片，但全擠在一起，不能拖動，也不能調整。
但至少，數據出來了。
不斷迭代才能讓功能越來越豐富
因為我自己也不知道這種排版工具應該有什麼功能，而且這個也不是什麼大項目，所以也懶得去寫好文檔再開發，所以只能是第一個版本出來以後，再不斷迭代優化。
剛才的版本只是一個“中看不中用”的版本，所以接下來就是幾輪的迭代。
磁吸是我最想要的一個功能。
我告訴Codex：加個磁吸，拖拽的時候自動對齊。
它加上了。網格線、相鄰攤位、區域排位點，都能吸附。默認20px的網格，18px的對齊閾值。
拖過去的那一刻，是真的舒服了。
那些年我手動對齊了幾十張卡片，每次都要放大到200%然後眯着眼對。現在好了，拖過去就行了，啪一下吸住了。
後來我發現，我可以加更多
有了磁吸，我開始上癮了。每多一個功能，就多一分“原來可以這樣”的感覺。
一鍵智能排位——選擇區域，設好每列幾個、間距多少，把企業編號一粘貼，所有卡片自動排好。
自動分類——企業名單裏有“攤位號 企業名稱 類別”三列。生產與技術類去A區，財務文員類去B區，教育運營類去C區，管理業務類去D區。導入後自動識別，自動分配到對應區域。
導入導出——保存到瀏覽器本地，下次打開直接續上。導出成PNG、PDF，或者直接下載一個完整的HTML文件，帶着編輯狀態。
衝突檢測——編號重複、攤位重疊、超出分區，都有提示。這個功能是後來加的，因為有一次真的手滑把兩個攤位疊在一起了，導出PDF才發現。
我發現我幾乎沒寫代碼
整個工具開發過程，我做的事只有：
有需求、有想法 上傳Excel和截圖 描述我想要的效果 試一下 告訴Codex哪裏不對 再試
磁吸怎麼實現的？我不知道。畫布的仿射變換和碰撞檢測算法，是Codex自己寫的。SVG的原生操作（createElementNS），我也沒碰過。
我唯一做的事就是：知道我要什麼，然後反覆跟AI描述清楚。
我踩過的坑
工具不是一次就做對的。過程中有兩個坑，我想單獨拿出來說一下。
第一個坑：工具選錯了，半天白乾。
把圖片1:1復刻成HTML——這件事看起來簡單，實際上只有Codex能一把過。
我試過GLM 5.1。不行。試過MiniMax 3。不行。試過Kimi 2.6。也不行。出來的東西大概方向是對的，但細節全丟——間距不對，顏色偏了，分區位置錯位。改吧，得從頭描述；不改吧，沒法用。
來來回回換了三個模型，折騰了大半天。
最後換到Codex，一把就出了跟原圖一模一樣的效果。顏色、間距、分區、舞台位置，全對。
這事給我的教訓就是：工欲善其事，必先利其器。做圖轉HTML這種事，不是每個AI都擅長。你花在選工具上的時間，絕對比你花在一個爛工具上修修補補的時間值。
第二個坑：沒上Git，差點翻車。
因為這個是非常簡單的一個小工具，所以我在開發過程中壓根沒有想着上Git，覺得應該很快就可以搞定的。但是強如Codex，也出現改崩了一個新功能——我把”衝突檢測”加上去，結果舊的磁吸對齊不生效了。
退不回去。因為沒做版本管理。每一次都是直接覆蓋保存，沒有提交記錄，沒有分支。
這的確挺麻煩的，如果要回滾到之前的版本，我只能憑記憶重來。
還好那一次Codex自己修復了。但那次之後我立刻上了Git，哪怕只是一個本地倉庫，每次改動前先 git commit，壞了就回滾。
後來加”編輯打印區域”功能的時候，果然又改崩了一次。這次用了三秒鐘就恢復了。那種感覺——不慌。
如果你也在用AI搭工具，Git不是可選項，是剛需。AI改起代碼來比人快十倍，翻起車來也比人快十倍。
最大的感悟
不是“AI真厲害”。這個大家都知道。
是我發現自己以前太保守了。我以為這些事情就只能用Excel做，因為大家都是這麼幹的。換個方式不一定更好，而且我也不會寫代碼。
但AI讓“不會寫代碼”這件事不再是障礙。
你不需要知道怎麼實現磁吸，你只需要說“加個磁吸功能”。你不需要知道什麼是SVG的仿射變換，你只需要說“拖拽的時候要平滑”。
關鍵不是你會什麼，而是你想要什麼。
你的工作流程，是時候需要利用AI進行重新構建。