10. 產出一個 landing page 的整體骨架
請幫我做一個〔產品或服務,例如:線上瑜伽課程〕的 landing page(單頁介紹網站)。請先規劃整個頁面由上到下有哪些區塊(例如主視覺、痛點、方案介紹、見證、常見問題、報名),每個區塊放什麼內容,再依這個結構做出來。整體風格要〔乾淨專業/溫暖親切/活潑年輕,擇一〕。
先要區塊清單,再要成品。這樣你能在它動工前就調整順序,比做完再搬省事很多。
《零基礎學 Vibe Coding》讀者專區
內容型網站與互動式應用的兩種策略、部署與 SEO
把方括號〔〕裡的內容換成你自己的情況,整段複製貼給 AI 就能用。
請幫我做一個〔產品或服務,例如:線上瑜伽課程〕的 landing page(單頁介紹網站)。請先規劃整個頁面由上到下有哪些區塊(例如主視覺、痛點、方案介紹、見證、常見問題、報名),每個區塊放什麼內容,再依這個結構做出來。整體風格要〔乾淨專業/溫暖親切/活潑年輕,擇一〕。
先要區塊清單,再要成品。這樣你能在它動工前就調整順序,比做完再搬省事很多。
請幫我設計網頁最上方的 hero 區(主視覺區)。主標題要傳達「〔你的核心賣點,例如:三個月從零學會做自己的網站〕」,下面放一句補充說明和一顆明顯的行動按鈕(例如「免費報名」)。版面要留白舒服、標題字夠大夠醒目,手機上也要好看。先給我 3 個不同語氣的主標題讓我挑。
hero 區是全站最重要的黃金位置。讓 AI 先給你幾個標題選項,別讓它一次定稿,你會有更多好句子可挑。
請幫我做一個網站頂部的導覽列(navbar)。左邊放〔網站名稱或 logo 文字〕,右邊放這幾個連結:〔首頁、關於、方案、聯絡〕,最右邊一顆行動按鈕「〔立即報名〕」。手機上要收合成漢堡選單(點一下才展開)。捲動頁面時導覽列要固定在最上方。
「手機上收合成漢堡選單」這句一定要講。不然導覽列在小螢幕上會擠成一團,這是新手最常忽略的細節。
請幫我做網站最下方的頁尾(footer)。內容包含:〔品牌名稱與一句 slogan〕、幾個次要連結(隱私政策、服務條款、聯絡我們)、社群媒體圖示連結、以及最下面一行版權宣告「© 2026 〔你的名稱〕」。整體用比較低調的深色底,文字不要搶眼。
頁尾雖然不起眼,卻是訪客找隱私政策、聯絡方式的地方。如果缺了它,網站會有種沒做完的感覺。
我這個頁面在手機上顯示會跑版。請幫我改成手機優先的響應式設計(responsive):先確保在窄螢幕(手機)上排版正常、文字不會太小、按鈕好按,再往上適配平板和電腦。請特別檢查圖片會不會超出畫面、以及左右會不會有多餘的橫向捲動。
現在大多數訪客都用手機看網頁。養成先想手機、再想電腦的習慣,可以省下大量事後補救的功夫。
請幫我的網站加上深色模式(dark mode)。放一個切換按鈕,點一下就在亮色和深色之間切換,並記住使用者的選擇(下次來還是同一個模式)。切換時請確認:所有文字在兩種模式下都清楚可讀、背景和文字的對比夠強、按鈕和圖片也都要跟著調整,不要有某塊在深色下變成一片黑看不到字。
深色模式最常翻車的地方是某段文字在深色底下還是深色,變成隱形。務必請 AI 兩種模式都逐一檢查文字顏色。
請幫我的頁面加上克制的進場動畫:當使用者往下捲動、某個區塊進入畫面時,讓它輕柔地淡入並微微上移。動畫要低調、快速(不要讓人等)、有質感,絕對不要那種閃爍、旋轉、彈跳的浮誇效果。同一個區塊只播一次,不要每次捲到都重播。
動畫的最高境界是你感覺得到質感,卻說不出哪裡有改動。跟 AI 強調克制、有質感,比放任它自由發揮安全得多。
我的頁面內容都對了,但看起來很陽春、沒有設計感。請只調整字體與間距來提升質感:選一組耐看的字體搭配、拉開標題和內文的字級差距、增加行距讓文字更好讀、放大區塊之間的留白讓版面呼吸。內容和功能都不要動,只優化視覺質感。
留白和字級對比,是業餘與專業的分水嶺。很多時候頁面不好看,不是缺東西,而是東西塞太滿、擠太緊。
請幫我檢查整個頁面的文字可讀性(無障礙對比)。找出所有文字顏色和背景顏色對比不夠、看起來吃力的地方,例如淺灰字配白底、彩色按鈕上的文字看不清等。列出有問題的位置,並幫我調整到清楚好讀的程度,同時盡量保留原本的設計風格。
淺灰配白底是最常見的地雷,設計師覺得高級,長輩和陽光下的手機使用者卻看得很痛苦。對比清楚永遠比淡淡的很美重要。
我很喜歡〔某個網站或風格,例如:Apple 官網那種簡潔高級感〕的氣質。請不要照抄,而是抓出它讓人覺得高級的幾個關鍵特徵(例如大量留白、克制的配色、精緻的字體、簡潔的排版),把這些特徵套用到我的〔你的網站主題〕上,做出屬於我自己、但有同樣質感的版面。
講氣質和特徵,而不是照抄。這樣做出來是你的品味長進了,而不只是複製別人的畫面。
我想做一個像這樣的畫面:〔詳細描述版面,例如:最上面一張大圖,圖上疊白色大標題;中間三欄並排的方塊,每欄有一個圖示、一個小標、兩行說明;最下面一顆置中的按鈕〕。請照這個描述做出來,用〔你偏好的配色〕,並確保手機上三欄會自動變成上下堆疊。
描述版面時,用「上面、中間或下面」「左邊、右邊」「幾欄並排」這種空間方位詞,AI 最容易抓對位置。附上擷圖效果更好。網站不是一張靜態海報,訪客會點、會填、會滑。這一關講的是那些會動、會回應你的小零件:表單、彈窗、選單或表格。就像家裡的開關和門把,它們不起眼,但只要一個不好用,整個體驗就毀了。這幾條範本教你把細節交代清楚,讓每個互動都順手。
我完全沒有部署過任何東西,想把「〔專案名稱〕」放到網路上讓別人用網址打開。請當我的導遊,一步一步帶我做,每次只給我一個步驟,用白話說明這一步要做什麼、我會看到什麼畫面、成功的樣子長怎樣?我完成並回報後,你再給下一步。
關鍵是每次只給一步。道理很簡單,如果一次給你十個步驟,你很可能會在第三步就迷路。所以慢慢來,一步一確認,反而最快。
我做的是「〔簡述你的專案類型,例如純網頁、有登入功能、有資料庫〕」,預算希望是〔免費/每月可接受金額〕。請推薦兩到三個適合新手的部署平臺,用表格比較它們的難易度、免費額度以及適合的情境,最後給我一句「以你的狀況我推薦哪一個」的結論。
新手起步先求免費、好上手,別一開始就追求功能最強。等你真的需要更多,再換也不遲。
我的專案有一些不能公開的資訊(例如 API 金鑰、密碼),聽說要放在環境變數裡,而不是寫在程式碼中。請先用白話解釋環境變數是什麼、為什麼比較安全,再一步一步教我在〔你用的部署平臺〕上設定它,並告訴我程式裡要怎麼改成去讀取這些變數?
環境變數就像保險箱:程式知道去保險箱拿鑰匙,但鑰匙本身不會被寫進到處流傳的程式碼裡。這是資安的基本功。
我想把我的網站從現在的預設網址,換成我自己的網域〔你的網域,例如 vista.tw〕。我的網域是在〔購買網域的地方〕買的,部署在〔你的部署平臺〕。請一步一步教我怎麼設定,包含我需要去哪裡改什麼、大概要等多久生效、以及怎麼確認綁定成功了。
網域設定改完通常不會立刻生效,可能要等幾分鐘到幾小時,這叫生效等待。別以為沒成功就一直亂改,先等一下再驗。
我在部署時失敗了,跳出下面這段錯誤訊息。請先用白話告訴我這大概是什麼問題、嚴不嚴重,再列出最可能的兩到三個原因,並從最可能的開始,一次給我一個解法讓我試。我試完會回報結果,你再決定下一步。 〔完整貼上錯誤訊息〕
部署錯誤訊息一定要整段完整貼給 AI,別自己擷取一半。那串看似天書的紅字,往往第一行就藏著真正的病因。
我重新部署後,不確定線上的版本有沒有真的更新(畫面看起來還是舊的)。請教我幾個確認方法:怎麼判斷部署是否真的成功、瀏覽器的快取(Cache)可能怎麼騙我、以及怎麼強制看到最新版。請用新手能操作的步驟說明。
常見的假象是瀏覽器把舊畫面存起來給你看。用無痕視窗打開,或強制重新整理,通常就能看到真正的最新版。
我的網站已經上線。我不是工程師,但想做最基本的監控,避免它壞掉了我卻不知道。請推薦一到兩個適合新手、最好有免費方案的簡單做法,能在網站掛掉時通知我。用白話說明怎麼設定、以及它會怎麼提醒我。
對新手來說,網站掛了會自動寄信通知我,這一件事就夠用了。先求有、再求好,別一開始就想搭一套複雜的儀表板。
我們剛剛成功把專案部署上線了。請把整個過程整理成一張我看得懂的步驟清單,用白話寫,每一步包含做什麼、在哪裡做、成功長怎樣?特別標出這次卡關過、下次要小心的地方。我要把它存起來,當作以後每次上線的說明書。
部署流程很容易做完就忘。趁記憶新鮮請 AI 幫你寫成說明書,下次就不必再從零摸索,也不用每次都重新問。網站做好了、也上線了,接下來的問題是:別人怎麼找到它?分享到社群時,為什麼有的連結會跳出漂亮的預覽圖,有的只有一串冷冰冰的網址?這一類提示詞不談通用文案,而是教你請 AI 幫網站做好被看見的技術設定,讓搜尋引擎和社群平臺都願意把你推出去。
我的頁面是關於「〔頁面主題與目標客群〕」。請幫我寫出適合放進網頁的 SEO 標題(title)和描述(meta description),要包含大家會搜尋的關鍵字、控制在搜尋結果不會被截斷的長度、並且讓人有想點進去的衝動。給我兩組選擇,並告訴我這些文字實際上要放進程式的哪個位置。
標題和描述是你在 Google 上的門面。同一個排名,寫得誘人的那個就是比較多人點,這是免費卻常被忽略的關鍵。
我希望我的頁面被分享到臉書、LINE 或 Threads 時,能顯示漂亮的預覽(標題、說明或縮圖)。請教我加上 Open Graph 標籤:告訴我需要哪幾個標籤、每個代表什麼、實際的程式碼長怎樣、該放在檔案的哪裡,以及縮圖建議做多大尺寸。
設定完可以用臉書或 LINE 的官方分享偵錯工具驗證。有時預覽會被舊資料卡住,用偵錯工具重新抓一次通常就會更新。
我的頁面是「〔頁面類型,例如一篇文章/一個商品/一場活動〕」。請幫我加上對應的結構化資料(Structured Data),讓 Google 更容易理解頁面內容。用白話說明它是什麼、對我有什麼好處,給我可以直接用的程式碼,並告訴我怎麼驗證它有沒有寫對。
結構化資料就像幫你的頁面貼上標籤紙,主動告訴搜尋引擎我是什麼。寫完務必用 Google 的測試工具驗一次,格式錯了它會直接忽略。
我想把「〔頁面名稱〕」做成中文和〔英文/日文〕的多語版本。請先用白話說明多語網站有哪幾種常見做法、各自的優缺點,再以新手好維護為原則推薦一種。然後教我怎麼設定,讓搜尋引擎知道這些是同一頁的不同語言版本,不會被當成重複內容。
多語不是只把文字翻過去就好,還要讓搜尋引擎知道版本之間的對應關係。這一步做對,你的英文頁才有機會被英文使用者搜到。
請用白話解釋 sitemap(網站地圖)和 robots.txt 這兩個東西是什麼、分別在幫我做什麼。以我這種「〔簡述你的網站規模,例如只有幾頁的個人網站〕」來說,需不需要設定?如果需要,請一步一步教我怎麼產生和放置,並告訴我怎麼確認 Google 有讀到。
網站地圖等於把你所有頁面列一張清單交給 Google,省得它自己慢慢找。就算是小網站,設一下也沒壞處。
這是我的產品頁,目前只列了功能:〔貼上現有內容〕。目標客群是〔你的客群〕,他們最在意〔客群的痛點或渴望〕。請幫我把它改寫成能打動人的頁面文案,聚焦在這對客人有什麼好處,並自然帶入他們會搜尋的關鍵字,不要塞得很生硬。給我可直接替換的版本。
好文案講的是你會得到什麼,不是這個功能叫什麼?關鍵字要像鹽巴一樣自然融進句子,撒太多反而會被搜尋引擎當作作弊。
請幫我檢查這個頁面,同時從無障礙和 SEO 兩個角度找問題,因為我聽說它們常常互相加分。重點看:圖片的替代文字、標題層級的結構、連結文字有沒有意義。列出問題清單,每一項說明它同時影響無障礙和 SEO 的哪個部分,並給我修法。 〔貼上程式碼或網址〕
圖片替代文字是最典型的一石二鳥:視障者靠它讀圖,搜尋引擎也靠它認圖。把該寫的都寫好,兩邊同時受惠。前面十一類教你請 AI 做各種事,這一類更上一層:教你怎麼指揮 AI 這件事本身。同樣的任務,會下指令的人拿到的成果,往往跟不會下的人差了好幾個檔次。這些是進階玩家的內功心法:設定角色、劃定範圍、控制節奏、要它誠實。學會這些,AI 才真正變成聽你調度的軍團,而不是各自亂跑的散兵。
找不到一模一樣的沒關係,抓錯誤訊息的關鍵字對大方向就行。 完整清單與萬能救援句在卡關 FAQ。
CONFLICT 或程式碼裡出現 <<<<<<<、=======、>>>>>>>我合併時出現 `CONFLICT`,檔案裡有 `<<<<<<<`、`=======`、`>>>>>>>` 這些符號。我是零基礎,看不懂哪段是誰的。請幫我解讀:`=======` 上面那段是誰的、下面那段是誰的,我該保留哪個、還是兩個都要。我把整段貼給你:〔貼上含箭頭符號的那一整段〕
那些箭頭符號是 Git 給你的選擇題,不是壞掉。`<<<<<<<` 到 `=======` 之間是你的版本,`=======` 到 `>>>>>>>` 之間是對方的。決定好之後要把三行箭頭符號一起刪掉。
Updates were rejected / push rejected(remote 有新東西)我 push 時出現 `Updates were rejected`,看起來是雲端有我還沒有的更新。請一步步帶我安全地先把遠端的更新拉下來、跟我的合併好,再推上去。過程中如果會有衝突,請提醒我怎麼處理。
看到 push 被拒,標準動作是先 pull 再 push。別急著用 `--force` 硬推,那可能會蓋掉別人的心血。
You are in 'detached HEAD' stateGit 說我在 `detached HEAD` 狀態。我不太確定自己是怎麼跑到這裡的,也怕改的東西不見。請用白話解釋這是什麼狀態、我現在該怎麼安全回到正常的分支,如果我剛剛有改東西,怎麼保住它。
detached HEAD 不危險,只是站錯位置。先別繼續改東西,讓 AI 帶你回到正常分支(通常是 main)再說。
不小心 commit 了大檔案或密鑰我不小心把〔大檔案/含密碼的檔案〕commit 進去了,還沒(或已經)push。請告訴我:一、怎麼把它從版本記錄裡移除;二、怎麼設定 `.``gitignore` 以後不再提交它;三、如果裡面有密鑰,我是不是必須立刻去把那把金鑰作廢重發。請按嚴重程度排順序帶我做。
如果 commit 進去的是金鑰或密碼,就算你之後刪掉,也要當它「已經外洩」,第一件事是去平臺把那把金鑰作廢重發,不能只靠刪檔。
fatal: not a git repository我打 Git 指令時出現 `fatal: not a git repository`。請幫我判斷是「這個專案還沒被 Git 初始化」,還是「我站錯資料夾了」。教我怎麼確認目前在哪個資料夾、以及該怎麼做才對。
先確認你的終端機「現在在哪個資料夾」(可以請 AI 教你用 `pwd` 或 `cd` 確認),很多時候只是走錯房間。
Authentication failed / Permission denied (publickey)我 push 到〔GitHub/其他平臺〕時出現 `Authentication failed`。我是零基礎。請幫我判斷現在該用哪種驗證方式(密碼、存取權杖、還是 SSH 金鑰),並一步步帶我設定好。我用〔Mac/Windows〕。
現在多數平臺已經不收帳號密碼,改用存取權杖或 SSH 金鑰。先問 AI 你的平臺現在要哪一種,再照著設定。部署(Deploy)就是把你本機做好的東西搬到網路上,讓全世界都連得到。經典魔咒是我電腦上明明好好的,一上線就壞。這一類專治這種水土不服。
Build failed(部署時建置失敗)我部署到〔平臺名〕時出現 `Build failed`。我把完整的建置紀錄(build log)貼給你,請幫我找出真正卡住的那一行、代表什麼問題、怎麼修。紀錄如下:〔貼上整段 build log,尤其是紅字附近〕
部署平臺都會有一份完整的建置紀錄,真正的原因在裡面。把那整段貼給 AI,比只說「build 失敗」有用一百倍。
線上壞、本機好(環境變數沒設定)我的專案本機正常,但部署後〔某功能,例如登入、抓資料〕就壞了。我懷疑是環境變數沒設。請教我怎麼比對本機的 .env 跟部署平臺上設定的變數,找出漏掉哪些、怎麼在平臺上補齊。我用的平臺是〔平臺名〕。
若遇到本機好、線上壞的狀況,十之八九是環境變數沒搬上去。`.env` 檔通常不會被上傳,你得手動到部署平臺的設定裡一個一個補。
部署後 404 或重新整理就失效我的網站首頁正常,但點進內頁或按重新整理就 404。我猜是路由沒設定好。請幫我判斷這是不是單頁應用要加的「rewrite/redirect 規則」,並告訴我在〔平臺名〕上具體要加什麼設定。我用的框架是〔框架名,若知道〕。
這是前端網站部署的超經典坑。跟 AI 講清楚你用哪個平臺、哪個框架,它通常能直接給你那幾行設定貼上去就好。
部署成功了,但線上看不到更新(快取)我部署後線上還是舊的。請先教我怎麼強制重新整理、清掉瀏覽器快取,確認不是我這邊的問題,再教我怎麼確認部署到底有沒有真的成功、以及怎麼清掉平臺的快取。我用〔平臺名〕。
先用強制重新整理的方式,排除你自己瀏覽器的快取(Mac 按 Cmd+Shift+R,Windows 按 Ctrl+Shift+R)。如果還是舊的,才往平臺快取或部署沒成功去查。
Function execution timed out(函式逾時)我線上的〔功能名〕出現 `timed out`(逾時)。請幫我判斷是不是「這段做太多事、跑太久」,並給我兩種方向:一是怎麼讓它跑快一點,二是能不能把工作拆小或改成背景處理。我用〔平臺名〕,這段大概在做〔說明它在做什麼〕。
逾時通常代表一口氣做太多。跟 AI 討論能不能拆成小步驟,往往比硬調時間上限更根本。
Module not found(只在部署時發生)我本機正常,但部署時出現 `Module not found: ``〔它說找不到的名字〕`。請重點幫我檢查兩件事:一、我 import 的檔名大小寫跟實際檔名有沒有完全一致;二、這個套件有沒有被正確記進 package.json。我用〔平臺名〕。
這個坑超常見:Mac 不分大小寫,但線上伺服器分。`Header` 跟 `header` 在你電腦上是同一個,上線後就變兩個。請 AI 特別幫你比對大小寫。當你的程式要用別人的服務(例如 :AI、地圖或金流),通常需要一把鑰匙(API 金鑰)來證明身分。這一類的錯誤,多半跟這把鑰匙有關:沒帶、帶錯、用太兇、或不小心弄丟。