我试用了 21st.dev，以下是我的感想：一位开发者的真实评价

我非常兴奋地想和大家分享我使用21st.dev 的体验，这个平台最近一直在我关注范围内。如果你也和我一样，一直在寻找能够简化工作流程的工具，那么你一定会喜欢它！

在这篇博文中，我将带你了解21st.dev 的全部内容，我是如何开始使用它的，以及我对它用于生成精美 UI 组件的 API 的看法。此外，我还会分享我是如何与Apidog合作进行测试的。

好了，泡杯咖啡，坐下来，咱们聊聊我使用 21st.dev 的经历吧。我会从注册到测试 API 的方方面面都讲到，权衡利弊，最后告诉你它是否值得你花时间。剧透一下：它有很多优点，但也并非完美无缺。准备好了吗？让我们马上开始吧！

21st.dev 是什么？简要介绍

首先，让我们来解决一个重要问题：21st.dev 究竟是什么？

简而言之，21st.dev是一个 MCP（微服务通信协议）服务器，它允许你通过 API生成 UI 组件。想想看，按钮、表单、导航栏和卡片，所有这些都只需几行代码即可创建。无需花费数小时自行设计和调整这些元素，21st.dev 会通过 API 调用交付它们——是不是很棒？

工作原理

• 在他们的网站上注册并获取 API 密钥。
• 首先提供五次免费请求进行测试。
• 如果需要更多流量，可以升级到每月 20 美元的付费套餐，以提高流量限制。

这为什么重要？想象一下，你正赶着交稿，客户急需一个简洁美观的界面。或者，你正在开发一个业余项目，想要一些专业级的UI元素，但又不想聘请设计师。这时，21st.dev就能派上用场了！

现在我们已经了解了基础知识，接下来让我们看看我是如何开始的。

注册 21st.dev：我的第一步

好吧，我决定试用一下21st.dev，注册过程简直太轻松了：

1. 访问了网站（21st.dev），然后点击了“注册”。
2. 输入我的邮箱和密码——无需填写冗长的表格，也无需额外步骤。
3. 确认了我的邮箱，然后——砰！我就正式加入了。

第一印象

进入系统后，我看到了一个简洁易用的控制面板，上面显示：

• 我的API密钥放在最显眼的位置。
• API 使用快速入门指南。
• 包含 API 详细信息的文档链接。

我立即查看了他们的API 文档，文档组织得井井有条，列出了按钮、表单、导航栏等的参数。我很喜欢它易于理解的特点，不过我希望文档中能有更多高级示例和最佳实践。

使用 Apidog 测试 21st.dev API

现在，真正的乐趣开始了！我决定将21st.dev 的 API 与 Apidog 结合使用，这彻底改变了游戏规则。

为什么要使用Apidog？

Apidog是一款非常棒的AP​​I 文档编写、测试和调试工具——就像开发人员的瑞士军刀一样。

我的设置方法如下：

1. 在 Apidog 中创建了一个新项目： 21st.dev UI Playground。

1. 从 21st.dev导入了 API 规范（因为 Apidog 支持 OpenAPI）。

1. 我已将 API 密钥设置为环境变量，以避免手动粘贴。

这种设置使得在一个地方即可轻松测试端点、调整参数和查看响应。

使用 API 生成 UI 组件

我最初只是提出了一个简单的按钮请求：

• 终点： /api/v1/components/button
• 参数： text，style，size
• JSON 请求正文：

{
  "text": "Click Me",
  "style": "primary",
  "size": "large"
}

结果如何？

我点击发送，砰！不到 100 毫秒就收到了响应，其中包含简洁的 HTML 和 CSS，打造出一个现代时尚的按钮——随时可以添加到任何项目中。

接下来，我进行了测试：

• 包含输入字段和提交按钮的表单。
• 便于用户界面导航的导航栏。
• 带有图像占位符的卡片组件。

每次使用 API，都能快速交付精美的组件。我非常喜欢它的自定义选项——更改背景颜色、字体大小和边框都非常轻松！

缺点：免费等级限制

最大的缺点是什么？免费套餐只允许五次请求，我很快就用完了。虽然每月 10 美元的付费套餐价格合理，但我希望他们至少提供 10 次免费请求，以便更好地进行测试。

我使用 21st.dev API 的体验：优点、缺点和美好之处

✅ 优点

• 超快的响应时间（低于100毫秒！）。
• 美观、现代的用户界面组件。
• 轻松集成 API（返回可直接使用的HTML 和 CSS ）。
• 文档清晰易懂，并附有实用示例。
• 与 Apidog 配合使用，可实现无缝测试。

❌ 不太好的

• 免费套餐功能非常有限（仅限五次请求）。
• 缺乏高级自定义功能（目前还没有全页模板）。
• 错误信息可以更有帮助（例如，缺少参数）。

💡 我的改进建议

• 将免费请求次数增加到至少10 次。
• 提供更高级的示例（例如，组合多个组件）。
• 通过更清晰的信息改进错误处理。

最终思考：21st.dev 值得加入吗？

当然！如果您需要通过 API 快速获取简洁优雅的 UI 组件，那么 21st.dev值得一试。它速度快、用户友好，还能节省大量设计时间。

但是，免费版的功能有些限制，所以如果您打算经常使用，可能需要升级。

我会推荐它吗？当然会——尤其是如果你把它和 Apidog 搭配使用进行测试的话！

你试过 21st.dev 吗？在下方留言——我很想听听你的想法！ 🚀