21st.dev Magic

设计

通过 Neotask 在 OpenClaw 上即时生成精美的 UI 组件

你可以做什么

Neotask 通过 OpenClaw 连接到 21st.dev Magic，让您即时访问大量可投入生产的 UI 组件和 AI 驱动的组件生成——全部通过对话完成。

组件生成

  • 从描述生成 — 用自然语言描述您需要的 UI，获得带有 Tailwind CSS、shadcn/ui 或您偏好框架的完整样式 React 组件
  • 通过反馈迭代 — 说"让它更紧凑"或"添加加载状态"，Neotask 立即应用您的反馈并输出新代码
  • 多变体生成 — 一次请求多个设计变体，选择最适合您项目的方案
  • 内置无障碍性 — 生成的组件从一开始就遵循 ARIA 最佳实践和键盘导航模式

    • 组件库搜索

  • 按模式搜索 — 查找匹配您用例的组件："带月付/年付切换的定价表"或"带未读计数的通知抽屉"
  • 按类别浏览 — 按类型探索组件：导航栏、模态框、表单、卡片、数据表格、控制台等
  • 按技术栈筛选 — 搜索特定技术栈的组件（React、Vue、Tailwind、shadcn、Radix UI）
  • 即用代码片段 — 库中的每个组件都已格式化，可立即在您的代码库中使用

    • 设计系统集成

  • 匹配现有样式 — 提供您的颜色令牌或 Tailwind 配置，Neotask 生成与您设计系统匹配的组件
  • 组件组合 — 要求完整页面布局，将多个组件片段组合在一起
  • 深色模式变体 — 请求任何组件的深色模式版本，保持一致的令牌使用

    • 试试这样问

  • "使用 Tailwind 生成一个带热门徽章、功能列表和 CTA 按钮的定价卡片组件"
  • "我需要一个响应式导航栏，左侧有 Logo，中间有导航链接，右侧有登录按钮"
  • "在 21st.dev 中搜索支持排序、筛选和分页的数据表格组件"
  • "创建一个包含大标题、副标题、两个 CTA 按钮和右侧产品截图的英雄区域"
  • "让组件更紧凑并添加骨架加载状态"
  • "查找一个从右侧滑入的模态对话框组件"
  • "生成一个带 4 个步骤和进度指示器的入职引导步骤组件"
  • "我需要一个在右下角堆叠通知的 Toast 通知系统"

    • 专业技巧

  • 明确您的设计意图——"企业 SaaS 风格，带细微边框"或"消费者应用，圆角和柔和阴影"会产生截然不同的结果
  • 让 Neotask 通过提供您的主/次色值，将找到的 21st.dev 组件适配到您现有的调色板
  • 在设计过程早期使用组件生成来快速原型化布局，然后再投入完整的设计系统
  • 通过 OpenClaw 与您的代码编辑器工作流结合——生成组件、通过对话优化，然后将最终文件直接输出到您的项目

    • Works Well With