ChatGPT 網站設計 Prompt：需求、預覽與改版
先用 ChatGPT 將網站想法整理為明確需求，再請求目前工具能交付的結果。這個流程分別檢查輸入、回傳檔案、瀏覽器呈現與程式交付。
於 2026 年 10 月 9 日審閱。工具功能隨帳號和版本變動，請核對下方官方文件。
從可用的頁面開始
先預覽可用的 HTML 頁面，再讓程式代理結合原始碼與配套 Prompt，練習這些方法。
Skills 維持免登入免費閱讀與複製。範本可公開預覽；原始碼下載與配套 Prompt 需要帳戶及相應購買權益或方案。 查看原始碼權限與價格
給 ChatGPT 完整的網站需求
說明受眾、目的、區塊、既有文案與主要行動，以少量具體選擇描述視覺方向。保護產品事實、價格和既有連結；資料不足時要求列出問題，不自行編造評價或功能。
請求檔案，檢查可用預覽
要求說明檔名和開啟方式。OpenAI 文件介紹支援此功能時在檔案檢視器中預覽 HTML；會話只回傳程式碼時，儲存後在本機開啟。Sites 是獨立的建站與託管流程，寫一段 Prompt 本身不會發布網站。
針對一個可見問題迭代
說明視窗寬度、受影響區塊與預期結果。例如，只修正 320 像素下溢出的筆記區，保留桌面排版和連結。檢查修改後的檔案；解釋 CSS 修改不等於在瀏覽器中驗證通過。
交付真實檔案與限制
交付檔案、需求、資源清單與未解決問題。要求程式代理先檢查現有框架和路由再實作，保留驗證、價格和後端介面約定，再於實際專案檢查主要行動、手機版面與鍵盤操作。
可自行改寫的原創練習
以下 Neruve 原創範例保留英文，是建議輸入，不是工具實測輸出或付費範本 Prompt。使用前請替換虛構事實。
ChatGPT：完整網站需求
Create an original website brief for Fieldnote, a fictional research-notes app.
Audience: small product teams. Explain collect → compare → decide.
Output: one self-contained HTML/CSS file if your current tools can create files;
otherwise provide complete code and explain how to open it locally.
Use warm paper, ink text and one clearly fictional research-note specimen.
Sections: introduction, specimen, three-step workflow and a closing workflow link.
The primary action is “Explore the workflow” and targets #workflow.
Include semantic headings, a skip link, visible focus and reduced motion.
Support 1280, 390 and 320 px. Do not add signup, prices, customer logos or metrics.
List the output files and the checks actually performed.ChatGPT：一次聚焦的手機修正
Review the current Fieldnote output. At 320 px, the note specimen extends
beyond the viewport. First identify the specific element and sizing rule.
Change only the specimen layout; preserve desktop typography, all copy and links.
Use wrapping or responsive sizing instead of hiding content or clipping the page.
Return the changed file, then repeat 320, 390 and 1280 px checks.
If you cannot open the result in a browser, mark those checks as not performed.
Do not describe proposed CSS as a verified fix.真實練習：用 Codex 生成 Fieldnote
Fieldnote 保留原創輸入、未經改寫的 Codex HTML，以及桌面和手機檢查紀錄。該次執行沒有提供 frontend-design Skill，也不是 ChatGPT 或 Claude Design 實測。
真實練習：用 Codex 生成 Fieldnote常見問題
這段 Prompt 會直接產生可用並上線的網站嗎？
取決於目前會話啟用的工具及實際完成的工作。需求、產生檔案、預覽與已託管網站是不同交付物。這些範例尚未在 ChatGPT 執行；連結中的 Fieldnote 紀錄的是獨立 Codex 執行。
瀏覽設計與配套 Prompt
Neruve 的公開目錄提供網站設計、可用的配套提示詞及 Skills 目錄。互動預覽無需登入；配套提示詞依項目與方案權益取得。本工作流程使用你自己的程式開發工具，無需公開的 Neruve 網站產生器。
官方參考資料
第三方工具和 Skill 屬於各自作者。連結用於參考，不表示合作關係或已包含相關使用權益。