進階網頁設計｜課程講義

Advanced Web Page Design

解讀標案 RFP 與需求分析：
從客戶痛點到網站規格定義

Author

JinJin Wang

September 16, 2026

・ 什麼是政府標案？解讀需求說明書（RFP）

解讀標案 RFP 與需求分析： 從客戶痛點到網站規格定義｜〖 Claude解析 〗

・ 什麼是 RFP（Request for Proposal）？

在業界，當政府機關或大型企業想要建置一個網站時，他們會公開一份名為 RFP（需求說明書） 的文件。這份文件就像是客戶發出的「招募挑戰書」，裡面記載了這個網站必須做什麼、預算多少、什麼時候要交貨。

・設計師必看的 RFP 四大關鍵盲點：

許多視傳背景的同學接專案時只看「要放什麼圖片」，結果常常做白工。看懂 RFP，你要抓的是以下四個指標：

  1. 專案預算與範疇（Budget & Scope）：
    預算 30 萬跟 300 萬的網站作法完全不同。30 萬著重於套用標準模組與快速上線；300 萬則需要客製化視覺、微互動動效與完整的 UX 使用者測試。
  2. 履約時程（Timeline）：
    什麼時候要交 Figma 稿？什麼時候要上線測試？這決定了我們該選用哪種 AI 工具加速（例如：時間太緊就必須直接導入 Framer 範本開發）。
  3. 系統與技術規範（Technical Specs）：
    是否規定要通過 無障礙網頁標章（AA級）？是否指定要做 RWD 響應式？是否要串接舊系統資料庫？
  4. 評選標準（Evaluation Criteria）：
    • 通常評選比重為：履約能力與企劃架構 (40%) + 視覺與 UX 設計 (30%) + 技術可行性 (20%) + 價格 (10%)。
    • 重點： 單靠「好看」只能拿 30 分！你必須靠「企劃力」把剩下的 70 分拿滿。
「競標不是比誰把圖畫得最炫，而是比誰最懂客戶的痛，並且能提出最有邏輯的解決方案。」

・ 需求說明書（RFP）案例

案例一：需求說明書（RFP）詳細範例
模擬標案名稱：【「島嶼新浪潮：地方創生與數位觀光入口網」建置案】
【專案背景】

本局（模擬觀光處）為推動在地文化與地方創生，擬建置全新數位入口網站。本案旨在透過當代設計美感與動態響應式體驗，整合在地遊程、店家故事與即時交通資訊，打造國際級的數位體驗。

  1. 專案基本資訊
    1. 預算金額： 新臺幣 1,800,000 元整
    2. 履約期限： 決標日起 120 日曆天內完成上線測試
    3. 目標受眾： 國內外自由行旅客（60%）、在地商家與創生團隊（25%）、公務及媒體單位（15%）
  2. 核心建置需求與規格
    1. 視覺設計與 UI/UX 規範
      • 品牌視覺語言： 需建立專屬設計系統（Design System），採用當代簡約風格，打破傳統公家機關死板排版。
      • 響應式排版（RWD）： 需全面支援 Desktop（≥ 1200 px）、Tablet（ 768px ~ 1199px ）及 Mobile（< 768 px）自動彈性調適。
      • 無障礙規範： 需通過國家 無障礙網頁規範（W3C WCAG 2.1）AA 級認證，文字與背景色對比度需高於 4.5:1。
    2. 前台功能需求
      • 主頁橫幅（Hero Section）： 具備微動效及流暢的 CTA（Call to Action）導引。
      • 主題便當盒佈局（Bento Grid）： 以模組化卡片呈現「最新活動」、「焦點創生店家」及「即時天氣」。
      • 景點與遊程篩選器： 支援依「地區」、「主題類型（美食/手作/自然）」及「可存取性」進行即時動態篩選。
      • 互動地圖整合： 串接第三方地圖 API，提供景點定位與路徑指引。
      • 響應式聯絡與報名表單： 支援表單格式驗證與自動確認信件發送。
    3. 非功能性與系統規格
      • 效能要求： Google Lighthouse 效能評分需達 85 分以上，首頁加載時間 < 2 秒。
      • 資安規範： 全站強制部署 SSL 加密（HTTPS），並具備基本的 SQL injection 防護機制。
  3. 專案交付項目（Deliverables）
    1. 服務建議書與企劃架構書（PDF / 簡報檔）
    2. Figma 高保真 RWD 設計稿與原型（含 Design System 規範）
    3. 正式發布上線之網站（具備完整原始碼或部署平台管理者權限）
    4. 無障礙標章檢測報告
  4. 評選項目與配分

・ 需求說明書（RFP）解析講義：
視覺為主之官網改版案評選標準與提案策略

・ 評選配分總覽表（Evaluation Weightage）

在真實標案中，評選委員是手持「評分表」逐項給分的。配分越高的項目，服務建議書中的頁數與比重就必須越多。

評選大項 配分比例 核心審查重點
一、 專案需求規劃與技術能力 40% 網站整體架構、UI/UX 與視覺設計、RWD、無障礙、Web API 銜接、效能與資安防護。
二、 專案管理與維運能力 20% 工作項目與查核點、時程規劃、品質保證、資安異常處理、教育訓練與保固服務。
三、 廠商經驗與專案組織能力 20% 公司簡介與營運狀況、大型網站/RWD/無障礙執行實績、團隊成員分工與專業認證、CSR 指標。
四、 價格及成本分析 20% 整體費用編列合理性、成本分析表（薪資、管理費、公費及稅捐等細項）。
加分項：創意表現與加值服務 加分/整合 展現網站核心價值之創意突破、創新技術導入（如 AI 應用）與後續擴充建議。

・ 五大評選維度與服務建議書（Proposal）對應撰寫要點

  1. 維度一：專案需求之規劃與建議及其技術能力（占比 40%）—— 提案核心靈魂

    2. 這是視傳背景拿分的主戰場，必須展現完整的「視覺力」、「設計邏輯」與「技術可行性」。

    1. 網站整體服務架構與內容規劃建議：
      • 內容分析： 梳理現有網站痛點，提供新版資訊架構（IA）與內容重整建議。
      • 資料轉換： 說明新舊系統資料備份、轉移與接軌之具體作法。
    2. 視覺與 UI/UX 規劃設計：
      • 視覺分析： 提供風格企劃（Mood Board）、色彩與字體系統（Design System）規範。
      • UI/UX 佈局： 產出線框圖（Wireframe）與原型（Prototype），強調使用者路徑之順暢度。
      • RWD 響應式設計： 說明跨裝置（Desktop / Tablet / Mobile）之斷點設定與流動版型邏輯。
    3. 前端技術與系統銜接能力：
      • Web API 銜接： 說明前後端分離架構或第三方資料串接方式。
      • 無障礙規劃： 提出通過 無障礙網頁規範（AA級） 的具體檢測方案與完成時程。
      • SEO 搜尋優化： 網頁標籤（Meta Tag）、結構化資料與搜尋引擎友善架構規劃。
    4. 系統硬體、效能與資安防護：
      • 硬體與環境架構： 網站代管（Hosting）、雲端架構配置。
      • 效能提升： 圖片壓縮優化、快取機制、Google Lighthouse 效能達標承諾。
      • 安全防護： SSL 安全加密、防止 SQL 注入（Injection）、防範 DDoS 之資安機制。
  2. 維度二：專案管理與維運能力（占比 20%）—— 確保專案不爛尾

    3. 評委關心的是「你們能不能按時交貨？出了事誰負責？」。

    1. 工作項目與時程檢核（Milestones）：
      • 列出明確的甘特圖（Gantt Chart），標註各階段關鍵查核點（如：Figma 稿確認、Beta 版測試、正式上線）。
    2. 品質保證與風險控管：
      • 資安與異常預防： 網站斷線、遭駭客攻擊時的緊急應變標準作業流程（SOP）。
      • 測試機制： 跨瀏覽器測試（Safari/Chrome）與裝置相容性檢測。
    3. 後續維運、訓練與保固：
      • 教育訓練： 提供客戶後台操作手冊與實體/線上教學時數。
      • 保固服務： 說明免費保固期限（通常為 1 年）及保固期內修復響應時間。
      • 後續增修與擴充建議： 預留未來功能升級（如增加 AI 客服）的模組化彈性。
  3. 維度三：廠商經驗與專案組織能力（占比 20%）—— 展現團隊實力

    4. 此區塊用以建立客戶的信心，說明團隊有足夠能力承接大型專案。

    1. 團隊實績與實例（Track Record）：
      • 展示近 3 年公司/團隊運營狀況與經營範疇。
      • 重點列舉「國內外大型網站執行經驗」、「RWD 響應式實作案例」及「無障礙網站建置實績」。
    2. 專案人員管理、職掌與分工：
      • 提供專案組織架構圖，明列專案主持人（PM）、UI/UX 設計師、前端工程師等職務。
      • 檢附專案組員之履歷、學經歷、年資與相關專業認證（如：Figma 認證、無障礙培訓證書）。
    3. 企業社會責任（CSR）指標：
      • 說明團隊在綠色數位（降低網頁碳排）、無障礙平權或社會創新上的投入。
  4. 維度四：價格及成本分析（占比 20%）—— 預算編列合理性

    5. 評委需要確認「每一筆錢都花得有道理」，避免盲目漫天要價或低價惡性競爭。

    成本分析項目 費用內涵與編列說明
    1. 直接薪資
    (Direct Labor)    		 專案 PM、UI/UX 設計師、前端開發人員之人月（Man-Month）工時費用。
    2. 管理費用 (Overhead) 團隊日常行政營運、辦公設備攤提、軟體訂閱（如 Figma/Relume/Framer 授權費）。
    3. 其他直接費用 (Direct Expenses) 雲端主機測試費、圖庫授權費、字型授權費、無障礙標章檢測規費。
    4. 公費與稅捐
    (Profit & Taxes)    		 企業合理利潤（公費）及 5% 營業稅。
  5. 💡 加分維度：創意表現與加值服務（創新突破點）

    6. 在比分接近時，這部分是決定是否能高分勝出（得標）的亮點。

    • 網站核心價值之創意突破： 提出超越 RFP 需求的動態視覺體驗或故事化（Storytelling）互動。
    • 前沿 AI 技術導入： 說明如何運用當代 AI 技術（如 v0.dev / Stitch.withgoogle）加速開發流程，大幅縮短交付時程並降低後續維護成本。

・ 參考網址資源庫

以下整理真實政府標案查詢系統、無障礙規範官方網站，以及現代網頁設計與 AI 輔助開發的關鍵參考連結：

  1. 需求說明書參考
  2. 政府標案與規範參考網站
  3. 網站架構與 AI 網頁工具鏈網址

・ 網站功能清單（Function List）與規格定義

當你看完厚厚幾十頁的 RFP 後，第二步就是把客戶散亂的需求，轉化為工程與設計都看得到懂的「網站功能清單（Function List）」。

功能清單通常包含三大區塊：

・ 前台視覺與互動功能（User-Facing Features）

  1. 前台視覺與互動功能（User-Facing Features）
    • 導覽與搜尋：
      RWD 漢堡選單、全文檢索、多重條件篩選器（Filter）。
    • 內容展示區塊：
      主頁橫幅（Hero Section）、Bento Grid 便當盒佈局、瀑布流列表、圖文彈跳視窗（Modal）。
    • 互動表單：
      線上報名系統、意見回饋表單、地圖定位服務（Google Maps API）。
  2. 後台管理需求（CMS / Back-end Requirements）
    • 內容管理系統（CMS）：
      公告發布、圖片上傳庫、分類標籤管理。
    • 資料導出：
      報名表單資料匯出（CSV/Excel）。
  3. 非功能性需求（Non-Functional Requirements）
    • 效能與安全性：
      首頁加載時間 < 2 秒、全站 SSL 安全加密（https）。
    • 響應式斷點（RWD Breakpoints）：
      • 桌機版 (Desktop): ≥ 1200px
      • 平板版 (Tablet):768px ～ 1199px
      • 手機版 (Mobile): < 768px

網站功能清單（Function List）視覺規格範本

網站功能清單是將 RFP 轉化為實作項目的關鍵工具。以下提供適用於專案提案的標準功能清單格式：

模組類別 功能名稱 詳細功能規格與互動邏輯 優先級 建議 AI / 開發工具
公共導覽 (Header) RWD 彈性導覽列 桌機版顯示橫向選單；手機版自動切換為滿版漢堡選單（Hamburger Menu），包含多國語言切換鈕。 P0 (核心) Figma / Framer AI
首頁 (Home) Bento Grid 便當盒區塊 採用非對稱幾何卡片排版，呈現最新活動、氣象與主推景點。Hover 時具備卡片微放大與陰影浮起效果。 P0 (核心) Relume AI ➔ Figma
景點探索 多重條件篩選器 使用者點擊「主題 tag（如：手作、自然）」時，下方列表無需重新刷新頁面（AJAX），自動滑暢過濾卡片。 P1 (重要) v0.dev (React 組件)
互動服務 遊程預約表單 包含日期選擇器、人數欄位、自動計算預估金額，並具備前端 Email 格式即時校驗。 P1 (重要) Framer Forms / Stitch
頁尾 (Footer) 無障礙與版權宣告 包含政府機關標誌、無障礙 AA 級標章圖示、隱私權政策連結與社群媒體 Icon。 P2 (次要) Figma Component
event design
網站功能清單（Function List）UI 設計稿

・ 利用 AI 進行競品分析與目標受眾挖掘

過去做使用者研究（User Research）需要發問卷、做訪談，花費數週。現在，我們可以把 AI 當作專案的市調研究員，在 15 分鐘內產出高質量的受眾畫像（Persona）與競品缺點分析。

・ 使用 ChatGPT / Claude / Gemini
——挖掘目標受眾（Persona）提示詞範例

    【提示詞模板：Persona 生成】

    「你是一位資深的 UX 研究員。我們正在參與競標 『[請輸入專題主題，例：新世代地方創生觀光入口網]』。請幫我產出 2 位最具代表性的目標受眾（Persona）。格式需包含：

    1. 基本背景（年齡、職業、數位工具熟練度）
    2. 瀏覽該網站的主要目標（Goal）
    3. 目前使用類似網站時遇到的痛點（Pain Points）
    4. 他們最希望在手機版網站上獲得的一項核心體驗。」

・ 利用 AI 進行競品 SWOT 與突破點分析提示詞範例

【提示詞模板：競品分析】

「我們要針對 [請輸入現有競品網站名稱或網址] 進行競標分析。請站在視傳系 UI/UX 設計師的角度，列出該網站的：

  1. 資訊架構上的 2 個致命缺點
  2. 視覺風格上的 2 個老舊問題
  3. 請提供 3 個『能讓評選委員眼睛一亮』的視覺突破策略。」

・本週課堂實作與作業

・ 【課堂 30 分鐘分組實作】

  1. 確定投標題目：
    各組鎖定一項模擬標案（例如：地方創生網、AI 推廣網、雙年展虛擬展廳）。
  2. AI 腦力激盪：
    組員共同開啟 ChatGPT / Claude / Gemini ，輸入上述 Prompt，產出 2 位專屬 Persona 與競品分析缺點。

・【課後作業：繳交「網站功能清單規格初稿」】

各組需於下週上課前繳交一份 「專題網站功能清單規格書（pdf格式）」，需包含：
  1. 專題名稱與標案目標。
  2. 核心 Persona 摘要（簡述受眾痛點）。
  3. 競品 SWOT 與突破點分析
  4. 前台與後台功能清單表（至少包含 8 項主要功能規格，並標註 P0 必要 / P1 重要）。
  • 請整理成企劃書格式，A4直式橫式皆可，或參考 學長姐範例
  • 這份清單將直接作為下週 W3 生成 Sitemap 與 Wireframe 的輸入素材！
  • 繳交時程： 下週上課前上傳至Moodle。包含：企劃書進度pdf檔，與AI對話連結，企劃書進度網址

・【課後作業02：AI 企劃溝通提示詞建議】僅供參考

對應任務區塊 編號 提示詞目標與情境 與 AI 對話溝通的 Prompt 範例語法 建議工具
1. 專題名稱與標案目標 01 專題命名與標案痛點切入
協助產出具備設計感且符合政府採購語彙的專題名稱與核心目標。		 你是一位資深的數位網站企劃總監。我們目前正在參與一個政府標案專題：「[輸入領域，如：客家文化數位典藏與體驗網站建置案]」。
請幫我擬定：
1. 3個兼具「設計美學質感」與「官方正式感」的專題網站名稱。
2. 以簡潔切中痛點的文字，撰寫「專題目標與標案效益」（約200字），內容必須包含：提升使用者數位體驗、文化傳達效益以及數位轉型指標。 		ChatGPT / Claude
02 標案服務建議書（RFP）摘要生成
將專題概念轉化為標準服務建議書前言與範疇說明。		 請扮演政府標案審查顧問。請針對主題「[輸入主題，如：永續農產品綠色電商網站]」，寫一段「服務建議書 (Proposal) 之專題背景與執行範疇說明」。
要求：使用列點方式說明此網站建置案能解決的三大實務痛點（如資訊分散、缺乏動態互動、手機端體驗佳），並說明預體現的視覺設計策略。 		Claude 3.5 Sonnet
2. 網站功能清單與 UI 規格定義 03 功能清單 (Function List) 與 RWD 斷點規劃
產出規格矩陣，方便學生於服務建議書中作為附表。		 我正在規劃「[輸入專題名稱]」的網頁設計。請幫我擬定一份詳細的「網站功能清單 (Function List) 與 RWD 規格表格」。
欄位需包含：【頁面名稱】、【核心功能描述】、【前端 UI/UX 互動組件】、【RWD 手機/桌面端佈局建議】。
請涵蓋：首頁 (Landing Page)、專案列表頁、詳細內容頁、線上互動/報名頁，共 4 個核心頁面。格式請直接以 Markdown 表格輸出。 		ChatGPT / Claude
04 Figma UI 提示詞生成與 v0 實作導出
直接產出可貼入 Figma AI 或 v0.dev 生成 UI 介面的 Prompt。		 你是一位 UI/UX 前端設計師。請為「[輸入專題類別，如：地方創生展覽網站首頁]」撰寫一組用於 AI 生成 UI 設計稿 (Figma Make 或 v0.dev) 的英文 Prompt。
要求：指定現代感 (Modern & Clean Style)、極簡網格 (Grid Layout)、深色模式與螢光強調色、RWD 響應式佈局、包含 Hero Banner、展覽地圖卡片與動態 Call-to-Action 按鈕。請直接提供英文 Prompt。 		v0.dev / Figma Make
3. 競品分析與目標受眾挖掘 05 TA 人物誌 (Persona) 與競品視覺優劣勢
建立明確的使用者輪廓與現有競品視覺盲點。		 針對「[輸入主題，如：青年獨立書店數位導覽網]」，請幫我：
1. 建立 1 位目標受眾 (Persona)，包含：姓名、年齡、職業、痛點 (Pain Points)、目標 (Goals) 與數位工具使用習慣。
2. 列出 2 個真實或常見的類似市場競品網站，從「視覺風格 (Visual Style)」、「資訊架構 (IA)」與「RWD 體驗」三個維度進行視覺與體驗層面的優劣勢比較。 		ChatGPT / Perplexity
4. 競品 SWOT 與突破點分析 06 SWOT 分析與設計突破策略 (Design Strategy)
擬定標案提案中最重要的「創新差異化策略」。		 請針對我們的專題設計「[輸入專題名稱]」，與傳統現有的競品網站相比，進行「SWOT 分析 Matrix」。
剖析我們的優勢(S)、劣勢(W)、機會(O)、脅威(T)。重點請著重於「視覺設計創新」與「AI 技術導入（如微互動、動態生成）」。最後請根據分析，寫出 3 個我們在此標案提案中必勝的「視覺與技術突破點 (Key Differentiators)」。 		Claude 3.5 Sonnet

・【課後作業02：AI 提示詞實戰回應內容彙整】

任務名稱 (Task) Input: Prompt 語法 Output: AI 實際回應範例內容
1. 專題命名與標案痛點切入 你是一位資深的數位網站企劃總監。我們目前正在參與一個政府標案專題：「客家文化數位典藏與體驗網站建置案」。
請幫我擬定：
1. 3個兼具「設計美學質感」與「官方正式感」的專題網站名稱。
2. 以簡潔切中痛點的文字，撰寫「專題目標與標案效益」（約200字）。 		【專題名稱建議】
1. 客影尋綜｜客家文化數位典藏與沉浸式體驗網（推薦）
2. 客紋新浪｜台灣客家意象數位再造計劃
3. Hakka Verse｜客家文藝數位圖譜 platform

【專題目標與標案效益】
針對傳統客家文化典藏網站「資訊零碎、介面陳舊、缺乏青年吸引力」之痛點，提出全新數位建置策略。重構客家文物與聚落資訊架構，導入現代 RWD 介面與生成式微互動技術，達成三大效益：
• 視覺體驗重塑：建立質感專屬客家視覺設計系統 (Design System)。
• 文化傳達倍增：互動地圖與動態卡片提升青年訪客停留時間 50% 以上。
• 數位轉型標竿：符合 WCAG AA 無障礙規範與極速加載標準。
2. 標案服務建議書 (Proposal) 摘要 請扮演政府標案審查顧問。請針對主題「客家文化數位典藏與體驗網站」，寫一段「服務建議書 (Proposal) 之專題背景與執行範疇說明」。使用列點說明此網站建置案能解決的三大實務痛點。 【服務建議書 (Proposal) 前言與執行範疇】
一、 專題背景：現行典藏系統普遍面臨「流覽體驗不佳、行動端適應力弱、文化符碼缺乏現代轉譯」等問題。本團隊提出《客影尋綜》建置案，讓沉寂的文化資產轉化為具吸引力的數位資產。
二、 欲解決之三大痛點：
1. 資訊架構混亂：提供三階層語意化 Site Map（年代、地區、文物類別）精準檢索。
2. 行動端體驗斷裂：採 Mobile-First 佈局，確保手機與平板上的瀏覽流暢度。
3. 靜態圖檔缺乏吸引力：導入微互動與轉場特效，賦予圖紋與聚落故事數位生命力。
3. 功能清單 (Function List) 與 RWD 斷點 請幫我擬定一份詳細的「網站功能清單與 RWD 規格表格」。欄位包含：【頁面名稱】、【核心功能描述】、【前端 UI/UX 互動組件】、【RWD 手機/桌面端佈局建議】。涵蓋首頁、典藏圖庫、聚落地圖、展演活動。 【網站功能清單與 RWD 規格矩陣】
• 首頁 (Landing Page)：滿版 Hero Video/Banner、懸停放大卡片。桌面採三欄寬幅視覺，手機轉為單欄垂直流。
• 典藏圖庫 (Archive)：側邊篩選欄 (Filter Sidebar)、瀑布流 (Masonry)。桌面採左側固定篩選 + 4 欄網格；手機改為底部抽屜 (Bottom Sheet) + 雙欄。
• 聚落地圖 (Map Tour)：SVG 向量地圖、標記點浮動資訊框。桌面採左右分欄（圖文/地圖）；手機採頁籤切換模式。
• 展演活動 (Events)：行事曆組件、線上報名表單。桌面採雙欄日曆；手機採單欄時間軸呈現。
4. Figma UI / v0.dev AI 提示詞導出 請為「客家文化數位典藏與體驗網站」撰寫一組用於 AI 生成 UI 設計稿 (Figma Make 或 v0.dev) 的英文 Prompt。指定藍染深藍色調、極簡網格、RWD 佈局、包含 Hero Banner 與卡片。 Create a modern, elegant, and immersive Landing Page UI for a Hakka Culture Digital Archive platform named "Hakka Verse". Incorporate a subtle color palette of deep indigo blue (#0f172a), warm paper white, and terracotta accent. The layout must be fully responsive with clean grid aesthetics. Include: 1. Hero section with cultural image background, elegant serif title, and a glassmorphism search bar. 2. A 3-column responsive grid showcasing digital artifact cards with subtle hover glow. 3. Mobile-first RWD design layout with High WCAG AA contrast, using Tailwind CSS and Lucide icons.
5. Persona 與競品分析 針對「客家文化數位典藏與體驗網站」，請建立 1 位 Persona（含痛點與目標），並與 2 個常見競品從「視覺風格」、「資訊架構」與「RWD 體驗」進行優劣勢比較。 【Target Persona】
• 林語晨 (26歲，UI 設計助理)：想尋找客家文化靈感，但官方網站介面陳舊、查資料像看公文，手機版體驗極差。

【競品分析比較】
• 傳統政府典藏網：色彩雜亂、架構達 5 階層易迷路、無 RWD 行動端體驗。
• 商業型文化旅遊網：現代簡約且具 RWD，但缺乏文化典藏深度與學術檢索。
• 本專題《客影尋綜》突破：極簡藍染風格 + 扁平化 3 點擊原則 + Touch-First 行動端導覽。
6. SWOT 與突破點分析 請針對專題「客影尋綜」，進行 SWOT 分析，並撰寫 3 個我們在此標案提案中必勝的「視覺與技術突破點 (Key Differentiators)」。 【SWOT 分析】
• S (優勢)：客家視覺語譯能力強、原生 Mobile-First RWD 設計。
• W (劣勢)：文化資料庫需仰賴政府 open data 串接。
• O (機會)：政府推動公共數位服務美學再造政策。
• T (威脅)：傳統競品已佔據搜尋引擎 SEO 前排。

【3 大標案必勝突破點】
1. Design System 規範化：確立「藍染藍」與「花布紅」色系，建立完整 Figma Component 庫。
2. AI 微互動體驗：將客家圖紋（瓦當、剪紙）轉化為滾動與懸停的動態圖騰。
3. 極致載入效能：運用現代前端架構，達成手機端首頁載入低於 1.2 秒（FCP < 1.2s）。
event design
網頁介面視覺原型 (SVG Demo)
(此 SVG 原型展示了 Prompt 04 產出的現代客家藍染風格 RWD 桌面端與手機端 Hero Banner 介面)