引入 21st.dev 组件前先核对什么？
先选页面确实缺的一块，例如页头或表单。用自己的文案和数据对照预览。交付时应能在项目里检查、替换和调整这个组件。
- 查看该组件自己的安装说明，确认新增的依赖和文件。
- 先在小页面试用，再考虑替换共用布局，同时检查键盘操作和目标手机宽度。
按真实页面需求挑选资源
组件、主题和模板解决的问题不同：组件适合补充一个交互，模板提供更完整的起始结构。先匹配产品页面，再决定是否增加视觉效果。
把资源接入现有项目
官方工作流把资源发现与供 AI 使用的源码、提示连接起来。接入前查看框架要求和依赖，再按现有项目调整颜色、间距与内容。
核对实际效果与资源条款
精美预览只是起点。资源接入后仍需检查窄屏、键盘操作和空状态。查看所选资源的源码与条款，不宜假定所有社区资源都采用相同许可证。
你可能还想知道
21st.dev 能直接替代应用后端吗？
界面资源本身无法确定产品的数据模型、权限或支付行为。这些能力需要与所选 UI 资源分开评估。
为什么旧教程会提到 Magic？
21st 官方更新日志记录了 Magic 向 21st AI 的演进。名称与接入方式应以当前文档为准，旧教程可能已经不匹配。
资料出处
本文依据引用的文档与作者来源整理，vibeforthat 未对本文进行独立安装或端到端产品实测。