Vibe coding行銷工作應用實例:6年舊網頁改版、38個版本發想、1週上線經驗分享

陳莞欣-avatar-img
發佈於科技業打工日記 個房間
更新 發佈閱讀 4 分鐘

上一季的主要工作重點是雅婷逐字稿landing page的改版。相信有用逐字稿的人或多或少聽過這個名字,雅婷有一定的知名度,但因應後續的商業策略調整,我們需要做品牌重塑。

痛點

原本的Landing Page已經是6年前製作,雖然具備基本資訊,但隨著產品成熟,公司內部對產品定位也有不同想像,資訊區塊有可以補充之處。 更重要的是,逐字稿使用者通常帶有明確的使用意圖,透過搜尋進入產品頁面,開始使用者旅程。SEO是重要的貨客管道,需要大幅度優化。改版前,這個Landing Page被google抓取到的標題是「快速聽打文字」。

PMM/PR看重的改版重點

1.Slogan、Message house的重塑、內部重新對焦
2.網站區塊重組:原本只有app、介面按鈕跟數項產品特色,新增FAQ、亮點成績的數字、統一原本分歧的B2B詢問入口、增加這幾年的成功案例
3.SEO設定、社群分享的Open Graph設定

實作方式

我是用vibe coding的方式,以V0網站做前幾版雛形。網站所有按鈕、連結都真的可以點,只是我沒有讓他上線。圖片部分,我也用Canva做了mock up,現成版型就可以合成手機、筆電的使用情境畫面。

這個做法最大優點是可以很快製作POC。不管是過文案、過結構,主管比較傾向看到視覺化的呈現,能夠想像實際做出來的成果。

另外就是在brainstorming階段,可以省下設計師的時間,看紀錄發現我前前後後改了38版,有些是字型、顏色、板塊位置微調,有些是主視覺改動、架構增加這種大幅度的變動。

過程中,有幾個我覺得不錯的版本,包括用google gemini 輔助生成code,寫了一個模擬逐字稿轉錄過程的打字動畫,還有用canva 做模擬圖,北歐簡潔風格的第一屏。雖然最後正式landing Page並沒有採用,但對我來說是探索不同的視覺風格,豐富自己的設計語彙,很有趣。

模擬逐字稿轉錄的打字機

模擬逐字稿轉錄的打字機

未採用的北歐風主視覺、38版的發想紀錄

未採用的北歐風主視覺、38版的發想紀錄

當然vibe coding的方式做網站仍有些限制,包括細緻的CI對齊、版面調整、landing Page跟產品線網站的視覺風格串接、SEO設定、串接後續金流或客服chatbot⋯⋯等。我們最後決定還是用傳統的開發模式做改版。

結果

跟老闆定案後,跟設計溝通、進前端手刻,大約1.5週完成了這個landing page,SEO雖然從頁面上看不見,但我有請前端工程師幫忙,一定要重設Title、H1還有meta description。經過2週後,搜尋結果可以看到landing page在前三名,甚至當月營收也有成長(這影響變數很多,不過我相信landing page的指引是有加分的。)

改版後的SEO排名

改版後的SEO排名

改版除了改視覺風格,也是走一次內部定位對齊→訊息梳理→探尋使用者意圖→搜尋最佳化的Go to Market歷程。

【雅婷逐字稿】 https://studio.yating.tw/intro/zh-TW/transkribera

留言
avatar-img
Money Talks
34會員
100內容數
做過熟齡媒體記者、科技業公關。 喜歡把複雜的事情講得簡單清楚,有時候有趣地講清楚。那件「複雜的事情」隨時間演變,曾經是退休投資、是個人長期健康管理,現在是AI應用新知、職場運作邏輯。另外也寫小說。 信箱:[email protected]
Money Talks的其他內容
2025/09/27
客服毫無疑問是個重複性高、產值低又沒credit,非常值得被AI取代的工作。總之,為了讓這個不得不做的爛工作有點意義,我決定嘗試用 No Code 工具 Zapier 搭配 ChatGPT,來建立一個簡單的 Agent Flow,嘗試讓客服流程自動化。
Thumbnail
2025/09/27
客服毫無疑問是個重複性高、產值低又沒credit,非常值得被AI取代的工作。總之,為了讓這個不得不做的爛工作有點意義,我決定嘗試用 No Code 工具 Zapier 搭配 ChatGPT,來建立一個簡單的 Agent Flow,嘗試讓客服流程自動化。
Thumbnail
2025/09/06
前陣子洗碗時,突然福至心靈般的有個念頭:今年9月,我就要35歲了。這輩子活到過1/3,我曾經探索過很多興趣與技能,哪些支柱會撐起我過去、現在和往後的人生?套用一萬小時理論,我這一生還能專精多少事?
2025/09/06
前陣子洗碗時,突然福至心靈般的有個念頭:今年9月,我就要35歲了。這輩子活到過1/3,我曾經探索過很多興趣與技能,哪些支柱會撐起我過去、現在和往後的人生?套用一萬小時理論,我這一生還能專精多少事?
2025/08/10
身為一個半資深職場工作者(aka 對20幾歲的人來說算阿姨,對50歲的人來說算年輕人的尷尬年紀)最近對於因工作而痛苦的小小體悟。「不怕吃苦的你會得到很多苦吃」。
2025/08/10
身為一個半資深職場工作者(aka 對20幾歲的人來說算阿姨,對50歲的人來說算年輕人的尷尬年紀)最近對於因工作而痛苦的小小體悟。「不怕吃苦的你會得到很多苦吃」。
看更多
你可能也想看
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
進入科技教育產業已滿一年。因為團隊精簡,每堂課替換時間又快又急。在編寫課程介紹頁面時,對受眾和痛點的描述不夠精準。本文提供了市場中自己喜歡且訴求精準的課程分析作為研究素材,希望未來能更精準地規劃課程介紹頁面內容。
Thumbnail
透過案例分析,探討舊網站改版的必要性和目標,以及成功改版的關鍵包括網站設計、功能優化、SEO優化、響應式設計和內容優化。
Thumbnail
透過案例分析,探討舊網站改版的必要性和目標,以及成功改版的關鍵包括網站設計、功能優化、SEO優化、響應式設計和內容優化。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這篇文章描述了作者從兼職開發轉為全職開發的過程,並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想,最後分享了專案管理和敏捷開發相關的文章與影片。
Thumbnail
這篇文章描述了作者從兼職開發轉為全職開發的過程,並分享了從混進學界指日可待的積極態度。作者也提及自己在專案製作與個人生活上的矛盾與感想,最後分享了專案管理和敏捷開發相關的文章與影片。
Thumbnail
透過瞭解客戶獨特的需求和目標,以及專業的故事講述和引人入勝的內容,我們將為客戶重新打造一個影響力的網站,符合現今的潮流並具備長久的適用性。
Thumbnail
透過瞭解客戶獨特的需求和目標,以及專業的故事講述和引人入勝的內容,我們將為客戶重新打造一個影響力的網站,符合現今的潮流並具備長久的適用性。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
阿里巴巴虛擬試穿技術 / UXtools 2023 年度調查 / 麥當勞新品牌-CosMc's / Adobe 2024 創意趨勢報告 / 日本流行色協會 2024 年度色彩
Thumbnail
阿里巴巴虛擬試穿技術 / UXtools 2023 年度調查 / 麥當勞新品牌-CosMc's / Adobe 2024 創意趨勢報告 / 日本流行色協會 2024 年度色彩
Thumbnail
在 cacaFly 聖洋科技的協助下,威剛科技重新梳理顧客體驗流程,並導入 Infobip 全通道顧客互動平台,不只落實分眾溝通,更提高專案活動 EDM 開信率,有效提高行銷作業效率。
Thumbnail
在 cacaFly 聖洋科技的協助下,威剛科技重新梳理顧客體驗流程,並導入 Infobip 全通道顧客互動平台,不只落實分眾溝通,更提高專案活動 EDM 開信率,有效提高行銷作業效率。
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
Thumbnail
在當今數位化時代,網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象,還是個人展示創意作品,一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局,更包含了使用者體驗(UX)、使用者介面(UI)和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進,網頁設計已經
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News