用 Codex 做網站教學：MotionSites 提示詞由貼上、預覽、修改到部署上線（附 Claude Code 做法）

MotionSites 的網站提示詞寫得很仔細：影片背景、導覽列、字級、按鈕顏色都有指定。但把整段英文直接貼進 Codex，未必就會得到一個可以上線的網站。常見問題有三個：部分提示詞仍按 Tailwind CSS v3 的寫法；大部分提示詞直接連到第三方的示範影片、圖片或字型；提示詞本身亦沒有講怎樣預覽、驗收和部署。本文用本站 MotionSites 網站提示詞庫的一個 Landing Page 提示詞做例子，示範在 Codex 內由貼上、預覽、修改，一路做到部署上線。

資料核對日期：2026 年 9 月 15 日。Codex 的操作以 OpenAI 的 learn.chatgpt.com 官方文件為準；建立專案和部署的步驟以 Vite 和 Tailwind CSS 官方文件為準。文中所有提示詞都是示例，不是實測結果；Codex 每次生成的程式碼都可能不同，請以你電腦上的實際輸出和官方文件為準。

支援地區（2026 年 9 月 15 日核對）：香港和澳門都不在 OpenAI 公開的 ChatGPT 支援的國家／地區清單（英文版）內，亦不在 Anthropic 的支援國家／地區名單（涵蓋 Claude.ai 及 Commercial API）內。OpenAI 說明，在清單以外地區存取或提供其服務，可能導致帳戶被封鎖或停用。Codex 屬於 OpenAI 的服務，Claude Code 屬於 Anthropic 的服務。本文只示範官方文件記載的步驟，並不代表你符合使用資格，也不提供 VPN、虛假地址、借用電話號碼、他人身份或共用帳戶等任何繞過方法。使用前請先閱讀 ChatGPT 香港使用指南和 Claude 香港訂閱指南。

一分鐘答案：五步由提示詞做到網址

1. 揀提示詞：在 MotionSites 提示詞庫的「類別」揀「著陸頁」或「主視覺區」，由較短的提示詞開始，按「複製提示詞」。
2. 開專案：用 npm create vite@latest 建立 React + TypeScript 專案，按 Tailwind 官方步驟裝好 Tailwind CSS v4，然後 git init 並 commit 一次。
3. 加包裝指示再貼上：先寫幾行限制（沿用現有專案、用 Tailwind v4 寫法、示範素材集中列為待換、完成後執行 build），再貼上英文原文，並附一張參考截圖。
4. 預覽和修改：ChatGPT 桌面 app 用內置瀏覽器和 Annotation mode 圈出要改的位置；CLI 用自己的瀏覽器打開終端機顯示的本機網址（預設 http://localhost:5173）。每輪只改一個範圍，滿意就 commit。
5. 換素材、build、部署：把示範影片、圖片和字型換成你有權使用的檔案，執行 npm run build，再把 dist 資料夾部署到 Vercel、Netlify 或 GitHub Pages。

用 ChatGPT 桌面 app 定 Codex CLI？

兩者都可以用 ChatGPT 帳戶登入，專案檔案都在你自己的電腦上。桌面 app 的基本操作（Project、權限、Plugins）見 Codex 桌面版完整教學；CLI 的安裝、登入和權限模式見 Codex CLI 安裝教學。本文只講做網站的部分。

開始前要準備甚麼

• Codex 和方案：OpenAI Help Center 表示，Codex 已包含在各個 ChatGPT 方案，包括 Free 和 Go，用量上限按方案不同。官方 Codex 價格頁在 Plus 方案明確列出 CLI 和 IDE 擴充等入口；Free 和 Go 實際可用的入口和用量，以你帳戶顯示為準。官方亦提醒，用量估算不是固定訊息數。要比較方案，請看 Codex 要用邊個 ChatGPT 方案，或用 AI 方案比較器按工作量篩選。
• Node.js：Vite 官方要求 Node.js 20.19+ 或 22.12+，並提醒部分範本可能要求更高版本。在終端機輸入 node -v 查看版本。
• Git：用來建立 checkpoint，亦是桌面 app review pane 的前提。
• 瀏覽器：用 CLI 的話，要用平常的瀏覽器預覽。
• 部署平台帳戶（上線時才需要）：Vercel、Netlify 或 GitHub，擇一即可。各平台的方案、收費和條款不在本文核對範圍，請自行閱讀。

步驟一：喺 MotionSites 提示詞庫揀一個提示詞

本站的 MotionSites 網站提示詞庫收錄 119 個完整英文提示詞（2026 年 7 月 15 日審校時 MotionSites 的免費項目，付費提示詞不包括在內），每個都附畫面或動態預覽。

1. 在「類別」揀「著陸頁」或「主視覺區」；想做軟件產品頁，可以再看「SaaS」。亦可以在「搜尋提示詞」輸入 hero 或 landing。
2. 第一次練習，揀較短、依賴較少的提示詞。例如 SkyElite Private Jets 約 2,300 個字元，技術上只要求 React、TypeScript、Tailwind CSS 和 Lucide 圖示，字型用 Google Fonts 的 Inter，背景是一段影片。CodeNest Coding Platform 則要用 hls.js 播放串流影片，並載入三款字型，適合做第二個練習。
3. 按「查看完整提示詞」讀一次原文，再按「複製提示詞」，貼到一個文字檔暫存。
4. 把預覽畫面截圖，存成 PNG 檔，稍後交給 Codex 作參考。這張圖只作本機參考，不要放上你的網站。

複製之前，先看原文要求甚麼

MotionSites 提示詞是為「由零開始生成」而寫的。貼上前先找出以下三類資料，稍後寫包裝指示時會用到：

按本站資料（2026 年 7 月 15 日審校版本，9 月 15 日統計），119 個提示詞之中，有 81 個直接引用遠端示範影片（CloudFront 的 .mp4 檔或 Mux 的 .m3u8 串流），22 個由 db.onlinewebfonts.com 載入字型，14 個由 figma.site 載入素材；另有 13 個仍寫 v3 的 @tailwind 指令，7 個提到 tailwind.config，而直接用 v4 @import "tailwindcss" 寫法的只有 7 個。換言之，「照貼就上線」通常會令你的網站依賴一堆不屬於你的檔案，亦可能遇上樣式不出現的問題。

版權與使用：提示詞庫的說明是：「提示詞與來源預覽版權屬 MotionSites，本站經許可重刊。使用生成結果前，仍應核對所用模型、素材及第三方服務的條款。」生成的網站能否作商業用途，本文沒有核實；如有需要，請自行向來源確認，並把所有示範素材換成你有權使用的檔案。

步驟二：開一個乾淨的 Vite + React + TypeScript 專案

OpenAI 官方的「由截圖做原型」示範，給 Codex 的限制正是「Use react, vite, and tailwind. Write the code in typescript.」，與不少 MotionSites 提示詞的技術組合一致。所以先自己建立一個乾淨專案，再交給 Codex 填內容，比叫它由零開始更容易檢查。

1. 建立專案

node -v
npm create vite@latest my-landing -- --template react-ts
cd my-landing
npm install

react-ts 是 Vite 官方範本之一（React + TypeScript）。my-landing 是資料夾名稱，可以自行更改。按 create-vite 現行原始碼（2026 年 9 月 15 日核對），即使已指定範本，它仍可能再問兩條問題：「Which linter to use?」揀預設的 Oxlint 即可；「Install with npm and start now?」想跟本文逐步做就揀 No，再執行上面的 cd 和 npm install。揀 Yes 亦可以，它會代你安裝並直接啟動 dev server，屆時按 Ctrl+C 停止，再繼續下一步。

2. 按 Tailwind 官方步驟加入 Tailwind CSS v4

npm install tailwindcss @tailwindcss/vite

打開 vite.config.ts，在範本原有的 React plugin 旁邊加入 Tailwind 的 plugin：

import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

然後把 src/index.css 的內容換成一行：

@import "tailwindcss";

範本原本在 src/index.css 放了示範用的字型、顏色和版面樣式，可能與 MotionSites 的設計衝突，所以整份換掉。範本的 src/main.tsx 已經載入 ./index.css，毋須另外修改。

範本還有第二份樣式表 src/App.css，由 src/App.tsx 以 import './App.css' 載入，內容是計數器、logo 和示範版面的樣式，並且依賴剛才刪走的 CSS 變數。把 src/App.css 清空，或者刪除檔案並同時刪走 App.tsx 內那一行 import；否則示範樣式會殘留，和 Tailwind 的 class 打架。src/assets/ 內的範本圖片（hero.png、react.svg、vite.svg）之後亦可以一併刪走。

3. 確認專案可以啟動

npm run dev

Vite 開發伺服器預設使用 5173 端口，終端機會顯示本機網址（預設是 http://localhost:5173）。如果 5173 已被其他程式佔用，Vite 會自動改用下一個可用端口，所以一律以終端機顯示的網址為準。在瀏覽器見到範本頁面，就代表專案正常。之後按 Ctrl+C 停止伺服器。

4. 建立第一個 Git checkpoint

git init
git add .
git commit -m "checkpoint: vite + tailwind starter"

先 commit 有三個原因：OpenAI 建議在任務前後建立 Git checkpoint，方便還原改動；官方建議受版本控制的資料夾用 Auto 權限，沒有版本控制的資料夾用 read-only；桌面 app 的 review pane 亦要求專案在 Git repository 之內。範本的 .gitignore 已排除 node_modules 和 dist。如果 Git 提示未設定 user.name 或 user.email，按提示設定後再 commit。

你亦可以叫 Codex 代你建立專案，但 npm create 和 npm install 都要連網，在預設權限下它會先停下來問你批准。第一次做，自己在終端機完成這幾步會比較清楚。

步驟三：用 Codex 打開專案

ChatGPT 桌面 app

1. 打開 ChatGPT 桌面 app，揀 Codex。
2. 按 New chat，並打開剛建立的 my-landing 資料夾，讓 Codex 在這個位置工作；日後會重複使用的話，可以把它加為 local project。
3. 保留預設權限，不要一開始就放寬到沒有沙盒、不用批准的模式。

Codex CLI

cd my-landing
codex

第一次執行時，選 Sign in with ChatGPT（或其他可用的登入方式）。這個資料夾已受 Git 管理，按官方建議可以使用 Auto：Codex 可以在工作區內讀取、修改檔案和執行命令；要改動工作區以外的檔案或使用網絡時，會先問你批准。

步驟四：貼上提示詞，記得加「包裝指示」

MotionSites 原文描述的是最終畫面，沒有講它要放進哪個專案、用哪個 Tailwind 版本、示範素材怎樣處理，也沒有要求驗收。OpenAI 的提示指南提醒，圖片只提供視覺要求，框架等實作限制仍要你用文字講清楚；圖片沒有顯示的行為，例如 hover 狀態和鍵盤操作，亦要寫出來。所以貼原文之前，先加一段包裝指示。

以下是一個示例（不是實測結果，可按需要修改）：

請在目前這個 Vite + React + TypeScript 專案內，實現最後貼上的 MotionSites 網站提示詞。附上的截圖是目標畫面參考：請跟它的版面、字級和留白；文字、顏色和尺寸以提示詞原文為準。

限制：
- 沿用現有專案和 src/App.tsx，不要另開新專案，不要改用其他框架；src/App.css 已清空，不要加回範本的示範樣式。
- Tailwind CSS 用 v4：已經由 @tailwindcss/vite 載入，src/index.css 使用 @import "tailwindcss";。如果原文要求 @tailwind base/components/utilities 或 tailwind.config，請改成 v4 寫法，完成後說明改了甚麼。
- 原文內的示範影片、圖片和字型網址，暫時照用作 placeholder，但要集中放在 src/assets.ts，並在 README.md 列出 TODO：上線前換成自己有權使用的檔案。
- 需要新增套件（例如 lucide-react）之前，先說明要裝甚麼和原因。
- 原文沒有寫的互動請補上並列出：hover 和 focus 狀態、手機選單開關、鍵盤操作。
- 只改動這個資料夾內的檔案。

完成後：
1. 執行 npm run build，修正所有錯誤。
2. 啟動 dev server，告訴我本機網址。
3. 列出新增或修改了哪些檔案。

--- MotionSites 提示詞原文 ---
（在這裏貼上完整英文提示詞）

每一行限制都有原因：

• 沿用現有專案：避免 Codex 另開一個資料夾或換框架，令你剛做好的 Tailwind 設定白做。
• Tailwind v4：Tailwind 官方升級指南說明，v4 改用普通 CSS 的 @import 載入，不再使用 v3 的 @tailwind 指令。照抄 v3 寫法，樣式可能無法正常產生。
• 示範素材集中列出：方便上線前逐項替換，亦讓你清楚知道網站連到哪些第三方網址。
• 先講要裝甚麼：安裝套件要連網，Codex 本身會停下來問你；這一句令它先解釋，你批准時更容易判斷。
• 補回原文沒寫的互動：OpenAI 提示指南建議把圖片沒有顯示的行為用文字寫出。
• build 和本機網址：OpenAI 的截圖原型流程亦以「Start the dev server and tell me the local URL/route to view the prototype.」作為驗收步驟。

附上參考截圖

• ChatGPT 桌面 app：按住 Shift，把截圖拖進輸入框，再貼上包裝指示和原文。
• Codex CLI：在 Codex 的互動介面把截圖檔拖進終端機，或直接貼上圖片，再貼上文字。亦可以在啟動時用 -i（或 --image）附圖，例如（示例）：

  codex -i reference.png "這張是目標畫面參考。我下一則訊息會貼上完整規格，收到之前先不要修改檔案。"

官方列明 Codex 接受 PNG 和 JPEG 等常見圖片格式；多張圖片可以用逗號分隔，或重複使用 --image。OpenAI 亦提醒，要講明圖片要看甚麼、想要甚麼結果，不要單靠圖片交代任務，所以上面的包裝指示已寫明截圖只作版面參考。

Codex 問你批准時，要看清楚甚麼

Codex 預設關閉網絡。在 Auto 下，它在工作區內修改檔案毋須逐次批准，但執行 npm install lucide-react 這類要下載套件的命令時，會先停下來問你。這是預期行為：

• 核對命令和套件名稱是否與提示詞要求一致，例如 SkyElite 只需要 lucide-react。
• 如果它要求改動工作區以外的檔案，或者要執行你看不懂的命令，先叫它解釋用途。
• 不要為了少按幾次批准而改用官方在權限表上標示為「Dangerous full access」的 --dangerously-bypass-approvals-and-sandbox（別名 --yolo）；官方在該列明文寫「not recommended」。各權限模式的分別，見 Codex CLI 安裝教學的權限一節。

完成後先審查，再 commit

1. 讀 Codex 的完成報告：改了哪些檔案、Tailwind 有沒有轉換、哪些素材列入 TODO。
2. 桌面 app 打開 review pane 查看改動，可以逐項 stage 或 revert；CLI 用 git status 和 git diff 查看，或在 Codex 內輸入 /review。
3. 確認 npm run build 沒有錯誤，網站可以在本機打開。
4. 滿意就建立「任務後」checkpoint：git add .，再 git commit -m "checkpoint: first landing page"。

步驟五：預覽同修改

ChatGPT 桌面 app：內置終端機加內置瀏覽器

1. 按右上角的終端機圖示，或按 Ctrl+`，打開這個 chat 的內置終端機，執行 npm run dev。ChatGPT 可以讀取這個終端機的輸出，所以 dev server 報錯或 build 失敗時，它可以直接參考。
2. 點擊終端機顯示的本機網址，內置瀏覽器就會打開；亦可以按 Cmd+Shift+B（Windows 按 Ctrl+Shift+B）先開瀏覽器，再自行輸入網址。
3. 開啟 Annotation mode，點選一個元素或拖曳選取一個範圍，寫下並儲存留言。
4. 在 chat 發訊息，叫 ChatGPT 處理這些留言，並講明只改哪一部分。

留言時講清楚問題和想要的結果，例如「手機版標題太大，兩行都要完整顯示，不要改按鈕位置」。選取區塊後按 Adjust，可以直接調整字型、文字、間距和顏色並即時預覽，再連同留言送出。官方同時提醒，要把網頁內容視為不可信的上下文（untrusted context）：先審視頁面和 ChatGPT 建議的操作，才分享敏感資料或容許它行動。

如果經常要啟動 dev server，可以在 local environment 設定一個 action（例如用來啟動開發伺服器），之後在桌面 app 頂部一按即可。這個功能只在 ChatGPT 桌面 app 的 Codex 提供。

Codex CLI：用平常的瀏覽器

內置瀏覽器不適用於 Codex CLI 和 IDE 擴充。CLI 用家可以按 OpenAI 的「Iterate on UI with live updates」做法：Codex 在一個終端機視窗執行，另開一個終端機視窗執行 npm run dev，再用平常的瀏覽器打開終端機顯示的本機網址（預設 http://localhost:5173），一邊看畫面一邊叫 Codex 修改。

每輪只改一個範圍

OpenAI 官方的 UI 迭代流程，是先叫 Codex 提出幾個方向，選定後再用細而具體的指示修改：

Propose 2-3 styling improvements for the landing page.

揀定其中一個方向後：

Go with option 2.

Change only the header:
- make the typography more editorial
- increase whitespace
- ensure it still looks good on mobile

以上兩段是官方文件的原文示例，改用中文寫亦可以。重點是每次只講一個區塊、講明不要改甚麼，改完先在瀏覽器確認；滿意就 commit 一次，不滿意可以在 review pane revert，或用 git restore 檔案名 還原已追蹤的檔案。

補回提示詞沒有寫的行為

MotionSites 的預覽只展示一個畫面，很多互動細節不會出現在原文。上線前，逐項叫 Codex 補上或檢查：

• 手機版選單可以開關，打開後點選連結能夠正常跳轉並收起選單。
• 所有按鈕和連結都有 hover 和鍵盤 focus 狀態，可以用 Tab 鍵逐一操作。
• 漢堡選單按鈕有清楚的無障礙名稱（例如 aria-label）。
• 在窄螢幕上，大標題不會溢出畫面，按鈕不會重疊。
• 「Book Now」這類按鈕連到真實的目的地，而不是空連結。

步驟六：上線前清單

OpenAI 在 Sites 文件的分享前清單亦提醒，要確認網站沒有外露機密或敏感資料、secret 值，或你無權分享的第三方內容。即使你不用 Sites，這條原則同樣適用於任何部署方式。

步驟七：build 同部署上線

先在本機 build 和預覽

npm run build
npm run preview

npm run build 會把網站輸出到 dist 資料夾，要部署的就是這個資料夾。npm run preview 會在 http://localhost:4173 啟動一個本機靜態伺服器，讓你檢查 build 後的版本。Vite 官方特別提醒，vite preview 只用於本機預覽，不是正式伺服器，不要用它對外提供網站。部署前先 commit 一次。

三條官方文件列出的部署路線

以下三條路線都來自 Vite 官方的靜態網站部署指南。部署命令涉及登入你自己的平台帳戶，建議自己在終端機執行，不要把平台 token 貼進 Codex 的對話。

以 GitHub Pages 為例，如果 repo 名稱是 my-landing，vite.config.ts 會變成：

import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  base: '/my-landing/',
  plugins: [react(), tailwindcss()],
})

Vite 官方指南附有一個 GitHub Actions 範例 workflow：每次 push 到 main 分支時，用 npm 安裝依賴、build 網站再部署。你可以叫 Codex 按 Vite 官方 GitHub Pages 指南建立這個檔案，完成後先審查內容，再自己 push。各平台的方案、收費和使用條款，請在使用前自行閱讀。

OpenAI 的 Sites：官方託管選項，但要先看資格

OpenAI 另有官方託管功能 Sites（public beta）。Help Center 說明可以在 ChatGPT 網頁版的 Work，或桌面 app 的 Work 或 Codex 建立 Site；Sites 文件亦說明桌面 app 可以由相容的本機專案開始。官方說明每個 Sites 部署網址都是正式（production）部署，想先審閱就要叫 ChatGPT 只保存版本、不部署；新 Site 預設只限擁有者和 workspace 管理員瀏覽。至於哪些方案包括 Sites，OpenAI 各頁說法不一：Sites 文件列出 Plus、Pro、Business、Enterprise 和 Edu，但價格頁的功能表把 Plus 和 Pro 標示為不適用；Help Center 則表示 Sites 適用於 Free 和 Go 以外的付費方案，只限支援地區，目前亦不在歐洲經濟區、瑞士和英國提供。香港不在 OpenAI 的支援清單內，所以本文不把 Sites 當作香港用家的上線路線，也不提供任何繞過方法；身處支援地區的合資格用家，以帳戶介面顯示為準。

附：用 Claude Code 做同一件事

同一套流程（乾淨的 Vite 專案、包裝指示、參考截圖、Git checkpoint、build 後部署）亦適用於 Claude Code，包裝指示可以照用。分別主要在方案和操作細節：

本文不比較兩者誰做網站較好：本站沒有做過可重複的對比測試，結果亦會隨提示詞和模型版本改變。兩個工具在方案、用量和工作方式上的整體分別，見 Codex vs Claude Code 比較。Claude Code 的方案選擇請看 Claude Code 方案指南；想由品牌 brief 和參考圖開始設計整個網站，可以看 Claude Fable 5 網站設計教學；不想在電腦安裝工具，可以參考 Google AI Studio Build 教學。

常見錯誤與解決方法

想繼續用 Codex 做網站：方案與服務

如果打算經常用 Codex 改版，可以先了解用量機制和各方案的分別，再決定是否升級；上文的 Codex 方案指南和用量指南都有說明。

如果你已確認自己符合 OpenAI 的使用資格，想了解本站與 Codex 相關的 ChatGPT 方案服務，可以查看 Codex 適用方案。頁面上的港幣金額是 HK Learn AI 的獨立服務總價，不是 OpenAI 官方價格；本站與 OpenAI／Anthropic 並無從屬關係。服務範圍、責任及退款安排以服務條款為準，下單前亦請先了解代充與成品號涉及的帳戶控制和停權風險。共用或轉讓登入資料並不安全，任何方式都不會改變文首所述的官方支援地區狀態。

用 Codex 做網站，難的不是貼上提示詞，而是之後每一步都可以檢查：乾淨的專案、清楚的包裝指示、每輪一個 checkpoint、上線前換走示範素材，再用官方文件列出的方式部署。照這個流程，換一個 MotionSites 提示詞，或者改用 Claude Code，做法都一樣。