構建、儲存和重複使用元件。
這不只是一個元件庫。您可以建立 UI 區塊，使用 AI 產生圖片和影片，建立 3D 場景和 GLSL 著色器——所有這些都具有即時預覽和版本歷史記錄。
元件群組
將素材分組整理。為使用者介面元件、著色器、3D 畫面和媒體素材建立自訂分類。讓所有素材都井然有序且易於搜尋。
AI 區塊生成
利用人工智慧，根據文字描述生成程式碼片段。您可以選擇「直接生成」或「變體生成」模式，為 React、Vue、Svelte、Angular、SolidJS 或純 JavaScript 創建組件。
GLSL 著色器與 3D 圖形
在即時沙盒環境中建立和預覽 Three.js 場景、GLSL 著色器和 WebGL 內容。將它們儲存為可重複使用的程式碼片段，以便在您的程式庫中使用。
即時預覽
每個程式碼區塊都會呈現一個即時預覽面板。無論您是在編輯 React 元件、GLSL 著色器，還是 3D 場景，您都可以即時查看程式碼變更的效果。
多區塊建構
利用人工智慧一次性生成多個模組。在單次生成過程中，批量創建組件變體、配色方案、版面配置選項等。
版本歷史
追蹤所有區塊類型中的完整版本歷程。您可以追蹤變更、還原到先前版本，並管理 React、Vue、Svelte、Angular、SolidJS 和純 JavaScript 中組件的演進過程。
方塊庫與組織
「組件庫」是您的個人組件儲存空間。您可以按類別（例如：UI 組件、頁面區塊、著色器、3D 場景或任何自訂分類）建立群組，以整理您的組件。每個組件都有一個詳細檢視，其中包含中繼資料、程式碼和即時預覽。您可以透過單一介面瀏覽、搜尋和管理您的所有組件。
- 建立自訂群組，以便按類別整理區塊。
- 即時預覽和元數據的區塊卡
- 用於檢查和編輯單個區塊的詳細檢視。
- 在整個資料庫中搜尋和篩選。
- 將方塊拖曳到您的線框設計中。
基於人工智慧的程式碼片段生成器
開啟「設計師模式」，透過 AI 協助建立新的區塊。使用「AI 提示框」描述您想要建立的內容——例如登入表單、價格卡片或導覽欄——然後 AI 將生成相應的程式碼。您可以選擇「直接模式」，從零開始建立區塊；或者選擇「變化模式」，根據現有區塊生成替代方案。
- 用於自然語言程式碼片段生成的 AI 提示框
- 直接模式（A）——根據文字描述生成方塊。
- 變更模式（V）——產生現有區塊的替代方案。
- 針對不同生成類型的人工智慧生成類別
- 具有語法高亮顯示和即時預覽功能的程式碼編輯器。
GLSL著色器、Three.js 和 WebGL
「程式碼庫」不僅僅限於使用者介面元件。您可以建立和儲存 GLSL 著色器、Three.js 3D 場景和 WebGL 實驗，所有內容都將在即時沙盒中呈現，並提供即時預覽。您可以使用人工智慧來生成著色器程式碼或 3D 場景配置，然後將它們儲存為可重複使用的程式碼區塊。
- 使用 Three.js 創建場景，並提供即時 3D 預覽。
- 具有即時渲染功能的 GLSL 著色器編輯器
- 在沙盒環境中進行 WebGL 實驗。
- 由人工智慧生成的著色器和三維內容
- 儲存並跨專案重複使用。
方塊變體
只需輸入一個提示，即可生成任何程式碼區塊的多種變體。無論是 UI 元件還是 GLSL 著色器，AI 都能產生一系列替代方案，每個方案都具有不同的樣式、色彩配置或結構方法。您可以並排預覽這些方案，將您喜歡的方案儲存到一個群組中，或刪除您不需要的方案。
- 從單一文本或提示語生成 5 個或更多變體。
- 並排顯示預覽卡，並進行即時渲染。
- 將其添加到群組中，以便更好地整理不同的版本。
- 快速批量管理，您可以選擇「全部儲存」或「全部刪除」。
- 適用於使用者介面元件、著色器、3D 場景等。
AI 圖像與影片生成
內建於「區塊庫」中，您可以透過 ComfyUI 本地或 6 家以上的雲端服務供應商，使用 AI 圖像生成器進行文字轉圖像和圖像轉圖像的創作。使用 Kling、Veo 等 AI 工具生成影片。從圖像中生成 AI 產生的 Markdown 格式，以便與 CLI 工具一起使用。所有生成的媒體都可以儲存為區塊，以便在您的「區塊庫」中使用。
- 文字轉圖像和圖像轉圖像——可在本地透過 ComfyUI 進行，或透過 6 家以上的雲端供應商進行。
- 使用 Kling、Veo 等工具，將文字轉換為影片，或將圖片轉換為影片
- 從圖片生成 Markdown 格式的內容，以便與命令行工具一起使用。
- 將生成的媒體儲存為可重複使用的區塊。
- 所有已產生內容的完整版本歷史記錄
