用途:当用户需要创建落地页、营销页、产品页或基于 Next.js/React 的推广网站时,可使用本技能,按 DESIGNNAS 的「11 项必备元素」框架生成专业、高转化落地页。
主要能力:强制落地页包含 11 项元素——含关键词的 URL、公司 Logo(左上)、SEO 优化标题与副标题、Hero 主 CTA、社会认同、图片或视频、3-6 项核心收益/功能、4-6 条客户评价、5-10 条 FAQ 折叠面板、底部最终 CTA、含联系与法律链接的页脚。技术栈要求 Next.js 14+ App Router、TypeScript、Tailwind CSS、ShadCN UI。
使用方式:先安装所需 ShadCN 组件,命令保持原样:npx shadcn-ui@latest add button;npx shadcn-ui@latest add card;npx shadcn-ui@latest add accordion;npx shadcn-ui@latest add badge;npx shadcn-ui@latest add avatar;npx shadcn-ui@latest add separator;npx shadcn-ui@latest add input。随后按工作流:配置 SEO metadata、按 Header→Hero→MediaSection→Benefits→Testimonials→FAQ→FinalCTA→Footer 构建组件、映射 ShadCN 组件、实现移动优先响应式(断点 640/768/1024/1280),并用 Next.js Image 优化图片。
适用场景:SaaS 产品页(免费试用 CTA、功能对比、安全标识)、电商产品页(产品图、价格、物流、退货)、服务/代理页(案例、流程、资质、联系表单)、活动/网络研讨会页(时间、讲者、议程、报名)。
限制:产品是否收费、价格与具体效果暂未提供;验证清单要求全部 11 项元素与技术标准,实现需适配品牌与目标受众,并建议 A/B 测试优化转化率。