AI 設計應該產生結構
多數團隊需要的不是另一張無法編輯的平面圖片。他們需要的是能進入真實工作流程的起點：Figma、PowerPoint、Canva、Keynote、SVG、JSON、程式碼，或是自家的管線。
這就是 Codia 的 AI 設計理念核心。我們用 AI 理解視覺內容，並把它重建成可編輯的結構。截圖、PDF、圖片、投影片或設計檔，不應該永遠困在像素裡。它應該變成可重寫的文字、可調整的形狀、可重新排列的圖層、可重用的版面，以及可審查的程式碼。
Codia 所說的「理解設計」是什麼
在 Codia 裡，視覺理解不只是偵測畫面上有什麼物件。系統關注的是物件之間的關係：
- 版面階層、群組、區塊、卡片、表格、頁首與導覽
- 文字區塊、排版、層級與可編輯文案
- 形狀、圖示、圖片、遮罩與視覺圖層
- 間距、對齊、色彩與視覺節奏
- 面向輸出格式的限制，例如 Figma Auto Layout、PowerPoint 物件、SVG 結構或前端元件結構
這也是為什麼 Codia 的產品是圍繞「重建」而不是單純轉換來設計。傳統轉換器常常保留外觀，卻丟失結構。Codia 盡力保留後續編輯真正需要的部分。
可編輯輸出是產品要求
對 Codia Design 來說，這表示要把截圖、PDF、圖片與網頁轉成可編輯的 Figma 圖層，而不是貼上一整張位圖。
對 NoteSlide 來說，這表示要把 PDF 與圖片型投影片重建為可編輯的 PowerPoint 或 Keynote 簡報，讓文字仍是文字、形狀仍是形狀。
對 Codia Code 來說，這表示要把設計轉成前端實作，並包含元件結構、有意義的命名、響應式斷點、無障礙屬性，以及各框架專屬的輸出選項。
對 Visual Struct API 來說，這表示要回傳一棵有型別的 JSON 樹，供下游工具檢查、渲染、轉換，或匯入自己的設計與程式碼系統。
具體輸出格式會隨產品改變，但原則不變：生成之後，結果應該仍然可用。
Codia Studio 的位置
Codia Studio 是同一理念的創作端。使用者可以用自然語言描述想要的內容，生成可編輯、可迭代、可重用的視覺作品。現行網站把 Studio 描述為一個理解設計系統、維持視覺語言一致、支援分層文字編輯，並提供專業編輯器而不只是單張圖片生成器的設計工作區。
這很重要，因為創作工作很少在第一次生成就結束。團隊會修改標題、替換素材、調整顏色、套用品牌規範，並匯出到下游工具。Codia Studio 就是依照這個循環設計的。
Codia Code 的位置
設計轉程式碼是 AI 設計必須面對工程現實的地方。Codia Code 支援 React、Vue、HTML/CSS、Flutter 與 SwiftUI 輸出，樣式選項包括 Tailwind CSS、CSS Modules、inline styles 與 styled components。
程式碼生成文件把這件事拆成兩個實用模式：
- Base Code 著重速度與視覺還原，適合先把畫面快速搭起來。
- AI Code 著重更好維護的輸出，使用結構分析、視覺辨識、智慧命名、版面辨識、元件偵測、資產擷取與無障礙預設。
這個區分是刻意的。有些情境速度最重要，有些情境輸出需要成為工程師可以持續維護的正式程式碼。產品應該把這種取捨說清楚。
人類創造力仍然是審查層
Codia 不把 AI 當成設計判斷的替代品。產品頁面很明確：可編輯輸出在進入正式環境前應該與原始檔比對審查，而效能基準也取決於來源品質、檔案類型與所選輸出格式。
這就是 AI 在 Codia 中的實際角色：
- 自動完成第一輪結構重建
- 盡可能保留可編輯意圖
- 減少重複的手動轉譯工作
- 把最終判斷、品牌決策與產品意義留給人類團隊
AI 負責重工作。設計師、開發者、行銷、教育者與營運團隊決定什麼該上線。