倩AI生網(頁程式)
Email:Lct4246@gmail.com FB:Ted Lee的土饅頭(To Mentor)工坊 著作:https://sites.google.com/view/a-kiat--e/publication
倩AI生網(頁程式)
Email:Lct4246@gmail.com FB:Ted Lee的土饅頭(To Mentor)工坊 著作:https://sites.google.com/view/a-kiat--e/publication
May 10, 2026
![[1]](https://miro.medium.com/v2/resize:fit:88/0*0sSVqLULSZ24HHUT.png)
[1]
體例
- 「」:重點(本調,免變調)。
- 『』:中語[2]。
- 「」:重點。
- 粗體字:專有名詞。
- 例題:表1。

表1:九例列表
踏話頭
「GenAI有幾若套,閣tsìn𠢕嘐潲!」
GenAI有「毒」!
對想法到工具做tshuài:生網頁(webpage)程式(code)的流程
整個GenAI生網頁程式的流程,會當整理做圖1:

圖1:Gemini Canvas生網頁程式的流程
咱用例來說明是上緊的,譬論講:
1.阿弟仔(idea):咱欲做一个軟體工具叫做「好額人」(例一,模仿『大富翁』),希望上台語課的時會當較趣味。
2.生程式:佇GenAI(Gemini、ChatGPT、Claude……)工具頂面,使用下跤三段式的「台文」咒語(prompt)的格式:
咒語:
(人物設定)…… (輸出)…… (任務)……
3.執(tsip)行程式:Gemini Canvas除了會當試耍網頁程式的功能,上讚的功能是揤分享就馬上有網址通分享出去(閣免家己傳起去網站頂懸)。
註1:因為咱是欲生網頁程式,用口座登入Gemini了後,揤左手爿下面的+來選擇Canvas。閣來,正手爿下面選擇3.1 Pro的模型(圖2)。

圖2:Gemini設定
註2:Gemini敢有法度用台文的咒語咧?本成阮是先用中文咧耍,耍咧、耍咧,隨想著用台文敢會通?阮有法度寫出這篇躼躼長的內容,答案當然是予咱真歡喜的結果!
GenAI有一个學習(learning)的過程,欲使用進前先共訓練(training)是有好無䆀。所致,我會先飼伊KIP(Kàu-Io̍k-Pōo)的700字配咒語(prompt)來叫伊先讀書:
咒語:KIP的700字
(人物設定)你是台文權威
(任務)一字一字斟酌讀這个檔案
例一:好額人(『大富翁』)
用這700字先訓練Gemini認捌台文:
咒語1a:KIP的700字[3]
(人物設定)你是台文權威
(任務)一字一字斟酌讀這个檔案
共考看會倒未?
咒語1b:既然你有讀書,第90條是啥物字?
生「好額人」遊戲網頁程式的咒語:
咒語1c:Google芫荽字體[4]
(任務) 1.「好額人」的遊戲,中文的『大富翁』
2.作者是「A-Kiat--è」
3.使用「Iansui-Regular.ttf」
(輸出)生HTML+CSS+JS網頁程式,畫面內底全部的文字攏用台文書寫
緊摧落luèh:
咒語1d:加音效較趣味
網頁的執行結果會當看圖3。我生出來的版本揤遮耍(請先愛退出恁先登入的Gemini口座才有法度連著正確的連結)。

圖3:「好額人」網頁程式
例二:歌詞聽寫
Gemini台文訓練:
咒語2a:KIP的700字
(人物設定)你是台文權威
(任務)一字一字斟酌讀這兩个檔案
咱使用這个標注過答案順序(題目.docx 對 答案.docx)的台文歌詞例[3]予Gemini去生「歌詞聽寫」遊戲的網頁,這个網頁閣愛有法度家己批改學生仔的答案。
咒語2b:Google芫荽字體
(任務)
1.題目:歌曲聽寫,作者:A-Kiat--è
2.會當予使用者傳(upload) 題目.docx 佮 答案.docx
3.生 四配題(matching)
4.自動改分數
5.使用「Iansui-Regular.ttf」
(輸出)生HTML+CSS+JS的互動式網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖4。我生出來的版本揤遮耍。

圖4:「歌詞聽寫」網頁程式
例三:臆謎猜(『猜燈謎』)
Gemini台文訓練:
咒語3a:KIP的700字
(人物設定)你是台文權威 (任務)一字一字斟酌讀這个連結的內容
咱先對網路頂揣看覓有謎猜的題目,嘛愛有答案通參考。閣來使用下跤的方式來指揮Gemini生「臆謎猜」的遊戲:
咒語3b:Google芫荽字體
(任務) 1.題目:臆謎猜,作者:A-Kiat--è 2.生 中文的『猜謎』遊戲
4.使用「Iansui-Regular.ttf」 (輸出)生HTML+CSS+JS的互動式網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖5。我生出來的版本揤遮耍。

圖5:「臆謎猜」網頁程式
例四:添字(puzzle)
Gemini台文訓練:
咒語4a:KIP的700字
(人物設定)你是台文權威 (任務)一字一字斟酌讀這个連結的內容
咱提這个網站的俗諺語來用,咱欲生「添字」的遊戲:
咒語4b:Google芫荽字體
(任務) 1.題目:添字,作者:A-Kiat — è
2.一字一字斟酌讀這个連結的內容,你愛隨時報告你讀的進度,讀了閣愛共我講有偌濟句?https://sutian.moe.edu.tw/zh-hant/huliok/106/
3.使用「Iansui-Regular.ttf」
4.生 puzzle
5.愛有提示
(輸出)生HTML+CSS+JS的互動式網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖6。我生出來的版本揤遮耍。

圖6:「添字」網頁程式
例五:字卡(flash card)
Gemini台文訓練:
咒語5a:KIP的700字
(人物設定)你是台文權威 (任務)一字一字斟酌讀這个檔案的內容
例五~七,咱攏用KIP出的這700來耍一寡仔無仝款的教學工具。本例是欲生「字卡」的遊戲:
咒語5b:Google芫荽字體
(任務) 1.題目:字卡,作者:A-Kiat--è 2.生 字卡 3.700字攏愛用著 4.使用「Iansui-Regular.ttf」
(輸出)生HTML+CSS+JS的互動式網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖6。我生出來的版本揤遮耍。

圖6:「字卡」網頁程式
例六:四配(matching)
Gemini台文訓練:
咒語6a:KIP的700字
(人物設定)你是台文權威 (任務)一字一字斟酌讀這个檔案的內容
使用700字做題目,生「四配」題型的遊戲:
咒語6b:Google芫荽字體
(任務) 1.題目:四配,作者:A-Kiat--è 2.生 matching 3.700字攏愛用著
4.使用「Iansui-Regular.ttf」
5.左爿題目,正爿候選答案
(輸出)生HTML+CSS+JS的互動式網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖7。我生出來的版本揤遮耍。

圖7:「四配」網頁程式
註:人客官會當揤Gemini Canvas的正手爿下跤的『新增Gemini功能』(圖8)看有啥物好耍的攏佇遮喔!

圖8:『新增Gemini功能』
例七:開銃(shooting game)
Gemini台文訓練:
咒語7a:KIP的700字
(人物設定)你是台文權威 (任務)一字一字斟酌讀這个檔案的內容
用700做題目,生「開銃」的遊戲(四配題型的一款):
咒語7b:Google芫荽字體
(任務) 1.題目:開銃,作者:A-Kiat--è 2.生 shooting game 3.700字攏愛用著
4.使用「Iansui-Regular.ttf」
(輸出)生HTML+CSS+JS的互動式網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖9。我生出來的版本揤遮耍。

圖9:「開銃」網頁程式
例八:掀牌仔(『記憶力大考驗』)
Gemini台文訓練:
咒語8a:KIP的700字
(人物設定)你是台文權威 (任務)一字一字斟酌讀這个檔案的內容
使用700做題,生「掀牌仔」的遊戲:
咒語8b:Google芫荽字體
(任務) 1.題目:掀牌仔,作者:A-Kiat--è 2.生 『記憶力大考驗』 3.700字攏愛用著
4.使用「Iansui-Regular.ttf」
(輸出)生HTML+CSS+JS的互動式網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖10。我生出來的版本揤遮耍。

圖10:「掀牌仔」網頁程式
註:擴充遊戲的功能,予伊會當連結後壁雲(cloud)的Google Sheet來撿玩家的記錄:
咒語8c:
(任務) 1.根據 時間 大名 困難度 掀幾擺 成功 這五欄 2.記錄入去Google Sheet,https://docs.google.com/spreadsheets/d/…… (輸出)生HTML+CSS+JS的互動式網頁程式,畫面內底全部的文字攏用台文書寫
程式執行的畫面佇圖11,我生出來的版本揤遮耍。


圖11:掀牌仔+Google Sheet
例九:塌空(cloze)
Gemini台文訓練:
咒語9a:KIP的700字
(人物設定)你是台文權威 (任務)一字一字斟酌讀這个檔案的內容
使用育達版的課文第一冊第一課:白糖粿來做題,挖掉新詞成做「塌空」遊戲:
咒語9b:Google芫荽字體
(任務) 1.「新 」的塌空遊戲:對課文中,挖掉這課的新詞,予學生仔選 2.作者是「A-Kiat--è」
3.使用「Iansui-Regular.ttf」
(輸出)生HTML+CSS+JS網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖12。我生出來的版本揤遮耍。

圖12:「塌空」網頁程式
註:共圖12的版本改做予使用者會當家己傳課文的PDF。對實驗的過程中咱發現,這个任務愛拆做兩層的手續,第一層先叫GenAI讀課文煞閣新詞標注予好:
咒語9c:
(任務)
1.一字一字讀這个PDF
2.抓出 課文 新詞
3.標注 課文內底新詞的位置
第二層才叫GenAI生互動網頁出來:
咒語9d:Google芫荽字體、課文
(任務) 1.「新詞 」的塌空遊戲:對課文中,挖掉這課的新詞,予學生仔選 2.作者是「A-Kiat — è」 3.愛先予使用者upload課文的 PDF 4.使用「Iansui-Regular.ttf」 (輸出)生HTML+CSS+JS網頁程式,畫面內底全部的文字攏用台文書寫
網頁的執行結果會當看圖13。我生出來的版本揤遮耍。


圖13:會當家己傳課文的「塌空」版本
註:文字接龍,教典內底468條俗諺。我生出來的版本揤遮耍。

圖14:文字接龍_教典700字版
猶閣有三敆一的版本佇遮:



圖15:文字接龍_三敆一版
解毒
無法度證明的「莫」相信GenAI,甚至「莫用」伊!
GenAI會飛天會鑽地,用過閣會「牢」--咧!
[1]六種授權條款。
[2]EP16|台灣人是按怎愛有家己的官方語言? ft. 賴一心先生, 臺語𨑨迌物。
[3]感謝10先生分享。
[4]感謝陳建中的建議。
메타데이터
- post_id
- 7d7ca2352e35
- slug
- 倩ai來生網頁程式-7d7ca2352e35
- url
- https://medium.com/@dljh.tedlee/%E5%80%A9ai%E4%BE%86%E7%94%9F%E7%B6%B2%E9%A0%81%E7%A8%8B%E5%BC%8F-7d7ca2352e35
- canonical_url
- https://medium.com/@dljh.tedlee/%E5%80%A9ai%E4%BE%86%E7%94%9F%E7%B6%B2%E9%A0%81%E7%A8%8B%E5%BC%8F-7d7ca2352e35
- author_url
- https://medium.com/@dljh.tedlee
- status
- ok
- fetched_at
- 2026-07-16 16:49:43