21st.dev Magic

设计

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

• 从描述生成可投入生产的 React 和 Tailwind UI 组件
• 搜索和浏览预构建的、可自定义的组件代码片段库
• 通过自然语言反馈和即时代码输出迭代设计

你可以做什么

Neotask 通过 Neotask 连接到 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 组件适配到您现有的调色板
• 在设计过程早期使用组件生成来快速原型化布局，然后再投入完整的设计系统
• 通过 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 Photos 媒体库--找到所需图片、创建相册并分享资产，无需滚动浏览。
• Adobe XD - 通过对话访问 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 - 通过对话访问 Sketch 设计文件与符号库
• FigJam - 通过对话访问 FigJam 协作白板内容

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