01 · CODEX 入門

從設計師熟悉的工作開始

接到一份設計案時，你可能先問：給誰看？要傳達什麼？最後交付海報、簡報，還是一個網站？接著才整理資料、畫版面、調細節，並確認輸出能不能使用。

和 Codex 合作，也可以從這個角度理解。你先說清楚想完成的事情，它在取得必要資料與操作權限後，協助把工作往下做。你仍要看成果、提出修改，決定是否符合需求。

02 · CODEX 入門

把 Codex 想成能動手的 AI 協作者

Codex 是能協助讀取專案、修改檔案與檢查成果的 AI 工具。OpenAI 將它定位為 AI 程式開發代理；「代理」可以先理解成：除了回答問題，還能在你允許的工具與範圍內，一步步處理任務。

例如製作網頁時，它可以閱讀專案裡的檔案、協助寫入或修改程式，並用可用的工具執行檢查。對設計師來說，可以先把它想成一位拿得到工作資料、也能協助製作的 AI 協作者。

這個比喻有一個重要前提：它不會自動知道你的品牌、審美和所有舊資料，也可能理解錯誤。你要提供相關內容，並檢查它做出來的東西。能讀哪些檔案、能不能操作瀏覽器或發布網站，也取決於使用環境和授權。

權限可以先這樣理解：
只讀：看得到資料，但不能改。
可修改：能變更被允許的檔案。
發布：把成果放到別人能開啟的位置，通常是另一個需要明確同意的動作。
不要提供密碼、金鑰、未公開客戶資料或與任務無關的個資。
先認識三個詞就夠：
專案：為同一個目標整理在一起的工作與資料。
檔案：實際保存內容、圖片或程式的東西。
程式：告訴電腦「遇到什麼情況，要做什麼」的指示。

本篇以這個網站的桌面 Codex 協作紀錄為案例，不是所有介面通用的按鈕操作教學。產品能力參考文末官方文件。

03 · CODEX 入門

同一個需求，可以問方法，也可以交任務

假設你想在教學網站放一篇介紹 HTML 的文章。以下兩種說法，期待的成果不同。

想先理解方法

「我想做一個可以互動的教學網頁，應該準備什麼？」

你期待：解釋、選項和建議，幫助你做決定。

想做出一個成果

「請閱讀這個網站，替這篇文章加入可操作的範例，沿用現有樣式，並檢查手機畫面。」

你期待：實際修改的檔案、可打開的頁面與檢查結果。

這不是把 ChatGPT 說成只能聊天。不同產品與模式都可能有工具能力；這裡比較的是「我現在要一個答案，還是一份完成的工作」。不確定方向時先討論，方向明確後再交代實作，兩種方式可以接在一起。

04 · CODEX 入門

案例：把網頁名詞變成能動手理解的文章

這個教學網站的出發點，是分享 AI 的使用方式與基礎知識。製作過程中，出現了一個很具體的要求：講解網頁術語時，希望連 13 歲的讀者也容易理解，旁邊有圖片，並能看出各項功能扮演什麼角色。

這個要求後來形成了〈第一次做網頁，先看懂這些基本名詞〉中的互動作品卡。你可以開關 HTML、CSS、JavaScript，觀察內容、外觀與按讚功能的不同。

互動文章使用的校園插畫素材：橘色屋頂、樹與太陽。
案例中的校園插畫素材。完整作品卡包含標題、配色與按讚操作；這張圖不是 Codex 介面截圖。

  1. 先定義讀者要懂什麼

    這次要解決的是「只有名詞解釋，仍然不容易想像」。因此，目標是讓讀者看見差別，而不只是增加更多術語。

  2. 把要求轉成可做的範例

    用同一張班級作品卡，讓 HTML 負責內容、CSS 負責外觀，JavaScript 負責按讚回應。這些詞現在不用背；重點是用同一個例子，一次觀察一個變化。

  3. 讓成果真正存進網站

    Codex 協助整理文章、建立插圖與修改頁面檔案。畫面背後的文字、樣式與操作規則都要保存下來，才會成為能開啟的網頁，而不是只留在聊天裡的建議。

  4. 打開、操作，再發布

    製作後檢查名詞切換、開關、改標題、換色、按讚與重設，也以不同畫面寬度檢查排版。接著發布到網站，讓讀者用網址打開。

案例範圍：以上整理自本網站的需求與製作紀錄，不是完整聊天逐字稿。互動文章已做桌機與手機寬度的瀏覽器檢查；尚未進行真實 13 歲讀者理解測試，不能把「操作通過」當成「每個人都看得懂」。

原案例的開關是教學模擬：關閉作品卡的 JavaScript 回應，是讓按讚失效，並沒有關掉整個頁面的程式。控制面板仍然需要程式才能運作。這也是檢查時要留意的事：示範有沒有把自己的限制說清楚？

05 · CODEX 入門

你是專案負責人，Codex 協助把工作做出來

用組建團隊的思維來看，你先安排工作責任，而不是先開很多個 AI 對話。

你負責判斷

  • 文章要給誰看，解決什麼問題。
  • 哪種圖例、文字與畫面符合你的方向。
  • 哪些內容正確，哪些需要再查證。
  • 成果是否值得交付或發布。

Codex 協助執行

  • 讀取你提供或允許存取的資料。
  • 提出結構與實作方法。
  • 修改成果檔案，整理改動。
  • 執行可用的檢查並回報結果。

同一段對話可以先討論企劃，再進行製作，最後檢查成果。這是把工作分階段，不等於真的有幾位互相獨立的專家在把關。即使它說「完成」，你仍要看實際結果。

在這個網站裡，設計師的價值沒有消失：誰是讀者、講解順序是否合理、圖像是否幫助理解，都是設計判斷。Codex 能協助把選擇做成看得見的東西，讓你有具體成果可以繼續調整。

06 · CODEX 入門

不懂程式，可以開始；不懂結果，還是要追問

你不需要先學完一門程式語言，才能開始提出需求。但遇到不理解的地方，可以要求用白話解釋，並指出可以怎麼驗證。

  • 它說檔案已改：請它指出哪個頁面能看見改動。
  • 它說測試通過：請它說明測了哪些操作，還有哪些沒測。
  • 本機看得到：不代表網站已上線。本機是自己電腦裡的版本；發布是把成果放到別人能存取的位置。
  • 功能有反應：不代表內容正確、設計合適，或所有手機都正常。

這些問題不需要程式背景，卻能幫你把「看起來做完」和「真的能交付」分清楚。

07 · CODEX 入門

第一次，先交一個小到看得出差別的任務

開始前準備三樣東西就好：一個可以使用的專案資料夾、一件範圍小的任務，以及你打算去哪個頁面確認結果。如果你已經有一個網頁專案，可以先試著增加一段介紹、一張圖，或調整一個閱讀區塊。先不要把登入、付款、會員系統全塞進第一個任務。

下面是可以依自己的資料修改的練習指令，不是作者當時的原話：

我有一個給設計師閱讀的教學網站。請先閱讀我提供的首頁與文章檔案，用不需要程式背景的方式，說明它們各自負責什麼。

我想在指定文章加入一段「給第一次閱讀的人」的介紹。請先提出內容與放置位置，保留既有視覺和其他文章，等我確認再修改。完成後告訴我如何打開檢查，以及有哪些地方尚未驗證。

你的第一次練習，做到三件事就很好：說清楚目標、找到成果、確認它真的符合需求。接下來再把這些做法整理成自己的流程。

下一篇預告：我是專案負責人：先把目標說清楚。將練習把「我想做一個網站」縮成一張能執行、能驗收的任務卡。下一篇尚未發布，可先回到系列路線。

資料來源與案例說明

產品資料查閱日期：2026.10.29。本文以桌面協作與本網站的可見成果說明概念，沒有比較價格、模型排名或承諾所有帳戶都具備相同工具。