我是 Allen,奇鋒國際的成員。
先把位置站清楚,不然後面講什麼都是虛的:我會寫程式,但大概十年沒動過了。我也做動畫,一個畫面精不精緻、節奏對不對,我看得出來。
我沒有的是另一半能力——製作素材。把腦袋裡的東西變成可以用的圖層、模型、貼圖、分鏡,我做不到。過去十年技術棧也換了好幾輪,我知道該做什麼,但不知道現在該怎麼做。
所以這個專案我的分工很明確:用 Claude Code 安排開發流程、盯著它除錯、一輪一輪把視覺推到夠精緻為止。判斷留在我這邊,產出交給它。
停手十年最直接的後果是,我腦袋裡的技術架構停在十年前。這一塊它補得最好——不只是照著我說的做,而是主動給前端上的建議:這個效果現在有更省的做法、這個結構在手機上會出問題、這裡可以改成瀏覽器原生支援的方式。我不必先去補完十年的技術債,就可以直接想「我要什麼畫面」,然後放手去試。
結果它做到了。
2026 年 7 月 16 日到 8 月 8 日之間,我用 Claude Code 從零蓋出公司官網 peakqi.com——中英雙語共 32 個頁面、一段 three.js 的捲動分鏡、一層可以整個關掉的 WebGL 增強層,還有兩支自己寫的素材產生管線。
全部的程式碼都公開在 GitHub,提交歷史沒有整理過。
這篇不是成功心得,是工作記錄。
這個網站到底是什麼
不是模板。技術規格如下:
| 項目 | 內容 |
|---|---|
| 架構 | 原生 JavaScript,沒有前端框架。全站文案、價格、案例集中在單一 content.js |
| 首頁 | three.js 載入一顆 42 網格的相機 GLB 模型,隨捲動經歷組裝、拆解、零件說明、攤開藍圖、組回原型、翻面六個階段 |
| 渲染層 | hero-engine.js(Canvas 2D 分鏡)、gl-engine.js(WebGL 增強層,可整層關掉)、micro-engine.js(微互動) |
| 降級策略 | reduced-motion、save-data、deviceMemory < 4、寬度 < 900、context lost、shader 失敗——任一條件成立就自動降級,敘事完整保留 |
| 素材產生器 | tools/gen-allen-art.mjs(194 條 SVG 路徑歸位成九塊剛體)、tools/gen-allen-room-assets.py(40 層拆解,內建自我驗算) |
| 部署 | Vercel + GitHub Actions;表單走 serverless function 分流到 Google 試算表 / Email / Notion |
| 語言 | 繁體中文與英文,各 16 頁 |
想直接看成品的話,首頁、案例、方案說明 是三個最能看出差異的地方。
16 天的節奏
| 日期 | 提交數 | 主要進展 |
|---|---|---|
| 7/16–7/18 | 28 | 骨架、部署管線、解決方案頁動畫 |
| 7/19 | 60 | 首頁相機分鏡;LCD 影片定位(見下一節) |
| 7/20–7/21 | 52 | 場景架構重構、手機全面修正 |
| 7/22 | 61 | 六隻怪獸、品牌卡動畫、全站文案重寫 |
| 7/23 | 2 | RWD 修正 |
| 7/24–7/31 | 0 | 停工 |
| 8/01–8/02 | 12 | 乾淨網址、表單收件端點上線 |
| 8/03–8/04 | 51 | 手機版總審查、技術 SEO、設計衝刺 |
| 8/05 | 57 | 三輪實機回饋、Allen 小劇場、選單彩蛋 |
| 8/06 | 45 | 英文版 16 頁全站上線 |
| 8/07–8/08 | 41 | 收尾與潤飾 |
多數日子投入 3–4 小時,衝刺日更長。
截至 2026 年 8 月 8 日,整個 repo 共 414 個提交,其中 409 個落在上面這 16 個工作天裡(另外 5 個是五月設定網域與 repo 時留下的)。你可以用 git rev-list --count HEAD 自己數。
卡住的那一天:7 月 19 日
我要把五支業務短片貼到 3D 相機背面的 LCD 螢幕上。聽起來是小事。那天的 60 個提交裡,超過一半在處理這一件事。
嘗試順序,照 commit 記錄:
- three.js
VideoTexture貼在平面上 → 影片溢出螢幕 - 無盡調整定位參數(
vpx0.88/vpy-0.06、vpx0.667/vpy-0.251、vpx0.851/vpy-0.268⋯) - 用 shader 寫 rounded-box SDF 遮罩做圓角
- 手切自訂 8 控制點 BufferGeometry,斜角要貼合螢幕開口
- 卡頓、銳角、飄移,整個方案放棄
- 改成 DOM 影片疊層:每幀把 3D 螢幕的控制點投影成畫面像素,動態設定
clip-path - 錨點還是用猜的 → 改成錨到 GLB 裡真正的螢幕面 mesh(
Object_12) - 開始窮舉角度:+3 度 → 削到角落 → 0 度 → +1.5 度 → −2 度
- 圓角改成 24 個控制點,但
clip-path迴圈還寫死 8 → 影片被裁成頂端一條細線 - 修好,改成四角定位,二次貝茲做圓角
- 右下角單獨再調
十一次。到這裡我已經沒有更好的想法了。
然後 Claude Code 做了一件我沒想到的事:它做了一個工具,讓我自己用滑鼠把四個角拖到定位。
畫面出現四個藍色把手,我拖,它即時把座標反投影回 3D mesh 上重建裁切,左上角同步顯示一組可以直接複製回程式碼的座標陣列。我拖了幾下,複製,貼上。
下一個提交是:
影片四角採用使用者用 __cornerTool 拖曳對位後的精確值,精準貼合螢幕
那一整天算不出來的東西,最後的解法是不算了——做一個介面,讓看得見畫面的人來判斷。
我原本以為 AI 寫程式的價值在於它算得比我準。那天我發現不是。它的價值在於它知道什麼時候該停止計算、把判斷權交回給我,並且順手把交接的工具也做好。
失敗與回滾
7 月 22 日,我試著讓它自動重新設計「六大功能」區塊。結果不能用。
提交記錄:
還原六大功能區:移除失敗的編輯設計自動實驗(583c6f7)
回滾之後改成手工做:先鋪一層瑞士編輯格線,再讓六隻角色一隻一隻破格——01 坐在格線上把 hairline 壓彎、02 雙手吊在格頂引體向上、03 趴在橫線上、04 單手吊線盪鞦韆、05 走鋼索、06 倒掛在線下。六個獨立提交,一隻一隻來。
比自動重設計花了更多時間,但成果好很多。這件事教我的分工是:結構可以交給它,品味不行。
誠實性也是工程問題
有幾個提交我特別想提:
PeakOps P4:誠實性修正(移除不實與自相矛盾的陳述)Pricing 重做:⋯ 移除不實承諾案例頁 Phase B 下半:作品卡狀態、案例編號、Lightbox 說明(誠實不捏造)
寫行銷文案的時候,很容易滑向那種聽起來很厲害但其實沒有內容、甚至和前段互相矛盾的句子。Claude 有指出這些地方。這不是我要求的功能,是它在改稿過程中主動提的。
到今天為止,網站上還有一批「需要事實才能寫」的項目是空著的——合約條件、保證條款的性質、資安的具體宣稱、案例的成效數字。那些我還沒有可以拿出來的憑據,所以寧可不寫。這也是為什麼 方案說明 上寫的是「依需求報價」而不是一個數字。
一個新公司的官網最容易犯的錯,就是把自己講得比實際大。一個會抓到這件事的協作者,比多一個會寫 CSS 的協作者有價值。
我們發展出的工作方式
驗收探針
專案裡有一個 .peakops-audit/ 目錄,放的是不在網站路由上的驗收頁。無頭瀏覽器幾乎不跑 requestAnimationFrame,所以這些頁面支援 ?step=N 參數:把 rAF 換成固定 dt 的手動時鐘,推 N 幀,截圖因此可重現。
這是為了讓「動畫對不對」這種主觀問題,變成可以逐像素比對的問題。
代理併行審查
8 月 3 日的手機版總審查,提交寫著:
32 筆定罪逐一修復 + 複驗(55+8 代理兩輪)
派出多個代理去跑不同視口與情境,回報問題清單,逐項修復後再複驗一輪。
共用詞彙
「母動畫」是捲動驅動的主軸,「子動畫」是每一幕內部自己跑的時間軸。這組詞是做到一半自然長出來的,之後我只要說「這一幕的子動畫凍結了」,它就知道要去看哪裡。
追根因,不修表象
8 月 5 日有一個提交:
機器人「沒站在線上」的真因:它們腳下那條線幾乎看不見
我回報的是「機器人沒站好」,實際問題是線的對比度不夠。
一個私心
關於我們 頁上有一個機器人,站在自己的工作間裡。它叫 Allen。
它的工作間有 40 個手工拆出來的圖層,會隨訪客當地的時間變成白天、黃昏或夜晚。窗外的雲會飄,夜裡有星星和一顆慢慢升起的月亮;雲會擋住星星,月亮從雲後面浮起來的時候雲會微微透光,月光也會打在窗外的建築上。有六個地方可以點——窗戶、檯燈的開關、馬克杯、海報、控制台、工具排——點下去它會轉頭看過去。
技術上這是全站最麻煩的一塊。整套天色不是準備三張圖片,而是用 multiply 壓暗加 screen 提亮兩層分級圖,在 sRGB 空間精確推導出來(實測平均差 0.3 階)。
素材產生器會自我驗算:把底板加元件貼回去,和原稿逐像素比對。這裡有一個細節值得說——關卡看的不是 RMSE。轉檔把整張放大再換算回來,每一條描邊都會差個 1px,那種差異 RMSE 看得到、眼睛看不到。真正要擋的是「一整塊東西不見了」,所以關卡是「差異超過 60 的連通區域必須是 0 塊」。目前 RMSE 是 3.74,不合格區域 0 塊。
這一段沒有任何商業理由。我只是想在自己蓋的網站裡放一個自己。
同一個念頭還生出一個更小的:用手機打開選單,六隻零件怪獸裡會有一隻在裡面——吊在語言切換鈕上,或是從選單項目之間垂下來。每次出現的角色和戲碼都不一樣,一共十五齣,一齣一齣畫的。沒有人需要這個。但如果把它拿掉,我會是全站最捨不得的那一塊。
8 月 6 日:一天做完整個英文站
45 個提交,16 個英文頁面上線。
包含 i18n 底座、hero-scenes.js 裡上百處 canvas 畫的字包 t()、153 條素材路徑絕對化、雙語 sitemap(33 個 URL 帶 hreflang 三件組)、雙語 JSON-LD、/en 路由。中文站零像素迴歸。
這是整個專案裡我到現在還覺得最不真實的一天。
數字
| 項目 | 數值 |
|---|---|
| 提交總數 | 414(截至 2026-08-08) |
| 工作天 | 16 天,橫跨 24 個日曆天 |
| 開發人數 | 1 人(公司團隊 3 人) |
| 多數日子投入 | 3–4 小時 |
| 頁面數 | 中英雙語各 16 頁,共 32 頁 |
| 工具 | Claude Code(Claude Max 訂閱方案) |
| 全程使用其他 AI 工具 | 沒有 |
| 我的背景 | 會寫程式,但十年沒動過;會做動畫;不會製作素材 |
給正在猶豫的人
如果你和我一樣——判斷得出什麼東西好,但手上做不出來——我的經驗是:「做不出來」那半邊,現在可以外包了。
十年沒寫程式這件事,在這個專案裡幾乎沒有變成障礙。真正有用的是另外兩件事:我知道一個畫面什麼時候「還差一點」,以及我講得出差在哪裡。這兩件事沒有人能代替我做。
所以不要外包判斷。7 月 22 日那次自動重設計失敗,就是因為我把品味也一起交出去了。整個專案裡所有好的部分,都是我知道自己要什麼、然後花時間把它講清楚的那些。
程式碼全部公開在 github.com/Peakqi-com/peakqi-website,提交歷史沒有整理。上面每一句話都可以自己去驗證。
如果你想聊聊怎麼把 AI 接進自己的流程,預約 15 分鐘的導入評估 就可以。