Open Source - VCTC

學會Tailwind CSS輕鬆搞定Vibe Coding 版面

Mastering Vibe Coding Layouts with Tailwind CSS
  • 時數：4小時
  • 費用：NT$ 5,000
  • 點數：2.0

選擇查詢分區開課時間

地點 班號 日期 時間 預約

目前查無開課時段

詳細開課時間請洽詢業務
新竹、台中、高雄如有上課需求，請參考台北開課日期，洽當地服務人員依需求加開遠距開課日期

聯絡恆逸

教材

恆逸專用教材

適合對象

對於前端網頁有興趣的開發人員、使用Vibe Coding 深受AI生成版面跑版之苦的人。

預備知識

必須具備電腦基本概念，熟悉Windows平台操作或是使用過 Vibe Coding 寫網頁的人。

課程內容

Vibe Coding核心觀念與AI協作心法

●什麼是Vibe Coding？從單純撰寫程式碼，轉為引導AI協助完成開發

●Tailwind CSS在AI協作中的優勢，上下文效率與原子化架構

●R.T.S.V. 指令架構：透過角色、任務、規格與風格設定，引導AI產出符合需求的結果

●利用Google Stitch，將文字描述快速轉為介面草圖

解構視覺：理解Tailwind CSS的版面結構

●一維與二維佈局：掌握Flexbox與Grid的使用時機與基本概念

●空間美學控制：Padding、Margin與Gap數值系統的規範化

●設計令牌 (Design Tokens)：利用Tailwind規範與AI定義色階與間距標準

●在VS Code中搭配GitHub Copilot，透過精準提示詞檢視UI結構

提升質感：現代UI與互動設計

●視覺風格強化：包含毛玻璃效果、漸層與圓角設計

●互動細節：加入Hover、點擊回饋與過渡動畫，提升操作體驗

●深色模式：實作基礎的dark mode切換與樣式設計

避免版面問題：響應式設計與除錯技巧

●行動優先 (Mobile-First) 逆向邏輯：排除RWD響應式開發常見錯誤

●版面除錯方法：透過邊框標示快速定位問題區塊

●常見問題處理：例如橫向溢出、Flex排版擠壓與圖片變形的修正方法

學會技能

1.理解版面結構，不需自行撰寫大量CSS，也能快速判讀畫面配置，找出問題來源並引導AI進行修正

2.明確下達指令，熟悉R.T.S.V. 架構與Tailwind CSS設計規則，提升與AI溝通的精準度，避免模糊描述

3.穩定版面與響應式調整：掌握Mobile-First的設計原則，並能處理常見版面問題，如橫向捲動與圖片變形

4.模組化重構能力：引導AI將大型且複雜的程式碼拆分為結構清晰、易於維護的前端元件

備註事項

1.上課使用Windows平台

2.本課程使用Visual Studio Code + GitHub Copilot為主要開發工具

3.必須申請GitHub Copilot帳號 ( https://github.com/ ，Free可，最好是Pro，GitHub Copilot Pro首月免費 )

4.會使用Google Stitch為UI Design (建議要申請Google Gemini帳號—Free可，https://gemini.google.com/ )

推薦課程