跨領域整合 · AI 驅動的遊戲產線 · 前端 Lead

我用 AI 把企劃、數值、美術、音效、前端、數據,串成一條會動的產線。

現職遊戲公司前端 Leader。這兩年幾乎把力氣都投在 AI 應用:從遊戲企劃、數值驗證、美術與音效生成,到前端 SDK 與上線後的數據分析,每一環都有工具實際在跑。我定架構與原則、Agent 產出、我驗收——這讓一個人的守備範圍,橫跨過去需要好幾個角色才蓋得住的區域。

MCP Server 與 Agent 工作流設計跨領域產線整合硬邊界與驗收設計AWS Certified AI Practitioner

團隊 5 → 2 人 │ 換皮工時 1 週 → 2 天 │ 80+ 款持續上線 │ 6 個環節打通

ABOUT — 從工業設計到 AI 產線

我從工業設計碩士、產品設計師一路走到軟體工程,現在帶遊戲公司的前端團隊。轉向 AI 的起點是去年跟主管去了一趟 AWS 年會——我在那裡確定這會是往後的工作方式,回來就開始把部門裡重複的、可預期的、跨領域的工作,一項一項變成工具與流程。不是「用 AI 幫忙寫一段程式」,而是整條流程重做。後來團隊從五個人變成兩個人、交付量卻沒有跟著減少,這件事反而驗證了當初的判斷:先鋪好的東西,剛好接住了後來的壓力。

工作方式也跟著變了。純手寫程式的比例變低,取而代之的是定架構、下原則、審結果,以及讓不同領域的產出能彼此對接。這不是離開技術,恰恰相反:要讓 Agent 產出可用的東西,你得比自己動手時更清楚什麼叫對——契約長什麼樣、驗收標準在哪、哪些決定不能交給機器。模型會換版、輸出會飄,所以我不把品質押在模型穩定上——驗收標準一律做成模型之外的硬邊界:權限邊界由人定義,數值那條線直接寫進 CI 自動檢核,過不了就擋下不准出貨。數值可以自動算,但賠付表最後由企劃拍板,這條線我從一開始就畫死。

我對「完成」的定義沒有變:功能合併只是起點,真正的完成是可驗證上線、有文件、可追溯、可交接。差別是現在守這條線的不只有人——自動偵錯、部署驗證、文件同步、issue 修復都有工具在跑,人負責的是例外與判斷。設計背景留下來的影響也還在:我看一個功能,會先看它在玩家手上長什麼樣,再回頭決定規格怎麼寫。

SKILLS — 核心職能

  1. 01AI 協作與 Agent 工作流(Claude Code Skills、MCP Server、自動化流程設計)
  2. 02跨領域產線整合(企劃、數值、美術、音效、前端、數據六個環節)
  3. 03架構原則與硬邊界設計(可機器驗證的契約、CI 自動檢核、權限與決策邊界)
  4. 04遊戲前端與渲染(Cocos Creator、PixiJS 8、Spine、GLSL、貼圖與記憶體預算)
  5. 05Web 工程(TypeScript、Svelte、Vue / React、Nuxt / Vite / Next.js、Electron)
  6. 06版本交付與部署(四環境推進、Jenkins 管線、自動偵錯與部署驗證)
  7. 07資料分析與營運支援(ClickHouse 系資料倉儲、可重跑的查詢與排查流程)

OUTCOMES

六個方向,每個都有實際在跑的工具或系統支撐。面談時可針對任何項目深入展開。

  • 01 一條半自動的遊戲產線

    把做一款遊戲拆成六個環節——企劃、數值、美術、音效、前端、上線後數據——每一環都做出可被 AI Agent 呼叫的工具,並讓上游的產出能直接餵給下游。企劃的規則文件是唯一權威,往下轉成數值可驗證的契約;美術與音效各自吃同一份主題設定,確保視覺與聽覺對得起來;前端照著同一套事件結構接。過去這是六個角色分頭做、靠會議對齊的流程。現在規格齊備的情況下,不含美術的 demo 版本用斷言機制數小時就能產出;換皮版本則取決於生圖量,約一天。整體來看,一款換皮遊戲原本美術與前端各要投入約一週,現在兩邊合計約兩天。

  • 02 前端 SDK 與渲染實作

    參與一套 Svelte 5 + PixiJS 8 的 slot 遊戲前端 SDK,以 monorepo 收斂成 14 個遊戲應用與 29 個共用套件,是專案內最主要的貢獻者(約六成 commits)。架構走事件驅動:伺服器回傳的結果是一串事件,前端逐一播放並驅動動畫,讓遊戲流程可重現、可單獨測試;滾輪、掉落消除、免費遊戲、獎勵關等機制都做成共用模組。渲染這一側也維持手感:把一款上線遊戲的貼圖 VRAM 降低 18%(合併圖集、遮罩與特效解析度減半、改用 resolution 後綴,邏輯尺寸不變、渲染程式碼零改動),並寫過 Spine 3.8 → 4.2 的轉檔工具,修掉升版時三個會靜默掉資料的問題。

  • 03 美術資產生成:把「風格一致」變成可執行的規範

    建了 16 個生成 skill,涵蓋主題提案、視覺規範文件、批次產圖、角色動作圖、sprite sheet、autotile 地形、視差背景與 UI 元件。關鍵設計是先產出一份視覺規範,再把它注入後續每一次 prompt——批次一大,風格就會越產越歪,這份規範是唯一擋得住的東西。同一份主題設定也往下接到音效生成,讓視覺與聽覺出自同一個來源。換皮這條路徑現在已經定型成固定做法,不需要我在旁邊看著。

  • 04 數值:把企劃文件變成可機器驗證的契約

    涵蓋 40+ 款遊戲的數值流程。核心是把企劃的規則文件展開成一張機制矩陣,逐格把模糊的地方問清楚,產出可機器驗證的契約;接著每一批運算結果都要通過數道硬性檢查——矩陣有沒有缺格、宣告的機制有沒有真的出現、欄位與行為斷言對不對——不通過就不准出貨。這些檢核綁在 CI 上,跟用哪個模型、模型換了幾版無關——邊界在模型外面,模型飄不動它。設計上刻意留了一條紅線:流程可以自動跑,但賠付表的最終決定權留在企劃手上。這條線現在已經可以獨立運作,只有在規範本身要調整時才需要我進去。

  • 05 讓 AI 直接查得到營運數據

    做了一套資料分析的 MCP Server,把資料倉儲包成 16 個 AI Agent 可直接呼叫的工具,涵蓋營收與代理商排名、時段比較、玩家行為分析,以及特定遊戲的單局回放與統計;再往上疊 5 個分析 Agent 與一組每日排查流程,把「查營收 → 找異常遊戲 → 篩可疑玩家 → 深入分析 → 出報告」串成一次指令跑完。工程面做了唯讀限制、查詢逾時與筆數上限,避免 Agent 把資料庫拖垮。營運與技術從此用同一套可重跑的查詢對齊問題,不再靠口頭來回與一次性查表。

  • 06 交付治理與 issue 自動修復

    負責 40 種遊戲類型、換皮後共 80+ 款產品的持續整合與四環境(DEV / STG / REL / PROD)上線;部署、備份驗證、版本對齊與上線報告收斂成同一套工具,任何人都能自己確認「是否已上線、上到哪一版」,不用來問我。issue 處理走同一套邏輯:QA 在 Jira 開單後由 MCP 自動讀取,Agent 從一個涵蓋 90+ 專案的知識庫取得該專案脈絡與過往修復經驗,做出診斷並提出修正方案,工程師據此接手實作。價值不在全自動——而在同一類 issue 在不同專案重複出現時,診斷與修法可以直接沿用,實作時間省下數倍。

TIMELINE

2023/02 – 至今 · ELS Tech · 前端 Leader(Gemini 前端線)
▸ AI 應用|建置 MCP Server 與 Agent 工作流,涵蓋部署、資料分析、文件同步與 issue 診斷;數值與美術換皮兩條線現已可獨立運作,只在規範本身要調整時才需要我介入
▸ 跨領域產線|串接企劃、數值、美術、音效、前端與上線後數據六個環節,讓上游產出可直接餵給下游
▸ 遊戲客戶端|以 Cocos Creator + TypeScript 開發 80+ 款遊戲產品,新專案採 Svelte 5 + PixiJS 8 + Spine
▸ 共用架構|維護 proto/WebSocket 協議、執行期設定、webview、i18n、共用資源包與商戶載入規則
▸ 發版交付|負責 DEV/STG/REL/PROD 四環境推進、Release Note(含 hotfix)、部署報告與備份對齊
▸ 團隊營運|前端團隊由五人調整為兩人後維持同樣交付量;品牌官網與遊戲管理後台維運、Jenkins 管線、技術規劃

2014 – 2023/02 · Freelancer(2017 登記公司)· 奧樂科技 UI/UX 與前端顧問 · meet.jobs 前端工程師

2013 · 龍華科技大學 · 互動介面設計講師

2012/10 – 2014/02 · AppWorks 育成團隊 · UI/前端

2011/01 – 2012/09 · SHEICO Group · 設計組組長

2009/05 – 2010/12 · 尚芳國際興業 · 工業設計工程師

2008 – 2009 · 海軍義務役

證照 · AWS Certified AI Practitioner

學歷 · 長庚大學工設學士(2001–2005)· 成大工設碩士(2005–2008)

詳細年表

  1. ELS Tech

    - 前端 Leader(Gemini 前端線)

    Cocos Creator 遊戲開發;跨多款遊戲產品與共用程式庫的功能與修正批次同步。

    共用前端與配置:proto/WebSocket、執行期遊戲設定、webview、共用資源包、i18n、遠端資源路徑與載入/商戶 logo 規則。

    發版與交付:STG/REL/PROD 推進、Release Note(含 hotfix)、部署報告、S3 備份與版本對齊檢查。

    文件與流程:repo 內實作計畫、checklist、guide 等,保留可追溯與交接脈絡。

    遊戲管理後台與品牌官網維運、Jenkins 管線;專案技術規劃、進度與人員調度。

  2. Freelancer

    - 公司負責人

    以接外包為主,曾與多家企業合作,從活動網站到金流串接,都具備相當的經驗。

    奧樂科技

    - UI/UX 與前端顧問

    長期合作客戶。此公司為醫療用品結合行動裝置的 App 開發。主要為協助公司規劃 Demo 版介面,並使用 web view 做 UI 的 layout。

    meet.jobs

    - 前端工程師

    國際求職網站。負責網站前端維護、優化與功能開發。

  3. 龍華科技大學

    - 互動介面設計講師

  4. 育成團隊@ AppWorks

    - UI 設計師 / 前端工程師

    加入新創團隊,並在 AppWorks 新創加速器接受為期一年的培訓。此處也是開始寫程式轉捩點。

  5. SHEICO Group

    - 設計組組長

    公司為世界最大潛水衣製造商,市占 70%。 工作內容為設計潛水衣外觀與新機能提案。展會期間須規劃參展項目與展場布置。

  6. 尚芳國際興業股份有限公司

    - 工業設計工程師

    設計大型電玩機台外觀與機構。工作內容以 3D建 模為主。偶爾需支援活動網頁的設計與更新。

  7. 中華民國海軍義務役

  8. 長庚大學 - 工業設計學士 (2001 - 2005)

    國立成功大學 - 工業設計碩士 (2005 - 2008)

HCD PORTFOLIO · DEAN HUANG