iT邦幫忙

2026 iThome 鐵人賽

DAY 17
0
Vibe Coding

學生身份如何每天透過Vibe Coding每天做跨領域的創新項目系列 第 17 篇

Day 17 邪門歪道!從企業官網的網頁結構分析企業!

  • 分享至 

  • xImage
  •  

【Day 17】邪門歪道!從企業官網的網頁結構分析企業!

雜魚君~還在外包大腦給AI做企業分析嗎~呵~真是雜魚~的midjourney prompt
▲ 圖 1:雜魚君~還在外包大腦給 AI 做企業分析嗎~呵~真是雜魚~的 Midjourney 概念示意圖

話說念商科的時候,
偶爾還是要根據不同的企業
對他們的資料進行蒐集跟分析,
這算是我們經常會遇到的作業。
然後就是⋯⋯
身為學生偶爾真的會懶得做作業🤣~


痛點剖析:生成式 AI 時代的作業與「大腦外包」焦慮

比喻說上創新經濟學與產業動態做character.ai的企業分析
▲ 圖 2:例如在創新經濟學與產業動態課上做 Character.ai 的企業分析作業

那麼在生成式 AI 的時代就變成了——其實很多學生都會經常讓 AI 幫忙寫作業,可能是作文、文本分析、企業分析這些其實都會。

無論自己是以一個老師的身份、助教的身份、還是學生的身份,也會認為這是一個挺複雜的議題。坊間大家最擔心的重點,通常都是所謂的 「大腦外包」 。身為教育者的人們會擔心學生一味地依賴 AI 產出結果,卻忽略了深度思考、甚至是跨領域思考的訓練與習慣。以培養學生的競爭力及自主學習能力的角度來看,「大腦外包」確實是一件不太好的事情。

隨著年齡及學習階段轉換,年紀越大、或者說學籍越高的人其實也會注意到:學習這件事情去到後期,已經是很少會遇到需要別人引導及教學自己的情況,更多時候是自主學習。這個時候就高度仰賴自己過往接觸及鍛鍊起來的深度思考及跨領域思考的能力。

生成式 AI 其實直到現在依然是一種「資源基礎」的產物。有充足的電、有機器、有網絡,才有機會讓人們使用這個工具。但不盡然世界各地任何一個地方都同時具備所有條件,儘管只是這兩個月沒有交網路費,都可以讓我們瞬間喪失使用 AI 的能力(應該吧🤣)。

不過呢,真的會有惰性~就連自己做作業也是這樣子!

但是,思考如何搭配或者對 AI 工具進行創新,從而達到對於某個學科成果產出的目標——這整個「發現問題、尋找方法、不停試錯、提出解決方法」的過程,本身就是對抗「大腦外包」的一大方法!

所以 Vibe Coding 同樣也可以是對抗「大腦外包」的一大運動,相信長遠以來,這也是我開始這次主題寫作的原因。


商科簡報的現實考驗:從 Perplexity 到一鍵簡報

這次用AI Studio來vibe coding~
▲ 圖 3:這次繼續用 Google AI Studio 來 Vibe Coding~

好吧,回歸一下問題。商科的簡報作業有時候就只是普通的圍繞著對於某個企業的了解:屬於什麼產業、什麼時候開始經營、中間轉型的過程、有什麼產品線等等。

根據不同學科(例如說我們的科技管理),就可能會延伸說明:對方的永續策略與成果(ESG)、專利持有數目、創新頻率、轉型的過程與成效。

2025 年的時候,其實我們大眾也很難相信 AI 能夠直接產出對於商科作業或工作直接有用的簡報內容。最基礎的作法還是會分為三個步驟:

  1. 用 Perplexity 搜索資料
  2. 自己訂立框架把資料填入
  3. 進行簡報排版

當然,近期的 AI 再次變得更加智慧,直接產出的簡報內容我們在很多課堂上面看到過。實話實說,比起 AI 寫小說,這種簡報還更容易讓人看出破綻。

但是現在變簡單了,無論是用 Claude 還是 Google 的 NotebookLM,直接產出一份簡報 PDF 都超簡單的了。


邪門歪道解法:從網頁目錄結構與 HTML 爬取精準商業洞見

例如這是元太科技官網有的各種頁面
▲ 圖 4:以元太科技官網為例,其涵蓋的多元業務與分頁架構

但是呀!不知道大家有沒有跟著我一起做自己的個人網站?特別是在用 Next.js 的架構時,每一個網頁都會一層一層地用不同資料夾裝著,網頁的架構也是這樣子:主頁,主頁旁邊有很多分頁,主頁跟分頁底下又有很多子分頁。

而一家大型企業有官網的時候,主頁旁邊的分頁可能會寫著產品分類、公司發展歷程、ESG。以產品分類來說,可能子分頁會寫教育文具、家居生活、公共展示這樣子。

而在網頁內部的程式碼 HTML 是有可能找到階層邏輯的,例如:公司 ➔ 產品分類 ➔ 教育文具 ➔ 產品 XXX 的詳細產品介紹。

無論是從網頁結構的標題,還是從爬蟲下載下來的 HTML,把這些結構化內容丟給 AI,其實就能夠做到更準確的資料蒐集,並從內容進行更準確的商業分析!


實戰展示:AI Studio 打造「企業網頁分析儀表板」與 PPT 排版

這是AIStudio做出來的工具與分析元太科技官網所作出的分析與各個板塊(只分析10個頁面可能資訊不夠)
▲ 圖 5:在 AI Studio 打造的企業網頁分析工具,解析元太科技官網的各個模塊(示範分析 10 個頁面)

當然,我們也可以加入我們的模板,請 AI 從這些資料裡面分析:企業的名稱跟目標、屬於什麼產業、什麼時候開始經營、中間轉型的過程、有什麼產品線(再確認一次)。

這些分析項目也可以讓 AI 以 HTML 跟 CSS 程式碼,對各個模塊的資料進行 PPT 格式的視覺排版。

最後可以產出簡報!
▲ 圖 6:自動排版產出的 16:9 簡報視覺成果!

最後一鍵導出 PPT 的 PDF!


💡 核心 Prompt 模組分享

大家可以參考我這次使用的提示詞,直接複製調整使用:

建立一個網頁應用叫做「企業網頁分析」,會把輸入的企業網頁網址輸入,
然後會自動爬取網頁的所有分頁,瞭解所有分頁跟子分頁架構跟網頁的所有 HTML 資料 / PDF(如有)可以暫存,
然後用 AI 分析所有資料瞭解並填入資料(開始前可以選擇分析的東西,分析後要有來源表示):
1. 公司名
2. 公司創業時間
3. 公司標語
4. 公司產品分類(如有)
5. 永續 (ESG)
6. 來源表示(一定要有)

最後變成不同模塊的儀表板設計,
最後可以一鍵自動導入(用 HTML, CSS)排版成 16:9 PPT,並能直接導出 PDF。

💡 提示:以上內容直接複製即為標準 Prompt!可根據課堂或報告需求彈性增刪分析維度。


深度反思:對抗「大腦外包」與現場匯報的真正價值

話說這次也是用 Google AI Studio 來 Vibe Coding,也有一個原因是:用這樣子的做法,能強調「有 AI 介入」地製作出一個 AI 應用。AI Studio 是可以直接導入的,可以不用額外輸入 API Key,根據每次全新的專案或者應用,AI Studio 會根據需求直接導入 AI 模型(主要是 Gemini 最新的大型語言模型)。

或許能證明我沒有「大腦外包」的原因包括:

  • 為了產出簡報,我會知道要去看官方的網頁。
  • 會知道官方的網頁可能包含哪些關鍵結構與內容。
  • 蒐集到的內容可以如何被歸納整理。
  • 我能夠如何用這些資料證明自己真正認識這個企業。

最後!記得要練習現場匯報能力!

儘管 AI 能夠產出 PPT、能夠讓自己明白這間企業在做什麼,但轉而能夠「跟別人清楚介紹這間企業在做什麼」,或許才是這份作業的核心重點!

但是!教授不會允許你不交 PPT 的說!🤣


📌 本篇重點整理

核心維度 重點摘要
作業與「大腦外包」思辨 依賴 AI 產出易導致思考能力萎縮;然而透過 Vibe Coding 主動定義問題、設計工具架構與驗證結果,反而是鍛鍊自主學習與對抗「大腦外包」的有效運動。
官網結構的商業洞見 企業官網的資料夾層級、分頁名稱與 HTML 代碼天然蘊含著產品線、發展歷程與 ESG 策略的結構化邏輯,是訓練 AI 進行精準商業分析的絕佳素材。
HTML/CSS 跨界簡報排版 不依賴傳統繁瑣簡報工具,直接指示 AI 將爬取並結構化的模塊資訊轉換為 16:9 HTML/CSS 排版,實現一鍵預覽與 PDF 快速導出。
商科簡報的終極核心 工具與 PPT 產出只是輔助手段,真正無法被外包的是研究者對產業的真實理解,以及上台向聽眾進行清晰、具說服力的現場匯報能力。

上一篇
Day 16 文本?電影海報?線上策展?繞這麼多,其實最後是想要講 QR Code!
下一篇
Day 18 用電腦模擬一個裝置爆開,然後看見裏面的零件,這種畫面我還是做不來⋯⋯嗎?
系列文
學生身份如何每天透過Vibe Coding每天做跨領域的創新項目 共 19 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言