
AI 設計應該產生結構
大多數團隊需要嘅唔係另一張冇得編輯嘅平面圖片。佢哋需要嘅係可以進入真實工作流程嘅起點:Figma、PowerPoint、Canva、Keynote、SVG、JSON、程式碼,或者自己嘅 pipeline。
呢個就係 Codia AI 設計理念嘅核心。我哋用 AI 理解視覺內容,並將佢重建成可編輯結構。一張截圖、一份 PDF、一張圖片、一頁投影片或者一個設計檔,都唔應該永遠困喺像素入面。佢應該變成可以重寫嘅文字、可以調整嘅形狀、可以重組嘅圖層、可以重用嘅版面,以及可以審查嘅程式碼。
Codia 所講嘅「理解設計」係乜
喺 Codia 裡面,視覺理解唔只係識別畫面上有咩物件。系統睇嘅係物件之間嘅關係:
- 版面層級、群組、區塊、卡片、表格、頁首同導覽
- 文字區塊、排版、層級同可編輯文案
- 形狀、圖示、圖片、遮罩同視覺圖層
- 間距、對齊、色彩同視覺節奏
- 面向輸出格式嘅限制,例如 Figma Auto Layout、PowerPoint 物件、SVG 結構或者前端元件結構
所以 Codia 嘅產品係圍繞「重建」而唔係單純轉換去設計。傳統轉換器好多時保留外觀,卻失去結構。Codia 會盡量保留後續編輯真正需要嘅部分。
可編輯輸出係產品要求
對 Codia Design 來講,呢個意思係將截圖、PDF、圖片同網頁轉成可編輯嘅 Figma 圖層,而唔係貼上一整張位圖。
對 NoteSlide 來講,呢個意思係將 PDF 同圖片型投影片重建成可編輯嘅 PowerPoint 或 Keynote 簡報,令文字仍然係文字、形狀仍然係形狀。
對 Codia Code 來講,呢個意思係將設計轉成前端實作,包含元件結構、有意義嘅命名、響應式 breakpoint、無障礙屬性,以及框架專屬輸出選項。
對 Visual Struct API 來講,呢個意思係回傳一棵有型別嘅 JSON tree,畀下游工具檢查、渲染、轉換,或者匯入自己嘅設計同程式碼系統。
具體輸出格式會跟產品而變,但原則唔變:生成之後,結果應該仍然可以用。
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 當成設計判斷嘅替代品。產品頁面講得好清楚:可編輯輸出喺進入正式環境前應該同原檔對照審查,而 benchmark 亦取決於來源品質、檔案類型同所選輸出格式。
呢個就係 AI 喺 Codia 裡面嘅實際角色:
- 自動完成第一輪結構重建
- 盡量保留可編輯意圖
- 減少重複嘅手動轉譯工作
- 將最終判斷、品牌決策同產品意義留返畀人類團隊
AI 做重工。設計師、開發者、marketing、教育者同營運團隊決定要出咩貨。