2026年Vibe Coding製作網頁心得(1)|大家速度都好快,我還在那邊做邊學程式嗚嗚嗚

更新 發佈閱讀 6 分鐘

前言

最近vibe coding的潮流相當盛行,許多大老已經做出各種有趣的程式、APP或是網頁,而我呢,還在初階的地方默默耕耘、慢慢摸索一些有的沒的。

這陣子發現有許多人vibe coding卻時常忽略資安、後續維護等問題,害我更加得小心翼翼研究相關規範,例如最近剛做好成人向二創網頁,發現沒做好一定保護措施帳號會被鎖。

這系列將會以網頁相關的製作心得為主,希望可以給跟我一樣步調沒那麼快的人一個參考文獻,畢竟AI演變很快,如果有更多時間點的心得分享應該會讓人好學習許多。

Vibe Coding前注意

請記住,不論AI有多厲害,產出的東西終究不會離開你認知範圍太多,所以一定至少得具備相關領域的基本知識為佳,更不能會AI就瞧不起原先就在鑽研得先人們。

以網頁為例,假如沒太多設計知識的話,基礎產出的可能八成都是大範圍的 shadow + gradient設計;如果沒有太多程式相關知識的話,可能會不小心把會員的個人資料記錄在最表層的HTML裡面,讓他人可以隨意調閱查看。

所以就我個人經驗來看,最好先了解一下相關知識,或著是製作途中跟AI討論各種相關議題,讓AI不是只負責產出,還能帶領你達到更好的境界。

近期Vibe Coding心得

最近太多AI工具了,緩慢如我依舊抱著那些主流工具的大腿,畢竟我也花錢了,不用白不用嘛啊哈哈。

Vibe Coding 雖然可以快速產出一個成品,但是很需要在後續的維護上花費心力,假如你是一個沒有任何程式底子、系統設計思維的人會相當的痛苦,尤其是遇到某些很笨的AI(就是在說你CANVA),會談到大崩潰。

如果程式碼會直接貼出來的,我都會請AI幫我下註解,而且是外行人可以看懂並且維護的那種,確保可以讓自己讀懂程式碼且順便學習該段落是怎麼做的。

目前比較常用的分別有GPT、GROK、Gemini、CANVA還有最近才嘗試的Claude。

我先說一下2026年初至今的使用狀況好了。

GPT

第一個花錢的AI,雖然一度變成超級理工直男,但過沒多久油膩的那味又回來了,但已經沒有像之前4O那樣有情感共鳴的感覺,近期主要是拿來推論、分析一些事情,還有拿來寫程式。

以寫程式來說算是中規中矩,雖然還是會有些問題,如果有點程式底子會比較好修正,在寫網頁上有基礎預覽,但是沒辦法直接看手機或平板版本,所以得自己縮放或是複製程式碼到其他平台測試會比較好一點。

使用時盡量不要都堆在一個對話內,會逐漸卡頓,直到換一個新的聊天才會改善,不知道這是不是我電腦問題就是了,這部分如果有人能解惑就好了。

GROK

這是我第二個花錢的AI,不過只有一小段時間,有興趣可以來看之前付費測試的文章。

延伸閱讀自願當盤子的我帶你看被嚴格管制後的Grok付費會員體驗現況

很適合應付大尺度題材的AI,但是以程式來說表現實在是挺差的,明明圖片可以生成的很讚,但網頁設計上可以說是有些糟糕,暫時不會用來Vibe Coding。

但是如果想要圖片素材,GROK的生圖和修圖功能算是目前AI中挺不錯的,當然前提是素材是你自己的且不介意丟給AI。

Gemini

這是我第三個花錢的AI,當初使用時(約2026年初)在資料搜尋和統整上略有優勢,如果能掛上NotebookLM可以做得更精準,在程式上也是中規中矩,可以串聯GOOGLE使用各種功能,也是挺不錯的選擇。

但是自從三月初開始Gemini的算力似乎大下降,原先很厲害的資料統整突然就變得很偷懶,連寫程式也很容易誤會或忽略我的指令,所以這近幾周我是不會拿來主寫程式的。

CANVA

嚴格來說算是第四個花錢的AI,但當初付費時還沒AI功能就是了呵呵。

它的AI功能完全不能直接輸入程式碼要求插入,完完全全只能用敘述方式建造與修改,可以做到許多小程式或是網頁,甚至能用在你在外建立的所有專案中。

不過缺點是它是我目前為止看過最笨的AI,笨到我可以專門寫一篇文來抱怨。

Claude

這是最近才真正來嘗試的AI,算是慕名很久了,但我都自認為不太需要這麼厲害的,所以一直都沒來用。XD

實用後發現在程式設計上真的穩定又舒服,我只要需求明確都能近乎完美呈現,而且丟過去長串的程式碼在讀取上也幾乎不會疏漏。

缺點就是額度真的太少太貴了,長一點的程式大概不到十次就會達到上限了。

總結

Vibe Coding雖然好用好玩,但是如果要拿來變現還是需要請求專家協助為妙,一來是保障你各位的資訊、財產安全,二是多點知識會更好做後續維護。

至少我在這部分做功課時需要做蠻多的,例如前陣子常是做成人向的作品時,發現需要多做好一些導覽頁之類防護措施,否則會直接影響網站或主機帳號的安危。

之後我會針對我用過的AI組合來特別多寫一些心得,希望可以讓後進們多個參考點一起學習。

如果喜歡的話,歡迎追蹤我的Threads跟方格子!

留言
avatar-img
世界連結處
19會員
61內容數
這裡是世界連結處,版面主要以創作相關話題為主,本身創作經驗有小說、對戲群,喜歡我的小說或想看更多創作雜談歡迎追蹤按愛心~
世界連結處的其他內容
2026/03/31
因為是第一次做,所以選用最基礎的方式來嘗試效果,那首先選用的就是兩大主流的GPT跟Gemini,這樣選的原因是主流AI相對其他平台相對穩定且多人使用,至少不怕突然被關站,分享方式也都只要依靠複製連結的形式快速傳播,對我來說在推廣上會方便許多。
Thumbnail
2026/03/31
因為是第一次做,所以選用最基礎的方式來嘗試效果,那首先選用的就是兩大主流的GPT跟Gemini,這樣選的原因是主流AI相對其他平台相對穩定且多人使用,至少不怕突然被關站,分享方式也都只要依靠複製連結的形式快速傳播,對我來說在推廣上會方便許多。
Thumbnail
2026/02/07
這次我的資料庫素材有分成兩種,一種是網路搜尋、一種是從過往回覆紀錄收集數十筆作為樣本。 使用AI分別有GPT、GROK還有Gemini。 不得不說在收集樣本時可以發覺到過往的羊編真的是靠生命在海巡,不僅樣本數超多,時間......
Thumbnail
2026/02/07
這次我的資料庫素材有分成兩種,一種是網路搜尋、一種是從過往回覆紀錄收集數十筆作為樣本。 使用AI分別有GPT、GROK還有Gemini。 不得不說在收集樣本時可以發覺到過往的羊編真的是靠生命在海巡,不僅樣本數超多,時間......
Thumbnail
2026/02/01
這幾天我見證了嘉南羊乳這家公司在短短兩三天內教科書般的公關危機負面示範,甚至傳出當初那原先令人喜愛的小編被替換成AI代操的傳聞出來,這讓我不禁思考,用AI重現一個人過去的言行是那麼簡單的嗎?行銷公司竟然會想用這種方式來蒙混過去。 今天我不針對這公關災難進行分析,這次主要為了來研究用AI來假冒羊編的
Thumbnail
2026/02/01
這幾天我見證了嘉南羊乳這家公司在短短兩三天內教科書般的公關危機負面示範,甚至傳出當初那原先令人喜愛的小編被替換成AI代操的傳聞出來,這讓我不禁思考,用AI重現一個人過去的言行是那麼簡單的嗎?行銷公司竟然會想用這種方式來蒙混過去。 今天我不針對這公關災難進行分析,這次主要為了來研究用AI來假冒羊編的
Thumbnail
看更多
你可能也想看
Thumbnail
如果用AI取得成就或是賺到錢,算不算自己努力掙得的結果? 它跟以往我的工作模式不同,能夠大幅拉近我跟全端工程師那遙遠的差距到某一個程度。 如果站在公司的角度上來看我能做的事情一口氣大幅的變多也變快了,這是好事,也能大幅推進專案進度和刪減原本所需要的人力資源。 可是在我看來假如完整資歷全端開發經
Thumbnail
如果用AI取得成就或是賺到錢,算不算自己努力掙得的結果? 它跟以往我的工作模式不同,能夠大幅拉近我跟全端工程師那遙遠的差距到某一個程度。 如果站在公司的角度上來看我能做的事情一口氣大幅的變多也變快了,這是好事,也能大幅推進專案進度和刪減原本所需要的人力資源。 可是在我看來假如完整資歷全端開發經
Thumbnail
每天忙到凌晨,卻只在做重複瑣事?我靠 AI Vibe-Coding 僅用 7 天自建物流系統,每年贖回 1000 小時並省下 300 萬!這不是天方夜譚,而是微企生存必備的「PM 思維」。文中公開 Gemini 實戰心法與魔法指令,教你如何用一張截圖讓 AI 替你打工,徹底終結創業窮忙!
Thumbnail
每天忙到凌晨,卻只在做重複瑣事?我靠 AI Vibe-Coding 僅用 7 天自建物流系統,每年贖回 1000 小時並省下 300 萬!這不是天方夜譚,而是微企生存必備的「PM 思維」。文中公開 Gemini 實戰心法與魔法指令,教你如何用一張截圖讓 AI 替你打工,徹底終結創業窮忙!
Thumbnail
實際帶著自製健身APP到健身房使用,才體會到「自己是用戶」的重要。本文分享從登入、運動紀錄到 UI 操作的完整體驗,檢視輸入方式、動作新增、時間紀錄與數據呈現等不足,並提出未來改進方向。從開發者視角探索如何讓健身紀錄 APP 更直覺、更貼近需求,也提醒開發產品時,唯有實際使用才能發現真正的問題。
Thumbnail
實際帶著自製健身APP到健身房使用,才體會到「自己是用戶」的重要。本文分享從登入、運動紀錄到 UI 操作的完整體驗,檢視輸入方式、動作新增、時間紀錄與數據呈現等不足,並提出未來改進方向。從開發者視角探索如何讓健身紀錄 APP 更直覺、更貼近需求,也提醒開發產品時,唯有實際使用才能發現真正的問題。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
分享我參加 Vibe Coding 公益程式體驗營的心得,六週從零開始學習 API 串接、Zeabur 部署,成功打造出第一個完整的天氣預報 APP。適合想轉職、提升技能的程式新手,學習歷程、收穫與建議一次公開。
Thumbnail
分享我參加 Vibe Coding 公益程式體驗營的心得,六週從零開始學習 API 串接、Zeabur 部署,成功打造出第一個完整的天氣預報 APP。適合想轉職、提升技能的程式新手,學習歷程、收穫與建議一次公開。
Thumbnail
本文分享使用 Gemini CLI 開發程式的經驗,作者認為它是目前最好用的程式開發助手,並說明其優點、使用方法及需要注意的地方,包括免費額度、潛在問題和 API Key 使用成本等。
Thumbnail
本文分享使用 Gemini CLI 開發程式的經驗,作者認為它是目前最好用的程式開發助手,並說明其優點、使用方法及需要注意的地方,包括免費額度、潛在問題和 API Key 使用成本等。
Thumbnail
最近學到一個新的名詞Vibe Coding。 一開始我還以為是新的AI 寫程式的方式。 新聞上偶而也會穿插出這個名詞,有個小女孩用Vibe Coding做出什麼東西,然後為之世人驚豔。 昨天想說我也要來用用看,看有多好用。 便上網GOOGLE查詢一下,才知道這是現下流行的Coding方式
Thumbnail
最近學到一個新的名詞Vibe Coding。 一開始我還以為是新的AI 寫程式的方式。 新聞上偶而也會穿插出這個名詞,有個小女孩用Vibe Coding做出什麼東西,然後為之世人驚豔。 昨天想說我也要來用用看,看有多好用。 便上網GOOGLE查詢一下,才知道這是現下流行的Coding方式
Thumbnail
本文探討 AI 及 Vibe Coding 作為學習程式設計輔助工具的潛力,並分享如何在自學與提升個人編程能力上,有效利用這些工具,克服資訊過載、缺乏指引、動力不足等阻礙,模擬協作開發、程式碼審查,甚至自動化任務,最終達成「活用工具,創造差異化價值」。
Thumbnail
本文探討 AI 及 Vibe Coding 作為學習程式設計輔助工具的潛力,並分享如何在自學與提升個人編程能力上,有效利用這些工具,克服資訊過載、缺乏指引、動力不足等阻礙,模擬協作開發、程式碼審查,甚至自動化任務,最終達成「活用工具,創造差異化價值」。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
2026/02/12 智譜發布 GLM-5,主打長任務 agent 與工程級應用,參數擴至 744B,導入 DSA 與自研 RL 基礎設施。多項 benchmark 在開源模型中領先,並支援國產晶片部署,顯示模型能力與供應鏈策略正同步推進。
Thumbnail
2026/02/12 智譜發布 GLM-5,主打長任務 agent 與工程級應用,參數擴至 744B,導入 DSA 與自研 RL 基礎設施。多項 benchmark 在開源模型中領先,並支援國產晶片部署,顯示模型能力與供應鏈策略正同步推進。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News