AI
模型
LLM
Agent
Skill
一張圖看懂彼此的關係
IDEAS, STORIES & TOOLS
Design & AI, unfolded.
由設計實務工作者共同整理，讓剛入門的設計師也能理解 AI、網頁與數位工具。
不要求先懂技術，用圖解、案例和實作把事情真正說清楚。
START HERE
第一次來，不用先懂術語
先選一個現在想完成的目標。我們會從熟悉的設計情境開始，再慢慢補上需要的技術觀念。
FILTER
篩選內容
全部內容
主題
難易度
FEATURED
推薦先讀
STORIES
接著想讀什麼？
AI 三秒做完，我練了十年，欸？
當熟練不再稀有，我們怎麼重新看見自己的價值？
以前缺一個團隊，現在先開一個對話框
當能做的事變多，職業邊界也有了新的入口。
有了 AI，我可以少做一點什麼？
把時間省下來之後，留給什麼，也值得自己決定。
卡在空間與設計之間，我用 AI 做了一個模擬器
從展覽協作難題出發，用 AI 做出能共同討論的畫面，並在文章裡體驗模擬器。
把網頁做漂亮，先看懂它的零件
給零網頁基礎的設計師：點圖認識七個部件，再親手切換三種首屏排列。
同一份內容，該用哪種網頁版型？
單欄、分欄、網格、Bento、側欄怎麼選？固定一個版型，再切換比較內容的排列與主次。
第一眼看懂你：Hero 要放什麼？
切換主標、說明、圖片與行動入口，固定版本比較，讓讀者第一眼看懂你能幫什麼忙。
為什麼看起來很擠？字體、字級與留白
用同一張作品卡，比較字體、字級、行高、寬度與留白如何改變閱讀感受。
同一個版型，怎麼長出自己的品牌感？
保持內容與版型不變，切換色彩、圖片裁切與表面細節，找出自己的視覺規則。
喜歡這個網站，怎麼做出自己的版本？
把「我喜歡這個感覺」拆成能修改的選擇，再讓自己的文字與作品住進去。
用組建團隊的思維使用 Codex
從角色分工到資料交接，用一個專案建立自己的工作流程。八篇系列的閱讀起點。
Codex 是什麼？從這個教學網站，看懂 AI 如何參與專案
不懂程式也能理解：用網站裡的互動文章，看清楚你和 Codex 各自負責什麼。
把我的旅遊 App，變成你的下一趟旅行
把朝聖網站變成你的旅行工具包。附實際模板畫面、製作提示詞與原始碼下載。
第一次做網頁，先看懂這些基本名詞
親手切換 HTML、CSS、JavaScript，再用班級作品展與生活圖例，認識 34 個網頁名詞。
怎麼跟 AI 說清楚你的問題？
用三步驟把零散想法整理成 AI 能理解的任務。
Skill 是什麼，為什麼會出現？
把工作方法整理成 Agent 可讀取與重複使用的指南。
HTML 的規格與互動應用
從版面到互動，理解設計想法如何成為網頁。
CURATED TOOLS
推薦網站與工具
值得收藏的網站與創作工具。從用途出發，找到適合自己的選擇。
Higgsfield
higgsfield.ai
探索 AI 影像、影片生成與鏡頭表現。
擅長：商品動態、廣告短片與鏡頭運動的視覺嘗試。
FLORA
flora.ai
在同一張畫布上發想、串接素材與工作流程。
擅長：串接參考圖與生成步驟，反覆比較創意方向。
KREA
krea.ai
生成、編輯與增強影像，快速嘗試視覺方向。
擅長：快速探索畫面風格，並放大、修整既有影像。
Lovart
lovart.art
以對話提出需求，在同一張畫布生成、編輯與整理設計。
擅長：從品牌方向延伸商品情境、社群圖與系列行銷素材。
Recraft
recraft.ai
生成與編輯圖像、插畫及向量素材，探索一致的視覺風格。
擅長：製作圖示、向量插畫與同系列的品牌圖像素材。
動態內容來自各官網的示範影片，非本站錄影或實測；素材與商標屬原權利人。影片無法播放時保留官網截圖。點擊卡片另開官網。
目前沒有符合這個條件的文章或工具。
EXPLORE & PLAY
LAB
自製網頁、互動實驗與作品分享。把點子做出來，親手玩看看。
ABOUT UNFOLD
設計師一起寫給設計師的入門平台
UNFOLD 希望把 AI、網頁與跨領域工具，翻譯成設計師看得懂、做得到，也能帶回工作裡的方法。現在由 UNFOLD 編輯部整理，未來會邀請不同專業的設計實務工作者共同撰寫。
每篇內容都會逐步補上作者背景、實測範圍、尚未驗證項目與參考來源；不把假想案例寫成真實經驗，也不把工具介紹直接當成推薦。
完整教學
已整理與查證，可跟著理解或操作。
實戰案例
來自實際工作，說明限制、判斷與結果。
研究筆記
整理目前理解與來源，內容可能持續更新。
實驗日誌
公開正在摸索的過程，不假裝已有定論。