如何使用shadcn/ui创建营销落地页
内容提要
本文介绍如何使用Next.js、shadcn/ui、Tailwind CSS和可复用的Shadcn Space区块快速构建现代营销落地页。文章详细说明了项目设置、通过CLI或MCP服务器安装区块的两种方法，以及如何定制Hero、功能、定价、FAQ等部分。最后还提供了图片优化、SEO提升和扩展网站的建议，帮助开发者高效创建生产级页面。
延伸解读
两种安装方式的选择
文章提供了CLI和MCP服务器两种安装区块的方式。CLI适合手动浏览和选择区块，而MCP服务器则能通过AI聊天直接生成页面，适合追求效率的开发者。选择哪种方式取决于你的工作流偏好：如果你喜欢精细控制每个区块，CLI更合适；如果你希望快速搭建原型，MCP服务器能节省时间。无论哪种方式，安装的都是可编辑的源代码，不会限制后续的定制。
代码可定制性的优势
文章强调，通过Shadcn Space安装的区块是直接复制到项目中的React组件，而非编译后的包。这意味着你可以完全掌控代码，自由修改内容、布局和样式，而不受限于预定义的API。这种可定制性对于需要深度定制品牌风格或功能扩展的项目尤为重要，也便于理解组件的实现细节，方便后续维护。
性能与SEO优化要点
文章建议使用Next.js的next/image组件优化图片，并注意压缩图片大小以提升加载速度。同时，通过设置页面标题、元描述和Open Graph图片来改善SEO和社交分享效果。此外，监控Core Web Vitals指标（如LCP、CLS）有助于发现性能问题，提升用户体验和搜索排名。这些优化措施对于落地页的转化率至关重要。
Q&A
如何使用shadcn/ui快速搭建营销落地页？
使用Next.js、shadcn/ui、Tailwind CSS和Shadcn Space区块，通过CLI或MCP服务器安装预建的区块（如Hero、Features、Pricing等），然后自定义内容即可快速搭建。
搭建营销落地页需要哪些前置条件？
需要Node.js 18或更高版本，已初始化shadcn/ui（运行npx shadcn@latest init），并具备React和TypeScript的基础知识。
如何通过CLI安装shadcn/ui的区块？
使用命令 npx shadcn@latest add @shadcn-space/{block-name} 安装单个区块，例如 npx shadcn@latest add @shadcn-space/hero-01。也可以一次安装多个区块，如 npx shadcn@latest add @shadcn-space/feature-01 @shadcn-space/pricing-01 等。
MCP服务器如何帮助生成营销落地页？
MCP服务器集成在AI编辑器中（如VS Code、Cursor），通过描述需求（如“为AI SaaS产品创建现代营销落地页”），它会自动选择合适的区块并组装页面，生成可编辑的React代码。
营销落地页通常包含哪些区块？
通常包含Hero（首屏）、Features（功能）、Product Showcase（产品展示）、Testimonials（客户评价）、Pricing（定价）、FAQ（常见问题）、Call-to-Action（行动号召）和Footer（页脚）。
如何优化营销落地页的图片和SEO？
使用Next.js的next/image组件优化图片，压缩图片尺寸；通过设置描述性标题、元描述和逻辑标题结构改善SEO；配置Open Graph和Twitter元数据以优化社交分享预览。
如何扩展营销网站，添加更多页面？
可以添加博客、定价、FAQ、联系、关于等页面，使用一致的设计系统和复用组件来保持统一风格并减少开发时间。
