Figma Sites 讓我很快有個網站，但我想要更多
我在 2025 年底開始架設個人作品集網站，起初是為了加快上架速度而選擇了 Figma Sites。確實達成了設計即網站一體化的理想狀態，但用了一段時間後，我發現一些限制：
- 要擴充具備語言、主題切換的功能很麻煩，需要重複刻頁面
- 未來若增加作品內容，管理起來不方便
- 互動效果要花很多功夫才能實現，且彈性不足
- 搭配 AI 工具並不順手
選好工具，AI 全程協作
我比較熟悉 Vue.js 語法，加上想用 Markdown 管理作品內容、讓頁面自動渲染，因此選定了三個主要工具：
- Nuxt 4：框架完整，原生支援 SSR，上手快
- Nuxt Content：Markdown 寫作品、自動渲染成頁面，內容管理更直覺
- Tailwind CSS v4：token 系統彈性夠，方便建立與維護 Design System
整個開發過程全程搭配 AI，我負責在後方調度指揮：
Claude Code
- 專案架構規劃
- Debug
- 文案編修
Codex
- UI 元件製作
- 互動行為細節
- 速度快，適合需要反覆嘗試的任務
ChatGPT Image 2
- 視覺發想
- 生成參考圖收斂方向
AI 的任務分配是邊做邊調整出來的，我採用 Claude Code 為主、Codex 為輔來進行。Claude Code 在專案初期很順，初始化、架構規劃、套件安裝這類任務交給它效率很高。但隨著專案規模變大，UI 修改和 bug 開始變多，這時候 Codex 反而更能一次到位。（也可能剛好碰到 Claude Code 降智🤔）
而為了讓 Claude Code 持續掌握專案架構，我也在過程中持續更新 CLAUDE.md，把檔案架構、元件、token 規範都記錄進去，讓 AI 在整個開發過程中一直能拿到正確的脈絡。
既然要搬家了，視覺風格也趁機強化
Swiss Style 是我一開始就確定的方向，透過格線、無襯線字體、高對比、空白、極簡色調，表現出克制、功能性、理性的美感。
舊網站其實已經有採用這個風格，但沒有完整發揮，整個網站看起來就默默的。新網站則強化了視覺張力，字重落差拉大、滿版 Layout、風格更鮮明。 查看 Design System (會在新分頁開啟)
開發分了四個階段
Stage 1 · 打好地基
進行基礎建設，包含 Nuxt 專案基本架構、套件安裝、Prettier、Tailwind token 系統，這個階段確立了之後整個視覺系統的基礎。
Stage 2 · 頁面骨架與元件
首頁架構、作品頁路由、導航列、i18n 通通搞定。也在這個階段正式建立 MDC 元件系統，確立了 Markdown 寫作品、Nuxt Content 渲染成頁面的工作流程。
Stage 3 · 互動、視覺與功能
這個階段花最多時間，主要在雕琢幾個互動的細節與視覺呈現。
1. Home Hero 的探索
我希望 Home Hero 能傳達強烈的「工程思維 + 設計思維」印象，前後換了三個方向：
最初的想法是一條拉桿在「設計思維」和「工程思維」兩端之間移動。但互動感不強、視覺效果也不夠，傳達的感覺比較像是在取捨、找平衡，而不是我能同時帶來兩者 (I bring both)。
換了第二個方向，兩個圓圈疊合時才顯示出隱藏文字，這個概念來自視覺密碼學，是個非常有趣且迷人的技術。但實作後發現會造成畫面不斷閃爍、眼睛不舒服，而且只有圖形完全重合那一刻才顯示文字，缺少揭露的過程感。
第三個版本避免了畫面閃爍的問題，「I BRING BOTH」從圓圈交集的區域揭露出來且更為清晰。概念和互動呼應。手機版則改用滑動觸發圓圈重合的動畫，讓不同裝置上的體驗保持一致。
2. How I Think & Work · 線條插圖
How I Think & Work 的三張卡片表現了我的核心理念：切換視角、減法、做做看。從手繪草稿到線條插圖，我想呈現那種思考正在成形的感覺。
3. Ask AI · 懶得看就問 AI
每篇作品頁右下角都有個問問 AI 的小功能 (目前只支援桌機)，點下去會帶入作品連結生成 prompt，讓讀者直接丟給 ChatGPT 或 Claude 問問題。因為各 AI 平台對 URL 夾帶 prompt 的支援不太穩定，也保留了複製 prompt 的按鈕。
Stage 4 · 內容搬移與收尾
最後把舊網站的的作品內容搬進來，我寫了個 SKILL，可以把舊內容自動轉成 MDC 格式，大幅加快搬運速度。補齊 SEO 與 a11y 後，就順利部署上線啦!
搬家完成！
從靜態、低調，到有互動、暗色模式、雙語切換且風格鮮明。新舊網站最大的差距，是從一個「放作品的地方」變成「本身也是個作品」。
而在這過程中，感受到快的不是 AI 寫了多少 code，是迭代速度跟上了設計速度的順暢感。