網站主題
Before
Full Stack、AI、產品、Demo 和個人故事同時出現。
After
最上層只保留「40+ 職涯」和「學習與實作」。
未公開草稿 — 這一集不會出現在首頁、系列索引和 sitemap。
BEYOND FRONTEND · EP01
Draft你的網站，5 秒內看得懂嗎？
用我的首頁做真實 Before／After，整理出四條任何人都能使用的首屏問題，並附上可以直接交給 AI 的 Prompt。
用 Prompt 檢查你的首屏01 / THE PROBLEM
內容都是真的，方向仍然可以不清楚。
我第一次整理這個網站時，想放進 40+ 的經歷、Frontend、Full Stack、AI、Side Project 和正在學習的東西。每一項都是真的，但全部同時出現在首頁，第一次來的人反而未必知道應該先看甚麼。
這與你有甚麼關係？
如果你正在用 AI 或 Vibe Coding 建網站，AI 可以很快生成一個漂亮首屏，卻不會自動替你決定生意和內容的優先次序。 如果你準備找人做 Website／Landing Page，下面四條問題也可以幫你判斷對方是否真正理解你的目標。
Before 不是失敗版本，After 也不是已證明增加查詢的答案。這裏比較的是方向和資訊層級，不是虛構 conversion 成效。
02 / THE 5-SECOND CHECK
第一個畫面，先回答四條問題。
「5 秒」不是要訪客在五秒內讀完整個網站，也不是一項正式用戶研究。它只是一個簡單限制：如果對方只看到首屏，能否大概知道這裏與自己有沒有關係？
- 01
你是誰？
訪客不需要知道你的完整履歷，但要知道這是一個甚麼品牌、人物或服務。
- 02
你提供甚麼？
是內容、服務還是產品？不要只用「專業、創新、用心」代替具體答案。
- 03
這與誰有關？
讓合適的人認出自己，也讓不合適的人不用花時間猜。
- 04
下一步是甚麼？
閱讀、試用、預約或查詢，主要行動應該比其他選項清楚。
不用懂設計也可以測試
把首頁給一位不熟悉你的人看幾秒。
收起畫面後，請他回答上面四條問題。答不到時，先檢查文字和主次，不要第一時間加入更多動畫。
03 / WHAT CHANGED
我沒有刪掉內容，只把它放回合適的位置。
Full Stack、AI 和 Project 全部仍然存在。分別是：它們不再同時承擔「網站主題」的角色，而是收進「學習與實作」，再由 Project 證明最後做出了甚麼。
20+ 年經驗
Before
是一段背景資料，與網站內容的關係不夠直接。
After
成為我分析網站、學習新方向和分享判斷的起點。
Projects
Before
是首屏其中一個主要目的地。
After
變成學習最後做出了甚麼的證據。
下一步
Before
要先理解 Project 和個人故事的分別。
After
直接選擇看學習內容，或由 40+ 轉型故事開始。
這次不是先換顏色、字體或動畫，而是先決定網站最上層只需要回答哪兩件事。
04 / MOBILE FIRST
Desktop 清楚，不代表手機會自動清楚。
很多人用電腦生成網站，再把視窗拉窄看看就算完成。但真正的手機首屏更短，標題、說明和兩個按鈕很容易互相擠壓，所以我用 390 × 844 的 viewport 再檢查一次。
- 390px實際 CSS viewport 寬度
- 0px橫向溢出
- 2完整保留的內容入口
05 / USE IT
先叫 AI 檢查內容，不要叫它加效果。
把現有 headline、description 和 CTA 貼進下面的 Prompt。它不會替你決定真正的定位，但可以先指出陌生訪客可能看不明白的地方。
複製首屏檢查 Prompt適合 ChatGPT、Claude、Cursor 或其他 AI 工具
AI 的答案不是自動正確。
仍然要檢查新版本有沒有誇大服務、捏造成果，或寫成不符合你日常語氣的說話。
06 / CHECKLIST
發佈前，逐項看一次。
不需要懂 HTML、CSS 或設計軟件。只要有一張首頁截圖和手機，就可以完成第一輪檢查。
- 不看導覽，也能大概知道網站主題。
- 主標題說出具體方向，不只使用「專業、創新、用心」。
- 補充文字交代對象、內容或結果。
- 主要 CTA 只有一個，而且說明按下後會看到甚麼。
- 次要 CTA 不會與主要 CTA 爭奪注意力。
- 第一個 mobile viewport 看得到身份、主題或下一步。
- 390px 寬度沒有橫向溢出。
- 沒有依靠動畫才能理解主要內容。
- 所有聲稱都有真實內容或證據支持。
07 / WHY THIS MATTERS
Frontend 不只是把畫面做出來。
這次沒有加入大型套件。主要工作是重新整理內容層級、限制文字寬度，並在窄畫面把按鈕改為垂直排列。技術只是在背後確保同一個內容決定，在不同畫面仍然成立。
這次改版沒有令網站變成完成品。它只是先解決一個更基本的問題：第一次來到的人，是否知道這裏有甚麼，以及應該由哪裏開始。
到 Threads 看後續調整NEXT
下一篇，繼續解決一個看得見的網站問題。
《前端延伸》由實際成果開始，再簡單交代背後技術。內容完成後才會公開，製作過程和修改判斷會先放在 Threads。