品牌視覺規範
把抽象風格,變成每份作品都能沿用的配色、字體與構圖規則。
2 組方向草案+1 頁規範




















CHATGPT × CODEX · COMMERCIAL DESIGN
把 ChatGPT 的想法,接上 Codex 的製作流程。
從品牌文案、商品視覺,到短影音企劃、提案與網站,
把同一份品牌需求,一步一步做成完整作品。
BRAND DIRECTION
讓日常,多一點自然。
PROJECT FILES
虛構品牌示意 · 從方向到交付的同一份專案
14
完整章節
64
實作單元
1
貫穿全課的品牌案例
THE OUTCOME
每份作品接續前一份成果。資料、視覺和文案一路累積,最後整理成能展示、能修改、能再次使用的品牌作品包。
把抽象風格,變成每份作品都能沿用的配色、字體與構圖規則。
2 組方向草案+1 頁規範
從商品照片出發,保留包裝與比例,做出符合品牌的主圖與情境。
1 張主視覺+2 張情境底圖
讓輪播有閱讀順序,讓不同廣告各自回應一個購買理由。
6 頁輪播+3 款廣告
把需求、方向與作品說清楚;標題、內文與圖形都能繼續修改。
8 頁 PPTX+PDF 預覽
完成電腦與手機都能使用的頁面,再加入有明確規則的商品選擇器。
響應式網站+互動選擇器
把成功步驟、輸入條件與檢查清單寫成 Skill,換個商品再做一次。
品牌宣傳 Skill+測試紀錄
WORDS INTO SCENES
先把想說的話寫清楚,再安排畫面怎麼接。用同一個咖啡品牌,練習把一份核心訊息延伸成文案與短影音企劃。
虛構品牌練習示例 · MORNING FIELD 晨間咖啡
短影音章節聚焦腳本、分鏡與製作準備;完整剪輯與影片特效不在本章範圍。
FROM BRIEF TO DELIVERY
課程會示範第一版,也會示範它做錯時,該怎麼指出問題、保留正確的部分。
DESIGN BRIEF
把想法補完整:
對象 想在家喝好咖啡的人
方向 墨綠、霧白、自然光
限制 保留商品外觀與標誌
交付 主圖、簡報、品牌頁
YOUR CREATIVE WORKFLOW
用同一份專案練習分工:在需要討論時釐清,在需要製作時落地,在需要判斷時回到你的選擇。
CHATGPT
整理資料、推敲品牌訊息,討論並產生視覺草稿。
CODEX
整理專案,製作頁面與工具,協助修改、測試和交付。
YOU
決定方向、核對資料,確認作品是否符合原本的目的。
THE COMPLETE CURRICULUM
從基礎操作開始,把一份需求做到可交付。點開章節,就能看到每個單元要做什麼,以及這一章的驗收方式。
第 1–4 章 · 整理需求,建立文案與視覺方向
從帳號、提示詞與檔案操作開始,分清 Chat、Work 與 Codex,完成一頁可修改的設計需求卡。
用一個設計任務認識 ChatGPT 的用途,分清楚可以交給 AI 的工作,以及仍需要自己判斷的地方。
送出第一個問題,讀懂回應,再提出具體修改;完成一段能接著往下做的對話。
預覽同一品牌的視覺、簡報、網站與可重用流程,選定自己的練習題目。
以同一需求示範討論、產出檔案、操作專案;用任務選介面,不背產品名詞。
檢查可用功能、額度與檔案權限;安裝步驟另附 macOS/Windows 圖文補充。
用任務、背景、限制與輸出格式寫第一份指令;比較資訊不足與說明完整的結果,練習提供一個例子。
實際加入圖片與文件,確認工具讀到哪些內容;下載或開啟產出的檔案,說清楚位置、格式與用途。
提供範例文字,要求固定欄位的 HTML,開啟成品後指定一處修改。
練習補資料、指出問題、保留正確部分;分辨要繼續原對話、整理摘要重開,還是改成較小任務。
本章驗收
能提供素材、寫清要求、找到成果、開啟檔案並指定修改;能說明本機與雲端的差別。
會找資料、核對讀取結果、拆解工作與補問缺漏,也會界定什麼才算完成。
確認受眾、使用場合、主要訊息、行動、尺寸、可修改範圍與完成條件。
閱讀 3 個公開頁面,記錄觀察日期、網址與原始資訊,分開整理事實與推論。
用提供的商品資料練習摘要與欄位整理,回查價格、數字與圖片細節;辨識漏讀、辨識錯字與無法讀取的內容。
整理商品資料、原始 Logo、照片、正式文案與不可變動事項;缺資料就保留待確認。
依序整理資料、提方向、做樣本與延伸;每一段確認後再進下一步,練習把前一段成果交給下一段使用。
設定輸入、步驟、輸出、驗收;以『先提方向、確認後製作』控制需要大量生成的任務。
本章驗收
每個商品主張有來源;假設有標記;長任務有中途檢查;不把競品宣傳當成市場事實。
文字與視覺共享同一個品牌需求;每個購買理由要能回到商品資料核對。
用三段自有或課程提供的文案,整理稱呼、句長、用字偏好與避免使用的說法。 預計成果:一張可供寫作與檢查使用的語氣表。
從資料包挑出可以支持的特色,區分已知事實、推論和還不能承諾的效果。 預計成果:三個訴求方向與各自依據。
先完成一份核心介紹,再依用途改成主標、短貼文及品牌介紹;不把同一段文字硬塞所有版面。 預計成果:一份核心文案與三個用途版本。
讓 AI 提出疑點,再回資料核對;刪掉沒依據的形容,保留品牌語氣和明確行動。 預計成果:修改前後對照,以及主標、賣點、行動文字組成的內容卡。
本章驗收
語氣前後一致;購買理由有資料依據;主標、品牌介紹與行動文字可以一起使用。
將抽象形容詞轉成可以比較與修改的設計條件。
逐項拆解參考的作用,練習描述形式,避免只要求模仿整張作品。
改寫成光源、材質、背景、字數、對齊與裝飾限制,建立可判斷的方向。
產出兩種視覺提案,依受眾、商品辨識與訊息層次選定方向。
建立色票、字體方向、圖片規則、禁用元素與正反例,供後續每一份作品沿用。
本章驗收
色彩、字級層次、留白、材質、光線有具體規則;能解釋選擇理由。
第 5–9 章 · 串起商品視覺、社群、短影音企劃與提案
產生有用途的視覺素材,同時保住商品辨識。
比對清晰度、角度與包裝資訊,標出不可改的標誌、比例、色彩與結構。
交代商品比例、光影與文案留白;先產一張檢查,再決定是否延伸。
沿用品牌規範,改變場景與道具,檢查同一商品在不同畫面的連續性。
示範包裝字、形狀或比例跑掉的失敗例;必要時保留真實商品圖,只生成背景。
本章驗收
商品外觀與原始資料逐項核對;文字與 Logo 預留給可編輯排版處理。
能完成基本排版,選擇重生、局部修改或手動調整,交付可編輯檔案。
依重要性排序修改項目,以可觀察問題取代『再漂亮一點』。
只要求一項改動,再比對其他區域;不把保留指令當成像素不變的保證。
從提供的版型開始,練習放入素材、修改文字、排列前後順序、對齊與匯出;具備這些能力可直接看下一單元。
將底圖、正式文字與原始標誌分開處理;教材附版面規格供 Figma/Photoshop 使用者重建。
比較三種處理路線的結果與耗時,檢查清晰度、裁切、錯字及匯出設定。
本章驗收
文字可單獨修改;原始 Logo 正確;輸出尺寸正確;非修改區域有比對。
用固定規範製作系列內容,讓不同訴求仍屬於同一品牌。
安排封面、情境、特色、證據、常見疑問與行動,控制每頁資訊量。
先確認前兩頁,再完成全組;統一文字層次、圖片處理與對齊。
用特色、情境與問題切入,配對畫面與文案;不虛構見證或成效數字。
練習方形、直式與橫幅重新排版;記錄改動變因,不將作品好看等同投放有效。
本章驗收
每款有清楚訊息;同組版面一致;商品主張有依據;版本差異可說明。
沿用品牌資料與商品素材,完成主題、旁白、分鏡和素材清單;用試讀與逐鏡檢查確認能否開始製作。
每支影片先只回答一個問題,確認讀者、用途、商品資料及看完後的行動。 預計成果:一句影片任務與一個主題切角。
把核心訊息分成可說、可展示的段落,避免旁白只有形容詞而畫面沒有內容。 預計成果:一份完整旁白草稿。
逐段對應需要的商品照片、細節、示範畫面與字幕;標出已備妥及仍需補拍的素材。 預計成果:分鏡表與素材清單。
以實際朗讀時間調整節奏;核對畫面能否支撐說法,與講師示範成片比對。 預計成果:計時後腳本、分鏡、素材、修訂紀錄。
本章驗收
每句旁白都有對應畫面;清楚標示待補素材;試讀後能依時間修改腳本。
從核准內容製作可編輯簡報,讓設計能被理解與討論。
用問題、對象、方案、作品、執行與下一步安排 8 頁內容,避免把全文貼上。
指定每頁目的、版型與素材,要求可編輯物件,先核准兩頁再展開。
指出單頁具體問題,保留已核准頁面;比對簡報與原始文稿。
打開 PPTX 改一個標題與一個圖形,檢查字型替代與 PDF 呈現。
本章驗收
抽查標題、內文、形狀可編輯;逐頁檢查溢位與字型;數字與主張有來源。
第 10–14 章 · 製作網站與工具,整理能再次使用的方法
能讓 Codex 在受控資料夾工作,保留可追溯的成果。
分開原始素材、工作稿、正式輸出;指定可讀寫範圍並理解確認提示。
寫入品牌、檔名、輸出與檢查規範;區分一次指令、專案規則與重用 Skill。
先預覽命名與尺寸表,再複製輸出;保留原檔,檢查數量、格式與實際開啟結果。
學會提供錯誤訊息、指定修改檔案、要求驗證;用版本副本回復,Git 作為延伸閱讀。
本章驗收
能找回核准版本;確認修改範圍;原始素材保留;交付清單與實際檔案相符。
完成能在電腦與手機使用的一頁品牌網站。
規劃首屏、商品特色、使用情境、常見疑問與行動,沿用已核准文案。
帶入既有素材與品牌規範,先做完整靜態頁,再調整版面;解釋必要檔案概念。
檢查導覽、文字換行、圖片比例、FAQ、鍵盤焦點與空白狀態,完成一次真實修復。
主線交付可移轉檔案與預覽;示範當期可用發布路徑。學生確認可見範圍後才公開。
本章驗收
360/768/1440 px 檢查;主要連結可用;無假表單成功訊息;來源檔可再次修改。
以明確規則完成一個輕量工具,練習需求與測試。
以喜好、使用場合、預算區間對應既有商品,先確認規則與資料,再做介面。
將選擇、結果與重設流程做成前端互動;使用範例資料,不連金流或會員系統。
手動計算預期答案,找出選擇器誤配、按鈕無效或手機溢位等問題並修正。
沿用品牌視覺,確認新增互動沒有破壞原頁面;留下規則說明與可修改檔案。
本章驗收
5 組輸入測試通過;可重新選擇;不適合或缺資料時有明確提示。
做出可換商品使用的品牌工作流,理解排程的條件。
從自己的工作案例判斷何時需重用流程、外部工具或單次交辦,避免為串接而串接。
用建立 Skill 的輔助工具寫入觸發條件、輸入、步驟、輸出及人工確認點。
測試正常資料與缺少價格兩種情況,檢查是否硬套舊商品、捏造資訊或漏了檔案。
示範每週整理公開競品更新的草稿任務,確認來源與執行條件;無排程者照同規格手動執行。
本章驗收
換商品可重用;資料不足會指出缺漏;不自動發布;知道如何停止與修正。
將方法轉用到不同品牌,完成可展示、可修改、可再次生產的作品。
以虛構陶藝體驗課示範需求、時間地點、報名行動的差異,練習方法移轉。
選商品或服務題目,列出必要素材、三個里程碑與可接受的完成條件。
對照評分規準檢查視覺、資訊、檔案、網站與重用流程,找出最值得先改的問題。
整理前後對照、檔案目錄、已知限制與重用步驟;安排一週後換資料再做一次。
本章驗收
依 100 分規準達 80 分;資訊與功能錯誤須修正;至少一次離開範例的獨立重做。
以上為完整課綱規劃,影片陸續製作中;已上架單元請查看下方「課程內容」。
LEARN · MAKE · CHECK
從交代需求到修改成果,看見每一次指令與判斷的理由。
沿用方法,替換商品、素材和文案,做出第二份自己的作品。
實際改一個標題、點一次連結,確認作品可以繼續使用。
一段真正有用的修改指令
「請保留商品、配色與構圖,只將主標改成『讓日常,多一點自然』。如果文字會超出版面,先提出調整方式。完成後,檢查商品外觀與其他文字是否維持不變。」
從模糊的「再漂亮一點」,練習說出範圍、限制與檢查方式。
YOUR COURSE TOOLKIT
CASE FILES
商品資料、圖片與需求設定,先有明確的練習起點。
BRIEF TEMPLATES
需求單、視覺規範與分段任務格式,知道該交代哪些資訊。
LAYOUT GUIDES
跟著規格練習排版、製作與修改,逐步建立自己的主版型。
QUALITY CHECKS
逐項核對文字、尺寸、來源檔與互動,整理可追溯的交付紀錄。
教材內容依正式課程公告。
IS THIS FOR YOU?
本課聚焦品牌設計與前端實作;API 開發、資料庫、金流與大型系統工程不在主線範圍。
BEFORE YOU START
QUESTIONS & ANSWERS
前兩章會從帳號、提示詞、素材上傳、成果下載與檔案位置開始。建議先完成第一份需求卡,再往視覺或網站實作前進。
課程從自然語言交代需求、閱讀成果與指定修改開始,會解釋 HTML/CSS 與必要的檔案概念。你仍需要實際打開頁面、點擊互動、核對結果,練習判斷哪些地方需要修正。
本課沒有承諾全程免費方案皆可完成。生成圖片、處理檔案與使用 Codex 的功能和額度,依當期帳號方案而異。開始實作前會先檢查你的環境;工具訂閱需自行準備。
正式文字與標誌排版以 Canva 作為主線,並提供版面規格。熟悉 Figma 或 Photoshop 的人,可以在自己的工具裡重建;仍需完成可編輯文字與正確輸出的檢查。
課程會練習辨識錯誤、限制修改範圍,並將底圖、正式文字與原始標誌分開處理。必要時保留真實商品照片,只生成背景,再用排版工具組合。
課程會要求保存原始素材、工作稿與正式輸出,並實際打開簡報、網頁和版型修改。PNG、PDF 預覽與可編輯來源檔會分開整理。
主線是一頁式品牌網站與前端商品選擇器,用範例資料練習需求、介面與測試,不接金流、會員資料庫或訂單後台。
課程將需求整理、視覺規範、分段修改與驗收作為主線。介面與功能可能改變,實作前仍需確認當期可用方式;課程更新安排以正式公告為準。
完成可試讀計時的旁白腳本、逐鏡分鏡表、素材清單與修訂紀錄。課程練習如何從品牌訊息安排畫面與行動;完整剪輯與影片特效不列入本章範圍。
YOUR INSTRUCTOR
UI/UX 設計師・設計教育者
以數位產品設計與教學經驗,把設計判斷、操作步驟和修改方式拆成能練習的任務,帶你把想法整理成可使用的作品。
認識講師YOUR NEXT PROJECT STARTS HERE
先挑一個題目,再把它一步一步做完整。
本課程為獨立製作,與 OpenAI 無隸屬或背書關係。
在 IT 和網路產業近十年的數位產品設計師,專注於 UI/UX 使用者介面與體驗設計領域,在全臺多間大專院校與社群機構擔任顧問及講師,並於國內外各大線上課程平台開立設計課程,目前已累積過萬名學員參與上課。
為 Adobe 官方合作的設計師兼 Insider,曾環島舉辦設計工作坊,並獲邀代表台灣飛往美國洛杉磯參加 Adobe MAX 設計師年會,並以設計師 KOL 角色與 Intel、微軟、華碩、微星等知名品牌合作推廣科技產品。
常在 Medium 寫作設計上的知識與觀察,並得到官方認證 #Design 領域 Top Writer,同時也會在 YouTube 上製作影片教學設計的方法,近期開始實驗使用 VTuber 技術在 IG 用 Reels 短影片分享設計技巧。
▌擅長利用淺顯易懂的內容,將艱難的設計與開發技術,用任何人都能夠聽得懂的語彙,說給每一個人聽。