歡迎來到 Vibe Coding 的世界！在「碼上看」，你不需要懂程式碼，你只需要懂「想像」。 但在開始之前，你要先了解我們這個平台的超能力與極限。
這裡做不到的事
- 會員登入系統 (無法儲存帳號密碼)
- 即時聊天室 (無法傳訊息給別人)
- 線上購物車結帳 (無法真的刷卡)
這裡超擅長的事
- 實用工具 (計算機、倒數計時器)
- 個人展示 (數位名片、作品集)
- 互動遊戲 (心理測驗、塔羅牌)
- 暫存記憶 (記住你的代辦事項)
想要 AI 一次就寫出完美的網頁，不要只說「幫我做個計算機」。AI 會因為想太多而寫出分開的 CSS 或 JS 檔，這樣我們就不能用了。 每次跟 ChatGPT 或 Claude 對話時，請務必在最後加上這段「防呆咒語」：
請幫我製作一個 [你的想法]。 請嚴格遵守以下開發規範： 1. 輸出為「單一 HTML 檔案」，將 CSS 與 JS 全部寫在同一個檔案內。 2. 美感要求：使用 Tailwind CSS (CDN) 進行排版，風格要現代、極簡、有質感。 3. 功能要求：必須支援手機版 RWD 顯示 (Mobile-first)。 4. 外部資源：若需圖示請用 FontAwesome CDN，若需圖表請用 Chart.js CDN。 5. 不要使用 import/export 模組語法，確保可以直接在瀏覽器執行。
這是新手最常遇到的問題：你在電腦上做好的網頁圖片很正常，但發布上來後朋友卻看不到？ 這是因為你的圖片還「住」在你的電腦裡，你必須把圖片搬到「雲端宿舍」才行。
方法一：懶人專用 (Unsplash 隨機圖)
不需要從零開始描述！如果你在網路上看到一個很喜歡的網頁設計，你可以直接把網址丟給 AI，請它「參考這個風格」。
🔗 複製這段給 AI
「請參考這個網頁的視覺風格與排版：[貼上網址] 但我希望把內容改成 [你的主題]，並且色調改為 [你想要的顏色]。請保持原有的現代感與排版結構。」💡 小撇步：AI 不一定能「看」到所有網站，如果它說看不到，你可以直接截圖貼給它，或描述「像 Apple 官網那樣」。
你是否發現，用 AI 寫的「待辦清單」或「記帳本」，只要一重新整理網頁，資料就全都不見了？ 這時候你需要一個關鍵字：LocalStorage (本地存儲)。
💡 原理說明
LocalStorage 是瀏覽器內建的小倉庫。你可以叫 AI 把使用者的輸入「存進瀏覽器裡」，這樣下次打開網頁時，資料就會自動讀取回來。
「請使用 LocalStorage 功能，讓使用者輸入的資料在重新整理網頁後依然存在。當使用者變更資料時，要自動同步儲存。」想讓網頁看起來更酷，但不知道那個「效果」叫什麼名字嗎？這裡收集了開發者常用的設計風格與特效術語，直接丟給 AI，它就懂你要什麼。
Bento Grid (便當盒佈局)
像 Apple 發布會那樣的方塊拼貼佈局，整齊又現代。
Glassmorphism (毛玻璃)
半透明磨砂質感，適合科技感背景。
Parallax Scrolling (視差滾動)
背景動得比前景慢，創造 3D 深度。
Typewriter Effect (打字機)
文字像打字一樣逐字出現。
Skeleton Loading (骨架屏)
資料載入前顯示的灰色佔位塊。
Apple Style (蘋果風)
大量留白、黑色字體、極簡線條。
靜態網頁也能很好玩！試試看加入這些互動功能，讓你的使用者眼睛一亮。
🖱️ Drag & Drop (拖放功能)
適合用在「看板」、「待辦事項」或「排序清單」。
🌗 Dark Mode Toggle (深色模式)
現代網頁的標配，保護眼睛。
🎹 Accordion (手風琴選單)
適合用在「常見問答 (FAQ)」或「收納大量文字」。
🎉 Confetti (五彩碎紙)
當使用者完成任務或抽獎時的慶祝特效。
靜態網頁只能顯示固定的內容，但如果加上 API (應用程式介面)，你的網頁就能抓取即時天氣、隨機語錄，甚至是寶可夢圖鑑！
萬用 API 串接咒語
只要你有 API 的網址，用這段咒語就能讓 AI 幫你寫好串接代碼。
請幫我串接這個 API：[填入 API 網址] 功能需求： 1. 使用 fetch() 抓取資料。 2. 將抓到的資料 (JSON) 顯示在網頁上。 3. 請幫我設計一個漂亮的卡片介面來呈現這些資料。 4. 加上「重新整理」按鈕，點擊後可以重新抓取資料。
好玩的免費 API 推薦 (複製網址填入上面的咒語)
https://randomuser.me/api/製作數位名片、交友介面
https://api.thecatapi.com/v1/images/search每日一貓、療癒圖片牆
https://api.adviceslip.com/advice幸運餅乾、每日一句
https://dog.ceo/api/breeds/image/random愛狗人士專用
🌟 專業級 OG 圖片，自動生成！
你不需要自己設計預覽圖。只要你是 CodeBack 會員，我們會自動抓取你在 會員驛站 (Dashboard) 設定的「作品標題」與「個人暱稱」，為你的每個作品生成專屬的社群預覽卡片。
前往驛站設定暱稱沒加 SEO 的分享連結
連結看起來很可疑，沒人敢點...
優化後的完美呈現
3D 作品
包含預覽圖、標題與簡介，吸引力大增！
SEO 優化咒語
CodeBack 會自動讀取你作品中的 Title 和 Description 標籤。你只需要命令 AI 幫你加上這些標籤即可。
請幫我的 HTML 作品加上 SEO Meta 標籤。 1. 網頁標題 (Title) 設定為：『[你的作品名稱]』 2. 網頁描述 (Description) 設定為：『[用一句話形容這個作品有多酷]』 3. 請確保這些標籤正確放置在 <head> 區域內。