客製化網站開發實績｜ 台中電商、AI 與 RWA 網站開發案例

玉翔珠寶銀樓 — 全端電商網站

從 WordPress + WooCommerce 三天全站重建，打造高效能珠寶電商平台。支援 IG 直播帶貨、多規格庫存管理、完整管理後台與會員系統。

前台功能

• 首頁體驗：Hero 影片自動播放（後台可換）、Instagram Reels 影片輪播（中心放大左右縮小透視效果）、四大標籤商品展示區（新品／精選／暢銷／特價）、公告跑馬燈、FAQ 手風琴、Scroll Reveal 動畫。
• 商品系統：分類與標籤篩選、商品卡片 hover 動畫、已售完標籤、商品詳情圖片切換動畫、多規格管理（尺寸／款式各自獨立庫存與價格）、Tab 頁籤（描述／額外資訊／保養須知／售後服務／七天鑑賞）。
• 購物流程：加入購物車即時庫存鎖定（24 小時自動釋放）、購物車側邊抽屜（Escape 鍵關閉）、結帳頁面（收件資訊／運費計算／多種運送方式）、訂單確認頁（一鍵複製匯款帳號、LINE 聯繫）、未登入自動導向登入後回填購物車。
• 會員系統：Google / LINE 第三方登入、Email 驗證碼（6 位 OTP，60 秒冷卻）、會員資料完善流程、我的帳號頁面（收件資料編輯、訂單紀錄查詢）。

管理後台

• 商品管理：CRUD + 複製、R2 雲端圖片上傳拖曳排序、多規格管理（標籤／價格／庫存）、標籤系統、商品排序。
• 訂單管理：狀態篩選與搜尋、訂單狀態流轉（待處理→已確認→已付款→已出貨→已完成／已取消）、取消自動釋放庫存、出貨自動通知信。
• 首頁管理：Hero 影片上傳（R2 雲端）、標題／副標題設定、四大標籤區塊標題自訂、Reels 影片管理（上傳／刪除，硬刪除 R2 檔案）。
• 網站設定：基本資訊、社群連結、匯款資訊、運送方式管理、Footer 連結管理、規格預設值管理。
• 其他：公告開關與文案編輯、會員管理、全站固定文案管理（保養須知／售後服務／七天鑑賞統一修改）、一鍵釋放庫存、Email 模板管理、ManyChat 整合。

UI / UX 設計

• 響應式設計（桌面／平板／手機完整適配）
• Design Token 色彩系統（品牌金色統一管理）
• 品牌字體配對（Archivo + Noto Serif TC）
• 懸浮聯繫按鈕（Instagram / LINE / 電話，扇形展開動畫）
• 全站 prefers-reduced-motion 動畫無障礙支援
• 全站 ARIA 語義標記（手風琴／輪播／Tab／對話框／表單回饋）

技術架構

• 前端框架：Next.js (App Router) + TypeScript
• 樣式：Tailwind CSS v4
• 部署：Cloudflare Pages
• 資料庫：Cloudflare D1 (SQLite)
• 檔案儲存：Cloudflare R2
• 認證：Google OAuth / LINE Login
• 郵件：Resend API

全 Cloudflare 生態系部署，零冷啟動、全球 CDN 加速、邊緣運算，從 WordPress 三天完成全站架構重建。

羅威傳媒 — 品牌形象官網

以「奢華但不花俏」為核心理念打造的傳媒品牌官網，全站僅用黑、金、灰三色系，透過精準的動態設計與手機優先佈局，建立強烈品牌辨識度。

設計系統

• 色彩系統：極深黑主背景（#050505）＋ 金色強調（#E2C191）＋ 淺灰內文（#cccccc），金色僅用於吸引注意力的關鍵位置，避免雜色干擾。
• 字體配對：英文標題 Cormorant Garamond、中文標題 Noto Serif TC、內文 PingFang TC／微軟正黑。標題搭配金色流光動畫（text-gold-shine），7 秒循環流動營造貴金屬光澤感。
• 按鈕設計：膠囊型輪廓按鈕（金色邊框 + hover 填滿）、實心金色 CTA 按鈕，搭配 scale(0.98) 點擊微縮觸覺回饋。

核心組件

• 影片背景 Hero：全螢幕自動播放 + 60% 黑色遮罩，搭配圖片輪播、金色標題與漸層裝飾線。
• 痛點卡片：左邊 3px 金色邊線，強調問題意識與解決方案對比。
• 比較表格：左右對比佈局，右欄金色突顯品牌優勢。
• FAQ 手風琴：點擊展開收合，+ 號旋轉為 × 的流暢動畫。
• 報名表單：底線式輸入框 + radio 卡片選項，簡潔高效。
• 浮動社群按鈕：右下角展開 Instagram / LINE / 電話連結，交錯滑入動畫。
• 跑馬燈公告：置頂黏性定位，水平無限滾動，支援多種動畫模式。

動態與互動

• fade-up 淡入上滑（區塊載入）、text-shine 金色光澤流動（標題）、marquee 水平無限滾動（跑馬燈、頭像牆）、slide-up 底部滑入（浮動按鈕展開）。
• 全站支援 prefers-reduced-motion 無障礙、語意化 HTML、充足對比度。

版面策略

• Mobile First：以 430px 手機寬度為基準設計，單欄式佈局集中注意力。
• 視覺層級：大數字 → 金色標題 → 灰色內文 → 淡色輔助，充足留白（區塊間距 48px、內容間距 24px）。
• 高效能：影片有降級方案、圖片延遲載入、動畫使用 GPU 加速。

設計理念：奢華但不花俏、手機優先、動態有目的、內容為王、全站一致性、無障礙友善、高效能優化。

GBPsystem — 建築結構案件管理平台

將建築結構工程的案件管理、會員服務、付款流程與後台作業整合為一套線上服務平台，讓傳統分散在不同工具與人工流程的操作，轉化為即時、透明、可持續營運的數位系統。

平台核心功能

• 完整商業流程整合：會員方案選購、服務項目瀏覽、案件建立送審、廣告申請、錢包儲值付款、帳務查詢 — 使用者在同一平台完成從了解服務到送件的全流程，無需跳轉外部工具。
• 即時條件審查引擎：每次操作前，系統根據錢包餘額、會員資格與應付項目即時判斷。條件不足時直接顯示清楚提示與後續操作（補足費用、加入會員），避免操作中途產生誤解或付款狀態不同步。
• 三層付款邏輯：「付款前判斷」→「付款中確認」→「付款後狀態更新」。購買會員、支付商品、送出案件，每筆交易即時反映至會員中心的餘額、到期日、權限與付款紀錄，確保金額與服務開通結果的一致性。

介面設計理念

• 資訊優先：不追求過度視覺效果，而是讓使用者快速掌握自身狀態 — 會員資格、錢包餘額、應付金額、付款後餘額、可用服務。
• 決策效率：透過明確的標題區塊、集中顯示的提示視窗與一致的操作流程，減少使用者在多條件判斷下的認知負擔。
• 專業穩定：視覺上維持清晰專業感，體驗上提高操作流暢度，適合處理複雜交易邏輯的功能型平台。

營運情境處理

• 餘額不足時的引導流程與負餘額狀態下的付款計算
• 案件送出後的即時扣款與會員方案購買後的到期日更新
• 付款紀錄與帳務資訊的完整一致性保障
• 後台管理：會員狀態、付款紀錄、服務開通、案件審核

結合前端互動、後端邏輯、會員機制與金流整合的綜合型專案 — 將「資訊頁面」升級為「可支撐營運的數位平台」。

智流心創媒合平台

FlowMatch 是一個 AI 智能人才媒合平台，為企業精準對接各類自由接案者、Fractional CTO、AI 講師及設計師，從企業 AI 內訓到產品開發一站搞定。

• 雙會員系統： 同帳號可持有雇主(Emflow)與接案者(Flowist)雙角色，支援 Email/Google/LINE 登入與角色切換。
• AI 智能媒合： Cron 排程自動配對，系統主動邀請合適人才，搭配發案精靈引導與案件全生命週期管理。
• 站內即時通訊(Flowchat)： 即時收發、已讀回執、系統訊息，Pusher 私有頻道即時推播。
• 錢包制度(EP/FP)： 雙錢包分離、冪等扣/加點、餘額保護，搭配 NewebPay 金流綁卡扣款。

平台功能與技術架構

• 多元通知與評論： Email/LINE/Telegram/瀏覽器推播依偏好路由；合作雙方互評與自動解鎖機制。
• 內容與管理： Flowist 投稿與 Admin 審核流程；完整後台涵蓋會員、案件、分類、公告、客服、交易管理。
• 技術架構：
  核心：Next.js App Router + Supabase (PostgreSQL + Auth + Storage)
  即時：Pusher 私有頻道 + 多管道推播
  金流：NewebPay 綁卡 Token 化 + Webhook 回寫
  特色：中英雙語路由、角色權限守門、平台參數動態設定

涵蓋 15+ 功能模組的全端 SaaS 平台，適合人才媒合、接案市集等應用場景。

Rentaloop.net

Rentaloop 是一個專為「共享經濟」設計的客製化租賃平台開發案例。它不僅是一個網站，更是一套完整的雙向市集網站架設成果，完美整合了消費者端、供應商端以及強大的後台管理功能。

• 核心商業功能： 雙向市場機制、靈活定價策略（按下租期折扣/押金）、完整交易與 KYC 實名認證。
• 極致體驗： Glassmorphism 現代設計、深色模式、地圖整合與即時溝通（公開問答/私訊）。
• 供應商管理： 簡易上架、庫存檔期管理、多種交貨方式與收益儀表板。

營運後台與技術架構

• 強大營運後台： 內建 CMS 可動態配置首頁與發布 SEO 文章；完整的會員審核與數據概覽。
• 前瞻技術架構：
  核心：Next.js 16 (App Router) + PostgreSQL + NextAuth
  效能：Cloudinary 雲端影像處理 (WebP) + SSR 伺服器端渲染
  優勢：極致載入速度、資料結構嚴謹、SEO 體質優異。

完整支援 B2C 與 C2C 商業模式。

PromptsGo

AI 智能優化提示詞平台。整合 Gemini API、多語系支援、成就系統與社群互動，打造跨設備同步的創作生態。

• AI 智能優化： 整合 Gemini API，一鍵優化提示詞內容，提升創作效率。
• 多語系支援： 英文、繁中、日文、韓文 四語自動切換，覆蓋全球用戶。
• 7 種主題風格： 從極簡到玻璃擬態，滿足不同的視覺偏好與使用場景。

功能模組與技術亮點

• 雲端同步與社群： 支援 Google OAuth 登入與資料同步；具備分享、收藏、評論與評分功能。
• 遊戲化成就系統： 15 級等級機制、多種專屬徽章與解鎖機制，提升用戶黏著度。
• 技術棧：
  前端：React 18 + TypeScript + Tailwind CSS + Vite
  後端：Supabase (PostgreSQL + Auth + Storage)
  第三方：Gemini API / Cloudinary / Vercel

開發週期約 4-6 週，適合中型 SaaS 產品、創作者社群平台等應用場景。

桃園國際機場 旅客滿意度調查系統

專為桃園國際機場設計的旅客服務滿意度調查系統，主要用於收集旅客對機場各服務站點（第一航廈、第二航廈、遺失物招領處）的滿意度評價與意見回饋。

• 多語言問卷調查： 支援繁體中文、英文、日文、韓文，六步驟引導式流程。
• 意見回饋系統： 整合 Telegram Bot 即時通知，自動偵測站點。
• 管理後台： 分站點權限管理，支援多種風格模板切換。

核心功能詳解

• 動態互動設計： 視覺化進度條、觸控友善的大按鈕，針對 iPad 最佳化。首頁影片具備彩蛋功能。
• 技術架構：
  前端：原生 HTML5, CSS3, JavaScript (輕量且效能佳)
  後端：PHP 處理資料邏輯與 API 請求
  資料庫：PDO 連線 (SQLite/MySQL)
  PWA 支援：可安裝於裝置上提供原生 App 般的體驗

這是一個整合了前端互動問卷、後端資料收集以及即時通訊通知的完整滿意度調查解決方案。

MUSA AI

加密貨幣與中心化產品形象網站。結合 RWA 與 ETF 概念，打造專業且具科技感的區塊鏈金融平台。

• 專業金融科技視覺風格
• RWA 與 ETF 產品展示
• 響應式設計適配多裝置

保家佳

保險理財知識分享平台。致力於普及保險觀念與理財知識，提供豐富的文章與資源，幫助使用者做出明智的財務決策。

• 豐富的理財知識庫
• 清晰的文章分類與導航
• 使用者友善的閱讀體驗

Retro Ad 復古廣告生成器

專為復古風格愛好者打造的 AI 廣告生成平台。利用先進的 AI 技術，快速生成具有獨特復古韻味的廣告圖片。

• AI 驅動的復古風格圖像生成
• 直觀易用的操作介面
• 高品質圖片輸出

Auraway Shop 健康守護專家

專業的健康產品電商平台，提供優質的健康守護產品與服務。結合現代化設計與完整的電商功能。

• 清新的薄荷綠色調搭配現代化佈局
• 精心設計的導航結構
• 完整的購物車與結帳流程

MOREA｜網站開發行銷與技術規格

Morea 專案的網站開發功能亮點與行銷文案，涵蓋核心功能、部署架構及 SEO 策略，旨在展示網站的高效能、安全性與擴充性。

核心功能與行銷亮點

• 促銷與優惠券系統： 支援 BOGO、固定金額折抵、百分比折扣；可設定最低購買數量自動觸發，優化 AOV 與降低棄單率。
• 金流與通知： 串接綠界金流（信用卡 / ATM / 超商代碼繳費）；整合 Resend Email API 發送會員訂單通知與管理端新訂單提醒。
• OAuth 會員系統： Google 一鍵登入；基於 NextAuth.js（v5 Beta）進行 Session / Token 管理與角色權限（Admin/User）。
• 圖庫串接與加速： Cloudinary 自動優化（WebP/AVIF）與 CDN 加速；後台管理產品/評論圖片、多圖輪播展示。

部署與後台運營

• 基礎架構： Vercel Edge Network（ISR/SSG/SSR）+ Cloudflare（DNS/CDN/DDoS/SSL）+ CI/CD 自動化部署。
• Admin 後台： 即時 KPI 儀表板、訂單狀態流、商品與庫存管理、多規格設定與營運備註。
• FAQ 與結構化資料： FAQ 內容可生成 Schema Markup，提升 Rich Snippets 曝光與 CTR。

SEO 架構

• Core Web Vitals： 從底層代碼優化載入效能與可用性。
• Meta / Sitemap / Robots： 動態 Title/Description、站點地圖與爬蟲引導。
• Slug 設計： 支援英文與繁中 URL Slug（例如 /products/royal-jelly、/products/膠原蛋白）。

Morea 平台不只是一個購物網站，更是一個集成高效能技術、自動化行銷工具與 SEO 策略的完整電商解決方案。

利和精密模具集團｜精密模具製造企業官網開發案例

本案為精密模具製造產業打造可擴充的企業官網，透過現代化技術架構與完整 SEO 規劃，強化品牌可信度、國際市場溝通效率與詢價流程轉換率。

一、技術能力（給需要開發網站的客戶）

• 現代化技術架構：採用 React + Next.js，頁面載入快、維護性高、擴充新功能成本低。
• 國際市場就緒：內建多語系路由與內容管理（英文/俄文/西文），可支援跨區域客戶溝通與投放。
• SEO 先天優勢：包含 sitemap、robots、Organization Schema 與完整 metadata，提升收錄與品牌可信度。
• 可擴充內容系統：採資料驅動方式管理首頁、工廠、設備、產品、聯絡頁，後續新增內容不需大改程式。
• 高轉換導向設計：首頁 CTA、產品分類導覽、詢價/技術諮詢表單流程完整，從瀏覽到聯絡路徑明確。
• 穩定部署與效能：靜態輸出導向，部署簡潔、成本可控、全球訪問穩定，適合重內容與國際曝光型企業官網。

二、SEO 長短尾關鍵字置入策略

• 短尾關鍵字：精密模具、模具製造、模具工廠、B2B 企業網站、企業官網設計。
• 長尾關鍵字：精密模具製造企業官網設計、模具工廠多語系網站開發、B2B 製造業 SEO 網站建置、Next.js 企業網站開發公司。
• 置入位置：首頁 H1/H2、技術能力段落、產品分類頁、FAQ、圖片 alt、meta title/description、結構化資料。
• 商業目標：提高「製造業網站開發」相關自然搜尋曝光，並將流量導向詢價與技術諮詢表單。

打造您的數位娛樂帝國：全方位內容變現與管理平台方案

本方案專為內容創作者、漫畫工作室與數位出版商量身打造。我們提供一套功能完整、架構靈活的內容管理系統，能清晰展示原創漫畫作品，並整合電子商務與會員訂閱機制，協助將流量高效轉化為收益，建立可持續擴張的數位娛樂生態系。

方案概覽

• 內容管理與展示：作品、章節、作者專欄、首頁輪播與音樂庫可在後台集中管理。
• 會員與訂閱：可設定 VIP 等級、搶先看與限定內容，支援訂閱制與權限控管。
• 電商與付費：支援章節付費、點數模式與周邊商品販售，整合購物車、訂單與庫存。
• 營運後台：提供數據儀表板、內容排程、通知發送與用戶管理，降低日常營運成本。

為什麼選擇這套系統

• 沉浸式內容體驗：專業漫畫閱讀器支援多種閱讀模式，章節預覽與 Lazy Loading 圖片載入，並可搭配背景音樂氛圍與留言互動。
• 多元變現引擎：會員訂閱、單章購買、點數消費、全功能電商與站內廣告管理，建立多條營收來源。
• 全能營運後台：即時掌握會員與營收數據，支援自動發布排程、訂單處理流程與權限管理。

技術架構

• 後端：Node.js 與 Express，可應對高併發流量與功能擴充。
• 資料庫與快取：PostgreSQL 確保資料完整性，Redis 進行快取與加速。
• 雲端資源：圖片託管 Cloudinary 或 AWS，搭配 CDN 提升全球載入速度。
• 資安：JWT 身份驗證與 SSL 加密傳輸，保障用戶資料安全。

核心功能模組

DeepVape 香港電子煙龍頭

香港領先的電子煙產品展示網站，具備優雅的視覺設計。包含產品目錄、詳細介紹、購物功能。

• 優雅的高端視覺設計風格
• 完整的產品分類與檢索系統
• 響應式設計適配所有移動設備

小基基寵物犬舍

專業的寵物領養和照護平台，提供完整的寵物管理和用戶互動功能。具備合法營業執照。

• 寵物輪播展示
• 健康指南與領養流程
• 即時線上諮詢系統

巨蟹座工程

35年專業工程經驗，提供油漆工程、防水工程、空調清潔等服務。以專業可信的視覺設計，清晰展示工程公司的服務項目與實力。

• 專業服務項目展示
• 工程案例集錦
• 線上預約諮詢

Auraway 歐樂葳 eSIM (全球上網數據服務)

全自動化的 eSIM 販賣機網站。整合多國電信資源，實現「線上選購、自動發貨、即買即用」的流暢體驗。

核心功能亮點 (Key Features)：

• 全自動化 eSIM 交付引擎：整合上游供應商 API，訂單成立後 30 秒內自動生成並發送 eSIM QR Code。
• 在地化金流與物流整合：整合 藍新金流 (NewebPay)，支援信用卡、Apple Pay 與 ATM 轉帳。
• 強大的 SEO 內容生態系：自動化部落格與百科 + 結構化資料 (Schema) 提升搜尋曝光。
• 會員忠誠度系統：點數回饋 + 推薦碼裂變行銷，最大化顧客終生價值 (LTV)。
• 完整後台營運管理：物流追蹤、自動出貨通知、訂單狀態管理與業績報表。

日日瀅生醫

採用靜態網頁架構搭配無頭 CMS 內容管理系統，為專業保健食品代工廠打造的高效能形象網站。

• 動態案例系統： CMS 管理成功案例，自動生成前端卡片。
• 配方展示模組： 靈活管理各類保健配方資訊與圖標。
• 客戶見證輪播： 動態載入客戶好評，提升品牌信賴度。

技術架構與功能

• 系統架構：
  前端：HTML5, CSS3, jQuery
  後台：Decap CMS (基於 Git 的無頭 CMS)
  部署：Netlify 自動化構建與部署
• 全站設定管理： 透過後台 JSON 設定檔修改網站標題、聯絡資訊與社群連結，無需更動程式碼。
• 自動化同步流程： 後台發布內容 -> 自動觸發構建 -> 腳本同步數據 -> 網站即時更新。

兼具靜態網站的極致效能與動態網站的易管理性。

昌平手機維修

台中北屯地區專業手機平板維修服務商。網站提供快速、專業的維修服務資訊，並整合客戶評價系統。

• 維修價目表
• 線上預約功能
• 在地化 SEO 優化

神來一筆工作坊

專業毛筆書法藝術工作坊，傳承傳統書法文化。網站設計優雅，充分展現東方美學與藝術作品的質感。

• 東方美學設計
• 作品畫廊展示
• 課程預約系統

上湛手機維修

專為在地維修品牌打造的現代化官網。採用 Next.js 與 React 技術構建，整合雙店面地圖導航與加盟自動化流程，完美結合技術展示與商業拓展需求。

• 雙店面整合： 串聯 Google Maps API，清晰展示各分店資訊與導航。
• 自動化表單： 加盟與合作申請流程自動化，提升業務拓展效率。
• 全站內容管理： 客製化 Admin 後台，輕鬆管理所有頁面內容。

進階技術規格

• SEO 深度優化： 精準配置 Layout, Slug 與 Meta 標籤，提升搜尋引擎排名。
• 效能加速： Sitemap + robots.txt 配置，結合 Cloudflare CDN 全球加速。
• 企業信箱升級： 配置專屬官方 Email (service@sunzest-repair.com)，提升品牌專業度。

橫幅廣告投放效果

ChinaLink 懂陸姐

ChinaLink 懂陸姐專門協助台灣人解決進入大陸生活、採購與經營時最常遇到的麻煩。從帳號申辦、付款使用、代購驗貨，到公司註冊與品牌經營，我們用更省時、省事的方式，幫你把複雜流程變簡單，讓你更快開始、更安心落地。

核心功能

協助使用者快速跨過大陸生活與商務的關鍵門檻，包含帳號開通、支付使用、跨境採購、開店準備與平台經營。重點不是教你自己摸索，而是直接提供清楚、有人協助的解決方式，讓個人使用、創業起步到品牌布局都能更順利推進。

具體服務

• 帳號與支付支援： 提供微信、支付寶、淘寶、小紅書等帳號代辦與租用服務，協助處理大陸常用工具的使用門檻。
• 跨境採購與驗貨： 提供淘寶、拼多多等平台代購與廣州倉驗貨服務，兼顧採購效率與商品品質。
• 市場進入與品牌經營： 協助公司註冊、銀行開戶、地址掛靠與相關諮詢，並提供小紅書、抖音等新媒體運營與投流規劃。

從個人使用、創業起步到品牌布局，協助你更快在大陸市場真正開始運作。