網頁設計的發展歷史：從第一個網頁到 AI 生成的三十五年演變
2026年5月30日 下午 1:37
UI/UX 設計DESIGN HISTORY · 2026
QUICK ANSWER
網頁設計從 1991 年 CERN 的純文字網頁起步，歷經表格排版、Flash 全盛、響應式設計、扁平化，走到 2026 年的 AI 生成。表面上是審美在輪替，骨子裡卻是一場關於「版面控制權該歸誰」的拉鋸——設計師、瀏覽器、還是使用者。讀懂這條暗線，你會看出 AI 這波正在重演 Flash 當年犯過的錯。
打開 1996 年的任何一個網站，你會看到閃爍的文字、置中的標題、藍色底線的連結，還有一行小字：「本站最佳瀏覽器為 Netscape Navigator」。當年那是專業，現在是迷因。
問題來了——你今天做的網站，五年後會不會也變成別人的迷因？
這篇要講網頁設計這三十五年怎麼走過來的。但我不打算給你一條「HTML→CSS→RWD→扁平化」的流水帳，那種時間軸 Google 一搜一大把。我想講的是一條沒人明講、做了十年設計的人卻都隱約感覺到的暗線：
網頁設計的歷史，從來不是審美在進步，是一場關於「版面控制權該歸誰」的拉鋸戰。
設計師想要全控制，瀏覽器想要自適應，使用者想要無障礙。三方拔河了三十五年，每一次有人贏，就誕生一個時代；每一次風向轉，上個時代的最佳實踐就變成下個時代的尷尬。
我在設計圈深耕快十年，看著這條線從 Flash 擺到 RWD、從擬物擺到扁平，現在又從手刻擺到 AI 生成。看久了你會發現一件事——工具一直在換，這場拔河從來沒停過。而 2026 這一波 AI，正在把一個我們十五年前就犯過的錯，重演一次。
CHAPTER 01 · THE TEXT ERA
1991–1994：沒有設計的設計
1991 年 8 月 6 日，提姆·柏內茲-李在 CERN 的一台 NeXT 電腦上發佈了世界第一個網頁。純文字、超連結、沒有圖、沒有版面。網址是 info.cern.ch，內容就是「什麼是全球資訊網」。
那不是設計師偷懶，是物理限制：頻寬貴、螢幕小，而 HTML 本來就是拿來標記「文件」的語言，不是拿來排「版面」的。
這時候，版面的控制權在誰手上？沒有人。瀏覽器怎麼渲染、文字怎麼斷行，作者完全管不著。這是控制權光譜的「零點」——也是後面三十五年所有拉鋸的起點。
CHAPTER 02 · THE TABLE HACK
1994–2000：設計師的第一次造反
1993 年，Mosaic 瀏覽器帶來了圖片支援，網路第一次有了「畫面」。隔年 Netscape 接棒，一度吃下近八成市佔，把網頁推進千家萬戶。
設計師很快發現一個 bug 級用法：拿 <table> 表格來排版面。表格本來是放資料的，他們卻用它切欄、做側邊欄、塞導覽列，甚至用透明的 1×1 GIF 當間距撐開版面。
這是設計師對 HTML 的第一次造反——把一個文件語言，硬掰成版面工具。醜，但有效。整個產業靠這個 hack 撐了將近十年。
從這裡開始，網頁設計的每一步「進步」，幾乎都是同一個劇本：設計師想要更多控制權，然後跟技術的本意對著幹。
CHAPTER 03 · THE FLASH KINGDOM
2000–2010：設計師拿到了全部
進入兩千年代，Flash 是王。整站用 Flash 做、進站要先看一段 splash 動畫、滑鼠拖著粒子特效、背景音樂自動播放。今天看很煩，當年很潮。
設計師為什麼愛 Flash？因為它給了夢寐以求的東西——像素級的絕對控制。你在 Flash 裡擺哪就是哪，字型、動畫、轉場完全照你的意思走，瀏覽器不准插嘴。這是控制權鐘擺第一次完全盪到「設計師全拿」這一側。
同一時間，CSS 在 1996 年被正式提出，安靜地幹了一件更重要的事：把「內容」（HTML）跟「樣式」（CSS）分開。這個分離，後來成了整個現代網頁的地基。
與 Flash 平行發展的，是 Web 2.0 的浪潮——漸層、高光、玻璃質感的按鈕鋪天蓋地，部落格與社群平台爆炸成長。網站不再只是傳遞資訊，開始講究品牌形象與情緒。
但 Flash 與這些華麗效果當道時，沒人想算代價——直到一個人寫了一封公開信。
CHAPTER 04 · THE GREAT RESET
2007–2012：一封信終結一個時代
殺死 Flash 的，不是更強的技術，是一個商業決定。
2007 年 iPhone 上市，不支援 Flash。2010 年，賈伯斯發表公開信〈Thoughts on Flash〉，白紙黑字宣判 Flash 不會出現在 iPhone 與 iPad 上——耗電、不安全、不適合觸控操作。
Flash 不是輸給對手，是被平台政治判了死刑。這是整篇文章第一個值得記住的點：設計史的轉折，很多時候是商業跟政治推的，不是審美推的。
殺死 Flash 的不是更強的技術，是一支沒裝 Flash 的手機。
同樣是 2010 年，Ethan Marcotte 提出了「Responsive Web Design」（響應式網頁設計）。設計師被迫把剛拿到手的控制權，又交還出去——版面不再固定，得隨著螢幕大小流動。
控制權的鐘擺，從「設計師全拿」狠狠盪回了「瀏覽器自適應」。
CONTROL PENDULUM
版面控制權的三十五年擺盪
1991–94
純文字時代
控制權 → 沒有人
1994–00
表格排版
控制權 → 設計師（用 hack 搶）
2000–10
Flash 王國
控制權 → 設計師（像素級全拿）
2007–12
響應式重置
控制權 → 瀏覽器（被迫交還）
2012–20
扁平十年
控制權 → 使用者（向裝置妥協）
2025–26
AI 生成
控制權 → 設計師（用 prompt 又搶回）
CHAPTER 05 · THE FLAT DECADE
2012–2020：把裝飾全部拿掉
響應式之後，設計被迫簡化。原因很現實：要在所有螢幕上都成立，複雜的擬物質感、厚重陰影、皮革紋理全都成了負擔。
2013 年 iOS 7 一刀砍掉所有擬真材質，扁平化正式登基。隔年 Google 推出 Material Design，幫扁平加上一套有邏輯的層次與動效系統，讓「扁」不等於「平」。
mobile-first 成了預設。2015 年 Google 開始懲罰非響應式網站的搜尋排名——響應式從加分題，變成必考題。
這十年的尾聲，設計系統（Design System）崛起，Figma 幹掉了 Sketch 加 Photoshop 的老組合，成為設計師的新預設工具。設計的單位，從「畫一張圖」變成「維護一套元件」。也是在這個階段，「UI」「UX」這兩個詞變成設計師的日常語言——如果你對它們的定義跟分工還不熟，可以先補 《認識 UI/UX 設計》。
CHAPTER 06 · THE AI SWING
2025–2026：設計師又想要全部了
這一兩年，設計圈最熱的詞是 vibe coding。
Figma 在 2025 年 5 月推出 Figma Make，你只要描述「做一個更高級感的 landing page」，AI 就直接生出能跑的程式碼。Lovable、v0 一票工具，讓不會寫 code 的設計師也能把腦中的畫面，幾分鐘變成一個上線的網站。
72%
設計師已把生成式 AI 放進工作流
91%
說 AI 提升的是品質，不只是速度
1996
CSS 提出，沿用至今三十年
Figma《State of the Designer 2026》報告裡，72% 的設計師已經把生成式 AI 放進日常工作流，91% 說它提升的是產出品質，不只是速度。AI 不再是要不要用的問題，是怎麼用的問題。
你發現了嗎？設計師又一次拿回了「全控制」的快感——只是這次握在手裡的不是 Flash 時間軸，是一句 prompt。
如果你想快速看完從 CERN 到今天的整條脈絡，這支影片把演進講得很清楚：
CHAPTER 07 · THE PATTERN
歷史不會重複，但會押韻
把整段歷史攤平，那個鐘擺看得一清二楚：純文字（零控制）→ 表格 hack（設計師搶）→ Flash（全控制）→ 響應式（交還瀏覽器）→ 扁平（向使用者妥協）→ AI（設計師又搶回來）。
而 2026 這一波，正在重演 Flash 當年犯的錯。
Flash 給了設計師全控制，代價是：搜尋引擎讀不到、手機跑不動、無障礙全毀。漂亮，但封閉。
2026 的 vibe coding 給設計師全控制，代價也正在浮現：AI 生出來的網站，無障礙（a11y）普遍不及格、語意標籤亂七八糟、塞滿沒人 review 過的程式碼。連 Figma 自家的開發者都在公開警告——大量 AI 與 vibe-coded 產品到處冒出來，做不到無障礙的基本盤，正在「汙染」整個 web。
同一個劇本：設計師為了那份爽快的控制感，又一次把「讓所有人都能用」這件事，丟到了後面。
所以真正該問的，從來不是「AI 會不會取代設計師」。而是——當每個時代的最佳實踐都會過期，到底什麼東西不會過期？
答案就藏在那條暗線裡。會留下來的，從來不是審美，是結構性的東西：CSS 把內容跟樣式分開（1996 年提出，2026 年還在用）、格線系統、語意化標籤、無障礙原則。這些東西橫跨了 Flash、響應式、扁平、AI 四個時代，一個都沒被淘汰。想看這套邏輯在 2026 年具體長成什麼樣，我整理過 《2026 UI/UX 設計趨勢全解析》。
工具每五年換一輪，原則三十年沒變。
CHAPTER 08 · TAKEAWAYS
回到開頭那個問題
你今天做的網站，五年後會不會變成迷因？
會。一定會。閃爍文字會、splash page 會，現在這套圓角、玻璃擬態、漸層光暈，五年後一樣會。這不是詛咒，是規律。
但有一種設計師，每次風向轉都還站得住：不是最會追新工具的那個，是最懂結構的那個。Flash 死了他沒事，響應式來了他沒事，AI 來了他還是沒事——因為他從來不是在學工具，是在學「版面背後那套不變的邏輯」。
會被淘汰的，從來不是不會新工具的設計師，是只會追工具、看不見底層結構的設計師。AI 不會改變這條規律，它只是又一次幫我們把它演了一遍。
CHEATSHEET · 一分鐘懶人包
✦ 1991 第一個網頁誕生於 CERN，純文字、無版面，控制權是零點
✦ 1994–2000 設計師用 <table> 表格 hack 搶版面，醜但有效撐了十年
✦ 2000–2010 Flash 給設計師像素級全控制，代價是封閉與不可讀
✦ 2010 賈伯斯一封信加上響應式設計，把控制權交還瀏覽器
✦ 2012–2020 扁平化＋mobile-first＋設計系統，向使用者與裝置妥協
✦ 2025–2026 AI／vibe coding 讓設計師用一句 prompt 又搶回全控制
✦ 鐵律：工具會過期，結構（內容/樣式分離、格線、語意、無障礙）不會
CHAPTER 09 · FAQ
常見問題
Q：世界上第一個網頁是什麼時候誕生的？
A：1991 年 8 月 6 日，由提姆·柏內茲-李在 CERN 發佈，網址是 info.cern.ch，內容是介紹全球資訊網本身。它只有純文字與超連結，沒有任何視覺設計。
Q：CSS 是什麼時候出現的？為什麼重要？
A：CSS 在 1996 年由 W3C 正式提出，核心貢獻是把「內容」（HTML）跟「樣式」（CSS）分開。這個分離是現代網頁的地基，從 Flash 時代到 AI 時代都沒被取代。
Q：Flash 為什麼會消失？
A：主因不是技術被淘汰，而是平台政治。2007 年 iPhone 不支援 Flash，2010 年賈伯斯發表〈Thoughts on Flash〉公開信，理由是耗電、不安全、不適合觸控。失去行動裝置這個入口，Flash 就慢慢退場了。
Q：響應式設計（RWD）是誰提出的？
A：2010 年由 Ethan Marcotte 提出。核心概念是用 CSS 讓版面隨螢幕大小自動調整。2015 年 Google 開始用搜尋排名懲罰非響應式網站後，它從加分題變成了必備條件。
Q：AI 生成網站會取代網頁設計師嗎？
A：短期內不會取代懂結構的設計師。AI 與 vibe coding 工具（如 Figma Make、Lovable）大幅加速了產出，但目前生成結果在無障礙、語意化、可維護性上普遍需要人工把關。真正會被淘汰的，是只會操作工具、看不懂底層結構的人。
Q：學網頁設計該從哪裡開始？
A：別從追最新工具開始，先把不會過期的結構打穩：HTML 語意化、CSS 排版（Flexbox／Grid）、響應式原則、無障礙基礎。把這套地基蓋好，之後不管風向轉到 Flash、扁平還是 AI，你都站得住。
CHAPTER 10 · RESOURCES
延伸資源
想把這套「不變的結構」變成可上手的工作流，可以看我整理的 《100 種 Figma 設計的方法》，從元件到設計系統一次蓋穩。
如果你對「不用寫 code 也能把設計變成上線網站」這條路有興趣，可以從 Framer 入門——它是這一波 vibe coding 浪潮裡，最貼近設計師思維的工具之一。
