【校園 AI 網頁設計課程】新竹湖口高中 3 小時 AI 網頁設計課

 【校園 AI 網頁設計課程】新竹湖口高中 3 小時 AI 網頁設計課圓滿落幕

感謝茶米老師的引介，以及湖口高中胡老師與陳老師的邀請，我來到新竹湖口高中，帶領一群完全沒有程式背景的高中生，展開了一場為時三小時的『AI 輔助個人網頁設計與雲端發布』實戰工作坊。

傳統程式課常受限於繁瑣語法與環境安裝，但這堂課我們翻轉了思維！透過 Vibe Coding 與 Gemini AI 協同開發，學生不必死背語法，而是像專案經理般用自然語言引導 AI 創作。

💡 3 小時內的成果
學生們完成了完整的網頁開發流程（Plan ➔ Design ➔ Implement ➔ Debug ➔ Host）

AI 提示詞工程：掌握 IPO / RTF 框架，用白話文清楚表達需求。
UI/UX 與美學：利用 Stonez56 色彩探索家與 Coolors，挑選專屬主題色。
GitHub Pages 雲端發布：免指令操作，直覺上傳專案至雲端。

🎯 為什麼需要這門課？

零阻力學習：免安裝 IDE，讓學生從「害怕程式」變成「享受創造」。
成果導向：每位學生課後擁有專屬公開網站，並能請 Gemini AI 生成學習歷程初稿。
資安與隱私：以吉祥物與主題素材取代個人照片，保障學生安全。

🤝 邀課合作
想為學生帶來跨越 AI 與設計的創新體驗？歡迎高中、大專院校或教育機構私訊粉專洽詢。

最後再次感謝茶米老師（黃信溢）的推薦！

感謝湖口高中教務處張主任, 湖口高中姜校長, 及陳老師合影!【校園 AI 網頁設計課程】新竹湖口高中 3 小時 AI 網頁設計課圓滿落幕

感謝茶米老師的引介，以及湖口高中胡老師與陳老師的邀請，我來到新竹湖口高中，帶領一群完全沒有程式背景的高中生，展開了一場為時三小時的『AI 輔助個人網頁設計與雲端發布』實戰工作坊。

傳統程式課常受限於繁瑣語法與環境安裝，但這堂課我們翻轉了思維！透過 Vibe Coding 與 Gemini AI 協同開發，學生不必死背語法，而是像專案經理般用自然語言引導 AI 創作。

💡 3 小時內的成果
學生們完成了完整的網頁開發流程（Plan ➔ Design ➔ Implement ➔ Debug ➔ Host）：

AI 提示詞工程：掌握 IPO / RTF 框架，用白話文清楚表達需求。
UI/UX 與美學：利用 Stonez56 色彩探索家與 Coolors，挑選專屬主題色。
GitHub Pages 雲端發布：免指令操作，直覺上傳專案至雲端。

🎯 為什麼需要這門課？

零阻力學習：免安裝 IDE，讓學生從「害怕程式」變成「享受創造」。
成果導向：每位學生課後擁有專屬公開網站，並能請 Gemini AI 生成學習歷程初稿。
資安與隱私：以吉祥物與主題素材取代個人照片，保障學生安全。

🤝 邀課合作
想為學生帶來跨越 AI 與設計的創新體驗？歡迎高中、大專院校或教育機構私訊粉專洽詢。

最後再次感謝茶米老師（黃信溢）的推薦！

感謝湖口高中教務處張主任, 湖口高中姜校長, 及陳老師合影!

2026-08-05 AI Coding + Vercel 雲端佈署課程!

2026'8/5 再次感謝元培醫事科技大學吳院長邀請, 讓有有機會和大家分享 AI Coding + Vercel 雲端佈署課程! 

 "教師雲端部署與 PulseAI 課堂應用工作坊" 圓滿落幕 

這次的實作課程真的太有成就感了！參與的教授與老師們不僅打破了「寫程式與網頁部署很難」的刻板印象，更在短短的課程中，完成了兩大超級任務：

🌐 任務一：成功把自己的第一個網站部署至 Vercel 雲端平台！

許多老師原本沒有網頁部署的經驗，但在一步步實作下，當看到專屬自己的網址成功上線、能用手機點開的那一刻，現場充滿了驚呼與滿滿的成就感！

📊 任務二：手把手打造「PulseAI」智慧課堂互動 App！

這是一款專為現代課堂設計的線上問卷與互動工具，老師們可以在課堂上：

✨發起即時點名與學習理解度測驗

✨收集學生的匿名反饋與提問

✨促進雙向交流，讓課堂氣氛更活潑

💡「最好的教學，就是先成為終身學習者。」

看到老師們親手將最新的 Web 技術與 AI 應用帶入未來的教學場域，真的非常佩服大家的學習熱情與行動力！

老師們在課堂上最喜歡用什麼互動工具呢？歡迎在下方留言交流討論喔！👇

#教育科技 #Vercel #PulseAI #教師研習 #線上教學 #數位轉型 #課堂互動 #教學創新 #元培大學 #stonez56 #stonez56創客工坊 

GitHub 上的專案直接導入 AI Studio

最近 AI Studio 改版了, 據說可以把 GitHub 上的專案直接導入...哇..這功能是論壇上大家一直想要的功能呢...Google 終於做出來了!! 😊

於是我就把我以前用 PHP 做的 webCounter 網頁瀏覽計數器給導入試看看!!

webCounter 網頁瀏覽計數器 - 是一個全方位的基本網站計數器, 幫你計算有多少人瀏覽, 像我分享過很多自己開發的免費網站, 就能知道有多少人來使用~😊

因為我的 AI Studio 系統提示詞有提到要:

**前後端分離**：前端 (React/Vue/Svelte) 與後端 (Node.js/Python/FastAPI) 必須透過 API 層交互

- **Serverless 優先**：Vercel / Cloud Run / Firebase Functions 作為預設部署方式

沒想到, 它就把 PHP 改寫成 Full stack App! 哈...不只能導入專案, 還能把它給進化...也太厲害了~ 以前我只有寫出 API command, AI Studio 還把整個 API 測試也包到管理的網站裡了~ 👍 

我的第一片用 AI 設計 PCB 冒險 - 終於成功了!!

我的第一片用 AI 設計 PCB 冒險 - 終於成功了!!

但是, 我最後還是請專業的來...😅才完成的! 因為, AI 會跟你說, 沒問題了, 可以送洗了... 結果我送洗兩次都失敗了! 我的 $$ 🥲

或許是我要的功能有點複雜, 又要 USB-C 供電, 又要它充電, 拔掉 USB-C 時, 又要能從鋰電池供電, 全部要設計在電路上. 能插拔的只有 ESP32-C3, 0.96" OLED, MPU-6050 6軸感應器. AI 也許也跟我提醒了, 可能我無法了解~😅

經過這一次用 AI 來設計 PCB 的實驗, 只能說, 如果你真的要使用 AI 來幫助設計 PCB 最好本身對電子電路設計有一定的概念, 拿 Vibe coding 那一套來設計 PCB 基本上行不通 (個人感受)!

你也試過使用 AI 來設計過 PCB 設計嗎? 歡迎和大家分享~

2026-07-10 現在可以把 GitHub 專案, 導回到 AI Studio 裡!!

 以前我們只能夠把寫好的Google AI Studio程式推送到 GitHub上面儲存. 無法把 Github 的專案導入到 AI Studio 專案裡! 這樣子就造成了我只能夠在 AI studio裡面改變更有的專案, 當我的專案發生了重大的問題, 無法由 GitHub下載回來, 覆蓋專案重新開始做....但是從今天開始你可以囉!!

在AI Studio裡面打開一個新專案, 再按對話框底下這個加號再選擇 Import from GitHub就可以了!😊

⭐平時就養成好習慣, 做到一個段落就把程式推到 GitHub 上面, 這樣子就不怕AI程式改錯又救不回來! 我們隨時可以有 GitHub導回到AI Studio來繼續做這個專案!

把 AI Studio 專案推到 GitHub 去儲存

現在可以把 GitHub 專案, 導回到 AI Studio 裡 👍👍

健康促進 - 以 AI Coding 製作喝水提醒裝置

 昨天 7/3 受楊老師與黃組長邀請，到嘉義女中擔任新興科技活動講師！這次的主題是「健康促進」。經過幾天思考，我決定以 AI coding 製作一個「喝水提醒裝置」作為示範。

過去在竹科公司擔任產品經理時，總希望把每件事做到最好。這次也不例外——從電子零件的選擇、軟體撰寫、EasyEDA 畫電路圖與拉線、送板、除錯，到 3D 圖檔繪製與列印，全都自己嘗試搞定。

當然，過程中也遇到不少「意外」：一開始用 AI 幫忙畫電路圖，結果送洗兩次都無法使用..我的 $$$🥲；最後還是找了一位 Freelancer 協助，付出一筆費用，才終於完成。歷經三個月，這個裝置總算誕生了！這也讓我更清楚，AI 雖然能提供靈感，但要畫好一片 PCB，還是需要專業的經驗。

學生透過這個裝置，可以學習 Arduino/ESP32 的基本知識，並認識到裝置上使用的各種元件：RGB LED、ESP32-C3、MPU6050 六軸感測器、SSD1306 顯示器等。每個元件我都設計了兩到三個實作範例，並鼓勵學生自行發想不同應用方向，激發創造力！

如果您對這套「AI coding + Arduino 實作課程」也有興趣，歡迎與我聯絡，一起探索更多可能性！😊

#stonez56 #Stonez56創客工坊 #智慧喝水管家 #喝水提醒裝置 #Arduino手作課程 

台北城市科大 AI 智慧開發課程

 昨天很榮幸受邀到臺北城市科技大學，以 AI 智慧開發 為主題進行授課。工程學院黃院長親自跟我介紹校園環境，依山傍水，窗外即可遠眺觀音山與新落成的淡江大橋，真的是好山好水、令人心曠神怡。

這次課程主要分享如何運用 Google Antigravity IDE 2.0 快速進行 AI coding，對象是機械工程系、電機工程系、資訊工程系以及電腦與通訊工程系的老師與教授們。經過三個小時的交流，大家對 AI Coding 已建立了清晰的概念。

我也介紹了自己開發的研究小幫手——文獻矩陣生成器，並展示完整的開發流程，最後提供我製作的文獻網站給老師們試用。

這次的分享收穫滿滿，也感受到師生們對 AI 技術的高度興趣。期待未來還有機會再次到城市科大與大家交流！

最後還要感謝謝茶米老師(黃信溢)推薦!! 茶米老師教室😊

#ai教學 #aicoding #stonez56 Stonez56 創客工坊 

[辦公室自動化靠AI - 會議室預定] - AI Coding 的核心價值

 如何將一個混亂的手寫預約場景，轉化為具備衝突檢查、品牌客製化與雲端即時同步的專業系統? 這背後代表的不僅是技術的落地，更是管理權力的重新分配。

為什麼小公司老闆最需要 AI？因為你沒有大企業的預算去請一整排行政櫃檯，但你卻可以擁有無限個數位員工。我們展示了 AI Coding 的核心價值：它將複雜的程式語法隱藏起來，只留下純粹的邏輯與需求對話。當你掌握了這套對話技巧，你就不再是一個被動使用軟體的老闆，而是一個能根據市場變化、隨時定義新工具的「數位廠長」。

在 AI Studio：AI Coding 實戰班 裡，我們不僅提供這套會議室系統的完整原始碼與佈署教學，更重要的是，我們會培養你指揮 AI 的「架構師思維」。未來無論是客戶管理、自動報價還是流程追蹤，你都能用同樣的邏輯一通百通。

#數位轉型實戰 #AI創業 #未來工作力 #Stonez56 #老闆進修 #自動化流程 #AIStudio #ai #aistudio #gemini #aicoding #vibecoding

我的 PCB(電路板) 初體驗 - 做出一個 Prototype 了... 會不會動...不知道

看到這個很開心~~ 😊

我決定挑戰一個對新手來說充滿門檻的任務：親手設計一片屬於自己的專用電路板!

但我並非孤軍奮戰，我找了 Gemini 當我的 24 小時貼身助教 🙂。這幾天下來，我們在電路世界裡進行了一場「腦力與邏輯」的馬拉松! 過程常常因為找不到 Gemini 提到的功能, 選單很沮喪, 真的快想砸掉電腦~~ 哈.. 但我撐過來了~

接下來, 我會花幾天的時間, 把這過程寫一下, 做的記錄~
想看更詳細的踩坑記錄和實體開箱嗎？歡迎在 FB 追蹤我並加入我的社群，我會持續更新這場 Maker 冒險！😊

哈.. 我沒放棄 AI 教學啦...Gemini, Antigravity, 雲端佈署, AI 簡報學...想學的可以找我!! 😅

#Maker #PCB設計 #ESP32 #電路板DIY #創客 #Ai
#AI助教Gemini #EasyEDA實戰 #AIcoding #vibecoding #stonez56
 👉 想看更詳細的踩坑記錄嗎？歡迎在 FB + 我的 FB 社團追蹤我，我會持續更新這場 Maker 冒險！

[辦公室自動化靠AI - 會議室預定] -用 Google Sheets 做雲端服務

對於預算有限的小型企業主來說，穩定且易用的「雲端同步」是數位轉型最重要的一環。如果你開發的系統只能存在於某台電腦的硬碟裡，那它充其量只是一個電子化的登記簿；但當它能與雲端試算表連動，它就變成了一套具備擴充性的管理平台。

讓網頁與試算表「跨空對話」的秘訣。我們會深入淺出地介紹資料存取與配置流程。老闆們不需要學習高深的網路通訊協定，我們會展示如何利用 AI 撰寫一段簡單的指令，將網頁表單接收到的預約詳情，像發簡訊一樣傳送到 Google Sheets 的後台。

這意味著老闆可以利用自己最熟悉的介面（Excel/Google Sheets）進行後續的統計。在 AI Studio 課程中，我們會提供完整的配置步驟，從獲取 API 金鑰到設定雲端權限，教你如何像蓋積木一樣，把公司的數據地基穩穩地扎在雲端上。這種架構的好處在於：即使網站前端壞了，你的原始數據依然安全地存放在 Google 的伺服器中，讓小老闆也能擁有大企業等級的資安防禦與備援思維。

[辦公室自動化靠AI - 會議室預定] - Day3

[辦公室自動化靠AI - 會議室預定]

很多老闆問我：自己蓋的系統，會不會看起來很陽春？事實上，專業感的秘訣在於那些被精準掌控的細節客製化。在 AI Studio：AI Coding 實戰班 裡，我不僅教你功能，更會教你如何指揮 AI 建立一個專屬的翻譯官介面。

你可以隨心所欲地把冰冷的 "送出" 按鈕改成更親切的確認預約之類的...。不需要額外聘請專業的 UI 設計師，身為老闆的你，只要會說話，就能隨時更動文字、調整品牌配色。讓你的客戶在進入預約系統的第一秒，就能感受到如矽谷科技公司般的流暢與專業質感，這就是小公司建立大品牌信任感的捷徑！

想要了解如何用 AI 調教出高質感系統介面的朋友，請留言 『+56』 

[辦公室自動化靠AI - 會議室預定] Day 2

2026 年最貴的成本往往源自於那些「管理上的低級錯誤」。試想一下，當你費盡心思邀請的重要貴客親臨公司，你卻得在會議室門口，當著客人的面跟員工尷尬地爭論誰才是先訂房的人？這不僅僅是當下的難堪與無禮，更是在客戶心中種下了「這間公司連內部行政都管不好，如何能託付大型合作案」的負面種子。這種對公司品牌可靠度的打擊往往是致命的，甚至會直接影響到後續的成交率。

 

終結搶房糾紛的底層邏輯。身為老闆，你完全不需要去背誦苦澀的程式碼或理解深奧的數學公式，你只需要理解『區間重疊』這個直觀的視覺概念。這就像是兩塊在時間軸上的數位積木，只要它們的邊界有任何交錯或部分重合，系統就應該將其判定為衝突。這種比對工作對人類大腦來說極其耗神且容易遺漏細節，但對 AI 來說卻是瞬間即可完成的基礎任務。你只需要用平時交辦任務的語氣清楚告訴 AI：『如果有人預約的時間跟別人重疊了，不管是重疊一分鐘還是一個小時，請立刻跳出警告並擋下預約。』AI 就能根據你的指令，精確產出這套判斷邏輯。在 AI Studio 課程中，我們會提供具體的對話截圖與指令範例，展示如何把老闆的商業直覺，轉化為系統 24 小時不打烊的自動守門員，讓你從此遠離行政紛爭的噩夢。

你上次遇到的會議室尷尬是什麼？😊