神杉策劃 神杉策劃 Sansan S&P Studio
把提案簡報網頁化

做一個提案網頁不難,
難的是怎麼問。

先用文字把方向講清楚,讓 AI 幫你把內容大綱補齊;確認過大綱再動手做成網頁——這份簡報本身,就是照著這套流程做出來的。

講者Sandy · 神杉策劃
案例數8 份實戰文件
01

開場・先問對問題,再動手做

做出一個提案網頁不難,難的是怎麼問——順序錯了,就是在用網頁包裝一團沒想清楚的內容。

1

先提出你想提案的方向

不是丟一句「幫我做提案」,是講清楚:對象是誰、你想讓對方做出什麼決定、目前手上有哪些素材。

2

讓 AI 反過來問你

好的提問會讓 AI 告訴你「這份提案還缺什麼」——現況資料夠不夠、報價邏輯有沒有交代、要不要放同業案例佐證。

「要完成這份提案,你還需要提供:① 目前的報價區間 ② 客戶最在意的三個問題 ③ 有沒有想比較的方案數量」
3

先用文字確認大綱

大綱和重點順序都用文字來回改過,確認「這就是我想講的」,再進到下一步——改文字比改網頁便宜太多。

4

最後才動手做成 HTML

大綱底定了,網頁化只是把已經確認過的內容套進版型——這一步反而是整個流程裡最快的。

02

三種你可以請 AI 協助的提案

不管哪一種,做完都要回頭檢查同一組細節:重點有沒有被改掉、RWD 顯示正不正常、外連對不對。

01

行銷方向提案

現況診斷、方案比較、報價時程——說服客戶做決定用的文件。

重點有沒有被沖淡

AI 常把你的判斷邏輯簡化成通用建議,逐段核對「我原本想強調的那句話還在嗎」。

RWD 是否正常顯示

比較表格在手機上最容易出包,務必用手機實際滑一次,確認欄位沒有被壓爛。

外連是否正確

同業案例連結、跨提案互連的連結,逐一點過一次,避免上台才發現連錯頁。

視覺 demo 型

機車品牌|首頁 Demo

不是文件,是完整可互動的網站版型提案——首頁、導覽、產品卡片全部做成真的可以點的頁面,是網頁化的極端示範。

查看案例 →
主案例

餐飲集團官網架構建置提案

四品牌×三方案並列比較,含產業參考案例、獨立網域 vs 子網域決策表、逐方案報價與時程——同一套資料結構重複使用三次,示範「模組化」而非「重寫三份」。

查看案例 →
跨提案互連

瑜珈教室行銷提案

現況缺口分析 → 文章清單 → 報價,單頁錨點導覽,並連結到同網域的個人品牌講師提案。

查看案例 →
跨提案互連

個人品牌講師網站與 SEO 提案

年度文章「三感溝通」主題化架構,與瑜珈教室提案共用網域、互相導覽。

查看案例 →
02

內容規劃細節

簽約後的進度工作表——不是要說服誰,是讓「執行中」這件事變得看得見。

進度數字跟畫面對不對得上

進度條、統計數字要跟著實際完成篇數動,最容易漏改的就是這種散落各處的小數字。

大量清單在手機上讀不讀得動

幾十篇項目列在一頁,欄位太多記得加捲軸提示,別讓客戶滑到迷路。

外連的雲端資料夾還有效嗎

連到雲端大綱、共用資料夾的連結最容易過期或權限跑掉,上台前重新點一次。

協作工作表

法律內容網站|內容規劃工作表

主題總覽、批次進度條、逐篇關鍵字與大綱一次呈現——客戶隨時能點進來看,不用每次都問「文章寫到哪了」。

查看案例 →
SEO 內容切角提案

僵直性脊椎炎|SEO 內容策略研究

三篇文章各自攔截不同搜尋階段的讀者(飲食禁忌→怎麼改善→是什麼/會好嗎),開頭用內容聚落流程圖交代分工與內部連結方向,再用三個分頁逐篇拆解搜尋意圖、關鍵字流量表與撰寫優先順序——同樣的「先給全貌、再拆細節」邏輯,用在內容規劃提案上一樣成立。

查看案例 →
03

執行/結案報告

全場資訊密度最高的一種——把「發生了什麼」跟「接下來要做什麼」放在同一頁。

數據解讀的角度有沒有被改成中性敘述

成長/風險的判斷是你的專業角度,AI 容易寫成沒有立場的流水帳,記得把「所以要怎麼做」寫回去。

圖表在手機上還讀得懂嗎

Chart.js 這類圖表窄螢幕最容易被壓扁,長標籤記得測試是否會重疊。

資料來源與外連標示是否正確

數據出處、原始連結標註清楚,客戶才敢把這份報告直接轉給老闆看。

成效報告

復健科診所|SEO 季度報告

核心數據總覽、關鍵字成長排行、逐篇文章完整數據表+泡泡圖——把成長故事跟原始數據放在同一頁,各取所需。

查看案例 →
廣告成效月報

沐豐科技|Google + Meta 廣告成效月報

雙渠道(Google/Meta)廣告數據並陳,KPI總覽、逐活動明細、與上月比較表、來店數對照,最後收在「下月優化建議」——連該不該砍預算、砍哪個渠道都直接寫進報告裡,不用等客戶自己問。

查看案例 →
03

做好之後,怎麼變成一個真的網址

用 Cloudflare Pages 靜態部署——免費、不用寫程式、幾個步驟就能拿到網址。

01

整理檔案,打包成壓縮檔

確認主頁檔名是 index.html;圖片、字型盡量用外部連結/CDN,避免本機路徑失效。Page 部署時檔案要先壓縮成 .zip 再上傳,直接丟資料夾會失敗。

02

登入 Cloudflare,進到 Workers & Pages

沒有帳號的話免費註冊即可,不需要綁信用卡。

03

建立新專案 → 選「Drag and drop your files」

專案名稱可以自行命名,再上傳壓縮好的 .zip 檔拖進上傳區塊即可。

04

等部署完成,拿到網址

系統會自動打包部署,完成後給你一個 專案名.pages.dev 的網址,可以直接分享給客戶。

05

之後要更新,同專案重新上傳一次

網址不會變,蓋掉舊版本即可——這也是為什麼案例網址都能重複使用同一個域名結構。

💡 如果客戶想掛自己的網域(例如 proposal.客戶網域.com),Cloudflare Pages 專案設定裡的「Custom Domains」可以直接綁定,不需要換平台。
實際操作畫面
04

打造可複製的提案系統

不是每次重做,是同一套骨架換內容——連怎麼問 AI,都可以是一套可複製的流程。

從頭到尾其實只有一件事在發生:先把方向講清楚給 AI 聽,讓大綱在文字階段就成形,才動手做成網頁——今天示範的八個案例,用的都是同一套骨架,換的只是內容。

三種提案類型(行銷方向、內容規劃、執行報告)檢查的細節都一樣:重點有沒有被沖淡、RWD 正不正常、外連對不對——這組 checklist 比任何模板都值得你先存起來。

做完不代表結束,Cloudflare Pages 幾個步驟就能拿到一個可以分享的網址——網頁化的最後一哩路,其實比想像中短。

今天可以直接帶走的三件事
1

寫一句「AI,你需要我提供什麼」

下次開始做提案前,先用這句話起頭,讓 AI 反問你,而不是自己瞎猜大綱該放什麼。

「我今天要與 OO 公司/XX 主管做【提案主題】的提案,【提案大方向】,你可以再給我一些提案想法嗎?內容都先以文字說明即可。」
2

存一份自己的檢查清單

把今天三組注意事項存下來,每次提案完成後照著跑一遍,比憑印象檢查可靠。

3

開一個 Cloudflare 帳號,先練習部署一次

不用等到正式案子,拿一份舊提案照著步驟上線,熟悉流程比臨時上場更踏實。

提案網頁化,本質上不是換一個檔案格式,是把「客戶自己能理解、能操作」當成設計目標——而這一切,從你怎麼問 AI 的第一句話就開始了。

05

關於今天的分享者

Sandy 張靜雯

Sandy 張靜雯

神杉策劃 Sansan S&P Studio 創辦人,工作室落腳台中西區。

獨立接案的數位行銷顧問,服務範圍包含 SEO 內容行銷、Google Ads 投放、網站開發與數據分析——今天分享的八個網頁化案例,都是我實際提案的內容。

客戶組合橫跨法律諮詢平台、醫療診所、運輸產業、瑜珈教室、客製化蛋糕、保健食品、留學代辦、表演藝術與美業,個人專精於需要諮詢後成交的服務產業。