免程式碼生成式設計
無需撰寫程式碼即可建立自訂設計工具、響應式元件、頁面與網站，並將其用於網頁專案中。
Components AI
認領Components AI 是一款開源網頁設計工具，可免程式碼建立參數化與生成式設計系統，支援以設計 token 驅動主題、多格式匯出、發佈，以及主題匯入與格式轉換的實驗性 API。
概覽
Components AI 是一款開源設計工具，可用於建立參數化與生成式設計系統。它專注於協助創作者在不撰寫程式碼的情況下，建立響應式元件、頁面、網站與視覺設計工具。
此產品結合了用於設計與發佈的工作室，以及持續擴充的生成式 UI 與圖形元件庫、主題匯入工具，和用於處理主題、程式碼格式化與網頁格式轉換的 API。它以設計 token、響應式系統與可編輯輸出為核心，這些輸出可匯出或分享。
功能
以主題與 token 驅動的設計
匯入或定義設計 token，並用它們驅動主題、色彩系統、排版比例、陰影、間距與響應式斷點。
迭代式生成控制
循環瀏覽生成設計、鎖定想保留的輸入，並透過對迭代投票來整理輸出。
多格式匯出
可匯出多種格式，包括 React、JS、JSON、JSX、SVG、PNG、HTML、CSS、CSS 自訂屬性與 Sass。
一鍵發佈
將設計發佈為代管網頁，並提供 JS、JSON 與 CSS 樣式的代管資產。
開發者 API
使用實驗性 API 匯入主題與調色盤、格式化程式碼，以及在 HTML、JSX、Markdown 與 PNG 工作流程之間進行轉換。
使用案例
原型化 UI 元件
透過調整參數，而非手動重新建立版面，來建立響應式卡片、頁面與其他介面元件。
建立並擴充設計系統
匯入品牌的 token 或衍生自 CSS 的值，並將其轉換為可用於無障礙色彩、字體、陰影與間距系統的主題。
分享作品以供審閱與協作
生成並發佈設計資產，接著與同事或客戶分享代管頁面與樣式以供審閱。
將設計工作流程整合至工具中
使用 API 匯入主題或調色盤、格式化程式碼，並將 HTML、JSX、Markdown 或 PNG 內容轉換，作為建置流程的一部分。
Pros and Cons
Pros
- 開源設計工具，提供永久免費的 Creator 方案。
- 支援跨色彩、排版、陰影、間距與斷點的響應式、以 token 驅動的設計。
- 可匯出多種實用格式，包括 React、HTML、CSS、SVG、PNG、JSON 與 Sass。
- 提供設計與資產的代管發佈功能。
- 包含用於匯入主題與調色盤，以及格式化與轉換任務的 API。
Cons
- API 文件指出這些 API 為實驗性功能，且可能變更。
- 來源頁面未提供關於整合、團隊權限或支援工作流程的完整細節。
FAQ
Components AI 是免費使用的嗎？
Components AI 提供一款開源設計工具，並有免費的 Creator 方案。付費的 Pro 方案新增元件替換、資料夾、無限主題、無限網站、無限專案、私人專案、專案範本，以及電子郵件／聊天支援，而 Enterprise 則採自訂報價。
我可以用 API 做什麼？
網站將 API 描述為實驗性功能，且可能會變更。API 文件包含主題與調色盤匯入端點、格式化工具，以及用於 HTML、JSX、Markdown 和 PNG 工作流程的轉換端點。
Components AI 支援哪些輸出？
首頁說明這個工具可免程式碼建立響應式元件、頁面與網站。API 文件也支援程式碼格式化與轉換工作流程，而更新紀錄則提到網頁元件及其他格式的發佈與匯出功能。
它支援團隊協作嗎？
來源頁面沒有詳細說明團隊席次控管或協作權限。不過它確實展示了一鍵發佈、可共享的代管頁面，以及用於自訂解決方案的 Enterprise 導入流程。
Quick Facts
- 類別
- 設計工具
- 平台
- 網頁
- 主要使用者
- 創作者、設計師與開發者
- 來源網域
- components.ai
- 價格
- 免費 Creator 方案；Pro 每月 $24 起；Enterprise 自訂報價
- 代表性工作流程
- 設計、匯出、發佈與轉換生成式設計資產