⛩ One Prompt, One Website ⛩
用一句話
做出旅遊行程
互動網站
不用寫程式 · 不用設計 · 還能放上網路給朋友看
先想一下
做一個放在網路上的網站
你覺得要多久？
一週？一個月？要先學會寫程式？
3 分鐘
下課前你會做出這個
同一份行程 · 兩種樣子
🌐
網頁版
一頁往下滑，每天可以點開收合，每個景點一鍵開 Google Maps。
看範例 ↗
📱
手機 App 版
底部分頁切換、打包清單可打勾、還能「加入主畫面」像真的 App。
看範例 ↗
秘密：兩個的差別，只在「給 AI 的那句話」不一樣。
原理只有這個
你的工作只有兩件事
AI 看懂你的資料，套上設計，輸出一個能跑的網站。
1
準備你的「雜亂行程」
用手機備忘錄裡的行程就好，越口語沒關係。
沒有的話，先用下面這份京都行程練習。
練習素材 · 京都 3 天 2 夜
2
複製這句「魔法 Prompt」
貼到 Claude，把行程接在最後面，送出。
3
看一眼，再用一句話叫它改
Claude 會在右邊直接出現成品。不滿意？不用重來，直接接著講：
配色改成秋天楓葉的感覺
第二天的嵐山改到早上 7 點出發
每天最上面加一句天氣和穿搭提醒
字再大一點，我爸媽要看
🧯 卡住了？ 程式碼斷在一半 → 打「繼續」 ｜ 畫面空白或怪怪的 → 截圖丟回去說「這裡壞了」
想更厲害？
換一句話，變成像 App
同一份行程，改用這句 Prompt。
📱 手機 App 版 Prompt
4
你電腦打得開，
不等於朋友打得開
好消息：一個 HTML 檔的小網站，部署只要拖一下、按一下。
部署 · 兩條路選一條
把網站放上網
路線 A · 最快
⚡ Claude 一鍵發布
- 適合
- 用 Claude 做出來的
- 要做
- 在 claude.ai 按 Publish，不用存檔
- 網址
claude.ai/public/artifacts/…
今天用 Claude 的人，先走 A。想要好記的網址，回家再走 B。其他平台比較在最後一頁。
路線 A · Claude 一鍵發布
按一下，就有網址
- 1點開 Claude 做好的成品（右邊的預覽）
- 2按右上角 Publish（發布）
- 3複製公開連結，先用自己手機打開看看
- 4傳給朋友，對方不用 Claude 帳號也能看
⚠️ 按 Unpublish 收回之後，同一份就不能再發布了，要重做一份。
免費版、Pro、Max 都能用；公司的 Team／Enterprise 版沒有這顆按鈕。資料來源：Claude 官方說明
support.claude.com（
2026/10 查證）
路線 B · Netlify Drop
存檔、拖進去、拿網址
- 1存檔：按下載，或貼進記事本另存，檔名改成 index.html
- 2把它放進一個新資料夾（例如「我的京都行程」）
- 3打開 app.netlify.com/drop，先登入（用 Google 帳號就行）
- 4把整個資料夾拖進大框框，等它給你網址
- 5到設定裡把亂碼網址，改成好記的名字
⚠️ 沒登入就拖：網站會被臨時密碼鎖住，朋友打不開，要註冊認領才行。
Mac 用文字編輯器存檔前，先按「格式 → 製作純文字格式」。
按下發布之前
有網址，就會有人來敲門
- ✓自己用手機打開一次，每個按鈕都點點看
- ✓刪掉不該公開的：護照號碼、訂位代號、住家地址、電話
- ✓知道怎麼收回：Claude 按 Unpublish，Netlify 刪掉那個網站
想做會員登入、收報名、收錢的網站？先看講義〈部署與資安小 Tips〉的上線前 10 項檢查。
今天最重要的一句話
你不是在寫程式，
你是在「描述你要什麼」。
描述得越具體，
AI 給得越準。
這招不只能做旅遊
手邊任何一份「亂資料」，
都能變成一個小工具
🎉
聚會邀請頁
你給：時間、地點、流程
它做：倒數計時、一鍵導航、加到行事曆
🧾
分帳小算盤
你給：誰付了什麼、多少錢
它做：自動算出誰該給誰多少
📚
讀書打卡表
你給：考試日期、每天能讀多久
它做：每日任務清單、可打勾、看進度
🍱
小店菜單頁
你給：菜單文字或照片
它做：分類菜單、點餐小計
🐾
寵物托育說明
你給：餵食、散步、注意事項
它做：給保母看的一頁說明書
🙋
個人作品頁
你給：自我介紹、做過的事
它做：一頁式的個人名片網站
方法都一樣：給資料、給指令、讓 AI 做版面。
換題目公式
萬用 Prompt：改〔括號〕就好
把〔 〕裡的字換成你要的，資料貼在最後面。
不想自己填？
直接拿這三個去玩
每個都附了假資料，複製、送出，馬上看得到成品。
這招的邊界
一個 HTML 檔，能做什麼？
✓ 放心做
- ▸給人看的資訊頁
- ▸幫你算東西的小工具
- ▸自己用的打勾清單
✕ 這招做不到
- ▸收別人填的報名資料
- ▸會員登入、線上收錢
- ▸多人一起看到同一份更新
打勾的紀錄只存在你自己這支手機，朋友看不到你的勾。右邊那些需要「後端」，是下一階段的課。
⛩ 換你了 ⛩
現在，動手做
一個你自己的網站
選一份資料 → 複製 Prompt → 送出 → 發布。
今天離開前，你會有一個自己的網址。
附錄 · 部署平台怎麼選
把網站放上網，不只一個地方
新手建議：用 Claude 做的 → Claude 發布；想要自己的網址 → Netlify 或 Vercel 擇一。幫店家、公司做的，別放 Vercel 免費版。