我用 Claude Code 做出第一個作品：解鎖繁中斷行修正外掛

今日目標查詢：「Claude Code 新手第一個作品」 搜尋意圖：資訊型

你每次看自己用 AI 做好的網頁，在手機上打開時，是不是總覺得哪裡怪怪的？尤其是那行大標題，本來好好的「一起作夢」，硬生生被瀏覽器切成「一起作」然後下一行只有一個「夢」，或是句號孤零零地掉到第三行去當孤兒。

這感覺超差的對吧？這種版面被切碎的感覺，讓你的精緻作品一秒變廉價，強迫症看了根本快發作。但這真的不是你的問題，因為瀏覽器預設的中文斷行機制很笨，它覺得任何兩個漢字之間都可以任意切斷。這不是你的代碼寫得不好，這是所有中文網頁都得面對的「繁中斷行」結構限制。

一句話：做出來再說，把這種視覺細節強迫症變成你的第一個實用外掛，就是最棒的起手式。

這是我開始公開建造個人網站的第 3 天。本來我只是想做個簡單的自我介紹網頁，但每次在手機上看到標題斷行碎掉，我就渾身不舒服。

我考慮過傳統的解決方案 A：自己在程式碼裡面手動加 `<br>` 換行標籤。但我用手機、平板和電腦對比看了一下，在電腦版剛好換行的地方，到手機版又縮在一起，我反覆改了 15 次，差點被搞瘋。這招根本治標不治本。

所以我決定選方案 B：用 AI 幫我寫一個全自動的「繁中斷行修正外掛」。這也是我給自己設定的挑戰，用 Claude Code 做出第一個真正能解決問題的實用作品。

我本來以為這要寫幾百行複雜的程式碼，結果我把網頁截圖貼給 Claude Code，它只花 10 分鐘就幫我用瀏覽器內建的 `Intl.Segmenter`（中文詞切分）搭配 CSS 搞定了！

我們用的核心邏輯其實超簡單：

如果只用 `text-wrap: balance`，瀏覽器為了追求兩行字數一樣，還是會把「一起」拆成「一 / 起」。只有把 `Intl.Segmenter` 和 `text-wrap: balance` 這兩招接在一起，才能得到最完美的排版效果！

這個外掛支援 Chrome 87+、Safari 14.1+ 和 Firefox 125+，Node 16+ 也能跑，如果遇到太舊的瀏覽器會自動退回預設文字，網頁完全不會壞掉。

在用 headless Chrome 進行自動化驗證截圖的時候，我踩了個大坑。因為網頁有跑 scroll-reveal 動畫， headless 抓圖常常只抓到一片白畫面，還以為是程式壞了。

後來 Claude Code 幫我想了個聰明的招式：做「對照渲染」。我們在同一個 HTML 頁面裡，左邊放沒有修正的標題，右邊放套用了 nowrap span 的標題，直接截圖對比。看到右邊的「作夢」牢牢抱在一起、句號沒有變成孤兒的那一刻，整個心靈都被治癒了。

這個「繁中斷行修正外掛」已經順利塞進我的 `cjk-linebreak` 實戰 skill 庫了！

說真的，我覺得非工程師用 Claude Code 最爽的點，就是你可以直接把這種細節強迫症變成一個實用的工具。以前我們只會碎碎念網頁很醜，現在你只要把問題描述給 Claude，它就能幫你把瀏覽器底層 API 翻出來解決。你出創意，AI 負責執行，這就是 10/90 法則的威力。接下來，我決定要把這個外掛打包成一個可以直接 import 的 React 元件，讓我在後面開發其他小作品時，可以直接套用。

第一，打開你最近做的網頁。 在大標題 CSS 加上 `text-wrap: balance;` 看看。

第二，去 BUILD 路線看看。 下載這個繁中斷行修正元件，試著把它掛載到你第一個小作品上，親手通關這個視覺升級成就！