Prompt 提示詞2026 年 10 月 1 日

開了手作甜點店，但不會做品牌網站？不用擔心，有這段提示詞三分鐘做好美美品牌網站

叫 AI 幫甜點店做網站，十次有八次拿到同一間店：粉紅底、圓角卡片、商品被畫成插畫、按鈕按了沒反應。問題不在工具，在提示詞沒說哪些不能動、哪些一定要能動。這篇給你一段簡略版提示詞，先鎖住最常壞的四個地方，附三個最常見的修法。完整九區塊版本在工具箱免費領。

#AI 做網站 #甜點 #烘焙 #提示詞 #網頁設計

開了手作甜點店，但不會做品牌網站？不用擔心，有這段提示詞三分鐘做好美美品牌網站 - Prompt 提示詞

叫 AI 幫甜點店做網站，十次有八次拿到同一間店。粉紅底、圓角卡片、商品被畫成插畫、按鈕按了沒反應、「小遊戲」是一顆按了會晃一下的按鈕。這不是 AI 做不到，是你沒告訴它哪些不能動、哪些一定要能動。下面這段簡略版提示詞把最常壞的四個地方先鎖住；我整理的完整版有九個區塊，在文末。

TL;DR（懶人包）：
① 先講「照片是主角」：第一屏、商品卡、商品彈窗都用你上傳的照片，不准換成插畫或 AI 生成的假商品。
② 設計要從照片長出來：先分析照片的配色、輪廓、紋理，再決定背景、按鈕、動畫，不准一律粉紅。
③ 該動的要真的能動：購物車要能加減刪、合併、算小計；小遊戲要有開始、操作、分數、結束、重玩。
④ 中英文切換和缺字檢查要寫進去，不然中文標題會出現方框。
⑤ 生出來不對，在同一個對話裡一次修一件事，不要整段重貼。

為什麼生出來都像同一間店

自己試一次就會發現，失敗的樣子都差不多，原因也就這三個：

沒說照片是主角。AI 處理圖片很花力氣，你不講，它就走最省事的路：把你的蛋糕畫成一個 SVG 插畫，或乾脆拿一張通用甜點圖。你想給客戶看自己的商品，結果網站上沒有半張是你的。
沒說設計要從照片來。「可愛的甜點網站」在 AI 心裡有一個預設答案：粉紅、彩虹、花朵、圓體字。巧克力蛋糕和水果塔拿到的是同一套，因為它根本沒看照片的顏色。
沒說「要真的能動」。你寫「有購物車和小遊戲」，它會給你一個購物車圖示和一顆會晃的按鈕。對 AI 來說那也算「有」。你要講清楚：加減刪、合併相同品項、算小計、空狀態；遊戲要有開始、操作、分數、結束、重玩。

這段提示詞在鎖哪四個地方

簡略版只講四件事，每一段都在關掉一種偷懶：

照片是主角：可以裁切、去背、加陰影，但商品的外觀、比例、顏色不准改，不准換成插畫。
設計從照片長出來：先分析再設計，主色從照片提取，裝飾呼應商品的輪廓與紋理。
該動的要真的能動：Header、商品彈窗、購物車、小遊戲，每一個都列出「能動」的最低標準。
交付要驗過：單一 HTML 檔、做完自己檢查照片、缺字、語言、手機版、購物車、遊戲，先給預覽再說明。

簡略版提示詞（可以直接用）

整段複製，連同 3 到 10 張商品照片一起丟給能看圖、能寫網站的 AI（Claude、ChatGPT、Gemini 都可以，Lovable、Bolt 這類做站工具也行）。照片選同一批商品、光線接近的。

請根據我上傳的商品照片，直接設計並做出一個完整、真的可以操作的甜點品牌選購網站，交付單一 HTML 檔。先辨識照片裡的商品，再為它建立專屬設計，不要套通用的甜點模板。

【照片是主角】
第一屏、商品卡片、商品詳細都用我上傳的照片。可以裁切、去背、加陰影，但不可以把商品換成 SVG、插畫或 AI 生成的商品；插畫只能當裝飾。沒提供的角度、剖面、內餡不要捏造。

【設計從照片長出來】
先分析照片的配色、輪廓、紋理、裝飾，再決定背景、卡片、按鈕、icon 與動畫。主色從照片提取，不要一律粉紅、彩虹或同一組花朵。裝飾可以多，但商品、價格、按鈕要清楚，保留留白。

【一定要能動】
固定式 Header（含語言切換、購物車、手機選單）、商品照片為主的第一屏、商品卡片、可關閉的商品彈窗（按鈕、點背景、Escape 三種都要能關）、示範購物車（加減刪、合併相同品項、算小計、空狀態；「確認訂單」只顯示預覽，不付款）。再做一個跟商品有關、真的能玩的小遊戲：有說明、開始、操作、分數、結束、重玩，手機觸控也能玩。

【動畫】
第一屏彈性登場、不同速度的漂浮與視差、商品卡片錯開出現、加入購物車時縮圖飛向購物車。不要只會淡入，也不要所有東西一直晃；不劫持捲動、不自動播放聲音；支援減少動態模式。

【語言與字體】
繁體中文與英文切換，預設繁體中文；切換時所有文字都要換，購物車不清空。中文標題用有特色的圓體或手寫字，內文清楚易讀；檢查實際用到的每個字，不得出現缺字方框。icon 用原創 SVG，不用 emoji。

【不准捏造】
不推斷成分、過敏原、產地；不捏造評論、銷量、得獎。缺價格就用清楚標示的示範價格。手機、平板、桌面都要能看，不能橫向溢出。

做完請實際檢查照片、缺字、語言切換、手機版、購物車、遊戲都正常，先給我預覽，再簡短說明設計重點。

這段貼下去，最明顯的差別是：網站上會是你的蛋糕，顏色是從你的蛋糕來的，購物車按了會真的加一件。這三件事做到，剩下的都是微調。

生出來不對，怎麼修

第一版不會完美，這很正常。重點是在同一個對話裡一次修一件事，講清楚位置和症狀，不要說「再做好一點」。最常見的三個：

商品還是被換成插畫

直接指出來：「第一屏和商品卡片上的商品不是我上傳的照片。請改回實際使用我的照片，可以裁切去背，但外觀、比例、顏色要跟原圖一致。改完告訴我每張照片用在哪個區塊。」最後那句很重要，它會被迫逐張確認。

全部變粉紅

叫它先交作業再改：「請重新從我的照片提取主色，列出你抽到的 3 到 5 個色碼和各自來自照片的哪個部位，再依這組顏色重做背景、卡片、按鈕。」要它列色碼，它就不能憑印象用粉紅。

小遊戲只是動畫

把「遊戲」的定義寫給它：「目前的小遊戲只是播放動畫，不算遊戲。請重做成真的可以操作的版本：玩法說明、開始、玩家輸入、分數、結束條件、重新開始，手機和鍵盤都要能玩。」

完整版還有另外五個修法：缺字方框、語言切換漏翻、手機版橫向溢出、特效太滿、購物車算錯。

想要完整版

上面的簡略版夠你生出一個像樣的雛形。我整理的完整版有九個區塊，多了：照片怎麼處理才不會被偷換角度、六種糕點各自的設計方向（蛋糕的層次、餅乾的壓紋、可頌的酥皮）、商品選項不准捏造尺寸口味的規則、完整的動畫清單、無障礙與效能要求，加上開始前的準備、8 個對症的修正指令和交付前檢查清單。中文和英文版都有。

免費領取完整版：想要甜點網站自己造｜提示詞三分鐘做好 →

登入就能拿到連結，提示詞可一鍵複製，中英文都有，永久保存。

想懂「為什麼 AI 做的東西一眼就看得出是 AI」，可以接著看 Style DNA 視覺逆向工程那篇，邏輯是通的：不給形容詞，給規則和不准。

常見問題 FAQ

Q1：哪些 AI 工具可以用？

能上傳圖片、能輸出可執行網頁的都可以。Claude（Artifacts、Claude Design）、ChatGPT、Gemini 都符合，Lovable、Bolt、v0 這類做站工具也行。免費方案通常有圖片數量或輸出長度的限制，這段提示詞加照片會用掉不少額度。

Q2：一定要有商品照片嗎？

要。整段提示詞的核心就是「以照片為主角、從照片抽設計」，沒有照片它只能生通用甜點站，那就是你不想要的那種。手機拍的也可以，光線均勻、背景乾淨就好。

Q3：生出來的網站可以直接上線嗎？

它是雛形，不是正式站。拿來做品牌提案、新品概念頁、接案前確認風格都很好用。購物車是互動示範，沒有真的收款、訂單、庫存；要營業得另外接金流和後台，託管與網域也是另外的費用。

Q4：不是甜點的商品能用嗎？

可以，改兩個地方。把「設計從照片長出來」那段的例子換成你的品類，小遊戲的例子換掉。其他段是通用的，飲料、便當這類商品照一樣的邏輯做就好。

如果你想把雛形變成真的能收單的網站，或需要有人幫你接金流、訂單通知與後台，歡迎直接找我聊。