這次參賽文章結構

在職場上，我的工作內容包括：Figma 設計、Nuxt 開發，過程中也會處理一些 GA 埋碼。當進度告一個段落會使用 git 紀錄，最後完成再部署上線。以及需要與非技術同仁溝通、協作...等等。

那麼，該怎麼分享這些技術日常，讓大家更直觀的理解「這些工作項目究竟使用了哪些技術，又或者是日常在做些什麼呢？」🤔

為了讓分享更有參與感，於是規劃在理解基礎後，直接實作一個專案功能，邊做邊參與 🌟！從設計一路到部署，完成一個網站功能的實作流程 ✨，同時也分享了職場中會遇到的工作場景，以及運用到的各種工具。

根據這個方向去思考後，整理完的章節如下：

０２～０８篇 &１０篇：從需求到設計的起點

這幾篇主要聚焦在 專案的前期規劃 & 網頁設計。從溝通客戶需求開始，一路到繪製功能 Wireframe 並介紹 UI／UX 基礎觀念。
過程中實際操作 FigJam & Figma 完成 User Flow → Mockup → Prototype 的設計，以及說明如何閱讀設計稿，幫專案奠定好「切版前的完整準備」。

０９篇 &２８篇：AI 工具的插曲

因應 AI 熱潮，呼應當下職場趨勢，穿插分享在日常工作中使用到的 AI 工具。這兩篇不是談 AI 取代，而是從實務角度說明如何透過像 v0、Copilot 等 AI 工具，來提升開發效率與協作。

１１～１３篇：Vue 核心介紹 & 開發

設計稿完成後，正式進入 Vue 前端開發。從 Vue 基礎語法開始，一步步分享從設計稿轉換成 Vue 元件與檔案結構規劃，為後續進入 Nuxt 打下基礎。

１４～１６篇：LINE 官方帳號與 LIFF 應用

在這個階段，專案新增了 LINE 官方帳號串接。分享 LINE 官方帳號申請流程並使用 Vue 實作 LIFF 範例，提到 LIFF 基本語法與實際應用場景。

１７～２２篇：專案實戰與 Nuxt 進階應用

這幾篇可以說是整個系列的主軸 🎯 —— Nuxt 開發完整專案功能。不只涵蓋畫面與流程的實作，還延伸介紹形象官網中常見的 SEO 優化、API 串接等應用場景，讓專案更貼近真實開發需求。

２３篇 &２７篇：行銷與數據分析的加乘

網站寫得再怎麼優秀，如果沒有行銷策略，產品還是很難被真正需要的用戶看見，單純會開發不夠，把成果推到使用者手中才是關鍵。
這裡分享了 行銷推廣的基礎觀念，以及如何結合 LINE 官方帳號行銷設定 與 Google Analytics（GA）數據分析，幫助形象網站更好地觸及受眾，提升整體行銷成效。

２４～２６篇：版本控制與網站部署

開發專案必然要面對如何做 git 版本控制，以及專案完成後如何做部署上線，讓網站正式對外運作。

２９～３０篇：軟實力與專案回顧

系列的最後，以 軟實力分享 與 專案回顧 作為收尾。做總結與回頭檢視整個專案從設計到開發上線的完整架構，思考工程師在職場中要具備的「硬實力 + 軟實力」。

也歡迎大家回到目錄查看有興趣的章節🤞

心得前小補充：Tailwind CSS vs Bootstrap，怎麼選擇？

以下是我在職場中常使用到的兩個 CSS 框架說明：

Bootstrap

是一套以預定義 UI 元件（例如 按鈕、表單、導航欄、卡片等）為核心的 CSS 框架，在使用上只需要套用少量 class，就能快速建立一致性的排版與元件樣式（例如 在 div 套上 modal 相關 class，就可完成彈窗）。非常適合用於需要快速開發的企業內部系統、儀表板等情境。
簡單來說，適合時程緊湊、需求明確、偏好簡潔統一風格的專案。

Tailwind CSS

是一套以實用優先（Utility-first） 為核心的 CSS 框架，強調靈活性與高度客製化。可以透過大量的 utility class（例如 p-4、outline-pink-700、bg-rose-500 等），讓開發者精準地組合出符合需求的樣式設計，讓畫面更貼近預期效果。雖然相比之下樣式 class 較為冗長，但隨著 Tailwind 生態系的成熟，現在已經有許多現成的 UI 元件庫與模板可以使用，大幅提升開發便利性與效率。

總結來說，Bootstrap 更偏向快速與樣式一致性；Tailwind 更強調自由與美感表現性。
在實務開發中，CSS 框架的選擇其實沒有絕對答案，主要還是取決於專案性質與開發需求，選擇適合的框架才能事半功倍💪。

最後心得

感謝大家耐心地看到這裡♪(´▽｀)
透過這次的鐵人賽，我也趁機把平常使用的技能，與手頭零散的筆記做了一次完整的統整，過程中也學到不少延伸技巧，但我想當然還有很多需要學習的地方，目前也仍在職場不斷磨練中💪。

老實說，一開始在整理參賽內容時真的花了不少時間，加上平日上班 & 加班還要接各種隕石🌚，真的一度差點想棄賽 XD。不過回頭看，能堅持到最後還是覺得很值得！

這次也算是我第一次版本控制一個「全部都是 docs 類別 commit 」的專案，如果好奇什麼是 docs 的commit 規範，可以參考第二十四篇的「常見 Git 提交訊息規範」段落。

如果各位能從某些篇章中獲得哪怕一點點小收穫，那就是我最希望達成的目標之一！
( •̀ ω •́ )✧
這些所見所學，都是我開發中的每個日常，也非常推薦大家把自己的實務經驗統整分享出來，一起來參加鐵人賽！

我們要選擇開始，才能變得很厲害✨。

或許在未來某個時刻，這些文章剛好能幫助到正被技術卡關的朋友，除了使用 AI 我也常靠著逛 iT 邦幫忙來找解法解惑（茶🍵

由衷感謝大家願意花時間看到這裡，下台一鞠躬🙇。

創作聲明

這一系列文章為作者自行發想主題與內容所撰寫，皆以實務經驗與學習過程為基礎，整理撰寫並搭配自身理解方式進行表達。
過程中若有引用或參考公開資源（例如 官方文件、套件連結 等），皆會標註於文章最後「參考資料與延伸閱讀」區塊顯示出處或截圖下方（）內，以尊重原創並提供各位延伸參考，感謝閱讀。 🙏

參考資料與延伸閱讀

⑴ Bootstrap 官方網站來源
⑵ Tailwind CSS 官方網站來源