Kombai — 前端工程師產 Code 的好工具

現在開發團隊大多需要 UI/UX 設計師參與使用者介面的設計，再將設計交由前端工程師實作，然後前端工程師就會看著設計稿想著要怎麼把設計轉成一個個元件以及程式碼，這不免需要一點時間⋯⋯。

But! 時代進步了！已經有不少工具專注在如何加速從設計變成程式碼的過程，例如 Kombai 。

Kombai 是 2023/08/23 在 ProductHunt 上亮相的新產品，剛亮相沒多久就勇奪當天、當週、當月第 1 的排行，更在近期獲得 4.5M 的投資！強勁得很！

Kombai 的運作方式是貼上 Figma 設計稿的連結到 Kombai 的介面上， Kombai 就會開始解析 Figma 上的設計，然後產生相對應的 HTML, CSS 以及 React 程式碼，而且是已經元件化的結果，所以前端工程師只要針對結果不滿意的地方微調，並加上 Spec 要求的功能即可！偉哉！

目前 Kombai 提供免費方案給大家使用，免費方案是無限制設計上傳以及程式碼產生，不過遇到尖峰時刻的話會優先回應企業方案用戶。

此外，免費方案產生的程式碼是以 HTML, CSS 以及 React 搭配 Tailwind CSS 與 MUI Base, 如果你的開發團隊不是使用這些 tech stack, 那只能付錢用企業方案了，企業方案可以針對你所使用的 tech stack 產生對應的程式碼，但免費方案就支援 React + Tailwind CSS 以及 MUI base 其實已經很佛了，畢竟這 3 個 tech stack 都是很成熟的開源專案，擴充性肯定沒有太大問題。

以上，供有需要刻介面的人參考。

Kombai - A new model trained to understand and code UI designs like humans

p.s. Vercel 也有推出類似產品稱為 v0, 但是是用 prompt 的方式產生，也可以參考看看