傳統 FDE
- 核心定位
- 把產品落地到客戶現場，解決導入與系統整合問題。
- 主要任務
- 需求收斂、POC、API 串接、客製化部署、上線支援。
- 技能重點
- 後端、API、SQL、雲端部署、除錯、系統整合。
- 關鍵特徵
- 像技術顧問加工程師，強在 deployment 與 integration。
24
公開 repos
來自 Coke1120 GitHub profile 的實證
5
開發語言範圍
TS, JS, Python, C, C++
ERP
系統重點
營運 app、報表、權限、即時功能
項目實證
證明介面能連接真實系統。
探索十一個完整專案，從互動體驗與企業網站，到 CRM、電商、學習系統、電影感產品發布頁、遊戲與滾動驅動動態實驗，展示如何把不同產品情境轉化為清晰、可用且具質感的數位體驗。
上線中的商業服務網站
HKBSC Limited
香港商業服務公司的上線網站，涵蓋公司成立、合規與企業支援服務。
公司網站商業服務上線網站
瀏覽上線網站
上線中的會計師事務所網站
Aries CPA & Co.
香港 CPA 事務所的上線公司網站，涵蓋審計、稅務、會計與商業諮詢服務。
公司網站CPA上線網站
瀏覽上線網站
高質香水發布頁
Nocturne Atelier
高質香水產品頁，包含電影感 stock media、香調選擇、瓶身氛圍控制與 sample 購買 UI。
產品頁香水動態效果
探索發布頁
產品電商網站
Threadhaus T-Shirt Commerce
產品導向 T-shirt 電商網站，包含大型 stock media、選項狀態、版型指南、置頂購買 UI 與結帳摘要。
電商產品頁Stock media
查看購物概念
沉浸式太空模擬器
Solar Quest
電影感即時 Three.js 太陽系，結合星球紋理、軌道動畫、科學控制與雙語星球指南。
Three.jsWebGL模擬
進入太陽系
生產級公司網站
ACME Design House
完整設計工作室網站，包含獨立導覽、案例、服務、流程與 brief 表單流程。
品牌網站動態效果轉換流程
瀏覽網站
完整 SaaS 工作台
ACME CRM Management
具生產級質感的 CRM 工作台，包含銷售管道、客戶紀錄、任務隊列、活動面板與資料視圖。
CRM儀表板狀態 UI
開啟工作台
企業培訓平台
Accounting Quiz Lab
面向企業員工培訓與類 CPD 學習紀錄的測驗服務商概念，包含完成追蹤及會計示範題目。
員工培訓CPD測驗 UI
查看平台
已脫敏營運流程
Sanctions Command Center
展示後端能力但不公開後端細節，圍繞 CPA 事務所及 TCSP 持牌人的合規需要設計：安全入口、可預期工作、狀態可見性、快取準備度，以及清晰報告交付。
脫敏營運合規報告
查看營運流程
滾動互動研究
StringTune Design Test
以 StringTune progress、split text、parallax、spotlight cursor 與 CSS-first 滾動組成建立的動態實驗頁，整合在 Next.js project route 內。
StringTune滾動動態CSS 變數
查看動態實驗
電影感設備研究
MISE 專業廚房設備
以捲動導演的 Three.js 產品短片，跟隨同一隻銅芯煎炒鍋穿越材質、備膳、火候、掌控與出餐。
Three.js廚房設備電影感捲動
進入專業廚房
2D 動畫捲動短片
暗影信使
原創六幕忍者旅程，結合 GPT Image 2 場景、同一名持續出現的動畫信使、可逆捲動編舞，以及黎明時送達解藥的結局。
2D 動畫GPT Image 2電影感捲動
導演信使旅程
可玩的 3D 路線防守遊戲
植物對戰殭屍
原創網頁遊戲，結合 CC0 3D 角色、植物部署、陽光收集、投射物、三波敵人，以及可重新開始的勝負狀態。
Three.js3D 遊戲塔防
守護花園
實戰能力
按可交付成果分類的技能。
技術棧很廣，但重點很清晰：客製 AI 產品、內部業務系統、安全資料流程與部署基礎設施。
AI 產品開發
AI 聊天機械人、助手、語音應用、多供應商路由、私有 AI 服務與圖像/影片生成流程。
AI chatbotTTS appSTT appOpenAIAnthropicGLMMoonshot AIQwen圖像/影片 AIIn-house AI server
內部業務系統
ERP 類營運工具、Slack 類內部聊天、CRM 流程、CMS 平台、多語言應用與手機版支援。
ERPCRM內部聊天CMS多語言手機版支援智方便 sandboxMongoDBAbly儀表板
登入、資料與文件
安全登入、權限、OCR 資料抽取、報表、匯出、PDF、試算表、DOCX template、CSV pipeline 與 Adobe 產品工作流程。
登入Auth角色權限Adobe PhotoshopAdobe IllustratorAdobe Premiere ProAdobe After EffectsAdobe AcrobatAdobe InDesignOCR 抽取銀行月結單發票商業合約ExcelJSpdf-lib
部署與營運
從第一原則客製系統，配合雲端部署、財務分析流程、容器、VM、tunnel 與 AWS 服務。
AWS developer財務分析資本結構財務報告DockerVMCloudflare Tunnel不依賴模板
語言範圍
TypeScriptJavaScriptPythonCC++
AI FDE 導入模式
我連接產品、系統與 AI deployment。
AI FDE 的工作，是把 LLM、RAG 與 Agent 系統真正導入企業 workflow。重點不是做漂亮 demo，而是讓 AI 接上資料、工具、審批流程、監控與可衡量成果。
企業為何需要 AI FDE
大部分公司不只需要一次 model call，而是需要有人把 AI 連接到資料、workflow、權限、風險與 ROI。
- 資料分散在多套系統。
- 流程包含權限、審批、合規與資安限制。
- AI 必須接進既有 workflow，而不是放在旁邊。
- 模型變化很快，需要持續調整。
- 目標是可衡量的業務成果，不只是 demo。
AI FDE 與 FDE、PM 的分別
PM
- 核心定位
- 定義產品方向，協調設計、工程與商業團隊。
- 主要任務
- 使用者研究、PRD、roadmap、優先排序、驗收、跨團隊協作。
- 技能重點
- 需求分析、流程設計、KPI 思維、溝通協調、專案管理。
- 關鍵特徵
- 像產品指揮官，強在決策、協調與價值定義。
AI FDE
- 核心定位
- 用產品與工程判斷，把 LLM、RAG、Agent 系統導入企業 workflow。
- 主要任務
- 找 use case、接企業資料、設計 workflow、建立 eval、持續優化。
- 技能重點
- LLM app、RAG、tool use、agent workflow、API、DB、eval、監控、guardrails。
- 關鍵特徵
- AI 時代的 FDE，重點是穩定上線並產生成果，不只是 demo。
企業 AI 導入流程
由業務目標走到生產 workflow 的實戰路線。
01-08
- 01
企業目標對齊
確認問題、KPI 與營運目標。
- 02
Use Case 篩選
找出高價值且風險可控的場景。
- 03
資料與系統盤點
盤點 ERP、CRM、文件、電郵、API、DB 與權限。
- 04
流程設計
把 AI 放進真實 workflow，並加入 human-in-the-loop 控制。
- 05
PoC / Prototype
用企業資料建立 LLM、RAG 或 Agent 原型。
- 06
Eval / Guardrails
定義品質檢查、審批、合規與風險邊界。
- 07
部署上線
整合既有系統，讓 AI 進入實際營運流程。
- 08
持續優化
追蹤 adoption、ROI 與模型變化，持續調整系統。
企業 AI Agent
建立能處理真實營運工作的 Agent 系統。
我協助企業不只做一般 chatbot，而是建立可連接工具、文件、CRM、ERP、客服流程與私有部署要求的 agent stack。
agent-stack --business-ready
Agent stack 設定
圍繞真實業務流程設定 OpenClaw、Hermes-Agent、模型路由、工具、記憶與角色權限。
OpenClawHermes-Agent工具使用記憶權限
業務流程自動化
把 agents 連接到客服、CRM、ERP、文件收件、OCR、email triage 與內部知識搜尋。
客服CRMERPOCR知識搜尋
地區可用性規劃
當某些 AI provider 在指定國家或地區不可用時，設計合規替代方案：地區路由、fallback 模型、自架服務與私有部署。
地區路由Fallback 模型自架私有部署Provider resilience
治理與交接
為生產使用設計審批關卡、audit trail、資料邊界、prompt operations 與團隊 runbook。
人手審批Audit trailRunbook資料控制
互動層
用動態解釋建構，而不只是裝飾。
分層動態效果處理 layout、狀態轉場、hero proof object 與精準 timeline 細節，例如這個程式碼行展示。
build-lab.ts
01
02
03
互動 3D
Hero build reactor、pointer response、reduced-motion fallback
Framer Motion
Section reveal、hover state、card movement、CTA feedback
shadcn/ui
可存取的 button、card、badge、tab 與 dialog
Timeline motion
精準 code-line 與 metric microinteraction
contact --channel=direct