註冊
ChatGPTCodex

用 Codex 從零做一個網頁：說清技術棧和產出、可附截圖參考、讓它啟動開發伺服器，再小步迭代，附 4 段提示詞

怎麼用 Codex 做一個前端網頁？官方提示指南的做法是先說清技術棧和產出（頁面、小組件、帶運行說明的 README），可以附上截圖當參考，讓它啟動開發伺服器並告訴你本地地址，之後每次只提一兩個具體修改。本文給 4 段提示詞和排查表。

NNathaniel bigo··原創首發·AI 輔助撰寫
7 分鐘讀完
資料核對於 2026-11-05 · 依據官方文檔與公開資料整理 Plus 帳號
本文根據 Codex 官方文檔《Prompting Codex》整理，資料核對於 2026-11-05。配圖為本站整理的示意圖，不是軟件截圖。本站（bigolab.com）不是 OpenAI 官方網站。安裝與配置見 /guides/codex-getting-started，第一次使用的流程見 /guides/codex-first-day-from-signup-to-first-task，本文只講做網頁。

適用於誰

  • 想做個人主頁、活動頁、產品介紹頁，但不會寫前端的人；
  • 有設計稿或參考截圖，想快速做出可點擊頁面的人；
  • 想先做原型，再決定要不要認真開發的人。

結論先說

  1. 先說清技術棧和產出。 官方示例裏的說法是：指定 React、Vite、Tailwind、TypeScript 之類的技術棧，列出要產出的頁面或路由、小組件，以及帶運行說明的 README。示例只是示例，你可以換成自己熟悉的。
  2. 有參考圖就附上。 官方示例支持附截圖，並要求對齊間距、字體和佈局。命令行裏把圖片文件拖進終端即可，IDE 裏可以拖拽或粘貼。
  3. 圖裏看不出來的行為要寫出來，比如懸停效果、表單校驗、鍵盤操作。
  4. 讓它啟動開發伺服器，並告訴你本地地址或路由。 這是官方示例裏的驗證辦法。
  5. 之後小步迭代。 官方的做法是另開一個終端運行開發伺服器，每次提兩三個具體的樣式改進，選一個方向再細化；滿意的提交，不滿意的回退。

用 Codex 做一個網頁的流程：說清技術棧、給參考、列出產出、啟動開發伺服器、小步迭代

圖：本站根據 Codex 官方文檔《Prompting Codex》 整理的示意圖

一、動手前：先想清楚這幾件事

  • 頁面是做什麼的：個人簡歷？活動報名？產品介紹？一句話寫下來；
  • 有幾個頁面、每個頁面有什麼內容：先畫個草圖或列提綱，字寫在紙上也行；
  • 有沒有參考：喜歡的網頁的截圖，或你自己畫的草圖；
  • 技術棧：不懂就寫“選最常見、容易上手的方案，並解釋你的選擇”；
  • 文案和圖片：用你自己的，別讓它隨便編造公司介紹、客戶評價或數據。

在一個空文件夾裏啟動 Codex，讓它在裏面創建項目，這樣不會改到其他項目。

二、4 段可以直接複製的提示詞

方括號裏是要你自己填的內容。

1. 從文字描述開始

請在當前空目錄裏創建一個靜態的展示網頁，用 [React + Vite + Tailwind + TypeScript]（不熟悉的話請選最常見的方案並說明理由）。
頁面內容：[個人介紹 / 產品介紹 / 活動報名]，包括：頂部導航、首屏標題和一句話介紹、3 個特色卡片、聯絡方式區。
文案先用佔位文字，我之後替換。要求在手機和電腦上都能正常顯示。
產出：首頁、需要的小組件，以及一個 README，寫明怎麼安裝依賴和啟動。
完成後啟動開發伺服器，告訴我本地地址。

2. 從截圖開始

先把截圖儲存到本地，再附加給 Codex。

附上的是我想參考的頁面截圖。請做一個類似的頁面，技術棧用 [ ]，對齊它的間距、字體大小和整體佈局，但文案和圖片全部用佔位內容，不要複製原頁面的文字或圖片。
截圖裏看不出來的行為：[按鈕懸停變色；表單必須填寫電郵；移動端導航摺疊成選單]。
產出：一個頁面、幾個小組件、README。啟動開發伺服器並告訴我本地地址。

不要拿別人的網站內容直接復刻上線。參考佈局可以，文字、圖片、品牌元素有版權和商標問題。

3. 小步迭代樣式

先另開一個終端運行 npm run dev（項目裏的啟動命令以 README 為準），在瀏覽器裏看着頁面，再對 Codex 說：

請對首頁的頂部區域提出 3 種樣式改進思路，先不要改文件，每種用兩句話描述效果。

選定一種之後：

採用第 2 種。請只改頂部導航：背景改為白色，加細的底部分割線，連結懸停時顯示下劃線。其他部分不要動。

4. 手機端檢查

請檢查頁面在 375px 寬度下的顯示：有沒有文字溢出、按鈕太小、圖片變形、橫向滾動條。列出你發現的問題和打算怎麼改，我確認後再改。

如果你手動改過文件，要告訴它，免得它下一次覆蓋。

三、做到一半遇到問題

網頁做到一半遇到的情況：頁面打不開、要執行陌生命令、改亂了樣式、手動改過文件、想上線

圖：本站根據 Codex 官方文檔《Prompting Codex》 整理的示意圖

  • 啟動開發伺服器需要批准：官方說明 Codex 在本地沙箱中運行命令，限制文件和網絡訪問，超出範圍會按你的審批策略詢問。看清命令再批准，權限說明見 /guides/codex-permissions-sandbox；
  • 安裝依賴失敗：把終端報錯完整複製給它，按 /guides/codex-fix-bug-error-repro-prompt 的方法說明；
  • 改着改着亂了：用 Git 回退到上一個滿意的狀態，再用更小的要求重新來；建議每個滿意的階段都提交一次；
  • 上線之前：自己檢查依賴來源、頁面裏有沒有測試用的內容、有沒有放進不該公開的資訊；託管方式和域名備案等要求不在本文範圍，以服務商和當地規定為準。

四、做網頁時容易忽略的幾件事

下面是常見經驗，不是官方清單：

  • 圖片和字體的來源：用自己拍的、自己做的，或確認可商用的素材；別讓它憑空“找”一張圖，也別用來歷不明的字體；
  • 表單：做報名、留言表單時，要想清楚數據發到哪裏。純前端頁面本身不會儲存數據，需要後端或第三方表單服務，這一步最好單獨討論並由你拍板；
  • 文案真實：不要讓它編造客戶評價、獲獎、數據，頁面公開後這些都要你負責；
  • 搜尋與分享：標題、描述、分享圖是否填寫，可以最後讓它統一檢查一遍；
  • 可訪問性：對比度、圖片替代文字、鍵盤能否操作，可以讓它按這些點逐條檢查，再由你確認。

做完一輪之後，建議讓它寫一份簡短的說明：項目用了哪些依賴，頁面怎麼構建，哪些地方是佔位內容待替換。這樣隔一段時間回來，或交給別人維護，都不會不知所措。

常見問題

Q：完全不會前端，能做出來嗎？

能做出簡單頁面。關鍵是你要會看效果、會用具體的話提修改意見；出了問題時，把報錯完整貼給它。

Q：做出來的頁面能直接給別人用嗎？

先自己檢查代碼和內容。AI 生成的頁面可能有無障礙、性能和安全方面的問題，正式使用前需要有人審查。

Q：一次對話越來越慢怎麼辦？

會話變長後可以開新對話，並讓它先讀一遍 README 和 AGENTS.md，命令參考 /guides/codex-cli-commands-cheatsheet。

Q：Codex 要花錢嗎？

Codex 隨 ChatGPT 套餐提供，具體額度以官方頁面為準，額度規則見 /guides/codex-usage-limits，需要更多額度可以看看 /chongzhi/chatgpt-plus 裏的說明。

參考資料

  • Codex 官方文檔：Prompting Codex — https://learn.chatgpt.com/docs/prompting

Nathaniel 的更多內容

  1. 01

    Claude Code 在 Windows 上的常見坑：Git Bash 還是 PowerShell、路徑反斜槓、假報錯、WSL 怎麼選

    Windows 上用 Claude Code，裝好之後最容易踩的是：用哪個 shell、路徑寫法不一致、grep 沒匹配就報錯、鉤子沒生效、WSL 和原生怎麼選。本文逐條按官方文檔整理原因和處理辦法，附三段提示詞和一張對照表。

    Claude0
  2. 02

    Claude Code Hooks 實戰「提交前自動跑測試」：PreToolUse 攔住 git commit，測試不過就退出碼 2，附 Windows 注意點

    只寫一個完整例子：讓 Claude Code 每次要執行 git commit 之前，先自動跑項目測試，沒通過就攔下並把輸出交給它修。本文按官方 Hooks 文檔給出腳本、settings.json 配置、測試方法、排錯和 Windows 的兩處坑。

    Claude0
  3. 03

    Claude Code 自定義斜槓命令與 Skill 實戰：從零寫一個「生成更新日誌」的 /release-notes，含傳參、預執行命令和調試

    概念看過了，還是不知道從哪下手？本文按 Claude Code 官方「Extend Claude with skills」寫一個完整可用的例子：用 /release-notes 根據 git 記錄生成更新日誌，覆蓋目錄、frontmatter、傳參、預執行命令、預授權和調試。

    Claude0
  4. 04

    Claude Code 部署網站：先寫 Dockerfile 和 compose 在本機跑通，再按清單上雲伺服器，別讓它直接改線上

    想讓 Claude Code 幫你把網站部署到雲伺服器。本文只寫通用做法，按 Docker 官方文檔講：讓它寫 Dockerfile、.dockerignore 和 compose，在本機跑通，端口和數據卷怎麼設，再給出上線清單，並說明為什麼不要讓它直接動線上機器。

    Claude0
  5. 05

    Claude Code 寫爬蟲與數據清洗：先查 robots.txt 和網站條款，控制頻率，原始數據留一份再清洗

    想讓 Claude Code 寫爬蟲抓數據再清洗。本文先講合規：robots.txt 不是授權也不是安全措施、網站條款要自己讀；再講怎麼用 Python 標準庫檢查規則、小樣本先試、儲存原始數據，以及用 pandas 清洗，附四段提示詞。

    Claude0
  6. 06

    Claude Code 寫 Chrome 擴展：按 Manifest V3 起步，加載未打包的擴展，改了哪些文件要重新加載

    想讓 Claude Code 幫你寫一個 Chrome 擴展。本文按 Chrome 官方擴展文檔講：manifest.json 的最小寫法、在 chrome://extensions 加載未打包的擴展、哪些改動要刷新、怎麼看控制檯和報錯，再給四段提示詞，以及權限要盡量少。

    Claude0

同產品的其他教學

  1. 01

    OpenAI API 的 token 怎麼算、怎麼估算費用：input_tokens 計數接口、tiktoken 和隱藏的輸出 token

    發請求前想知道會用多少 token？官方有 Responses 的 input_tokens 計數接口，能把文字、圖片、文件、工具定義一起算準；本地 tiktoken 只適合純文本。本文給 Python 和 Node 示例，講輸出 token 為什麼可能比看到的多，以及怎麼估算費用。

    ChatGPT0
  2. 02

    OpenAI API Node.js / TypeScript 快速上手：npm install openai、example.mjs 第一個請求，到流式、函數調用、聯網搜尋

    用 Node.js 調 OpenAI API：設定 OPENAI_API_KEY 環境變量，npm install openai，新建 example.mjs，用 client.responses.create 發出第一個請求。並列出圖片、文件、流式、函數調用、聯網搜尋和錯誤捕獲的 Node 寫法。

    ChatGPT0
  3. 03

    OpenAI API 用量層級（usage tiers）與速率限制怎麼提升：Free、Build、Launch、Grow 和後台 Limits 頁

    OpenAI API 的限速不是固定的：官方按累計購買額度把組織分成 Free、Build、Launch、Grow 四個層級，達到門檻自動升級。本文講 RPM、TPM 等指標、怎麼在後台查自己的限額、響應頭怎麼讀、花費上限和限速的區別，以及怎麼讓限額變得夠用。

    ChatGPT0
  4. 04

    OpenAI API 報錯 400、401、403、404、429、500、503 怎麼排查：按官方錯誤碼頁逐個看原因和解決辦法

    調用 OpenAI API 返回 400、401、403、404、429、500、503，各自什麼意思？本文按官方 Error codes 頁，每個狀態碼一節，寫清官方給的原因和解決辦法，並說明 404 在官方頁面裏的位置、429 的六種情形，附 Python 和 Node 的錯誤捕獲寫法。

    ChatGPT0
  5. 05

    OpenAI Realtime API 是什麼：語音到語音會話、WebRTC 與 WebSocket、臨時密鑰和事件機制

    Realtime API 讓模型直接處理音頻，做可以隨時打斷的語音助手。本文按官方文檔講它是什麼、什麼時候用、瀏覽器接入的流程、session 與事件、可用聲音、60 分鐘會話上限、安全標識，以及它和轉寫、文字轉語音的分工。

    ChatGPT0
  6. 06

    OpenAI 圖像生成 API 怎麼用：gpt-image 系列、images.generate 與 Responses 工具、尺寸質素和遮罩編輯

    用 OpenAI API 生成或編輯圖片，有 Image API 和 Responses 裏的 image_generation 工具兩條路。本文按官方文檔給 Python 和 Node 示例，講 gpt-image 模型選擇、尺寸質素格式參數、遮罩編輯、被攔截時的錯誤處理，以及需要組織驗證的提醒。

    ChatGPT0

0 條評論

登入 後參與評論

還沒有評論，來搶沙發～