21st.dev Magic

設計

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

• 根據描述生成可直接用於生產環境的 React 和 Tailwind UI 元件
• 搜尋和瀏覽預建的可自訂元件片段庫
• 透過自然語言回饋和即時程式碼輸出迭代設計

您可以做什麼

Neotask 透過 Neotask 連接到 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 元件調整為您現有的色彩配置
• 在設計流程早期使用元件生成功能，在確定完整的設計系統之前快速建立佈局原型
• 透過 Neotask 結合您的程式碼編輯器工作流程--生成元件、透過對話精煉它，然後將最終檔案直接輸出到您的專案中

Plans

Works Well With

• Google Slides - Connect 21st.dev and Google Slides with Neotask to automate presentations, sync UI components, and streamline your desig...
• Redis - Connect 21st.dev and Redis with Neotask to automate UI workflows, cache component data, and accelerate your frontend dev...

更多 設計 整合

• Google Photos - Neotask 透過 Neotask 搜尋、整理和管理您的 Google 相簿庫--找到正確的圖像、建立相簿並共享資產，無需滾動瀏覽。
• Adobe XD - Neotask 帶來 Neotask 對您 Adobe XD 文件的存取--透過自然對話檢查規格、追蹤共享並提取設計數據。
• BioRender - Neotask 透過 Neotask 將研究團隊與 BioRender 連接，讓他們能透過對話建立和管理科學圖形與插圖，加速發表和演示工作流程。
• Hostinger - Hostinger Horizons turns a plain description into a real, running website or app and puts it live with one click — built for people who…
• Sketch - Neotask 將 Neotask 連接到您的 Sketch 工作區--透過對話檢索設計規格、管理共享文件並檢查元件。
• FigJam - Neotask 使用 Neotask 存取您的 FigJam 看板--透過自然對話檢索便利貼內容、管理共享並提取工作坊輸出。

Explore: Skills · Glossary · Solutions · Use cases · Examples · Comparisons · Templates · Blog · Docs