【Day 25】我已經淪落到要 Vibe Coding 工具幫我寫文章了嗎⋯⋯

▲ 圖 1：GitHub Pages 的部署～你懂了嗎？Midjourney 示意圖

話說參加 iThome 鐵人賽的時候，
往往會遇到一個困境是：
Markdown 格式文章寫作，如果不用的話，
可能在閱讀方面會覺得文章很難看，
不過說起 Markdown 格式，
這也算是程式代碼吧！？
所以也能夠 vibe coding 吧！

痛點剖析與日常觀察：從助教課簡報到雙平台排版困境

▲ 圖 2：最近助教課的簡報封面（直播課程資訊：https://www.youtube.com/@ive-iveai）

沒記錯會想到這裡去是因為最近在規劃助教課簡報的時候，有發現一種更加簡單 vibe coding 出穩定頁面，然後不會像 Google site 嵌入 vibe coding 單一程式代碼，但卻有讓手機跑太熱的問題出現，因此深入說明如何簡單建立 GitHub Pages 的部分，甚至這次 vibe coding 的工具就只是簡單的用 Gemini！？！？

做好出來的簡報，我已經有點不想再用自己的文字重新用文章的形式寫一次了，甚至寫完之後會因為不同的平台，需要把文字交給 vibe coding 工具安排用最好的 md 格式或者 html 格式呈現，所以這次不如⋯⋯

就把簡報丟給 vibe coding 工具！讓他幫我寫文章吧！（已經懶到這個地步了嗎⋯⋯）

簡報的內容其實主要圍繞著我們學校的生成式 AI 課堂作業「vibe coding 出一個 GitHub pages」，因為考慮到課堂當中有很多學生可能都沒有嘗試過 vibe coding，更沒有使用過 GitHub，所以助教課通常都會安排助教們針對上一周的作業進行更加深入的講解。

Vibe Coding 破局解法：生成式 AI 助教課的實戰四部曲

在助教課的實戰教學中，引導完全沒有程式背景的學生建立頁面，標準流程就會是：

1. 先展示用 Gemini vibe coding 出 spec 規格書、html、css、js 的指令跟效果
2. 實作 GitHub 建立 repo，把 Gemini 的 coding 產出貼上，設定 GitHub Pages
3. GitHub 上傳素材 assets 資料夾的步驟現場示範，也建議說可以用 AI 產出的內容豐富頁面
4. 放幾個範例給學生們參考

跨媒介教學成果安利：從校園工作坊到實體 AI 終局攻防戰

▲ 圖 3：克里艾提夫研究所官方網站發布的各種情報專欄文章

因為自己也有在經營一個工作室的緣故，那個工作室的網頁如果要發佈文章的則會是 html 格式。絕大多數時候也會感覺自己的簡報也是自己 AI 教學事業的一種產出，就會把簡報一并上傳到網站跟寫文章推廣！

對了！這邊還是要安利一下，雖然自己是個學生：但是過往便舉行過一些工作坊，還有參與過 AI 教學的工作了，包括但不限於：

▲ 圖 4：國立政治大學 AIGC 創客工房（立體模型篇）工作坊簡報封面

• 🐾 國立政治大學 AIGC 創客工房（立體模型篇）工作坊：
  引導學員透過生成式 AI 與 3D 模型創作跨界融合。
  🔗 簡報連結：點此查看 Canva 簡報

▲ 圖 5：國立政治大學 呆一布共學實驗室讀書會 AIGC 虛實應用／開源改造／開發板應用簡報封面

• 🐾 國立政治大學 呆一布共學實驗室讀書會 AIGC 虛實應用／開源改造／開發板應用：
  聚焦開源硬體改裝、開發板結合生成式 AI 的多元落地探索。
  🔗 簡報連結：點此查看 Canva 簡報

▲ 圖 6：放伴教育協會 AI 培力活動《AI 終局攻防戰》AI Endgame Battle 網頁頁面

• 🐾 放伴教育協會 AI 培力活動（三芝國中及八里國中）：
  負責小組的負責任 AI 教學用桌遊／網頁教材《AI 終局攻防戰》（AI Endgame Battle）。
  🔗 專案連結：點此查看專案詳情

偶爾在自己工作室的網站就是用 html 形式寫一些文章是關於這些教學活動的（說起來最近還有國立政治大學 Soobi 社團的 micro:bit 教學，但是這個就偏 STEAM 了）。所以就變成其實不單單是這次 iThome 鐵人賽自己需要寫特殊格式的文章，自己的工作室網頁也是。

核心 Prompt 模組：打造專屬 Skill，雙格式自動轉譯

所以就經常需要用到 vibe coding 工具把我原本寫好的文稿，變成相應格式。當然我已經開始忘記我有沒有介紹 skill 了。對於自己的 vibe coding 工具，特別是有 AI Agent 的，可以幫它設計一個 skill：

Prompt：請幫我建立一個 skill，每次把我輸入的文章轉化為 md 格式以及 html 格式。如果是 md 格式的話請幫我遵從（https://ithelp.ithome.com.tw/markdown 這個網頁的內容直接複製貼上）這樣子的規矩。如果是 html 的話請幫我用「XXXXX研究所」（這邊大家可以切換為各自的人設或者身份）的第一人稱角度寫出我的文章，並且不能過渡偏離我的文章意思以及不要修改太多文字，只是因應檔案格式的形式美化排版及做調整。

💡 提示：以上內容直接複製即為標準 Prompt！

建立起 Skill 之後，以後只要把文章丟給 vibe coding 當中的 AI，他就能夠把文章轉譯成為可以上載文章的程式代碼，並且通常排版好的形式會比起沒有做任何 md/html 美化編輯的好看一點。

科技管理與反思：堅持親手撰寫與「防扭曲」的創作哲學

▲ 圖 7：就算是 Day 25 的文章在 Google 文件上也扎實寫了 2,576 字！

這是我這段時間寫鐵人賽文章的秘技！但還是事先聲明，我幾乎每一次的文章都用 Google 文件先打過一次，並且真的幾乎每次都破千字，有時候離譜的 3000-4000 字也有可能，也是因為看見 vibe coding 工具有時候會扭曲我那些文字的意思，所以才會強調不要修改太多文字及過渡偏離我的文章意思，要不然的話真的太辛苦了，別人可能會覺得是 AI 生的，但實質上我每天都用各種不同的領域以及角度精心寫出人文 x 科技的文章。

話說我會因為這些文章所以獲得一些教育工作的合作機會？絕對沒有信心的說！但是作為一個重視科技普及的人的角度來看，我會願意我手頭上的知識垃圾能夠公開給大家看看，衝擊一下大家大腦（去到自暴自棄的程度了）⋯⋯

• 🔗 iThome 外傳文章：點此查看 iThome 鐵人賽外傳文章
• 🔗 克里艾提夫研究所 HTML 文章：點此查看克里艾提夫研究所官方發布專欄

📌 本篇重點整理