典億創研工作室官網｜從品牌策略到 Next.js 全端開發的一站式展示

The Brief — 為剛成立的工作室建立一張「會說話」的數位名片

典億創研工作室於 2025 年 8 月成立時，面對的第一個挑戰是：一間主打「不做套版、研究驅動、從零打造」的工作室，自己的官網就是最直接的能力證明。

我們不能用 Wix、不能用 Squarespace、也不能套任何現成的 Next.js starter。整個網站必須從品牌策略開始，每一層決策都要能回答「為什麼這樣做」——因為這個網站會是我們對每一位潛在客戶的能力答辯。

專案初始條件

• 客戶：工作室自身（自有專案，沒有客戶可以妥協）
• 時程：3 個月完成第一版上線，之後持續迭代
• 範圍：品牌識別、官網設計、開發、內容生產、SEO 全鏈路
• 限制：只有一位全端工程師（工作室創辦人）

The Challenge — 把自己當客戶，就是最難的客戶

做自己的專案看似自由，實際上更難。因為：

• 沒有外部時程壓力，容易無限拖
• 沒有客戶守住範圍，容易做太多、做太重
• 每一個設計決策都會被潛在客戶當「示範作品」檢視，標準被迫拉到最高
• 整個網站同時是「品牌載體」和「作品集本體」——自我指涉的矛盾

我們需要一個能同時回答兩個問題的網站：「你們做什麼？」 和 「你們怎麼做？」——而且答案不能靠文字說，要靠體驗讓人感受到。

Our Approach — 三個指導原則

整個專案由三個核心定位驅動，對應工作室的三個品牌支柱：

1. 研究驅動：從品牌策略開始，不從 Figma 開始

先做品牌訪談（自我訪談）：為什麼要開這間工作室？客戶輪廓？競品分析？情緒關鍵字？從「理性、誠實、不老派、以 AI 為工具」這組關鍵字反推整個視覺方向——黑底、大字級、grotesque 字體、手寫 accent 色、攝影式的構圖節奏。

2. 一條龍服務：研究 / 設計 / 前端 / 後端同一人完成

由於只有一位開發者，整個流程必須極度精簡：

• 沒有 Figma → 程式碼的交接（直接在 code 裡調整樣式）
• 沒有跨團隊溝通成本
• 設計決策可以即時驗證在真實瀏覽器

這個做法的隱藏優點：設計與開發邊界模糊，讓細節可以被無限迭代。

3. 人駕馭 AI：用 Claude Code 加速，但決策由人把關

大量使用 Claude Code 協作開發——從元件骨架、動畫程式、內容初稿都由 AI 協助生成。但所有品牌決策（配色、字級、文案語氣）、所有 SEO 策略（關鍵字、schema 結構）、所有上線前檢查都由人負責。

這個做法讓 3 個月時程內能同時交付：品牌系統、官網、4 篇深度筆記、2 個作品案例。

Execution — 技術與設計細節

技術棧決策

| 需求 | 選擇 | 理由 | |------|------|------| | 框架 | Next.js 16 App Router | RSC 原生支援 MDX、Metadata API、SSG 效能 | | UI | React 19 + Tailwind CSS v4 | v4 新 @theme 語法、performance 提升 | | 動畫 | GSAP + ScrollTrigger | 精確控制 scroll-bound 敘事節奏 | | 內容 | MDX + gray-matter | 筆記與案例皆 markdown，可版本控制 | | 字型 | Geist / Inter / Noto Sans TC / Bespoke Serif / ChenYuluoyan | 中英字型混搭，手寫 accent 強化品牌氣質 | | 部署 | Vercel | ISR、edge functions、免配置 CDN |

資訊架構

• /（首頁）：Hero、關於、流程、精選筆記、FAQ、承諾
• /about：工作室完整敘事與價值觀
• /works：案例集（本頁）
• /works/[slug]：個案詳情（本頁就是其中一個）
• /notes：研究筆記
• /notes/[slug]：筆記內文（MDX）
• /contact：合作諮詢表單
• /privacy：隱私權政策

SEO / GEO 架構

這個網站的 SEO 基建是另一個值得獨立寫的主題。核心部署包括：

• 三層 Schema.org JSON-LD：Organization / WebSite / ProfessionalService
• 動態 Article + BreadcrumbList：筆記與案例內頁皆有
• FAQPage schema：首頁 10 題 FAQ 自動生成
• llms.txt：給 AI 搜尋引擎（ChatGPT / Claude / Perplexity / Gemini）的標準索引檔
• 動態 sitemap.xml：所有靜態頁 + MDX 動態路由皆納入
• OpenGraph / Twitter Cards：完整社群分享卡片

動畫與互動

GSAP ScrollTrigger 負責所有 scroll-bound 動畫——Hero 進場、manifesto 區塊的 enter / leave 循環、numbers 區塊的視差、values 列表的逐行 stagger。所有動畫都有 prefers-reduced-motion fallback。

LoadingScreen 使用 sessionStorage 閘門——首次造訪顯示品牌 loading，同一個 session 內不再重複。

Outcome — 上線後交付的內容

• 5 頁完整網站：首頁、關於、作品集、筆記、聯絡
• 4 篇深度研究筆記：品牌識別、配色心理學、Claude Code 實戰、工作室上線
• 2 個作品案例：包含這一頁
• 完整 SEO / GEO 基建：Schema、llms.txt、sitemap、FAQ schema
• 可持續維運架構：MDX 內容可隨時新增，不需重新部署設計
• Lighthouse 分數：Performance、Accessibility、Best Practices、SEO 皆維持在 95+

Lessons — 我們學到什麼

把自己當客戶是最好的訓練場

做自有專案的隱藏價值是：所有決策的後果都由自己承擔。做錯了沒人會幫你找藉口——只能修正、記錄、內化成 SOP。

MDX + frontmatter 是內容維運的甜蜜點

比 CMS 輕、比純靜態檔案靈活、可用 git 追版本、可用 AI 輔助寫作。對小型工作室是最佳的長期選擇。

AI 協作的分工必須清楚

Claude Code 加速的是「實作」，不是「決策」。把 AI 當「永遠不會累的實習生」：執行速度快、不抱怨、但需要明確的方向與品質把關。

作品集本身就是最強的案例

很多工作室把官網當「展示櫥窗」，我們把它當「第一個案例」。這個轉換讓整個專案的投入產出比提高了一個層級——同一份工作同時是品牌、作品與 SOP。

Next Steps — 持續迭代中

這個網站是活的。接下來會持續補上：更多真實客戶案例、更深的研究筆記系列、更完整的服務方案展示。工作室網站不是一次性專案，而是一個長期內容資產。

/ LIVE / URL

造訪網站 dianyistudio.com

https://dianyistudio.com

→