21st-dev-builder-v2
让AI成为21st.dev组件库专家，快速构建现代化网站。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：21st-dev-builder-v2。 它的用途是：让AI成为21st.dev组件库专家，快速构建现代化网站。 完整的 Skill 内容见：https://321skill.com/skills/21st-dev-builder-v2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我想用21st.dev的组件搭建一个SaaS产品的落地页，需要醒目的Hero区域、功能展示、定价表和页脚。”，它会首先确认你的项目环境，然后实时搜索21st.dev，为你筛选出风格协调的对应组件，并生成详细的安装命令和集成步骤，帮你快速组合出一个专业、美观的页面。
介绍
这个Skill旨在解决开发者在构建现代网站时，面对海量UI组件难以高效筛选、组合和落地的问题。它让AI深度掌握21st.dev这个拥有1400多个React组件的开源注册表，能够根据项目需求智能推荐和集成最合适的组件。
使用时，开发者只需向AI描述想要构建的网站类型（如落地页、仪表盘、电商页面）或具体功能，AI便会自动从21st.dev实时发现最新组件，分析其适用性，并生成包含完整安装命令和配置步骤的代码方案。整个过程强调设计的一致性和代码的可维护性。
它非常适合前端开发者、全栈工程师以及希望快速搭建产品原型的创业者。无论是启动一个全新项目，还是在现有项目中引入高质量的预制组件来提升开发效率，这个Skill都能提供专家级的指导。
与通用的网页开发助手不同，此Skill专精于21st.dev这一特定生态。它不像普通工具那样只提供泛泛的组件概念，而是能精确调用具体的组件URL、遵循官方的npx安装流程，并理解不同组件作者的设计风格，确保最终集成的界面具有视觉凝聚力。
核心特点
核心区别在于深度绑定并实时拉取21st.dev这一特定组件生态，能根据具体设计需求（如“需要一个有渐变背景的Hero区域”）精确匹配社区内现有组件，并提供完整的、包含具体作者和组件名的安装命令，而非仅给出通用组件类型建议。
注意事项
不适合与21st.dev组件库无关的通用Web开发、API开发、React Native或纯后端任务。
常见问题
21st.dev是什么？
一个开源社区组件注册表，类似“设计工程师的npm”，提供1400+个基于shadcn/ui和Tailwind CSS的React组件，可直接安装源代码进行定制。
如何在现有项目中安装21st.dev组件？
使用命令 `npx shadcn@latest add "https://21st.dev/r/{作者名}/{组件名}"` 即可将组件源代码添加到你的项目中。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/21st-dev-builder-v2/raw/index.md 读取 21st-dev-builder-v2 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/21st-dev-builder-v2/raw/index.md（查看排版版本）