21st.dev Magic

設計

透過 OpenClaw 上的 Neotask 即時生成精美的 UI 元件

您可以做什麼

Neotask 透過 OpenClaw 連接到 21st.dev Magic，讓您即時存取龐大的生產就緒 UI 元件庫和 AI 驅動的元件生成功能——全部透過對話完成。

元件生成

  • 根據描述生成 — 用簡單的英文描述您需要的 UI，即可獲得完整的、已設定樣式的 React 元件，搭配 Tailwind CSS、shadcn/ui 或您偏好的函式庫
  • 透過回饋迭代 — 說「讓它更緊湊」或「新增載入狀態」，Neotask 會立即套用您的回饋並輸出新的程式碼
  • 多變體生成 — 一次請求多個設計變體，以便您選擇最適合專案的方案
  • 內建無障礙功能 — 生成的元件從一開始就遵循 ARIA 最佳實踐和鍵盤導航模式

    • 元件庫搜尋

  • 依模式搜尋 — 尋找符合您使用情境的元件：「帶有月付/年付切換的定價表」或「帶有未讀數量的通知抽屜」
  • 依類別瀏覽 — 按類型探索元件：導覽列、模態框、表單、卡片、資料表格、儀表板等
  • 依技術堆疊篩選 — 搜尋特定技術堆疊的元件（React、Vue、Tailwind、shadcn、Radix UI）
  • 即用型片段 — 庫中的每個元件都已格式化，可立即在您的程式碼庫中使用

    • 設計系統整合

  • 匹配您現有的風格 — 提供您的色彩標記或 Tailwind 設定，Neotask 就會生成符合您設計系統的元件
  • 元件組合 — 要求透過組合多個元件片段來建立完整的頁面佈局
  • 深色模式變體 — 請求任何元件的深色模式版本，並保持一致的標記使用

    • 試試這樣問

  • 「使用 Tailwind 生成一個帶有熱門徽章、功能列表和行動呼籲按鈕的定價卡片元件」
  • 「我需要一個響應式導覽列，左側放置標誌，中間放置導覽連結，右側放置登入按鈕」
  • 「在 21st.dev 上搜尋帶有排序、篩選和分頁功能的資料表格元件」
  • 「建立一個包含大標題、副標題、兩個行動呼籲按鈕和右側模擬圖片的主視覺區塊」
  • 「讓元件更緊湊並新增骨架載入狀態」
  • 「尋找一個從右側滑入作為抽屜的模態對話框元件」
  • 「生成一個包含 4 個步驟和進度指示器的引導步驟元件」
  • 「我需要一個在右下角堆疊通知的提示通知系統」

    • 專業提示

  • 明確說明您的設計意圖——「企業 SaaS 風格，帶有細微邊框」或「消費者應用程式，帶有圓角和柔和陰影」會產生截然不同的結果
  • 要求 Neotask 透過提供您的主要/次要色彩值，將找到的 21st.dev 元件調整為您現有的色彩配置
  • 在設計流程早期使用元件生成功能，在確定完整的設計系統之前快速建立佈局原型
  • 透過 OpenClaw 結合您的程式碼編輯器工作流程——生成元件、透過對話精煉它，然後將最終檔案直接輸出到您的專案中

    • Works Well With